@vouchfor/embeds 0.0.0-experiment.de04f63 → 0.0.0-experiment.de28f28

package/dist/es/embeds.js

@@ -1,1038 +1,554 @@
-import { property as y, state as $t, customElement as Qt } from "lit/decorators.js";
-import { ifDefined as tt } from "lit/directives/if-defined.js";
-import { createRef as Lt, ref as Dt } from "lit/directives/ref.js";
-import { Task as te } from "@lit/task";
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Task } from "@lit/task";
+import { v4 } from "uuid";
+import { TEMPLATE_VERSION } from "@vouchfor/canvas-video";
 import "@vouchfor/media-player";
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const Z = window, mt = Z.ShadowRoot && (Z.ShadyCSS === void 0 || Z.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, jt = Symbol(), ft = /* @__PURE__ */ new WeakMap();
-let ee = class {
-  constructor(t, e, i) {
-    if (this._$cssResult$ = !0, i !== jt)
-      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = t, this.t = e;
-  }
-  get styleSheet() {
-    let t = this.o;
-    const e = this.t;
-    if (mt && t === void 0) {
-      const i = e !== void 0 && e.length === 1;
-      i && (t = ft.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && ft.set(e, t));
-    }
-    return t;
-  }
-  toString() {
-    return this.cssText;
-  }
-};
-const ie = (n) => new ee(typeof n == "string" ? n : n + "", void 0, jt), se = (n, t) => {
-  mt ? n.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet) : t.forEach((e) => {
-    const i = document.createElement("style"), s = Z.litNonce;
-    s !== void 0 && i.setAttribute("nonce", s), i.textContent = e.cssText, n.appendChild(i);
-  });
-}, yt = mt ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((t) => {
-  let e = "";
-  for (const i of t.cssRules)
-    e += i.cssText;
-  return ie(e);
-})(n) : n;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-var et;
-const F = window, At = F.trustedTypes, ne = At ? At.emptyScript : "", Et = F.reactiveElementPolyfillSupport, dt = { toAttribute(n, t) {
-  switch (t) {
-    case Boolean:
-      n = n ? ne : null;
-      break;
-    case Object:
-    case Array:
-      n = n == null ? n : JSON.stringify(n);
-  }
-  return n;
-}, fromAttribute(n, t) {
-  let e = n;
-  switch (t) {
-    case Boolean:
-      e = n !== null;
-      break;
-    case Number:
-      e = n === null ? null : Number(n);
-      break;
-    case Object:
-    case Array:
-      try {
-        e = JSON.parse(n);
-      } catch {
-        e = null;
-      }
-  }
-  return e;
-} }, Bt = (n, t) => t !== n && (t == t || n == n), it = { attribute: !0, type: String, converter: dt, reflect: !1, hasChanged: Bt }, ct = "finalized";
-let T = class extends HTMLElement {
-  constructor() {
-    super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this.u();
-  }
-  static addInitializer(t) {
-    var e;
-    this.finalize(), ((e = this.h) !== null && e !== void 0 ? e : this.h = []).push(t);
-  }
-  static get observedAttributes() {
-    this.finalize();
-    const t = [];
-    return this.elementProperties.forEach((e, i) => {
-      const s = this._$Ep(i, e);
-      s !== void 0 && (this._$Ev.set(s, i), t.push(s));
-    }), t;
-  }
-  static createProperty(t, e = it) {
-    if (e.state && (e.attribute = !1), this.finalize(), this.elementProperties.set(t, e), !e.noAccessor && !this.prototype.hasOwnProperty(t)) {
-      const i = typeof t == "symbol" ? Symbol() : "__" + t, s = this.getPropertyDescriptor(t, i, e);
-      s !== void 0 && Object.defineProperty(this.prototype, t, s);
-    }
-  }
-  static getPropertyDescriptor(t, e, i) {
-    return { get() {
-      return this[e];
-    }, set(s) {
-      const o = this[t];
-      this[e] = s, this.requestUpdate(t, o, i);
-    }, configurable: !0, enumerable: !0 };
-  }
-  static getPropertyOptions(t) {
-    return this.elementProperties.get(t) || it;
-  }
-  static finalize() {
-    if (this.hasOwnProperty(ct))
-      return !1;
-    this[ct] = !0;
-    const t = Object.getPrototypeOf(this);
-    if (t.finalize(), t.h !== void 0 && (this.h = [...t.h]), this.elementProperties = new Map(t.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
-      const e = this.properties, i = [...Object.getOwnPropertyNames(e), ...Object.getOwnPropertySymbols(e)];
-      for (const s of i)
-        this.createProperty(s, e[s]);
-    }
-    return this.elementStyles = this.finalizeStyles(this.styles), !0;
-  }
-  static finalizeStyles(t) {
-    const e = [];
-    if (Array.isArray(t)) {
-      const i = new Set(t.flat(1 / 0).reverse());
-      for (const s of i)
-        e.unshift(yt(s));
-    } else
-      t !== void 0 && e.push(yt(t));
-    return e;
-  }
-  static _$Ep(t, e) {
-    const i = e.attribute;
-    return i === !1 ? void 0 : typeof i == "string" ? i : typeof t == "string" ? t.toLowerCase() : void 0;
-  }
-  u() {
-    var t;
-    this._$E_ = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), (t = this.constructor.h) === null || t === void 0 || t.forEach((e) => e(this));
-  }
-  addController(t) {
-    var e, i;
-    ((e = this._$ES) !== null && e !== void 0 ? e : this._$ES = []).push(t), this.renderRoot !== void 0 && this.isConnected && ((i = t.hostConnected) === null || i === void 0 || i.call(t));
-  }
-  removeController(t) {
-    var e;
-    (e = this._$ES) === null || e === void 0 || e.splice(this._$ES.indexOf(t) >>> 0, 1);
-  }
-  _$Eg() {
-    this.constructor.elementProperties.forEach((t, e) => {
-      this.hasOwnProperty(e) && (this._$Ei.set(e, this[e]), delete this[e]);
-    });
-  }
-  createRenderRoot() {
-    var t;
-    const e = (t = this.shadowRoot) !== null && t !== void 0 ? t : this.attachShadow(this.constructor.shadowRootOptions);
-    return se(e, this.constructor.elementStyles), e;
-  }
-  connectedCallback() {
-    var t;
-    this.renderRoot === void 0 && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$ES) === null || t === void 0 || t.forEach((e) => {
-      var i;
-      return (i = e.hostConnected) === null || i === void 0 ? void 0 : i.call(e);
-    });
-  }
-  enableUpdating(t) {
-  }
-  disconnectedCallback() {
-    var t;
-    (t = this._$ES) === null || t === void 0 || t.forEach((e) => {
-      var i;
-      return (i = e.hostDisconnected) === null || i === void 0 ? void 0 : i.call(e);
-    });
-  }
-  attributeChangedCallback(t, e, i) {
-    this._$AK(t, i);
-  }
-  _$EO(t, e, i = it) {
-    var s;
-    const o = this.constructor._$Ep(t, i);
-    if (o !== void 0 && i.reflect === !0) {
-      const r = (((s = i.converter) === null || s === void 0 ? void 0 : s.toAttribute) !== void 0 ? i.converter : dt).toAttribute(e, i.type);
-      this._$El = t, r == null ? this.removeAttribute(o) : this.setAttribute(o, r), this._$El = null;
-    }
-  }
-  _$AK(t, e) {
-    var i;
-    const s = this.constructor, o = s._$Ev.get(t);
-    if (o !== void 0 && this._$El !== o) {
-      const r = s.getPropertyOptions(o), d = typeof r.converter == "function" ? { fromAttribute: r.converter } : ((i = r.converter) === null || i === void 0 ? void 0 : i.fromAttribute) !== void 0 ? r.converter : dt;
-      this._$El = o, this[o] = d.fromAttribute(e, r.type), this._$El = null;
-    }
-  }
-  requestUpdate(t, e, i) {
-    let s = !0;
-    t !== void 0 && (((i = i || this.constructor.getPropertyOptions(t)).hasChanged || Bt)(this[t], e) ? (this._$AL.has(t) || this._$AL.set(t, e), i.reflect === !0 && this._$El !== t && (this._$EC === void 0 && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t, i))) : s = !1), !this.isUpdatePending && s && (this._$E_ = this._$Ej());
-  }
-  async _$Ej() {
-    this.isUpdatePending = !0;
-    try {
-      await this._$E_;
-    } catch (e) {
-      Promise.reject(e);
-    }
-    const t = this.scheduleUpdate();
-    return t != null && await t, !this.isUpdatePending;
-  }
-  scheduleUpdate() {
-    return this.performUpdate();
-  }
-  performUpdate() {
-    var t;
-    if (!this.isUpdatePending)
-      return;
-    this.hasUpdated, this._$Ei && (this._$Ei.forEach((s, o) => this[o] = s), this._$Ei = void 0);
-    let e = !1;
-    const i = this._$AL;
-    try {
-      e = this.shouldUpdate(i), e ? (this.willUpdate(i), (t = this._$ES) === null || t === void 0 || t.forEach((s) => {
-        var o;
-        return (o = s.hostUpdate) === null || o === void 0 ? void 0 : o.call(s);
-      }), this.update(i)) : this._$Ek();
-    } catch (s) {
-      throw e = !1, this._$Ek(), s;
-    }
-    e && this._$AE(i);
-  }
-  willUpdate(t) {
-  }
-  _$AE(t) {
-    var e;
-    (e = this._$ES) === null || e === void 0 || e.forEach((i) => {
-      var s;
-      return (s = i.hostUpdated) === null || s === void 0 ? void 0 : s.call(i);
-    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
-  }
-  _$Ek() {
-    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
-  }
-  get updateComplete() {
-    return this.getUpdateComplete();
-  }
-  getUpdateComplete() {
-    return this._$E_;
-  }
-  shouldUpdate(t) {
-    return !0;
-  }
-  update(t) {
-    this._$EC !== void 0 && (this._$EC.forEach((e, i) => this._$EO(i, this[i], e)), this._$EC = void 0), this._$Ek();
-  }
-  updated(t) {
-  }
-  firstUpdated(t) {
-  }
-};
-T[ct] = !0, T.elementProperties = /* @__PURE__ */ new Map(), T.elementStyles = [], T.shadowRootOptions = { mode: "open" }, Et == null || Et({ ReactiveElement: T }), ((et = F.reactiveElementVersions) !== null && et !== void 0 ? et : F.reactiveElementVersions = []).push("1.6.2");
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-var st;
-const J = window, x = J.trustedTypes, bt = x ? x.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, ut = "$lit$", E = `lit$${(Math.random() + "").slice(9)}$`, zt = "?" + E, re = `<${zt}>`, C = document, G = () => C.createComment(""), D = (n) => n === null || typeof n != "object" && typeof n != "function", Wt = Array.isArray, oe = (n) => Wt(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", nt = `[ 	
-\f\r]`, V = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, wt = /-->/g, St = />/g, w = RegExp(`>|${nt}(?:([^\\s"'>=/]+)(${nt}*=${nt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Pt = /'/g, Ut = /"/g, qt = /^(?:script|style|textarea|title)$/i, j = Symbol.for("lit-noChange"), v = Symbol.for("lit-nothing"), Ct = /* @__PURE__ */ new WeakMap(), P = C.createTreeWalker(C, 129, null, !1);
-function Kt(n, t) {
-  if (!Array.isArray(n) || !n.hasOwnProperty("raw"))
-    throw Error("invalid template strings array");
-  return bt !== void 0 ? bt.createHTML(t) : t;
-}
-const le = (n, t) => {
-  const e = n.length - 1, i = [];
-  let s, o = t === 2 ? "<svg>" : "", r = V;
-  for (let d = 0; d < e; d++) {
-    const l = n[d];
-    let a, u, h = -1, c = 0;
-    for (; c < l.length && (r.lastIndex = c, u = r.exec(l), u !== null); )
-      c = r.lastIndex, r === V ? u[1] === "!--" ? r = wt : u[1] !== void 0 ? r = St : u[2] !== void 0 ? (qt.test(u[2]) && (s = RegExp("</" + u[2], "g")), r = w) : u[3] !== void 0 && (r = w) : r === w ? u[0] === ">" ? (r = s ?? V, h = -1) : u[1] === void 0 ? h = -2 : (h = r.lastIndex - u[2].length, a = u[1], r = u[3] === void 0 ? w : u[3] === '"' ? Ut : Pt) : r === Ut || r === Pt ? r = w : r === wt || r === St ? r = V : (r = w, s = void 0);
-    const p = r === w && n[d + 1].startsWith("/>") ? " " : "";
-    o += r === V ? l + re : h >= 0 ? (i.push(a), l.slice(0, h) + ut + l.slice(h) + E + p) : l + E + (h === -2 ? (i.push(void 0), d) : p);
-  }
-  return [Kt(n, o + (n[e] || "<?>") + (t === 2 ? "</svg>" : "")), i];
-};
-let pt = class Zt {
-  constructor({ strings: t, _$litType$: e }, i) {
-    let s;
-    this.parts = [];
-    let o = 0, r = 0;
-    const d = t.length - 1, l = this.parts, [a, u] = le(t, e);
-    if (this.el = Zt.createElement(a, i), P.currentNode = this.el.content, e === 2) {
-      const h = this.el.content, c = h.firstChild;
-      c.remove(), h.append(...c.childNodes);
-    }
-    for (; (s = P.nextNode()) !== null && l.length < d; ) {
-      if (s.nodeType === 1) {
-        if (s.hasAttributes()) {
-          const h = [];
-          for (const c of s.getAttributeNames())
-            if (c.endsWith(ut) || c.startsWith(E)) {
-              const p = u[r++];
-              if (h.push(c), p !== void 0) {
-                const A = s.getAttribute(p.toLowerCase() + ut).split(E), f = /([.?@])?(.*)/.exec(p);
-                l.push({ type: 1, index: o, name: f[2], strings: A, ctor: f[1] === "." ? he : f[1] === "?" ? ce : f[1] === "@" ? ue : Y });
-              } else
-                l.push({ type: 6, index: o });
-            }
-          for (const c of h)
-            s.removeAttribute(c);
-        }
-        if (qt.test(s.tagName)) {
-          const h = s.textContent.split(E), c = h.length - 1;
-          if (c > 0) {
-            s.textContent = x ? x.emptyScript : "";
-            for (let p = 0; p < c; p++)
-              s.append(h[p], G()), P.nextNode(), l.push({ type: 2, index: ++o });
-            s.append(h[c], G());
-          }
-        }
-      } else if (s.nodeType === 8)
-        if (s.data === zt)
-          l.push({ type: 2, index: o });
-        else {
-          let h = -1;
-          for (; (h = s.data.indexOf(E, h + 1)) !== -1; )
-            l.push({ type: 7, index: o }), h += E.length - 1;
-        }
-      o++;
-    }
-  }
-  static createElement(t, e) {
-    const i = C.createElement("template");
-    return i.innerHTML = t, i;
-  }
-};
-function H(n, t, e = n, i) {
-  var s, o, r, d;
-  if (t === j)
-    return t;
-  let l = i !== void 0 ? (s = e._$Co) === null || s === void 0 ? void 0 : s[i] : e._$Cl;
-  const a = D(t) ? void 0 : t._$litDirective$;
-  return (l == null ? void 0 : l.constructor) !== a && ((o = l == null ? void 0 : l._$AO) === null || o === void 0 || o.call(l, !1), a === void 0 ? l = void 0 : (l = new a(n), l._$AT(n, e, i)), i !== void 0 ? ((r = (d = e)._$Co) !== null && r !== void 0 ? r : d._$Co = [])[i] = l : e._$Cl = l), l !== void 0 && (t = H(n, l._$AS(n, t.values), l, i)), t;
-}
-let ae = class {
-  constructor(t, e) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
-  }
-  get parentNode() {
-    return this._$AM.parentNode;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  u(t) {
-    var e;
-    const { el: { content: i }, parts: s } = this._$AD, o = ((e = t == null ? void 0 : t.creationScope) !== null && e !== void 0 ? e : C).importNode(i, !0);
-    P.currentNode = o;
-    let r = P.nextNode(), d = 0, l = 0, a = s[0];
-    for (; a !== void 0; ) {
-      if (d === a.index) {
-        let u;
-        a.type === 2 ? u = new Ft(r, r.nextSibling, this, t) : a.type === 1 ? u = new a.ctor(r, a.name, a.strings, this, t) : a.type === 6 && (u = new pe(r, this, t)), this._$AV.push(u), a = s[++l];
-      }
-      d !== (a == null ? void 0 : a.index) && (r = P.nextNode(), d++);
-    }
-    return P.currentNode = C, o;
-  }
-  v(t) {
-    let e = 0;
-    for (const i of this._$AV)
-      i !== void 0 && (i.strings !== void 0 ? (i._$AI(t, i, e), e += i.strings.length - 2) : i._$AI(t[e])), e++;
-  }
-}, Ft = class Jt {
-  constructor(t, e, i, s) {
-    var o;
-    this.type = 2, this._$AH = v, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = i, this.options = s, this._$Cp = (o = s == null ? void 0 : s.isConnected) === null || o === void 0 || o;
-  }
-  get _$AU() {
-    var t, e;
-    return (e = (t = this._$AM) === null || t === void 0 ? void 0 : t._$AU) !== null && e !== void 0 ? e : this._$Cp;
-  }
-  get parentNode() {
-    let t = this._$AA.parentNode;
-    const e = this._$AM;
-    return e !== void 0 && (t == null ? void 0 : t.nodeType) === 11 && (t = e.parentNode), t;
-  }
-  get startNode() {
-    return this._$AA;
-  }
-  get endNode() {
-    return this._$AB;
-  }
-  _$AI(t, e = this) {
-    t = H(this, t, e), D(t) ? t === v || t == null || t === "" ? (this._$AH !== v && this._$AR(), this._$AH = v) : t !== this._$AH && t !== j && this._(t) : t._$litType$ !== void 0 ? this.g(t) : t.nodeType !== void 0 ? this.$(t) : oe(t) ? this.T(t) : this._(t);
-  }
-  k(t) {
-    return this._$AA.parentNode.insertBefore(t, this._$AB);
-  }
-  $(t) {
-    this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
-  }
-  _(t) {
-    this._$AH !== v && D(this._$AH) ? this._$AA.nextSibling.data = t : this.$(C.createTextNode(t)), this._$AH = t;
-  }
-  g(t) {
-    var e;
-    const { values: i, _$litType$: s } = t, o = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = pt.createElement(Kt(s.h, s.h[0]), this.options)), s);
-    if (((e = this._$AH) === null || e === void 0 ? void 0 : e._$AD) === o)
-      this._$AH.v(i);
-    else {
-      const r = new ae(o, this), d = r.u(this.options);
-      r.v(i), this.$(d), this._$AH = r;
-    }
-  }
-  _$AC(t) {
-    let e = Ct.get(t.strings);
-    return e === void 0 && Ct.set(t.strings, e = new pt(t)), e;
-  }
-  T(t) {
-    Wt(this._$AH) || (this._$AH = [], this._$AR());
-    const e = this._$AH;
-    let i, s = 0;
-    for (const o of t)
-      s === e.length ? e.push(i = new Jt(this.k(G()), this.k(G()), this, this.options)) : i = e[s], i._$AI(o), s++;
-    s < e.length && (this._$AR(i && i._$AB.nextSibling, s), e.length = s);
-  }
-  _$AR(t = this._$AA.nextSibling, e) {
-    var i;
-    for ((i = this._$AP) === null || i === void 0 || i.call(this, !1, !0, e); t && t !== this._$AB; ) {
-      const s = t.nextSibling;
-      t.remove(), t = s;
-    }
-  }
-  setConnected(t) {
-    var e;
-    this._$AM === void 0 && (this._$Cp = t, (e = this._$AP) === null || e === void 0 || e.call(this, t));
-  }
-}, Y = class {
-  constructor(t, e, i, s, o) {
-    this.type = 1, this._$AH = v, this._$AN = void 0, this.element = t, this.name = e, this._$AM = s, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = v;
-  }
-  get tagName() {
-    return this.element.tagName;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t, e = this, i, s) {
-    const o = this.strings;
-    let r = !1;
-    if (o === void 0)
-      t = H(this, t, e, 0), r = !D(t) || t !== this._$AH && t !== j, r && (this._$AH = t);
-    else {
-      const d = t;
-      let l, a;
-      for (t = o[0], l = 0; l < o.length - 1; l++)
-        a = H(this, d[i + l], e, l), a === j && (a = this._$AH[l]), r || (r = !D(a) || a !== this._$AH[l]), a === v ? t = v : t !== v && (t += (a ?? "") + o[l + 1]), this._$AH[l] = a;
-    }
-    r && !s && this.j(t);
-  }
-  j(t) {
-    t === v ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
-  }
-}, he = class extends Y {
-  constructor() {
-    super(...arguments), this.type = 3;
-  }
-  j(t) {
-    this.element[this.name] = t === v ? void 0 : t;
-  }
-};
-const de = x ? x.emptyScript : "";
-let ce = class extends Y {
-  constructor() {
-    super(...arguments), this.type = 4;
-  }
-  j(t) {
-    t && t !== v ? this.element.setAttribute(this.name, de) : this.element.removeAttribute(this.name);
-  }
-}, ue = class extends Y {
-  constructor(t, e, i, s, o) {
-    super(t, e, i, s, o), this.type = 5;
-  }
-  _$AI(t, e = this) {
-    var i;
-    if ((t = (i = H(this, t, e, 0)) !== null && i !== void 0 ? i : v) === j)
-      return;
-    const s = this._$AH, o = t === v && s !== v || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, r = t !== v && (s === v || o);
-    o && this.element.removeEventListener(this.name, this, s), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
-  }
-  handleEvent(t) {
-    var e, i;
-    typeof this._$AH == "function" ? this._$AH.call((i = (e = this.options) === null || e === void 0 ? void 0 : e.host) !== null && i !== void 0 ? i : this.element, t) : this._$AH.handleEvent(t);
-  }
-};
-class pe {
-  constructor(t, e, i) {
-    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = i;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t) {
-    H(this, t);
-  }
-}
-const Rt = J.litHtmlPolyfillSupport;
-Rt == null || Rt(pt, Ft), ((st = J.litHtmlVersions) !== null && st !== void 0 ? st : J.litHtmlVersions = []).push("2.8.0");
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-var rt;
-const X = window, N = X.trustedTypes, Tt = N ? N.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, vt = "$lit$", b = `lit$${(Math.random() + "").slice(9)}$`, Gt = "?" + b, ve = `<${Gt}>`, R = document, B = () => R.createComment(""), z = (n) => n === null || typeof n != "object" && typeof n != "function", Xt = Array.isArray, _e = (n) => Xt(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", ot = `[ 	
-\f\r]`, O = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, xt = /-->/g, Ht = />/g, S = RegExp(`>|${ot}(?:([^\\s"'>=/]+)(${ot}*=${ot}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Nt = /'/g, It = /"/g, Yt = /^(?:script|style|textarea|title)$/i, $e = (n) => (t, ...e) => ({ _$litType$: n, strings: t, values: e }), me = $e(1), I = Symbol.for("lit-noChange"), _ = Symbol.for("lit-nothing"), kt = /* @__PURE__ */ new WeakMap(), U = R.createTreeWalker(R, 129, null, !1), ge = (n, t) => {
-  const e = n.length - 1, i = [];
-  let s, o = t === 2 ? "<svg>" : "", r = O;
-  for (let l = 0; l < e; l++) {
-    const a = n[l];
-    let u, h, c = -1, p = 0;
-    for (; p < a.length && (r.lastIndex = p, h = r.exec(a), h !== null); )
-      p = r.lastIndex, r === O ? h[1] === "!--" ? r = xt : h[1] !== void 0 ? r = Ht : h[2] !== void 0 ? (Yt.test(h[2]) && (s = RegExp("</" + h[2], "g")), r = S) : h[3] !== void 0 && (r = S) : r === S ? h[0] === ">" ? (r = s ?? O, c = -1) : h[1] === void 0 ? c = -2 : (c = r.lastIndex - h[2].length, u = h[1], r = h[3] === void 0 ? S : h[3] === '"' ? It : Nt) : r === It || r === Nt ? r = S : r === xt || r === Ht ? r = O : (r = S, s = void 0);
-    const A = r === S && n[l + 1].startsWith("/>") ? " " : "";
-    o += r === O ? a + ve : c >= 0 ? (i.push(u), a.slice(0, c) + vt + a.slice(c) + b + A) : a + b + (c === -2 ? (i.push(void 0), l) : A);
-  }
-  const d = o + (n[e] || "<?>") + (t === 2 ? "</svg>" : "");
-  if (!Array.isArray(n) || !n.hasOwnProperty("raw"))
-    throw Error("invalid template strings array");
-  return [Tt !== void 0 ? Tt.createHTML(d) : d, i];
-};
-class W {
-  constructor({ strings: t, _$litType$: e }, i) {
-    let s;
-    this.parts = [];
-    let o = 0, r = 0;
-    const d = t.length - 1, l = this.parts, [a, u] = ge(t, e);
-    if (this.el = W.createElement(a, i), U.currentNode = this.el.content, e === 2) {
-      const h = this.el.content, c = h.firstChild;
-      c.remove(), h.append(...c.childNodes);
-    }
-    for (; (s = U.nextNode()) !== null && l.length < d; ) {
-      if (s.nodeType === 1) {
-        if (s.hasAttributes()) {
-          const h = [];
-          for (const c of s.getAttributeNames())
-            if (c.endsWith(vt) || c.startsWith(b)) {
-              const p = u[r++];
-              if (h.push(c), p !== void 0) {
-                const A = s.getAttribute(p.toLowerCase() + vt).split(b), f = /([.?@])?(.*)/.exec(p);
-                l.push({ type: 1, index: o, name: f[2], strings: A, ctor: f[1] === "." ? ye : f[1] === "?" ? Ee : f[1] === "@" ? be : Q });
-              } else
-                l.push({ type: 6, index: o });
-            }
-          for (const c of h)
-            s.removeAttribute(c);
-        }
-        if (Yt.test(s.tagName)) {
-          const h = s.textContent.split(b), c = h.length - 1;
-          if (c > 0) {
-            s.textContent = N ? N.emptyScript : "";
-            for (let p = 0; p < c; p++)
-              s.append(h[p], B()), U.nextNode(), l.push({ type: 2, index: ++o });
-            s.append(h[c], B());
-          }
-        }
-      } else if (s.nodeType === 8)
-        if (s.data === Gt)
-          l.push({ type: 2, index: o });
-        else {
-          let h = -1;
-          for (; (h = s.data.indexOf(b, h + 1)) !== -1; )
-            l.push({ type: 7, index: o }), h += b.length - 1;
-        }
-      o++;
-    }
-  }
-  static createElement(t, e) {
-    const i = R.createElement("template");
-    return i.innerHTML = t, i;
-  }
-}
-function k(n, t, e = n, i) {
-  var s, o, r, d;
-  if (t === I)
-    return t;
-  let l = i !== void 0 ? (s = e._$Co) === null || s === void 0 ? void 0 : s[i] : e._$Cl;
-  const a = z(t) ? void 0 : t._$litDirective$;
-  return (l == null ? void 0 : l.constructor) !== a && ((o = l == null ? void 0 : l._$AO) === null || o === void 0 || o.call(l, !1), a === void 0 ? l = void 0 : (l = new a(n), l._$AT(n, e, i)), i !== void 0 ? ((r = (d = e)._$Co) !== null && r !== void 0 ? r : d._$Co = [])[i] = l : e._$Cl = l), l !== void 0 && (t = k(n, l._$AS(n, t.values), l, i)), t;
-}
-class fe {
-  constructor(t, e) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
-  }
-  get parentNode() {
-    return this._$AM.parentNode;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  u(t) {
-    var e;
-    const { el: { content: i }, parts: s } = this._$AD, o = ((e = t == null ? void 0 : t.creationScope) !== null && e !== void 0 ? e : R).importNode(i, !0);
-    U.currentNode = o;
-    let r = U.nextNode(), d = 0, l = 0, a = s[0];
-    for (; a !== void 0; ) {
-      if (d === a.index) {
-        let u;
-        a.type === 2 ? u = new q(r, r.nextSibling, this, t) : a.type === 1 ? u = new a.ctor(r, a.name, a.strings, this, t) : a.type === 6 && (u = new we(r, this, t)), this._$AV.push(u), a = s[++l];
-      }
-      d !== (a == null ? void 0 : a.index) && (r = U.nextNode(), d++);
-    }
-    return U.currentNode = R, o;
-  }
-  v(t) {
-    let e = 0;
-    for (const i of this._$AV)
-      i !== void 0 && (i.strings !== void 0 ? (i._$AI(t, i, e), e += i.strings.length - 2) : i._$AI(t[e])), e++;
-  }
-}
-class q {
-  constructor(t, e, i, s) {
-    var o;
-    this.type = 2, this._$AH = _, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = i, this.options = s, this._$Cp = (o = s == null ? void 0 : s.isConnected) === null || o === void 0 || o;
-  }
-  get _$AU() {
-    var t, e;
-    return (e = (t = this._$AM) === null || t === void 0 ? void 0 : t._$AU) !== null && e !== void 0 ? e : this._$Cp;
-  }
-  get parentNode() {
-    let t = this._$AA.parentNode;
-    const e = this._$AM;
-    return e !== void 0 && (t == null ? void 0 : t.nodeType) === 11 && (t = e.parentNode), t;
-  }
-  get startNode() {
-    return this._$AA;
-  }
-  get endNode() {
-    return this._$AB;
-  }
-  _$AI(t, e = this) {
-    t = k(this, t, e), z(t) ? t === _ || t == null || t === "" ? (this._$AH !== _ && this._$AR(), this._$AH = _) : t !== this._$AH && t !== I && this._(t) : t._$litType$ !== void 0 ? this.g(t) : t.nodeType !== void 0 ? this.$(t) : _e(t) ? this.T(t) : this._(t);
-  }
-  k(t) {
-    return this._$AA.parentNode.insertBefore(t, this._$AB);
-  }
-  $(t) {
-    this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
-  }
-  _(t) {
-    this._$AH !== _ && z(this._$AH) ? this._$AA.nextSibling.data = t : this.$(R.createTextNode(t)), this._$AH = t;
-  }
-  g(t) {
-    var e;
-    const { values: i, _$litType$: s } = t, o = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = W.createElement(s.h, this.options)), s);
-    if (((e = this._$AH) === null || e === void 0 ? void 0 : e._$AD) === o)
-      this._$AH.v(i);
-    else {
-      const r = new fe(o, this), d = r.u(this.options);
-      r.v(i), this.$(d), this._$AH = r;
-    }
-  }
-  _$AC(t) {
-    let e = kt.get(t.strings);
-    return e === void 0 && kt.set(t.strings, e = new W(t)), e;
-  }
-  T(t) {
-    Xt(this._$AH) || (this._$AH = [], this._$AR());
-    const e = this._$AH;
-    let i, s = 0;
-    for (const o of t)
-      s === e.length ? e.push(i = new q(this.k(B()), this.k(B()), this, this.options)) : i = e[s], i._$AI(o), s++;
-    s < e.length && (this._$AR(i && i._$AB.nextSibling, s), e.length = s);
-  }
-  _$AR(t = this._$AA.nextSibling, e) {
-    var i;
-    for ((i = this._$AP) === null || i === void 0 || i.call(this, !1, !0, e); t && t !== this._$AB; ) {
-      const s = t.nextSibling;
-      t.remove(), t = s;
-    }
-  }
-  setConnected(t) {
-    var e;
-    this._$AM === void 0 && (this._$Cp = t, (e = this._$AP) === null || e === void 0 || e.call(this, t));
-  }
-}
-class Q {
-  constructor(t, e, i, s, o) {
-    this.type = 1, this._$AH = _, this._$AN = void 0, this.element = t, this.name = e, this._$AM = s, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = _;
-  }
-  get tagName() {
-    return this.element.tagName;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t, e = this, i, s) {
-    const o = this.strings;
-    let r = !1;
-    if (o === void 0)
-      t = k(this, t, e, 0), r = !z(t) || t !== this._$AH && t !== I, r && (this._$AH = t);
-    else {
-      const d = t;
-      let l, a;
-      for (t = o[0], l = 0; l < o.length - 1; l++)
-        a = k(this, d[i + l], e, l), a === I && (a = this._$AH[l]), r || (r = !z(a) || a !== this._$AH[l]), a === _ ? t = _ : t !== _ && (t += (a ?? "") + o[l + 1]), this._$AH[l] = a;
-    }
-    r && !s && this.j(t);
-  }
-  j(t) {
-    t === _ ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
-  }
-}
-class ye extends Q {
-  constructor() {
-    super(...arguments), this.type = 3;
-  }
-  j(t) {
-    this.element[this.name] = t === _ ? void 0 : t;
-  }
-}
-const Ae = N ? N.emptyScript : "";
-class Ee extends Q {
-  constructor() {
-    super(...arguments), this.type = 4;
-  }
-  j(t) {
-    t && t !== _ ? this.element.setAttribute(this.name, Ae) : this.element.removeAttribute(this.name);
-  }
-}
-class be extends Q {
-  constructor(t, e, i, s, o) {
-    super(t, e, i, s, o), this.type = 5;
-  }
-  _$AI(t, e = this) {
-    var i;
-    if ((t = (i = k(this, t, e, 0)) !== null && i !== void 0 ? i : _) === I)
-      return;
-    const s = this._$AH, o = t === _ && s !== _ || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, r = t !== _ && (s === _ || o);
-    o && this.element.removeEventListener(this.name, this, s), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
-  }
-  handleEvent(t) {
-    var e, i;
-    typeof this._$AH == "function" ? this._$AH.call((i = (e = this.options) === null || e === void 0 ? void 0 : e.host) !== null && i !== void 0 ? i : this.element, t) : this._$AH.handleEvent(t);
-  }
-}
-class we {
-  constructor(t, e, i) {
-    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = i;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t) {
-    k(this, t);
-  }
-}
-const Vt = X.litHtmlPolyfillSupport;
-Vt == null || Vt(W, q), ((rt = X.litHtmlVersions) !== null && rt !== void 0 ? rt : X.litHtmlVersions = []).push("2.7.4");
-const Se = (n, t, e) => {
-  var i, s;
-  const o = (i = e == null ? void 0 : e.renderBefore) !== null && i !== void 0 ? i : t;
-  let r = o._$litPart$;
-  if (r === void 0) {
-    const d = (s = e == null ? void 0 : e.renderBefore) !== null && s !== void 0 ? s : null;
-    o._$litPart$ = r = new q(t.insertBefore(B(), d), d, void 0, e ?? {});
-  }
-  return r._$AI(n), r;
-};
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-var lt, at;
-class L extends T {
-  constructor() {
-    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
-  }
-  createRenderRoot() {
-    var t, e;
-    const i = super.createRenderRoot();
-    return (t = (e = this.renderOptions).renderBefore) !== null && t !== void 0 || (e.renderBefore = i.firstChild), i;
-  }
-  update(t) {
-    const e = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Se(e, this.renderRoot, this.renderOptions);
-  }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = this._$Do) === null || t === void 0 || t.setConnected(!0);
-  }
-  disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), (t = this._$Do) === null || t === void 0 || t.setConnected(!1);
-  }
-  render() {
-    return I;
-  }
-}
-L.finalized = !0, L._$litElement$ = !0, (lt = globalThis.litElementHydrateSupport) === null || lt === void 0 || lt.call(globalThis, { LitElement: L });
-const Ot = globalThis.litElementPolyfillSupport;
-Ot == null || Ot({ LitElement: L });
-((at = globalThis.litElementVersions) !== null && at !== void 0 ? at : globalThis.litElementVersions = []).push("3.3.2");
-function Pe(n, t, e) {
-  function i(s) {
-    e.dispatchEvent(new CustomEvent(s.type, s));
-  }
-  return t.addEventListener(n, i), () => {
-    t.removeEventListener(n, i);
+import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
+import "@a11y/focus-trap";
+function forwardEvent(type2, fromElement, toElement) {
+  function forwarder(event) {
+    toElement.dispatchEvent(new CustomEvent(event.type, event));
+  }
+  fromElement.addEventListener(type2, forwarder);
+  return () => {
+    fromElement.removeEventListener(type2, forwarder);
   };
 }
-class Ue {
-  constructor(t, e) {
-    this._events = [], this._cleanup = [], this._forwardElementRef = Lt(), this.host = t, this._events = e, t.addController(this);
+class EventForwardController {
+  constructor(host, events) {
+    this._events = [];
+    this._cleanup = [];
+    this._forwardElementRef = createRef();
+    this.host = host;
+    this._events = events;
+    host.addController(this);
   }
   register() {
-    return Dt(this._forwardElementRef);
+    return ref(this._forwardElementRef);
   }
   hostConnected() {
     requestAnimationFrame(() => {
-      this._events.forEach((t) => {
-        this._forwardElementRef.value && this._cleanup.push(Pe(t, this._forwardElementRef.value, this.host));
+      this._events.forEach((event) => {
+        if (this._forwardElementRef.value) {
+          this._cleanup.push(forwardEvent(event, this._forwardElementRef.value, this.host));
+        }
       });
     });
   }
   hostDisconnected() {
-    this._cleanup.forEach((t) => {
-      t();
-    }), this._cleanup = [];
+    this._cleanup.forEach((fn) => {
+      fn();
+    });
+    this._cleanup = [];
   }
 }
-const ht = "https://vouchfor.com", Ce = "https://d2rxhdlm2q91uk.cloudfront.net", Re = "https://d1ix11aj5kfygl.cloudfront.net", Te = "https://d157jlwnudd93d.cloudfront.net", xe = "https://bshyfw4h5a.execute-api.ap-southeast-2.amazonaws.com/dev", He = "https://gyzw7rpbq3.execute-api.ap-southeast-2.amazonaws.com/staging", Ne = "https://vfcjuim1l3.execute-api.ap-southeast-2.amazonaws.com/prod", Ie = "http://localhost:6060/v1", ke = "https://embed-staging.vouchfor.com/v1", Ve = "https://embed.vouchfor.com/v1", Oe = "https://dev.vouchfor.com", Me = "https://staging.vouchfor.com", Le = "https://app.vouchfor.com";
-function _t(n) {
-  if (!["dev", "staging", "prod"].includes(n))
-    throw new Error(`Unknown environment: ${n}`);
-  if (n === "dev")
+const devVideoUrl = "https://d2rxhdlm2q91uk.cloudfront.net";
+const stagingVideoUrl = "https://d1ix11aj5kfygl.cloudfront.net";
+const prodVideoUrl = "https://d157jlwnudd93d.cloudfront.net";
+const devPublicApiUrl = "https://bshyfw4h5a.execute-api.ap-southeast-2.amazonaws.com/dev";
+const stagingPublicApiUrl = "https://gyzw7rpbq3.execute-api.ap-southeast-2.amazonaws.com/staging";
+const prodPublicApiUrl = "https://vfcjuim1l3.execute-api.ap-southeast-2.amazonaws.com/prod";
+const localEmbedApiUrl = "http://localhost:6060/v2";
+const devEmbedApiUrl = "https://embed-dev.vouchfor.com/v2";
+const stagingEmbedApiUrl = "https://embed-staging.vouchfor.com/v2";
+const prodEmbedApiUrl = "https://embed.vouchfor.com/v2";
+function getEnvUrls(env) {
+  if (!["local", "dev", "staging", "prod"].includes(env)) {
+    throw new Error(`Unknown environment: ${env}`);
+  }
+  if (env === "local") {
     return {
-      marketingUrl: ht,
-      videoUrl: Ce,
-      publicApiUrl: xe,
-      embedApiUrl: Ie,
-      publicRecorderUrl: Oe
+      videoUrl: devVideoUrl,
+      publicApiUrl: devPublicApiUrl,
+      embedApiUrl: localEmbedApiUrl
     };
-  if (n === "staging")
+  }
+  if (env === "dev") {
+    return {
+      videoUrl: devVideoUrl,
+      publicApiUrl: devPublicApiUrl,
+      embedApiUrl: devEmbedApiUrl
+    };
+  }
+  if (env === "staging") {
     return {
-      marketingUrl: ht,
-      videoUrl: Re,
-      publicApiUrl: He,
-      embedApiUrl: ke,
-      publicRecorderUrl: Me
+      videoUrl: stagingVideoUrl,
+      publicApiUrl: stagingPublicApiUrl,
+      embedApiUrl: stagingEmbedApiUrl
     };
-  if (n === "prod")
+  }
+  if (env === "prod") {
     return {
-      marketingUrl: ht,
-      videoUrl: Te,
-      publicApiUrl: Ne,
-      embedApiUrl: Ve,
-      publicRecorderUrl: Le
+      videoUrl: prodVideoUrl,
+      publicApiUrl: prodPublicApiUrl,
+      embedApiUrl: prodEmbedApiUrl
     };
+  }
 }
-class De {
-  constructor(t) {
-    this.host = t, new te(
+class FetcherController {
+  constructor(host) {
+    this._fetching = false;
+    this.getVouch = async (env, apiKey, vouchId) => {
+      var _a;
+      const { embedApiUrl } = getEnvUrls(env);
+      const cacheCheck = v4();
+      const res = await fetch(`${embedApiUrl}/vouches/${vouchId}`, {
+        method: "GET",
+        headers: [
+          ["X-Api-Key", apiKey],
+          ["X-Cache-Check", cacheCheck]
+        ]
+      });
+      const vouch = await res.json();
+      this.host.dispatchEvent(new CustomEvent("vouch:loaded", { detail: vouch == null ? void 0 : vouch.id }));
+      const resCacheCheck = (_a = res == null ? void 0 : res.headers) == null ? void 0 : _a.get("X-Cache-Check");
+      if (resCacheCheck !== cacheCheck) {
+        fetch(`${embedApiUrl}/vouches/${vouchId}`, {
+          method: "GET",
+          headers: [
+            ["X-Api-Key", apiKey],
+            ["Cache-Control", "max-age=0"]
+          ]
+        });
+      }
+      return vouch;
+    };
+    this.getTemplate = async (env, apiKey, templateId) => {
+      var _a;
+      const { embedApiUrl } = getEnvUrls(env);
+      const cacheCheck = v4();
+      const res = await fetch(`${embedApiUrl}/templates/${templateId}`, {
+        method: "GET",
+        headers: [
+          ["X-Api-Key", apiKey],
+          ["X-Cache-Check", cacheCheck]
+        ]
+      });
+      const template = await res.json();
+      const resCacheCheck = (_a = res == null ? void 0 : res.headers) == null ? void 0 : _a.get("X-Cache-Check");
+      if (resCacheCheck !== cacheCheck) {
+        fetch(`${embedApiUrl}/templates/${templateId}`, {
+          method: "GET",
+          headers: [
+            ["X-Api-Key", apiKey],
+            ["Cache-Control", "max-age=0"]
+          ]
+        });
+      }
+      return template;
+    };
+    this.host = host;
+    new Task(
       this.host,
-      async ([e, i, s]) => {
-        var o, r;
+      async ([env, apiKey, data, vouchId, templateId]) => {
+        var _a, _b, _c, _d;
         try {
-          if (s) {
-            t.fetching = !0;
-            const { embedApiUrl: d } = _t(e), l = await fetch(`${d}/vouches/${s}`, {
-              method: "GET",
-              headers: [["X-Api-Key", i]]
-            }).then((a) => a.json());
-            t.data = l, t.instance = (r = (o = l == null ? void 0 : l.settings) == null ? void 0 : o.template) == null ? void 0 : r.instance;
+          host.vouch = void 0;
+          host.template = void 0;
+          if (data) {
+            let template;
+            if (templateId) {
+              this.fetching = true;
+              template = await this.getTemplate(env, apiKey, templateId);
+            }
+            this._vouch = data;
+            host.template = template ?? ((_b = (_a = data == null ? void 0 : data.settings) == null ? void 0 : _a.template) == null ? void 0 : _b.instance);
+          } else if (vouchId) {
+            this.fetching = true;
+            const [vouch, template] = await Promise.all([
+              this.getVouch(env, apiKey, vouchId),
+              templateId ? this.getTemplate(env, apiKey, templateId) : null
+            ]);
+            this._vouch = vouch;
+            host.template = template ?? ((_d = (_c = vouch == null ? void 0 : vouch.settings) == null ? void 0 : _c.template) == null ? void 0 : _d.instance);
           }
         } finally {
-          t.fetching = !1;
+          this.fetching = false;
         }
       },
-      () => [t.env, t.apiKey, t.vouchHashId]
+      () => [host.env, host.apiKey, host.data, host.vouchId, host.templateId]
+    );
+    new Task(
+      this.host,
+      ([vouch, questions]) => {
+        host.vouch = vouch ? {
+          ...vouch,
+          questions: {
+            items: vouch == null ? void 0 : vouch.questions.items.filter((_, index) => !(questions == null ? void 0 : questions.length) || (questions == null ? void 0 : questions.includes(index + 1)))
+          }
+        } : void 0;
+      },
+      () => [this._vouch, host.questions]
     );
   }
+  set fetching(value) {
+    if (this._fetching !== value) {
+      this._fetching = value;
+      this.host.requestUpdate();
+    }
+  }
+  get fetching() {
+    return this._fetching;
+  }
 }
-let K;
-const je = new Uint8Array(16);
-function Be() {
-  if (!K && (K = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !K))
-    throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-  return K(je);
+const name = "@vouchfor/embeds";
+const version = "0.0.0-experiment.de28f28";
+const license = "MIT";
+const author = "Aaron Williams";
+const main = "dist/es/embeds.js";
+const module = "dist/es/embeds.js";
+const type = "module";
+const types = "dist/es/src/index.d.ts";
+const exports = {
+  ".": "./dist/es/embeds.js"
+};
+const files = [
+  "dist",
+  "src"
+];
+const publishConfig = {
+  tag: "experiment",
+  access: "public"
+};
+const engines = {
+  node: ">=18.18.0"
+};
+const scripts = {
+  build: "rm -rf dist && tsc && yarn build:self",
+  "build:deps": "yarn --cwd ../media-player build",
+  "build:self": "vite build --mode iife && vite build --mode es && node scripts/build.cjs",
+  "build:package": "yarn build",
+  "build:storybook": "yarn prebuild && storybook build",
+  "generate:manifest": "wca src --outFile custom-elements.json",
+  lint: "eslint . --quiet",
+  "lint:fix": "eslint . --fix",
+  "lint:staged": "lint-staged",
+  prepublishOnly: "yarn build",
+  size: "size-limit",
+  storybook: "yarn prebuild && storybook dev -p 6007",
+  prebuild: "yarn build:deps && yarn generate:manifest",
+  test: "rm -rf test/lib && yarn prebuild && vite build --mode test && web-test-runner",
+  "test:ci": "yarn test --config web-test-runner.ci.config.js"
+};
+const dependencies = {
+  "@a11y/focus-trap": "^1.0.5",
+  "@lit/task": "^1.0.0",
+  "@vouchfor/canvas-video": "0.0.0-experiment.de28f28",
+  "@vouchfor/media-player": "0.0.0-experiment.de28f28",
+  uuid: "^9.0.1"
+};
+const peerDependencies = {
+  lit: "^3.1.2"
+};
+const devDependencies = {
+  "@esm-bundle/chai": "^4.3.4-fix.0",
+  "@open-wc/testing": "^4.0.0",
+  "@storybook/addon-essentials": "^8.0.4",
+  "@storybook/addon-links": "^8.0.4",
+  "@storybook/blocks": "^8.0.4",
+  "@storybook/web-components": "^8.0.4",
+  "@storybook/web-components-vite": "^8.0.4",
+  "@svgr/core": "^8.1.0",
+  "@types/flat": "^5.0.5",
+  "@types/mocha": "^10.0.6",
+  "@vouchfor/eslint-config": "^1.0.1",
+  "@vouchfor/prettier-config": "^1.0.1",
+  "@vouchfor/video-utils": "0.0.0-experiment.de28f28",
+  "@web/dev-server-esbuild": "^1.0.2",
+  "@web/test-runner": "^0.18.1",
+  "@web/test-runner-browserstack": "^0.7.1",
+  "@web/test-runner-mocha": "^0.9.0",
+  "@web/test-runner-playwright": "^0.11.0",
+  glob: "^10.3.10",
+  "lint-staged": "^15.2.2",
+  lit: "^3.1.2",
+  lodash: "^4.17.21",
+  react: "^18.2.0",
+  "react-dom": "^18.2.0",
+  "rollup-plugin-tla": "^0.0.2",
+  sinon: "^17.0.1",
+  storybook: "^8.0.4",
+  svgson: "^5.3.1",
+  typescript: "^5.4.3",
+  vite: "^5.2.2",
+  "vite-plugin-commonjs": "^0.10.1",
+  "vite-plugin-dts": "^3.7.3",
+  "web-component-analyzer": "^2.0.0"
+};
+const packageJson = {
+  name,
+  version,
+  license,
+  author,
+  main,
+  module,
+  type,
+  types,
+  exports,
+  files,
+  publishConfig,
+  engines,
+  scripts,
+  "lint-staged": {
+    "**/*.{ts,tsx,js}": "eslint --fix --quiet",
+    "**/*.{md,json,yml}": "prettier --write"
+  },
+  dependencies,
+  peerDependencies,
+  devDependencies
+};
+function createVisitor(env) {
+  const { publicApiUrl } = getEnvUrls(env);
+  const visitorId = v4();
+  navigator.sendBeacon(`${publicApiUrl}/api/visitor`, JSON.stringify({ visitorId }));
+  return visitorId;
 }
-const $ = [];
-for (let n = 0; n < 256; ++n)
-  $.push((n + 256).toString(16).slice(1));
-function ze(n, t = 0) {
-  return $[n[t + 0]] + $[n[t + 1]] + $[n[t + 2]] + $[n[t + 3]] + "-" + $[n[t + 4]] + $[n[t + 5]] + "-" + $[n[t + 6]] + $[n[t + 7]] + "-" + $[n[t + 8]] + $[n[t + 9]] + "-" + $[n[t + 10]] + $[n[t + 11]] + $[n[t + 12]] + $[n[t + 13]] + $[n[t + 14]] + $[n[t + 15]];
+function getUids(env) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  if (typeof window === "undefined") {
+    return {
+      client: null,
+      tab: null,
+      request: v4()
+    };
+  }
+  let visitorId = (_b = (_a = window.localStorage) == null ? void 0 : _a.getItem) == null ? void 0 : _b.call(_a, "vouch-uid-visitor");
+  let clientId = (_d = (_c = window.localStorage) == null ? void 0 : _c.getItem) == null ? void 0 : _d.call(_c, "vouch-uid-client");
+  let tabId = (_f = (_e = window.sessionStorage) == null ? void 0 : _e.getItem) == null ? void 0 : _f.call(_e, "vouch-uid-tab");
+  const requestId = v4();
+  if (!visitorId) {
+    visitorId = createVisitor(env);
+    (_h = (_g = window.localStorage) == null ? void 0 : _g.setItem) == null ? void 0 : _h.call(_g, "vouch-uid-visitor", visitorId);
+  }
+  if (!clientId) {
+    clientId = v4();
+    (_j = (_i = window.localStorage) == null ? void 0 : _i.setItem) == null ? void 0 : _j.call(_i, "vouch-uid-client", clientId);
+  }
+  if (!tabId) {
+    tabId = v4();
+    (_l = (_k = window.sessionStorage) == null ? void 0 : _k.setItem) == null ? void 0 : _l.call(_k, "vouch-uid-tab", tabId);
+  }
+  return {
+    client: clientId,
+    tab: tabId,
+    request: requestId,
+    visitor: visitorId
+  };
 }
-const We = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Mt = {
-  randomUUID: We
-};
-function M(n, t, e) {
-  if (Mt.randomUUID && !t && !n)
-    return Mt.randomUUID();
-  n = n || {};
-  const i = n.random || (n.rng || Be)();
-  if (i[6] = i[6] & 15 | 64, i[8] = i[8] & 63 | 128, t) {
-    e = e || 0;
-    for (let s = 0; s < 16; ++s)
-      t[e + s] = i[s];
-    return t;
+function findVouchId(payload, vouch) {
+  if (payload && "vouchId" in payload) {
+    return payload.vouchId;
   }
-  return ze(i);
+  return (vouch == null ? void 0 : vouch.id) ?? null;
+}
+function getReportingMetadata(source = "embedded_player") {
+  var _a, _b;
+  const [country, region] = ((_b = (_a = Intl.DateTimeFormat().resolvedOptions().timeZone) == null ? void 0 : _a.split) == null ? void 0 : _b.call(_a, "/")) ?? [];
+  const utmParams = {};
+  [...new URLSearchParams(location.search).entries()].forEach(([key, value]) => {
+    if (/utm/.test(key)) {
+      const param = key.toLowerCase().replace(/[-_][a-z0-9]/g, (group) => group.slice(-1).toUpperCase());
+      utmParams[param] = value;
+    }
+  });
+  return {
+    source,
+    time: /* @__PURE__ */ new Date(),
+    region,
+    country,
+    screenHeight: window.screen.height,
+    screenWidth: window.screen.width,
+    referrer: document.referrer,
+    currentUrl: location.href,
+    embedType: "media-player-embed",
+    embedVersion: packageJson.version,
+    templateVersion: TEMPLATE_VERSION,
+    ...utmParams
+  };
 }
-const qe = 2e3;
-class Ke {
-  constructor(t) {
-    this._tabId = void 0, this._clientId = void 0, this._visitorId = void 0, this._hasPlayed = !1, this._hasLoaded = {}, this._answersViewed = {}, this._streamedTime = {}, this._streamedPrevTimestamp = {}, this._createVisitor = (e) => {
-      var s, o;
-      const { publicApiUrl: i } = _t(this.host.env);
-      return (o = (s = window.localStorage) == null ? void 0 : s.setItem) == null || o.call(s, "vouch-uid-visitor", e), navigator.sendBeacon(`${i}/api/visitor`, JSON.stringify({ visitorId: e })), e;
-    }, this._getReportingMetadata = () => {
-      var o, r;
-      const [e, i] = ((r = (o = Intl.DateTimeFormat().resolvedOptions().timeZone) == null ? void 0 : o.split) == null ? void 0 : r.call(o, "/")) ?? [], s = {};
-      return [...new URLSearchParams(location.search).entries()].forEach(([d, l]) => {
-        if (/utm/.test(d)) {
-          const a = d.toLowerCase().replace(/[-_][a-z0-9]/g, (u) => u.slice(-1).toUpperCase());
-          s[a] = l;
+const MINIMUM_SEND_THRESHOLD = 1;
+class TrackingController {
+  constructor(host) {
+    this._batchedEvents = [];
+    this._hasPlayed = false;
+    this._hasLoaded = {};
+    this._answersViewed = {};
+    this._streamStartTime = {};
+    this._streamLatestTime = {};
+    this._currentlyPlayingVideo = null;
+    this._createTrackingEvent = (event, payload) => {
+      const vouchId = findVouchId(payload, this.host.vouch);
+      if (!vouchId || this.host.disableTracking) {
+        return;
+      }
+      this._batchedEvents.push({
+        event,
+        payload: {
+          ...payload,
+          vouchId,
+          time: (/* @__PURE__ */ new Date()).toISOString()
         }
-      }), {
-        // Source might be embeds, could be playlink etc.
-        source: this.host.trackingSource,
-        time: /* @__PURE__ */ new Date(),
-        region: i,
-        country: e,
-        screenHeight: window.screen.height,
-        screenWidth: window.screen.width,
-        referrer: document.referrer,
-        currentUrl: location.href,
-        ...s
-      };
-    }, this._sendTrackingEvent = (e, i) => {
-      const { publicApiUrl: s } = _t(this.host.env), { client: o, tab: r, request: d, visitor: l } = this._getUids();
-      this.host.enableTracking && this.host.trackingSource && navigator.sendBeacon(
-        `${s}/api/events`,
+      });
+    };
+    this._sendTrackingEvent = () => {
+      if (this._batchedEvents.length <= 0) {
+        return;
+      }
+      const { publicApiUrl } = getEnvUrls(this.host.env);
+      const { client, tab, request, visitor } = getUids(this.host.env);
+      navigator.sendBeacon(
+        `${publicApiUrl}/api/batchevents`,
         JSON.stringify({
-          event: e,
-          payload: i,
+          payload: {
+            events: this._batchedEvents
+          },
           context: {
-            "x-uid-client": o,
-            "x-uid-tab": r,
-            "x-uid-request": d,
-            "x-uid-visitor": l,
-            "x-reporting-metadata": this._getReportingMetadata()
+            "x-uid-client": client,
+            "x-uid-tab": tab,
+            "x-uid-request": request,
+            "x-uid-visitor": visitor,
+            "x-reporting-metadata": getReportingMetadata(this.host.trackingSource)
           }
         })
       );
-    }, this._handleVouchLoaded = ({ detail: e }) => {
-      e && (this._hasLoaded[e] || (this._sendTrackingEvent("VOUCH_LOADED", {
-        vouchId: e
-      }), this._hasLoaded[e] = !0));
-    }, this._handlePlay = () => {
-      const e = this._findVouchId();
-      e && (this._hasPlayed || (this._sendTrackingEvent("VIDEO_PLAYED", {
-        vouchId: e,
-        streamStart: this.host.currentTime
-      }), this._hasPlayed = !0));
-    }, this._handleVideoPlay = ({ detail: { id: e, node: i } }) => {
-      const s = this._findVouchId();
-      s && (this._answersViewed[e] || (this._sendTrackingEvent("VOUCH_RESPONSE_VIEWED", {
-        vouchId: s,
-        answerId: e
-      }), this._answersViewed[e] = !0), this._streamedTime[e] = i.currentTime, this._streamedPrevTimestamp[e] = Date.now());
-    }, this._handleVideoTimeUpdate = ({ detail: { id: e, node: i } }) => {
-      var r, d;
-      const s = this._findVouchId();
-      if (!s)
+      this._batchedEvents = [];
+    };
+    this._streamEnded = () => {
+      if (this._currentlyPlayingVideo) {
+        const { id, key } = this._currentlyPlayingVideo;
+        if (this._streamLatestTime[key] > this._streamStartTime[key] + MINIMUM_SEND_THRESHOLD) {
+          this._createTrackingEvent("VIDEO_STREAMED", {
+            answerId: id,
+            streamStart: this._streamStartTime[key],
+            streamEnd: this._streamLatestTime[key]
+          });
+        }
+        delete this._streamStartTime[key];
+        delete this._streamLatestTime[key];
+      }
+    };
+    this._handleVouchLoaded = ({ detail: vouchId }) => {
+      if (!vouchId) {
         return;
-      const o = Date.now();
-      !this.host.paused && // Only fire the video seeked event when this video is the active one
-      e === ((d = (r = this.host.scene) == null ? void 0 : r.video) == null ? void 0 : d.id) && // Throttle the frequency that we send streamed events while playing
-      o - this._streamedPrevTimestamp[e] > qe && (this._sendTrackingEvent("VIDEO_STREAMED", {
-        vouchId: s,
-        answerId: e,
-        streamStart: this._streamedTime[e],
-        streamEnd: i.currentTime
-      }), this._streamedTime[e] = i.currentTime, this._streamedPrevTimestamp[e] = o);
-    }, this._handleVideoPause = ({ detail: { id: e, node: i } }) => {
-      const s = this._findVouchId();
-      s && (this._sendTrackingEvent("VIDEO_STREAMED", {
-        vouchId: s,
-        answerId: e,
-        streamStart: this._streamedTime[e],
-        streamEnd: i.currentTime
-      }), delete this._streamedTime[e], delete this._streamedPrevTimestamp[e]);
-    }, this.host = t, t.addController(this);
-  }
-  _findVouchId() {
-    if (this.host.data)
-      return "uuid" in this.host.data ? this.host.data.uuid : this.host.data.id;
-  }
-  _getUids() {
-    var o, r, d, l, a, u, h, c, p, A, f, gt;
-    if (typeof window > "u")
-      return {
-        client: null,
-        tab: null,
-        request: M()
-      };
-    const t = this._visitorId || ((r = (o = window.localStorage) == null ? void 0 : o.getItem) == null ? void 0 : r.call(o, "vouch-uid-visitor")) || this._createVisitor(M()), e = this._clientId || ((l = (d = window.localStorage) == null ? void 0 : d.getItem) == null ? void 0 : l.call(d, "vouch-uid-client")) || M(), i = this._tabId || ((u = (a = window.sessionStorage) == null ? void 0 : a.getItem) == null ? void 0 : u.call(a, "vouch-uid-tab")) || M(), s = M();
-    return t !== this._visitorId && (this._visitorId = t, (c = (h = window.localStorage) == null ? void 0 : h.setItem) == null || c.call(h, "vouch-uid-visitor", t)), e !== this._clientId && (this._clientId = e, (A = (p = window.localStorage) == null ? void 0 : p.setItem) == null || A.call(p, "vouch-uid-client", e)), i !== this._tabId && (this._tabId = i, (gt = (f = window.sessionStorage) == null ? void 0 : f.setItem) == null || gt.call(f, "vouch-uid-tab", i)), {
-      client: e,
-      tab: i,
-      request: s,
-      visitor: t
+      }
+      if (!this._hasLoaded[vouchId]) {
+        this._createTrackingEvent("VOUCH_LOADED", { vouchId });
+        this._hasLoaded[vouchId] = true;
+      }
+    };
+    this._handlePlay = () => {
+      if (!this._hasPlayed) {
+        this._createTrackingEvent("VIDEO_PLAYED", {
+          streamStart: this.host.currentTime
+        });
+        this._hasPlayed = true;
+      }
+    };
+    this._handleVideoPlay = ({ detail: { id, key } }) => {
+      if (!this._answersViewed[key]) {
+        this._createTrackingEvent("VOUCH_RESPONSE_VIEWED", {
+          answerId: id
+        });
+        this._answersViewed[key] = true;
+      }
+    };
+    this._handleVideoTimeUpdate = ({ detail: { id, key, node } }) => {
+      var _a, _b;
+      if (
+        // We only want to count any time that the video is actually playing
+        !this.host.paused && // Only update the latest time if this event fires for the currently active video
+        id === ((_b = (_a = this.host.scene) == null ? void 0 : _a.video) == null ? void 0 : _b.id)
+      ) {
+        this._currentlyPlayingVideo = { id, key, node };
+        this._streamLatestTime[key] = node.currentTime;
+        if (!this._streamStartTime[key]) {
+          this._streamStartTime[key] = node.currentTime;
+          this._streamLatestTime[key] = node.currentTime;
+        }
+      }
+    };
+    this._handleVideoPause = ({ detail: { id, key } }) => {
+      if (this._streamLatestTime[key] > this._streamStartTime[key] + MINIMUM_SEND_THRESHOLD) {
+        this._createTrackingEvent("VIDEO_STREAMED", {
+          answerId: id,
+          streamStart: this._streamStartTime[key],
+          streamEnd: this._streamLatestTime[key]
+        });
+      }
+      delete this._streamStartTime[key];
+      delete this._streamLatestTime[key];
+    };
+    this._pageUnloading = () => {
+      this._streamEnded();
+      this._sendTrackingEvent();
+    };
+    this._handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        this._pageUnloading();
+      }
+    };
+    this._handlePageHide = () => {
+      this._pageUnloading();
     };
+    this.host = host;
+    host.addController(this);
   }
   hostConnected() {
-    this.host.enableTracking && this.host.trackingSource && requestAnimationFrame(() => {
-      var t, e, i, s;
-      this.host.addEventListener("vouch:loaded", this._handleVouchLoaded), (t = this.host.mediaPlayer) == null || t.addEventListener("play", this._handlePlay), (e = this.host.mediaPlayer) == null || e.addEventListener("video:play", this._handleVideoPlay), (i = this.host.mediaPlayer) == null || i.addEventListener("video:pause", this._handleVideoPause), (s = this.host.mediaPlayer) == null || s.addEventListener("video:timeupdate", this._handleVideoTimeUpdate);
+    requestAnimationFrame(() => {
+      var _a, _b, _c, _d;
+      if ("onvisibilitychange" in document) {
+        document.addEventListener("visibilitychange", this._handleVisibilityChange);
+      } else {
+        window.addEventListener("pagehide", this._handlePageHide);
+      }
+      this.host.addEventListener("vouch:loaded", this._handleVouchLoaded);
+      (_a = this.host.mediaPlayer) == null ? void 0 : _a.addEventListener("play", this._handlePlay);
+      (_b = this.host.mediaPlayer) == null ? void 0 : _b.addEventListener("video:play", this._handleVideoPlay);
+      (_c = this.host.mediaPlayer) == null ? void 0 : _c.addEventListener("video:pause", this._handleVideoPause);
+      (_d = this.host.mediaPlayer) == null ? void 0 : _d.addEventListener("video:timeupdate", this._handleVideoTimeUpdate);
     });
   }
   hostDisconnected() {
-    var t, e, i, s;
-    this.host.enableTracking && this.host.trackingSource && (this.host.removeEventListener("vouch:loaded", this._handleVouchLoaded), (t = this.host.mediaPlayer) == null || t.removeEventListener("play", this._handlePlay), (e = this.host.mediaPlayer) == null || e.removeEventListener("video:play", this._handleVideoPlay), (i = this.host.mediaPlayer) == null || i.removeEventListener("video:pause", this._handleVideoPause), (s = this.host.mediaPlayer) == null || s.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate));
+    var _a, _b, _c, _d;
+    this._pageUnloading();
+    if ("onvisibilitychange" in document) {
+      document.removeEventListener("visibilitychange", this._handleVisibilityChange);
+    } else {
+      window.removeEventListener("pagehide", this._handlePageHide);
+    }
+    this.host.removeEventListener("vouch:loaded", this._handleVouchLoaded);
+    (_a = this.host.mediaPlayer) == null ? void 0 : _a.removeEventListener("play", this._handlePlay);
+    (_b = this.host.mediaPlayer) == null ? void 0 : _b.removeEventListener("video:play", this._handleVideoPlay);
+    (_c = this.host.mediaPlayer) == null ? void 0 : _c.removeEventListener("video:pause", this._handleVideoPause);
+    (_d = this.host.mediaPlayer) == null ? void 0 : _d.removeEventListener("video:timeupdate", this._handleVideoTimeUpdate);
   }
 }
-var Ze = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, g = (n, t, e, i) => {
-  for (var s = i > 1 ? void 0 : i ? Fe(t, e) : t, o = n.length - 1, r; o >= 0; o--)
-    (r = n[o]) && (s = (i ? r(t, e, s) : r(s)) || s);
-  return i && s && Ze(t, e, s), s;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$3(target, key, result);
+  return result;
 };
-let m = class extends L {
+let PlayerEmbed = class extends LitElement {
   constructor() {
-    super(...arguments), this._mediaPlayerRef = Lt(), this.env = "prod", this.apiKey = "", this.preload = "auto", this.autoplay = !1, this.enableTracking = !1, this.trackingSource = "media_player", this.resolution = 1080, this.aspectRatio = 0, this.fetching = !1, this.eventController = new Ue(this, [
+    super(...arguments);
+    this.env = "prod";
+    this.apiKey = "";
+    this.disableTracking = false;
+    this.trackingSource = "embedded_player";
+    this.preload = "auto";
+    this.autoplay = false;
+    this.aspectRatio = 0;
+    this.eventController = new EventForwardController(this, [
       "durationchange",
       "ended",
       "error",
@@ -1049,6 +565,7 @@ let m = class extends L {
       "volumechange",
       "waiting",
       "video:loadeddata",
+      "video:seeking",
       "video:seeked",
       "video:play",
       "video:playing",
@@ -1057,150 +574,570 @@ let m = class extends L {
       "video:timeupdate",
       "video:ended",
       "video:error"
-    ]), this.trackingController = new Ke(this), this.fetcherController = new De(this);
+    ]);
+    this._fetcherController = new FetcherController(this);
+    this._trackingController = new TrackingController(this);
+    this._mediaPlayerRef = createRef();
+  }
+  get fetching() {
+    return this._fetcherController.fetching;
   }
   get waiting() {
-    var n;
-    return (n = this._mediaPlayerRef.value) == null ? void 0 : n.waiting;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.waiting;
+  }
+  get initialised() {
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.initialised;
   }
   get seeking() {
-    var n;
-    return (n = this._mediaPlayerRef.value) == null ? void 0 : n.seeking;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.seeking;
   }
   get paused() {
-    var n;
-    return (n = this._mediaPlayerRef.value) == null ? void 0 : n.paused;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.paused;
   }
   get captions() {
-    var n;
-    return (n = this._mediaPlayerRef.value) == null ? void 0 : n.captions;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.captions;
   }
   get fullscreen() {
-    var n;
-    return (n = this._mediaPlayerRef.value) == null ? void 0 : n.fullscreen;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.fullscreen;
   }
   get duration() {
-    var n;
-    return (n = this._mediaPlayerRef.value) == null ? void 0 : n.duration;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.duration;
   }
-  set currentTime(n) {
-    this._mediaPlayerRef.value && (this._mediaPlayerRef.value.currentTime = n);
+  set currentTime(value) {
+    if (this._mediaPlayerRef.value) {
+      this._mediaPlayerRef.value.currentTime = value;
+    }
   }
   get currentTime() {
-    var n;
-    return ((n = this._mediaPlayerRef.value) == null ? void 0 : n.currentTime) ?? 0;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.currentTime) ?? 0;
   }
-  set playbackRate(n) {
-    this._mediaPlayerRef.value && (this._mediaPlayerRef.value.playbackRate = n);
+  set playbackRate(value) {
+    if (this._mediaPlayerRef.value) {
+      this._mediaPlayerRef.value.playbackRate = value;
+    }
   }
   get playbackRate() {
-    var n;
-    return ((n = this._mediaPlayerRef.value) == null ? void 0 : n.playbackRate) ?? 1;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.playbackRate) ?? 1;
   }
-  set volume(n) {
-    this._mediaPlayerRef.value && (this._mediaPlayerRef.value.volume = n);
+  set volume(value) {
+    if (this._mediaPlayerRef.value) {
+      this._mediaPlayerRef.value.volume = value;
+    }
   }
   get volume() {
-    var n;
-    return ((n = this._mediaPlayerRef.value) == null ? void 0 : n.volume) ?? 1;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.volume) ?? 1;
   }
-  set muted(n) {
-    this._mediaPlayerRef.value && (this._mediaPlayerRef.value.muted = n);
+  set muted(value) {
+    if (this._mediaPlayerRef.value) {
+      this._mediaPlayerRef.value.muted = value;
+    }
   }
   get muted() {
-    var n;
-    return ((n = this._mediaPlayerRef.value) == null ? void 0 : n.muted) ?? !1;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.muted) ?? false;
   }
   get scene() {
-    var n;
-    return ((n = this._mediaPlayerRef.value) == null ? void 0 : n.scene) ?? null;
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.scene) ?? null;
   }
   get scenes() {
-    var n;
-    return ((n = this._mediaPlayerRef.value) == null ? void 0 : n.scenes) ?? [];
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.scenes) ?? [];
+  }
+  get sceneConfig() {
+    var _a;
+    return ((_a = this._mediaPlayerRef.value) == null ? void 0 : _a.sceneConfig) ?? null;
   }
   get videoState() {
-    var n;
-    return (n = this._mediaPlayerRef.value) == null ? void 0 : n.videoState;
+    var _a;
+    return (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.videoState;
   }
   get mediaPlayer() {
     return this._mediaPlayerRef.value;
   }
   play() {
-    var n;
-    (n = this._mediaPlayerRef.value) == null || n.play();
+    var _a;
+    (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.play();
   }
   pause() {
-    var n;
-    (n = this._mediaPlayerRef.value) == null || n.pause();
-  }
-  setScene(n) {
-    var t;
-    (t = this._mediaPlayerRef.value) == null || t.setScene(n);
+    var _a;
+    (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.pause();
+  }
+  reset(time = 0, play = false) {
+    var _a;
+    (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.reset(time, play);
+  }
+  setScene(index) {
+    var _a;
+    (_a = this._mediaPlayerRef.value) == null ? void 0 : _a.setScene(index);
+  }
+  _renderStyles() {
+    if (!this.aspectRatio) {
+      return html`
+        <style>
+          :host {
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+      `;
+    }
+    if (typeof this.aspectRatio === "number") {
+      return html`
+        <style>
+          :host {
+            aspect-ratio: ${this.aspectRatio};
+          }
+        </style>
+      `;
+    }
+    return null;
   }
   render() {
-    return me`
+    return html`
+      ${this._renderStyles()}
       <vmp-media-player
-        ${Dt(this._mediaPlayerRef)}
+        ${ref(this._mediaPlayerRef)}
         ${this.eventController.register()}
         ?autoplay=${this.autoplay}
         ?loading=${this.fetching}
-        .data=${this.data}
-        .instance=${this.instance}
-        resolution=${tt(this.resolution)}
-        aspectRatio=${tt(this.aspectRatio)}
-        preload=${tt(this.preload)}
+        .data=${this.vouch}
+        .template=${this.template}
+        aspectRatio=${ifDefined(this.aspectRatio)}
+        preload=${ifDefined(this.preload)}
         .controls=${this.controls}
       ></vmp-media-player>
     `;
   }
 };
-g([
-  y({ type: Object, attribute: "data" })
-], m.prototype, "propData", 2);
-g([
-  y({ type: String })
-], m.prototype, "vouchHashId", 2);
-g([
-  y({ type: String })
-], m.prototype, "env", 2);
-g([
-  y({ type: String })
-], m.prototype, "apiKey", 2);
-g([
-  y({ type: String })
-], m.prototype, "preload", 2);
-g([
-  y({ type: Boolean })
-], m.prototype, "autoplay", 2);
-g([
-  y({ type: Boolean })
-], m.prototype, "enableTracking", 2);
-g([
-  y({ type: String })
-], m.prototype, "trackingSource", 2);
-g([
-  y({ type: Number })
-], m.prototype, "resolution", 2);
-g([
-  y({ type: Number })
-], m.prototype, "aspectRatio", 2);
-g([
-  y({ type: Array })
-], m.prototype, "controls", 2);
-g([
-  $t()
-], m.prototype, "data", 2);
-g([
-  $t()
-], m.prototype, "instance", 2);
-g([
-  $t()
-], m.prototype, "fetching", 2);
-m = g([
-  Qt("vouch-embed")
-], m);
+PlayerEmbed.styles = [
+  css`
+      :host {
+        display: flex;
+      }
+    `
+];
+__decorateClass$3([
+  property({ type: Object })
+], PlayerEmbed.prototype, "data", 2);
+__decorateClass$3([
+  property({ type: String })
+], PlayerEmbed.prototype, "vouchId", 2);
+__decorateClass$3([
+  property({ type: String })
+], PlayerEmbed.prototype, "templateId", 2);
+__decorateClass$3([
+  property({ type: Array })
+], PlayerEmbed.prototype, "questions", 2);
+__decorateClass$3([
+  property({ type: String })
+], PlayerEmbed.prototype, "env", 2);
+__decorateClass$3([
+  property({ type: String })
+], PlayerEmbed.prototype, "apiKey", 2);
+__decorateClass$3([
+  property({ type: Boolean })
+], PlayerEmbed.prototype, "disableTracking", 2);
+__decorateClass$3([
+  property({ type: String })
+], PlayerEmbed.prototype, "trackingSource", 2);
+__decorateClass$3([
+  property({ type: Array })
+], PlayerEmbed.prototype, "controls", 2);
+__decorateClass$3([
+  property({ type: String })
+], PlayerEmbed.prototype, "preload", 2);
+__decorateClass$3([
+  property({ type: Boolean })
+], PlayerEmbed.prototype, "autoplay", 2);
+__decorateClass$3([
+  property({ type: Number })
+], PlayerEmbed.prototype, "aspectRatio", 2);
+__decorateClass$3([
+  state()
+], PlayerEmbed.prototype, "vouch", 2);
+__decorateClass$3([
+  state()
+], PlayerEmbed.prototype, "template", 2);
+PlayerEmbed = __decorateClass$3([
+  customElement("vouch-embed-player")
+], PlayerEmbed);
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$2(target, key, result);
+  return result;
+};
+let DialogOverlay = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.aspectRatio = 0;
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      container: true,
+      hidden: !this.open
+    })}
+      >
+        <div
+          class="background"
+          @click=${() => this.dispatchEvent(new CustomEvent("overlay:click", { bubbles: true, composed: true }))}
+        ></div>
+        <focus-trap>
+          <div
+            class=${classMap({
+      "video-frame": true,
+      grow: this.aspectRatio === 0
+    })}
+            style=${styleMap({
+      aspectRatio: this.aspectRatio
+    })}
+          >
+            <slot></slot>
+            <vmp-icon-button
+              icon="close"
+              rounded="full"
+              weight="heavy"
+              @click=${() => this.dispatchEvent(new CustomEvent("close:click", { bubbles: true, composed: true }))}
+            ></vmp-icon-button>
+          </div>
+        </focus-trap>
+      </div>
+    `;
+  }
+};
+DialogOverlay.styles = [
+  css`
+      :host {
+        --vouch-media-player-border-radius: var(--vu-media-player-border-radius, 12px);
+        --overlay-background-color: var(--vu-overlay-background-color, black);
+        --overlay-background-opacity: var(--vu-overlay-background-opacity, 0.4);
+
+        --dialog-width: var(--vu-dialog-width, 890px);
+        --dialog-height: var(--vu-dialog-height, 500px);
+      }
+
+      .container {
+        position: fixed;
+        display: flex;
+        inset: 0;
+        opacity: 1;
+        z-index: 2147483647;
+        align-items: center;
+        justify-content: center;
+        transition: opacity 100ms ease-in;
+      }
+
+      .hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .background {
+        position: absolute;
+        inset: 0;
+        opacity: var(--overlay-background-opacity);
+        background-color: var(--overlay-background-color);
+      }
+
+      focus-trap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 40px;
+        width: var(--dialog-width);
+        height: var(--dialog-height);
+        max-width: calc(100% - 80px);
+        max-height: calc(100% - 80px);
+      }
+
+      .video-frame {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      .video-frame.grow {
+        width: 100%;
+        height: 100%;
+      }
+
+      vmp-icon-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 10px;
+      }
+    `
+];
+__decorateClass$2([
+  property({ type: Boolean })
+], DialogOverlay.prototype, "open", 2);
+__decorateClass$2([
+  property({ type: Number })
+], DialogOverlay.prototype, "aspectRatio", 2);
+DialogOverlay = __decorateClass$2([
+  customElement("vouch-embed-dialog-overlay")
+], DialogOverlay);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+let DialogPortal = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.env = "prod";
+    this.apiKey = "";
+    this.disableTracking = false;
+    this.trackingSource = "embedded_player";
+    this.preload = "none";
+    this.disableAutoplay = false;
+    this.aspectRatio = 0;
+    this._mediaPlayerRef = createRef();
+    this.open = false;
+    this._handleToggle = ({ detail }) => {
+      var _a, _b, _c;
+      if (this.id === detail) {
+        this.open = !this.open;
+        if (this.open) {
+          if (!this.disableAutoplay && ((_a = this._mediaPlayerRef) == null ? void 0 : _a.value)) {
+            this._mediaPlayerRef.value.muted = false;
+            this._mediaPlayerRef.value.play();
+          }
+        } else {
+          (_c = (_b = this._mediaPlayerRef) == null ? void 0 : _b.value) == null ? void 0 : _c.pause();
+        }
+      }
+    };
+    this._handleClose = () => {
+      var _a, _b;
+      this.open = false;
+      (_b = (_a = this._mediaPlayerRef) == null ? void 0 : _a.value) == null ? void 0 : _b.pause();
+    };
+    this._handleDocumentKeyUp = (e) => {
+      if (e.key === "Escape") {
+        this._handleClose();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("dialogembed:click", this._handleToggle);
+    document.addEventListener("keyup", this._handleDocumentKeyUp);
+    document.addEventListener("close:click", this._handleClose);
+    document.addEventListener("overlay:click", this._handleClose);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("dialogembed:click", this._handleToggle);
+    document.removeEventListener("keyup", this._handleDocumentKeyUp);
+    document.removeEventListener("close:click", this._handleClose);
+    document.removeEventListener("overlay:click", this._handleClose);
+  }
+  createRenderRoot() {
+    const newNode = document.createElement("div");
+    document.body.appendChild(newNode);
+    return newNode;
+  }
+  render() {
+    return html`
+      <vouch-embed-dialog-overlay ?open=${this.open} aspectRatio=${this.aspectRatio}>
+        <vouch-embed-player
+          ${ref(this._mediaPlayerRef)}
+          style=${styleMap({
+      maxWidth: "100%",
+      maxHeight: "100%"
+    })}
+          ?autoplay=${false}
+          vouchId=${ifDefined(this.vouchId)}
+          templateId=${ifDefined(this.templateId)}
+          .questions=${this.questions}
+          .controls=${this.controls}
+          env=${ifDefined(this.env)}
+          apiKey=${ifDefined(this.apiKey)}
+          ?disableTracking=${this.disableTracking}
+          trackingSource=${ifDefined(this.trackingSource)}
+          preload=${ifDefined(this.preload)}
+          aspectRatio=${this.aspectRatio}
+        ></vouch-embed-player>
+      </vouch-embed-dialog-overlay>
+    `;
+  }
+};
+__decorateClass$1([
+  property({ type: String })
+], DialogPortal.prototype, "vouchId", 2);
+__decorateClass$1([
+  property({ type: String })
+], DialogPortal.prototype, "templateId", 2);
+__decorateClass$1([
+  property({ type: Array })
+], DialogPortal.prototype, "questions", 2);
+__decorateClass$1([
+  property({ type: String })
+], DialogPortal.prototype, "env", 2);
+__decorateClass$1([
+  property({ type: String })
+], DialogPortal.prototype, "apiKey", 2);
+__decorateClass$1([
+  property({ type: Boolean })
+], DialogPortal.prototype, "disableTracking", 2);
+__decorateClass$1([
+  property({ type: String })
+], DialogPortal.prototype, "trackingSource", 2);
+__decorateClass$1([
+  property({ type: Array })
+], DialogPortal.prototype, "controls", 2);
+__decorateClass$1([
+  property({ type: String })
+], DialogPortal.prototype, "preload", 2);
+__decorateClass$1([
+  property({ type: Boolean })
+], DialogPortal.prototype, "disableAutoplay", 2);
+__decorateClass$1([
+  property({ type: Number })
+], DialogPortal.prototype, "aspectRatio", 2);
+__decorateClass$1([
+  state()
+], DialogPortal.prototype, "open", 2);
+DialogPortal = __decorateClass$1([
+  customElement("vouch-embed-dialog-portal")
+], DialogPortal);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let DialogEmbed = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.env = "prod";
+    this.apiKey = "";
+    this.disableTracking = false;
+    this.trackingSource = "embedded_player";
+    this.preload = "none";
+    this.disableAutoplay = false;
+    this.aspectRatio = 0;
+    this._id = v4();
+    this._handleRootClick = () => {
+      this.dispatchEvent(new CustomEvent("dialogembed:click", { detail: this._id, bubbles: true, composed: true }));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._handleRootClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._handleRootClick);
+  }
+  render() {
+    return html`
+      <slot>
+        <vmp-button size="large">Play</vmp-button>
+      </slot>
+      <vouch-embed-dialog-portal
+        id=${this._id}
+        ?autoplay=${false}
+        vouchId=${ifDefined(this.vouchId)}
+        templateId=${ifDefined(this.templateId)}
+        .questions=${this.questions}
+        .controls=${this.controls}
+        env=${ifDefined(this.env)}
+        apiKey=${ifDefined(this.apiKey)}
+        ?disableTracking=${this.disableTracking}
+        trackingSource=${ifDefined(this.trackingSource)}
+        preload=${ifDefined(this.preload)}
+        aspectRatio=${this.aspectRatio}
+      ></vouch-embed-dialog-portal>
+    `;
+  }
+};
+DialogEmbed.styles = [
+  css`
+      :host {
+        --vu-button-padding: 10px 20px;
+        --vu-button-background: #287179;
+        --vu-button-background-hover: #4faab2;
+
+        display: flex;
+        width: fit-content;
+        height: fit-content;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], DialogEmbed.prototype, "vouchId", 2);
+__decorateClass([
+  property({ type: String })
+], DialogEmbed.prototype, "templateId", 2);
+__decorateClass([
+  property({ type: Array })
+], DialogEmbed.prototype, "questions", 2);
+__decorateClass([
+  property({ type: String })
+], DialogEmbed.prototype, "env", 2);
+__decorateClass([
+  property({ type: String })
+], DialogEmbed.prototype, "apiKey", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DialogEmbed.prototype, "disableTracking", 2);
+__decorateClass([
+  property({ type: String })
+], DialogEmbed.prototype, "trackingSource", 2);
+__decorateClass([
+  property({ type: Array })
+], DialogEmbed.prototype, "controls", 2);
+__decorateClass([
+  property({ type: String })
+], DialogEmbed.prototype, "preload", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DialogEmbed.prototype, "disableAutoplay", 2);
+__decorateClass([
+  property({ type: Number })
+], DialogEmbed.prototype, "aspectRatio", 2);
+DialogEmbed = __decorateClass([
+  customElement("vouch-embed-dialog")
+], DialogEmbed);
 export {
-  m as Embed
+  DialogEmbed,
+  PlayerEmbed
 };
 //# sourceMappingURL=embeds.js.map