@appcues/web-sdk 7.15.0 → 7.16.0

package/build/index.COmFqR_V.js

@@ -0,0 +1,2137 @@
+import { c as ut, g as Ve, o as We, a as Ze, n as te, b as Fe } from "./index.MoDAiKcs.js";
+const pt = window, Vt = pt.ShadowRoot && (pt.ShadyCSS === void 0 || pt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Wt = /* @__PURE__ */ Symbol(), ee = /* @__PURE__ */ new WeakMap();
+let xe = class {
+  constructor(t, i, s) {
+    if (this._$cssResult$ = !0, s !== Wt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t, this.t = i;
+  }
+  get styleSheet() {
+    let t = this.o;
+    const i = this.t;
+    if (Vt && t === void 0) {
+      const s = i !== void 0 && i.length === 1;
+      s && (t = ee.get(i)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && ee.set(i, t));
+    }
+    return t;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const Je = (e) => new xe(typeof e == "string" ? e : e + "", void 0, Wt), $ = (e, ...t) => {
+  const i = e.length === 1 ? e[0] : t.reduce(((s, r, o) => s + ((n) => {
+    if (n._$cssResult$ === !0) return n.cssText;
+    if (typeof n == "number") return n;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(r) + e[o + 1]), e[0]);
+  return new xe(i, e, Wt);
+}, Xe = (e, t) => {
+  Vt ? e.adoptedStyleSheets = t.map(((i) => i instanceof CSSStyleSheet ? i : i.styleSheet)) : t.forEach(((i) => {
+    const s = document.createElement("style"), r = pt.litNonce;
+    r !== void 0 && s.setAttribute("nonce", r), s.textContent = i.cssText, e.appendChild(s);
+  }));
+}, ie = Vt ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
+  let i = "";
+  for (const s of t.cssRules) i += s.cssText;
+  return Je(i);
+})(e) : e;
+var Et;
+const gt = window, se = gt.trustedTypes, Ye = se ? se.emptyScript : "", re = gt.reactiveElementPolyfillSupport, Ot = { toAttribute(e, t) {
+  switch (t) {
+    case Boolean:
+      e = e ? Ye : null;
+      break;
+    case Object:
+    case Array:
+      e = e == null ? e : JSON.stringify(e);
+  }
+  return e;
+}, fromAttribute(e, t) {
+  let i = e;
+  switch (t) {
+    case Boolean:
+      i = e !== null;
+      break;
+    case Number:
+      i = e === null ? null : Number(e);
+      break;
+    case Object:
+    case Array:
+      try {
+        i = JSON.parse(e);
+      } catch {
+        i = null;
+      }
+  }
+  return i;
+} }, Zt = (e, t) => t !== e && (t == t || e == e), Tt = { attribute: !0, type: String, converter: Ot, reflect: !1, hasChanged: Zt }, jt = "finalized";
+let F = class extends HTMLElement {
+  constructor() {
+    super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this._$Eu();
+  }
+  static addInitializer(t) {
+    var i;
+    this.finalize(), ((i = this.h) !== null && i !== void 0 ? i : this.h = []).push(t);
+  }
+  static get observedAttributes() {
+    this.finalize();
+    const t = [];
+    return this.elementProperties.forEach(((i, s) => {
+      const r = this._$Ep(s, i);
+      r !== void 0 && (this._$Ev.set(r, s), t.push(r));
+    })), t;
+  }
+  static createProperty(t, i = Tt) {
+    if (i.state && (i.attribute = !1), this.finalize(), this.elementProperties.set(t, i), !i.noAccessor && !this.prototype.hasOwnProperty(t)) {
+      const s = typeof t == "symbol" ? /* @__PURE__ */ Symbol() : "__" + t, r = this.getPropertyDescriptor(t, s, i);
+      r !== void 0 && Object.defineProperty(this.prototype, t, r);
+    }
+  }
+  static getPropertyDescriptor(t, i, s) {
+    return { get() {
+      return this[i];
+    }, set(r) {
+      const o = this[t];
+      this[i] = r, this.requestUpdate(t, o, s);
+    }, configurable: !0, enumerable: !0 };
+  }
+  static getPropertyOptions(t) {
+    return this.elementProperties.get(t) || Tt;
+  }
+  static finalize() {
+    if (this.hasOwnProperty(jt)) return !1;
+    this[jt] = !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 i = this.properties, s = [...Object.getOwnPropertyNames(i), ...Object.getOwnPropertySymbols(i)];
+      for (const r of s) this.createProperty(r, i[r]);
+    }
+    return this.elementStyles = this.finalizeStyles(this.styles), !0;
+  }
+  static finalizeStyles(t) {
+    const i = [];
+    if (Array.isArray(t)) {
+      const s = new Set(t.flat(1 / 0).reverse());
+      for (const r of s) i.unshift(ie(r));
+    } else t !== void 0 && i.push(ie(t));
+    return i;
+  }
+  static _$Ep(t, i) {
+    const s = i.attribute;
+    return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
+  }
+  _$Eu() {
+    var t;
+    this._$E_ = new Promise(((i) => this.enableUpdating = i)), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), (t = this.constructor.h) === null || t === void 0 || t.forEach(((i) => i(this)));
+  }
+  addController(t) {
+    var i, s;
+    ((i = this._$ES) !== null && i !== void 0 ? i : this._$ES = []).push(t), this.renderRoot !== void 0 && this.isConnected && ((s = t.hostConnected) === null || s === void 0 || s.call(t));
+  }
+  removeController(t) {
+    var i;
+    (i = this._$ES) === null || i === void 0 || i.splice(this._$ES.indexOf(t) >>> 0, 1);
+  }
+  _$Eg() {
+    this.constructor.elementProperties.forEach(((t, i) => {
+      this.hasOwnProperty(i) && (this._$Ei.set(i, this[i]), delete this[i]);
+    }));
+  }
+  createRenderRoot() {
+    var t;
+    const i = (t = this.shadowRoot) !== null && t !== void 0 ? t : this.attachShadow(this.constructor.shadowRootOptions);
+    return Xe(i, this.constructor.elementStyles), i;
+  }
+  connectedCallback() {
+    var t;
+    this.renderRoot === void 0 && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$ES) === null || t === void 0 || t.forEach(((i) => {
+      var s;
+      return (s = i.hostConnected) === null || s === void 0 ? void 0 : s.call(i);
+    }));
+  }
+  enableUpdating(t) {
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this._$ES) === null || t === void 0 || t.forEach(((i) => {
+      var s;
+      return (s = i.hostDisconnected) === null || s === void 0 ? void 0 : s.call(i);
+    }));
+  }
+  attributeChangedCallback(t, i, s) {
+    this._$AK(t, s);
+  }
+  _$EO(t, i, s = Tt) {
+    var r;
+    const o = this.constructor._$Ep(t, s);
+    if (o !== void 0 && s.reflect === !0) {
+      const n = (((r = s.converter) === null || r === void 0 ? void 0 : r.toAttribute) !== void 0 ? s.converter : Ot).toAttribute(i, s.type);
+      this._$El = t, n == null ? this.removeAttribute(o) : this.setAttribute(o, n), this._$El = null;
+    }
+  }
+  _$AK(t, i) {
+    var s;
+    const r = this.constructor, o = r._$Ev.get(t);
+    if (o !== void 0 && this._$El !== o) {
+      const n = r.getPropertyOptions(o), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((s = n.converter) === null || s === void 0 ? void 0 : s.fromAttribute) !== void 0 ? n.converter : Ot;
+      this._$El = o, this[o] = l.fromAttribute(i, n.type), this._$El = null;
+    }
+  }
+  requestUpdate(t, i, s) {
+    let r = !0;
+    t !== void 0 && (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || Zt)(this[t], i) ? (this._$AL.has(t) || this._$AL.set(t, i), s.reflect === !0 && this._$El !== t && (this._$EC === void 0 && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t, s))) : r = !1), !this.isUpdatePending && r && (this._$E_ = this._$Ej());
+  }
+  async _$Ej() {
+    this.isUpdatePending = !0;
+    try {
+      await this._$E_;
+    } catch (i) {
+      Promise.reject(i);
+    }
+    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(((r, o) => this[o] = r)), this._$Ei = void 0);
+    let i = !1;
+    const s = this._$AL;
+    try {
+      i = this.shouldUpdate(s), i ? (this.willUpdate(s), (t = this._$ES) === null || t === void 0 || t.forEach(((r) => {
+        var o;
+        return (o = r.hostUpdate) === null || o === void 0 ? void 0 : o.call(r);
+      })), this.update(s)) : this._$Ek();
+    } catch (r) {
+      throw i = !1, this._$Ek(), r;
+    }
+    i && this._$AE(s);
+  }
+  willUpdate(t) {
+  }
+  _$AE(t) {
+    var i;
+    (i = this._$ES) === null || i === void 0 || i.forEach(((s) => {
+      var r;
+      return (r = s.hostUpdated) === null || r === void 0 ? void 0 : r.call(s);
+    })), 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(((i, s) => this._$EO(s, this[s], i))), this._$EC = void 0), this._$Ek();
+  }
+  updated(t) {
+  }
+  firstUpdated(t) {
+  }
+};
+F[jt] = !0, F.elementProperties = /* @__PURE__ */ new Map(), F.elementStyles = [], F.shadowRootOptions = { mode: "open" }, re?.({ ReactiveElement: F }), ((Et = gt.reactiveElementVersions) !== null && Et !== void 0 ? Et : gt.reactiveElementVersions = []).push("1.6.3");
+var It;
+const vt = window, J = vt.trustedTypes, ne = J ? J.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, zt = "$lit$", I = `lit$${(Math.random() + "").slice(9)}$`, Ae = "?" + I, Ke = `<${Ae}>`, O = document, nt = () => O.createComment(""), ot = (e) => e === null || typeof e != "object" && typeof e != "function", ke = Array.isArray, Ge = (e) => ke(e) || typeof e?.[Symbol.iterator] == "function", Ht = `[ 	
+\f\r]`, it = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, oe = /-->/g, ae = />/g, M = RegExp(`>|${Ht}(?:([^\\s"'>=/]+)(${Ht}*=${Ht}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), le = /'/g, he = /"/g, Ce = /^(?:script|style|textarea|title)$/i, Se = (e) => (t, ...i) => ({ _$litType$: e, strings: t, values: i }), w = Se(1), Ee = Se(2), j = /* @__PURE__ */ Symbol.for("lit-noChange"), m = /* @__PURE__ */ Symbol.for("lit-nothing"), ce = /* @__PURE__ */ new WeakMap(), R = O.createTreeWalker(O, 129, null, !1);
+function Te(e, t) {
+  if (!Array.isArray(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return ne !== void 0 ? ne.createHTML(t) : t;
+}
+const Qe = (e, t) => {
+  const i = e.length - 1, s = [];
+  let r, o = t === 2 ? "<svg>" : "", n = it;
+  for (let l = 0; l < i; l++) {
+    const a = e[l];
+    let c, h, d = -1, p = 0;
+    for (; p < a.length && (n.lastIndex = p, h = n.exec(a), h !== null); ) p = n.lastIndex, n === it ? h[1] === "!--" ? n = oe : h[1] !== void 0 ? n = ae : h[2] !== void 0 ? (Ce.test(h[2]) && (r = RegExp("</" + h[2], "g")), n = M) : h[3] !== void 0 && (n = M) : n === M ? h[0] === ">" ? (n = r ?? it, d = -1) : h[1] === void 0 ? d = -2 : (d = n.lastIndex - h[2].length, c = h[1], n = h[3] === void 0 ? M : h[3] === '"' ? he : le) : n === he || n === le ? n = M : n === oe || n === ae ? n = it : (n = M, r = void 0);
+    const y = n === M && e[l + 1].startsWith("/>") ? " " : "";
+    o += n === it ? a + Ke : d >= 0 ? (s.push(c), a.slice(0, d) + zt + a.slice(d) + I + y) : a + I + (d === -2 ? (s.push(void 0), l) : y);
+  }
+  return [Te(e, o + (e[i] || "<?>") + (t === 2 ? "</svg>" : "")), s];
+};
+let Bt = class Ie {
+  constructor({ strings: t, _$litType$: i }, s) {
+    let r;
+    this.parts = [];
+    let o = 0, n = 0;
+    const l = t.length - 1, a = this.parts, [c, h] = Qe(t, i);
+    if (this.el = Ie.createElement(c, s), R.currentNode = this.el.content, i === 2) {
+      const d = this.el.content, p = d.firstChild;
+      p.remove(), d.append(...p.childNodes);
+    }
+    for (; (r = R.nextNode()) !== null && a.length < l; ) {
+      if (r.nodeType === 1) {
+        if (r.hasAttributes()) {
+          const d = [];
+          for (const p of r.getAttributeNames()) if (p.endsWith(zt) || p.startsWith(I)) {
+            const y = h[n++];
+            if (d.push(p), y !== void 0) {
+              const S = r.getAttribute(y.toLowerCase() + zt).split(I), E = /([.?@])?(.*)/.exec(y);
+              a.push({ type: 1, index: o, name: E[2], strings: S, ctor: E[1] === "." ? ei : E[1] === "?" ? si : E[1] === "@" ? ri : bt });
+            } else a.push({ type: 6, index: o });
+          }
+          for (const p of d) r.removeAttribute(p);
+        }
+        if (Ce.test(r.tagName)) {
+          const d = r.textContent.split(I), p = d.length - 1;
+          if (p > 0) {
+            r.textContent = J ? J.emptyScript : "";
+            for (let y = 0; y < p; y++) r.append(d[y], nt()), R.nextNode(), a.push({ type: 2, index: ++o });
+            r.append(d[p], nt());
+          }
+        }
+      } else if (r.nodeType === 8) if (r.data === Ae) a.push({ type: 2, index: o });
+      else {
+        let d = -1;
+        for (; (d = r.data.indexOf(I, d + 1)) !== -1; ) a.push({ type: 7, index: o }), d += I.length - 1;
+      }
+      o++;
+    }
+  }
+  static createElement(t, i) {
+    const s = O.createElement("template");
+    return s.innerHTML = t, s;
+  }
+};
+function X(e, t, i = e, s) {
+  var r, o, n, l;
+  if (t === j) return t;
+  let a = s !== void 0 ? (r = i._$Co) === null || r === void 0 ? void 0 : r[s] : i._$Cl;
+  const c = ot(t) ? void 0 : t._$litDirective$;
+  return a?.constructor !== c && ((o = a?._$AO) === null || o === void 0 || o.call(a, !1), c === void 0 ? a = void 0 : (a = new c(e), a._$AT(e, i, s)), s !== void 0 ? ((n = (l = i)._$Co) !== null && n !== void 0 ? n : l._$Co = [])[s] = a : i._$Cl = a), a !== void 0 && (t = X(e, a._$AS(e, t.values), a, s)), t;
+}
+class ti {
+  constructor(t, i) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t) {
+    var i;
+    const { el: { content: s }, parts: r } = this._$AD, o = ((i = t?.creationScope) !== null && i !== void 0 ? i : O).importNode(s, !0);
+    R.currentNode = o;
+    let n = R.nextNode(), l = 0, a = 0, c = r[0];
+    for (; c !== void 0; ) {
+      if (l === c.index) {
+        let h;
+        c.type === 2 ? h = new Ft(n, n.nextSibling, this, t) : c.type === 1 ? h = new c.ctor(n, c.name, c.strings, this, t) : c.type === 6 && (h = new ni(n, this, t)), this._$AV.push(h), c = r[++a];
+      }
+      l !== c?.index && (n = R.nextNode(), l++);
+    }
+    return R.currentNode = O, o;
+  }
+  v(t) {
+    let i = 0;
+    for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
+  }
+}
+let Ft = class He {
+  constructor(t, i, s, r) {
+    var o;
+    this.type = 2, this._$AH = m, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = r, this._$Cp = (o = r?.isConnected) === null || o === void 0 || o;
+  }
+  get _$AU() {
+    var t, i;
+    return (i = (t = this._$AM) === null || t === void 0 ? void 0 : t._$AU) !== null && i !== void 0 ? i : this._$Cp;
+  }
+  get parentNode() {
+    let t = this._$AA.parentNode;
+    const i = this._$AM;
+    return i !== void 0 && t?.nodeType === 11 && (t = i.parentNode), t;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t, i = this) {
+    t = X(this, t, i), ot(t) ? t === m || t == null || t === "" ? (this._$AH !== m && this._$AR(), this._$AH = m) : t !== this._$AH && t !== j && this._(t) : t._$litType$ !== void 0 ? this.g(t) : t.nodeType !== void 0 ? this.$(t) : Ge(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 !== m && ot(this._$AH) ? this._$AA.nextSibling.data = t : this.$(O.createTextNode(t)), this._$AH = t;
+  }
+  g(t) {
+    var i;
+    const { values: s, _$litType$: r } = t, o = typeof r == "number" ? this._$AC(t) : (r.el === void 0 && (r.el = Bt.createElement(Te(r.h, r.h[0]), this.options)), r);
+    if (((i = this._$AH) === null || i === void 0 ? void 0 : i._$AD) === o) this._$AH.v(s);
+    else {
+      const n = new ti(o, this), l = n.u(this.options);
+      n.v(s), this.$(l), this._$AH = n;
+    }
+  }
+  _$AC(t) {
+    let i = ce.get(t.strings);
+    return i === void 0 && ce.set(t.strings, i = new Bt(t)), i;
+  }
+  T(t) {
+    ke(this._$AH) || (this._$AH = [], this._$AR());
+    const i = this._$AH;
+    let s, r = 0;
+    for (const o of t) r === i.length ? i.push(s = new He(this.k(nt()), this.k(nt()), this, this.options)) : s = i[r], s._$AI(o), r++;
+    r < i.length && (this._$AR(s && s._$AB.nextSibling, r), i.length = r);
+  }
+  _$AR(t = this._$AA.nextSibling, i) {
+    var s;
+    for ((s = this._$AP) === null || s === void 0 || s.call(this, !1, !0, i); t && t !== this._$AB; ) {
+      const r = t.nextSibling;
+      t.remove(), t = r;
+    }
+  }
+  setConnected(t) {
+    var i;
+    this._$AM === void 0 && (this._$Cp = t, (i = this._$AP) === null || i === void 0 || i.call(this, t));
+  }
+}, bt = class {
+  constructor(t, i, s, r, o) {
+    this.type = 1, this._$AH = m, this._$AN = void 0, this.element = t, this.name = i, this._$AM = r, this.options = o, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = m;
+  }
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t, i = this, s, r) {
+    const o = this.strings;
+    let n = !1;
+    if (o === void 0) t = X(this, t, i, 0), n = !ot(t) || t !== this._$AH && t !== j, n && (this._$AH = t);
+    else {
+      const l = t;
+      let a, c;
+      for (t = o[0], a = 0; a < o.length - 1; a++) c = X(this, l[s + a], i, a), c === j && (c = this._$AH[a]), n || (n = !ot(c) || c !== this._$AH[a]), c === m ? t = m : t !== m && (t += (c ?? "") + o[a + 1]), this._$AH[a] = c;
+    }
+    n && !r && this.j(t);
+  }
+  j(t) {
+    t === m ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+  }
+}, ei = class extends bt {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t) {
+    this.element[this.name] = t === m ? void 0 : t;
+  }
+};
+const ii = J ? J.emptyScript : "";
+let si = class extends bt {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t) {
+    t && t !== m ? this.element.setAttribute(this.name, ii) : this.element.removeAttribute(this.name);
+  }
+};
+class ri extends bt {
+  constructor(t, i, s, r, o) {
+    super(t, i, s, r, o), this.type = 5;
+  }
+  _$AI(t, i = this) {
+    var s;
+    if ((t = (s = X(this, t, i, 0)) !== null && s !== void 0 ? s : m) === j) return;
+    const r = this._$AH, o = t === m && r !== m || t.capture !== r.capture || t.once !== r.once || t.passive !== r.passive, n = t !== m && (r === m || o);
+    o && this.element.removeEventListener(this.name, this, r), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
+  }
+  handleEvent(t) {
+    var i, s;
+    typeof this._$AH == "function" ? this._$AH.call((s = (i = this.options) === null || i === void 0 ? void 0 : i.host) !== null && s !== void 0 ? s : this.element, t) : this._$AH.handleEvent(t);
+  }
+}
+let ni = class {
+  constructor(t, i, s) {
+    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t) {
+    X(this, t);
+  }
+};
+const de = vt.litHtmlPolyfillSupport;
+de?.(Bt, Ft), ((It = vt.litHtmlVersions) !== null && It !== void 0 ? It : vt.litHtmlVersions = []).push("2.8.0");
+const oi = (e, t, i) => {
+  var s, r;
+  const o = (s = i?.renderBefore) !== null && s !== void 0 ? s : t;
+  let n = o._$litPart$;
+  if (n === void 0) {
+    const l = (r = i?.renderBefore) !== null && r !== void 0 ? r : null;
+    o._$litPart$ = n = new Ft(t.insertBefore(nt(), l), l, void 0, i ?? {});
+  }
+  return n._$AI(e), n;
+};
+var Nt, Pt;
+class A extends F {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var t, i;
+    const s = super.createRenderRoot();
+    return (t = (i = this.renderOptions).renderBefore) !== null && t !== void 0 || (i.renderBefore = s.firstChild), s;
+  }
+  update(t) {
+    const i = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = oi(i, 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 j;
+  }
+}
+A.finalized = !0, A._$litElement$ = !0, (Nt = globalThis.litElementHydrateSupport) === null || Nt === void 0 || Nt.call(globalThis, { LitElement: A });
+const ue = globalThis.litElementPolyfillSupport;
+ue?.({ LitElement: A });
+((Pt = globalThis.litElementVersions) !== null && Pt !== void 0 ? Pt : globalThis.litElementVersions = []).push("3.3.3");
+const ai = (e, t) => t.kind === "method" && t.descriptor && !("value" in t.descriptor) ? { ...t, finisher(i) {
+  i.createProperty(t.key, e);
+} } : { kind: "field", key: /* @__PURE__ */ Symbol(), placement: "own", descriptor: {}, originalKey: t.key, initializer() {
+  typeof t.initializer == "function" && (this[t.key] = t.initializer.call(this));
+}, finisher(i) {
+  i.createProperty(t.key, e);
+} }, li = (e, t, i) => {
+  t.constructor.createProperty(i, e);
+};
+function v(e) {
+  return (t, i) => i !== void 0 ? li(e, t, i) : ai(e, t);
+}
+function N(e) {
+  return v({ ...e, state: !0 });
+}
+var Mt;
+((Mt = window.HTMLSlotElement) === null || Mt === void 0 ? void 0 : Mt.prototype.assignedElements) != null;
+const hi = { CHILD: 2 }, ci = (e) => (...t) => ({ _$litDirective$: e, values: t });
+let di = class {
+  constructor(t) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t, i, s) {
+    this._$Ct = t, this._$AM = i, this._$Ci = s;
+  }
+  _$AS(t, i) {
+    return this.update(t, i);
+  }
+  update(t, i) {
+    return this.render(...i);
+  }
+};
+class Dt extends di {
+  constructor(t) {
+    if (super(t), this.et = m, t.type !== hi.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(t) {
+    if (t === m || t == null) return this.ft = void 0, this.et = t;
+    if (t === j) return t;
+    if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (t === this.et) return this.ft;
+    this.et = t;
+    const i = [t];
+    return i.raw = i, this.ft = { _$litType$: this.constructor.resultType, strings: i, values: [] };
+  }
+}
+Dt.directiveName = "unsafeHTML", Dt.resultType = 1;
+const ui = ci(Dt);
+const pi = /* @__PURE__ */ Symbol();
+class gi {
+  get taskComplete() {
+    return this.t || (this.i === 1 ? this.t = new Promise(((t, i) => {
+      this.o = t, this.h = i;
+    })) : this.i === 3 ? this.t = Promise.reject(this.l) : this.t = Promise.resolve(this.u)), this.t;
+  }
+  constructor(t, i, s) {
+    this.p = 0, this.i = 0, (this._ = t).addController(this);
+    const r = typeof i == "object" ? i : { task: i, args: s };
+    this.v = r.task, this.j = r.args, this.m = r.argsEqual ?? vi, this.k = r.onComplete, this.A = r.onError, this.autoRun = r.autoRun ?? !0, "initialValue" in r && (this.u = r.initialValue, this.i = 2, this.O = this.T?.());
+  }
+  hostUpdate() {
+    this.autoRun === !0 && this.S();
+  }
+  hostUpdated() {
+    this.autoRun === "afterUpdate" && this.S();
+  }
+  T() {
+    if (this.j === void 0) return;
+    const t = this.j();
+    if (!Array.isArray(t)) throw Error("The args function must return an array");
+    return t;
+  }
+  async S() {
+    const t = this.T(), i = this.O;
+    this.O = t, t === i || t === void 0 || i !== void 0 && this.m(i, t) || await this.run(t);
+  }
+  async run(t) {
+    let i, s;
+    t ??= this.T(), this.O = t, this.i === 1 ? this.q?.abort() : (this.t = void 0, this.o = void 0, this.h = void 0), this.i = 1, this.autoRun === "afterUpdate" ? queueMicrotask((() => this._.requestUpdate())) : this._.requestUpdate();
+    const r = ++this.p;
+    this.q = new AbortController();
+    let o = !1;
+    try {
+      i = await this.v(t, { signal: this.q.signal });
+    } catch (n) {
+      o = !0, s = n;
+    }
+    if (this.p === r) {
+      if (i === pi) this.i = 0;
+      else {
+        if (o === !1) {
+          try {
+            this.k?.(i);
+          } catch {
+          }
+          this.i = 2, this.o?.(i);
+        } else {
+          try {
+            this.A?.(s);
+          } catch {
+          }
+          this.i = 3, this.h?.(s);
+        }
+        this.u = i, this.l = s;
+      }
+      this._.requestUpdate();
+    }
+  }
+  abort(t) {
+    this.i === 1 && this.q?.abort(t);
+  }
+  get value() {
+    return this.u;
+  }
+  get error() {
+    return this.l;
+  }
+  get status() {
+    return this.i;
+  }
+  render(t) {
+    switch (this.i) {
+      case 0:
+        return t.initial?.();
+      case 1:
+        return t.pending?.();
+      case 2:
+        return t.complete?.(this.value);
+      case 3:
+        return t.error?.(this.error);
+      default:
+        throw Error("Unexpected status: " + this.i);
+    }
+  }
+}
+const vi = (e, t) => e === t || e.length === t.length && e.every(((i, s) => !Zt(i, t[s])));
+var Ut, pe;
+function mi() {
+  if (pe) return Ut;
+  pe = 1;
+  var e = "Expected a function", t = NaN, i = "[object Symbol]", s = /^\s+|\s+$/g, r = /^[-+]0x[0-9a-f]+$/i, o = /^0b[01]+$/i, n = /^0o[0-7]+$/i, l = parseInt, a = typeof ut == "object" && ut && ut.Object === Object && ut, c = typeof self == "object" && self && self.Object === Object && self, h = a || c || Function("return this")(), d = Object.prototype, p = d.toString, y = Math.max, S = Math.min, E = function() {
+    return h.Date.now();
+  };
+  function Le(u, _, k) {
+    var W, G, ct, Z, x, P, Q = 0, Yt = !1, tt = !1, kt = !0;
+    if (typeof u != "function")
+      throw new TypeError(e);
+    _ = Xt(_) || 0, At(k) && (Yt = !!k.leading, tt = "maxWait" in k, ct = tt ? y(Xt(k.maxWait) || 0, _) : ct, kt = "trailing" in k ? !!k.trailing : kt);
+    function Ct(f) {
+      var T = W, et = G;
+      return W = G = void 0, Q = f, Z = u.apply(et, T), Z;
+    }
+    function ze(f) {
+      return Q = f, x = setTimeout(dt, _), Yt ? Ct(f) : Z;
+    }
+    function Be(f) {
+      var T = f - P, et = f - Q, Qt = _ - T;
+      return tt ? S(Qt, ct - et) : Qt;
+    }
+    function Kt(f) {
+      var T = f - P, et = f - Q;
+      return P === void 0 || T >= _ || T < 0 || tt && et >= ct;
+    }
+    function dt() {
+      var f = E();
+      if (Kt(f))
+        return Gt(f);
+      x = setTimeout(dt, Be(f));
+    }
+    function Gt(f) {
+      return x = void 0, kt && W ? Ct(f) : (W = G = void 0, Z);
+    }
+    function De() {
+      x !== void 0 && clearTimeout(x), Q = 0, W = P = G = x = void 0;
+    }
+    function qe() {
+      return x === void 0 ? Z : Gt(E());
+    }
+    function St() {
+      var f = E(), T = Kt(f);
+      if (W = arguments, G = this, P = f, T) {
+        if (x === void 0)
+          return ze(P);
+        if (tt)
+          return x = setTimeout(dt, _), Ct(P);
+      }
+      return x === void 0 && (x = setTimeout(dt, _)), Z;
+    }
+    return St.cancel = De, St.flush = qe, St;
+  }
+  function At(u) {
+    var _ = typeof u;
+    return !!u && (_ == "object" || _ == "function");
+  }
+  function Oe(u) {
+    return !!u && typeof u == "object";
+  }
+  function je(u) {
+    return typeof u == "symbol" || Oe(u) && p.call(u) == i;
+  }
+  function Xt(u) {
+    if (typeof u == "number")
+      return u;
+    if (je(u))
+      return t;
+    if (At(u)) {
+      var _ = typeof u.valueOf == "function" ? u.valueOf() : u;
+      u = At(_) ? _ + "" : _;
+    }
+    if (typeof u != "string")
+      return u === 0 ? u : +u;
+    u = u.replace(s, "");
+    var k = o.test(u);
+    return k || n.test(u) ? l(u.slice(2), k ? 2 : 8) : r.test(u) ? t : +u;
+  }
+  return Ut = Le, Ut;
+}
+var fi = mi();
+const $i = /* @__PURE__ */ Ve(fi);
+var bi = Object.defineProperty, g = (e, t, i, s) => {
+  for (var r = void 0, o = e.length - 1, n; o >= 0; o--) (n = e[o]) && (r = n(t, i, r) || r);
+  return r && bi(t, i, r), r;
+}, B = (e = "", t) => {
+  customElements.get(e) || customElements.define(e, t);
+}, ge = (e, t) => [...e].reduce((i, s) => t?.skip?.includes(s.name) ? i : `${i}${s.name}="${s.value}" `, ""), ht = class extends A {
+  constructor() {
+    super(...arguments), this.name = "", this.fallbackTag = null, this.defaultStyle = null, this.refElement = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    let e = this;
+    for (; e.parentNode; )
+      e = e.parentNode;
+    if (this.refElement = e.host.querySelector(`[refElement="${this.name}"]`), this.refElement && this.fallbackTag !== null && this.refElement.tagName.toLowerCase() !== this.fallbackTag)
+      throw new Error(`Your html tag to customize ${this.name} should be <${this.fallbackTag}></<${this.fallbackTag}>`);
+  }
+  render() {
+    const e = ge(this.attributes, { skip: ["name", "fallbacktag"] }), t = ge(this.refElement?.attributes ?? []);
+    return w`${ui(`
+      <style>${this.defaultStyle}</style>
+      <${this.fallbackTag} ${e} ${t}>
+        <slot></slot>
+      </${this.fallbackTag}>`)}`;
+  }
+};
+g([v()], ht.prototype, "name");
+g([v({ type: String || null })], ht.prototype, "fallbackTag");
+g([v({ type: String || null })], ht.prototype, "defaultStyle");
+g([v({ type: String || null })], ht.prototype, "refElement");
+B("appcues-use-ref", ht);
+var yi = () => {
+  let e = {};
+  const t = window.AppcuesSettings?.userIdSignature;
+  return t && (e = { Authorization: `Bearer ${t}` }), e;
+}, wi = async (e, t) => {
+  const i = yi();
+  return await fetch(e, { headers: i, ...t });
+}, _i = "https://api.appcues.net/v1/", xi = $`
+  .container {
+    background: #fff;
+    box-shadow: var(--flows-list-block-shadow);
+    border-radius: var(--flows-list-block-radius);
+    padding: 8px 0;
+    width: 100%;
+  }
+
+  .container .loading,
+  .container .error-message {
+    align-items: center;
+    color: var(--flows-list-block-color);
+    display: flex;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    justify-content: center;
+    line-height: 160%;
+    padding: 16px;
+    text-align: center;
+  }
+`, Ai = $`
+  slot[name='empty-message'],
+  ::slotted(p[slot='empty-message']) {
+    align-items: center;
+    color: var(--flows-list-block-color);
+    display: flex;
+    font-style: normal;
+    font-weight: 400;
+    justify-content: center;
+    line-height: 160%;
+    padding: 16px;
+    text-align: center;
+    font-size: 14px;
+  }
+`, ki = $`
+  ul {
+    list-style-type: square;
+    list-style-position: inside;
+    margin: 0;
+    padding: 0 4px;
+  }
+`, Ci = $`
+  li {
+    cursor: pointer;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%;
+    padding: 8px 16px;
+    border-radius: var(--flows-list-block-item-radius);
+    transition: background-color 0.3s ease 0s;
+  }
+
+  li:hover {
+    background-color: var(--flows-list-block-background-hover);
+  }
+
+  li::marker {
+    color: var(--flows-list-block-marker-color);
+  }
+
+  li:hover > span {
+    background-color: var(--flows-list-block-background-hover);
+  }
+
+  li > span {
+    color: var(--flows-list-block-color);
+  }
+
+  li appcues-use-ref {
+    display: inline-flex;
+    max-width: calc(100% - 20px);
+  }
+`, Si = $`
+  ::slotted(h1[slot='title']),
+  ::slotted(h2[slot='title']),
+  ::slotted(h3[slot='title']) {
+    color: var(--flows-list-block-color);
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 24px;
+    margin: 0 0 8px;
+    padding: 0 16px 0;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    max-height: 48px;
+    max-width: calc(100% - 32px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+`, Rt, mt = window, Y = mt.trustedTypes, ve = Y ? Y.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, qt = "$lit$", H = `lit$${(Math.random() + "").slice(9)}$`, Ne = "?" + H, Ei = `<${Ne}>`, z = document, ft = () => z.createComment(""), at = (e) => e === null || typeof e != "object" && typeof e != "function", Pe = Array.isArray, Ti = (e) => Pe(e) || typeof e?.[Symbol.iterator] == "function", Lt = `[ 	
+\f\r]`, st = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, me = /-->/g, fe = />/g, U = RegExp(`>|${Lt}(?:([^\\s"'>=/]+)(${Lt}*=${Lt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), $e = /'/g, be = /"/g, Me = /^(?:script|style|textarea|title)$/i, Ue = (e) => (t, ...i) => ({ _$litType$: e, strings: t, values: i }), rt = Ue(1), yt = Ue(2), lt = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), ye = /* @__PURE__ */ new WeakMap(), L = z.createTreeWalker(z, 129, null, !1);
+function Re(e, t) {
+  if (!Array.isArray(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return ve !== void 0 ? ve.createHTML(t) : t;
+}
+var Ii = (e, t) => {
+  const i = e.length - 1, s = [];
+  let r, o = t === 2 ? "<svg>" : "", n = st;
+  for (let l = 0; l < i; l++) {
+    const a = e[l];
+    let c, h, d = -1, p = 0;
+    for (; p < a.length && (n.lastIndex = p, h = n.exec(a), h !== null); ) p = n.lastIndex, n === st ? h[1] === "!--" ? n = me : h[1] !== void 0 ? n = fe : h[2] !== void 0 ? (Me.test(h[2]) && (r = RegExp("</" + h[2], "g")), n = U) : h[3] !== void 0 && (n = U) : n === U ? h[0] === ">" ? (n = r ?? st, d = -1) : h[1] === void 0 ? d = -2 : (d = n.lastIndex - h[2].length, c = h[1], n = h[3] === void 0 ? U : h[3] === '"' ? be : $e) : n === be || n === $e ? n = U : n === me || n === fe ? n = st : (n = U, r = void 0);
+    const y = n === U && e[l + 1].startsWith("/>") ? " " : "";
+    o += n === st ? a + Ei : d >= 0 ? (s.push(c), a.slice(0, d) + qt + a.slice(d) + H + y) : a + H + (d === -2 ? (s.push(void 0), l) : y);
+  }
+  return [Re(e, o + (e[i] || "<?>") + (t === 2 ? "</svg>" : "")), s];
+}, $t = class {
+  constructor({ strings: e, _$litType$: t }, i) {
+    let s;
+    this.parts = [];
+    let r = 0, o = 0;
+    const n = e.length - 1, l = this.parts, [a, c] = Ii(e, t);
+    if (this.el = $t.createElement(a, i), L.currentNode = this.el.content, t === 2) {
+      const h = this.el.content, d = h.firstChild;
+      d.remove(), h.append(...d.childNodes);
+    }
+    for (; (s = L.nextNode()) !== null && l.length < n; ) {
+      if (s.nodeType === 1) {
+        if (s.hasAttributes()) {
+          const h = [];
+          for (const d of s.getAttributeNames()) if (d.endsWith(qt) || d.startsWith(H)) {
+            const p = c[o++];
+            if (h.push(d), p !== void 0) {
+              const y = s.getAttribute(p.toLowerCase() + qt).split(H), S = /([.?@])?(.*)/.exec(p);
+              l.push({ type: 1, index: r, name: S[2], strings: y, ctor: S[1] === "." ? Ni : S[1] === "?" ? Mi : S[1] === "@" ? Ui : wt });
+            } else l.push({ type: 6, index: r });
+          }
+          for (const d of h) s.removeAttribute(d);
+        }
+        if (Me.test(s.tagName)) {
+          const h = s.textContent.split(H), d = h.length - 1;
+          if (d > 0) {
+            s.textContent = Y ? Y.emptyScript : "";
+            for (let p = 0; p < d; p++) s.append(h[p], ft()), L.nextNode(), l.push({ type: 2, index: ++r });
+            s.append(h[d], ft());
+          }
+        }
+      } else if (s.nodeType === 8) if (s.data === Ne) l.push({ type: 2, index: r });
+      else {
+        let h = -1;
+        for (; (h = s.data.indexOf(H, h + 1)) !== -1; ) l.push({ type: 7, index: r }), h += H.length - 1;
+      }
+      r++;
+    }
+  }
+  static createElement(e, t) {
+    const i = z.createElement("template");
+    return i.innerHTML = e, i;
+  }
+};
+function K(e, t, i = e, s) {
+  var r, o, n, l;
+  if (t === lt) return t;
+  let a = s !== void 0 ? (r = i._$Co) === null || r === void 0 ? void 0 : r[s] : i._$Cl;
+  const c = at(t) ? void 0 : t._$litDirective$;
+  return a?.constructor !== c && ((o = a?._$AO) === null || o === void 0 || o.call(a, !1), c === void 0 ? a = void 0 : (a = new c(e), a._$AT(e, i, s)), s !== void 0 ? ((n = (l = i)._$Co) !== null && n !== void 0 ? n : l._$Co = [])[s] = a : i._$Cl = a), a !== void 0 && (t = K(e, a._$AS(e, t.values), a, s)), t;
+}
+var Hi = class {
+  constructor(e, t) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(e) {
+    var t;
+    const { el: { content: i }, parts: s } = this._$AD, r = ((t = e?.creationScope) !== null && t !== void 0 ? t : z).importNode(i, !0);
+    L.currentNode = r;
+    let o = L.nextNode(), n = 0, l = 0, a = s[0];
+    for (; a !== void 0; ) {
+      if (n === a.index) {
+        let c;
+        a.type === 2 ? c = new Jt(o, o.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(o, a.name, a.strings, this, e) : a.type === 6 && (c = new Ri(o, this, e)), this._$AV.push(c), a = s[++l];
+      }
+      n !== a?.index && (o = L.nextNode(), n++);
+    }
+    return L.currentNode = z, r;
+  }
+  v(e) {
+    let t = 0;
+    for (const i of this._$AV) i !== void 0 && (i.strings !== void 0 ? (i._$AI(e, i, t), t += i.strings.length - 2) : i._$AI(e[t])), t++;
+  }
+}, Jt = class {
+  constructor(e, t, i, s) {
+    var r;
+    this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = s, this._$Cp = (r = s?.isConnected) === null || r === void 0 || r;
+  }
+  get _$AU() {
+    var e, t;
+    return (t = (e = this._$AM) === null || e === void 0 ? void 0 : e._$AU) !== null && t !== void 0 ? t : this._$Cp;
+  }
+  get parentNode() {
+    let e = this._$AA.parentNode;
+    const t = this._$AM;
+    return t !== void 0 && e?.nodeType === 11 && (e = t.parentNode), e;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(e, t = this) {
+    e = K(this, e, t), at(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== lt && this._(e) : e._$litType$ !== void 0 ? this.g(e) : e.nodeType !== void 0 ? this.$(e) : Ti(e) ? this.T(e) : this._(e);
+  }
+  k(e) {
+    return this._$AA.parentNode.insertBefore(e, this._$AB);
+  }
+  $(e) {
+    this._$AH !== e && (this._$AR(), this._$AH = this.k(e));
+  }
+  _(e) {
+    this._$AH !== b && at(this._$AH) ? this._$AA.nextSibling.data = e : this.$(z.createTextNode(e)), this._$AH = e;
+  }
+  g(e) {
+    var t;
+    const { values: i, _$litType$: s } = e, r = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = $t.createElement(Re(s.h, s.h[0]), this.options)), s);
+    if (((t = this._$AH) === null || t === void 0 ? void 0 : t._$AD) === r) this._$AH.v(i);
+    else {
+      const o = new Hi(r, this), n = o.u(this.options);
+      o.v(i), this.$(n), this._$AH = o;
+    }
+  }
+  _$AC(e) {
+    let t = ye.get(e.strings);
+    return t === void 0 && ye.set(e.strings, t = new $t(e)), t;
+  }
+  T(e) {
+    Pe(this._$AH) || (this._$AH = [], this._$AR());
+    const t = this._$AH;
+    let i, s = 0;
+    for (const r of e) s === t.length ? t.push(i = new Jt(this.k(ft()), this.k(ft()), this, this.options)) : i = t[s], i._$AI(r), s++;
+    s < t.length && (this._$AR(i && i._$AB.nextSibling, s), t.length = s);
+  }
+  _$AR(e = this._$AA.nextSibling, t) {
+    var i;
+    for ((i = this._$AP) === null || i === void 0 || i.call(this, !1, !0, t); e && e !== this._$AB; ) {
+      const s = e.nextSibling;
+      e.remove(), e = s;
+    }
+  }
+  setConnected(e) {
+    var t;
+    this._$AM === void 0 && (this._$Cp = e, (t = this._$AP) === null || t === void 0 || t.call(this, e));
+  }
+}, wt = class {
+  constructor(e, t, i, s, r) {
+    this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name = t, this._$AM = s, this.options = r, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = b;
+  }
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e, t = this, i, s) {
+    const r = this.strings;
+    let o = !1;
+    if (r === void 0) e = K(this, e, t, 0), o = !at(e) || e !== this._$AH && e !== lt, o && (this._$AH = e);
+    else {
+      const n = e;
+      let l, a;
+      for (e = r[0], l = 0; l < r.length - 1; l++) a = K(this, n[i + l], t, l), a === lt && (a = this._$AH[l]), o || (o = !at(a) || a !== this._$AH[l]), a === b ? e = b : e !== b && (e += (a ?? "") + r[l + 1]), this._$AH[l] = a;
+    }
+    o && !s && this.j(e);
+  }
+  j(e) {
+    e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+  }
+}, Ni = class extends wt {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(e) {
+    this.element[this.name] = e === b ? void 0 : e;
+  }
+}, Pi = Y ? Y.emptyScript : "", Mi = class extends wt {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(e) {
+    e && e !== b ? this.element.setAttribute(this.name, Pi) : this.element.removeAttribute(this.name);
+  }
+}, Ui = class extends wt {
+  constructor(e, t, i, s, r) {
+    super(e, t, i, s, r), this.type = 5;
+  }
+  _$AI(e, t = this) {
+    var i;
+    if ((e = (i = K(this, e, t, 0)) !== null && i !== void 0 ? i : b) === lt) return;
+    const s = this._$AH, r = e === b && s !== b || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, o = e !== b && (s === b || r);
+    r && this.element.removeEventListener(this.name, this, s), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
+  }
+  handleEvent(e) {
+    var t, i;
+    typeof this._$AH == "function" ? this._$AH.call((i = (t = this.options) === null || t === void 0 ? void 0 : t.host) !== null && i !== void 0 ? i : this.element, e) : this._$AH.handleEvent(e);
+  }
+}, Ri = class {
+  constructor(e, t, i) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = i;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e) {
+    K(this, e);
+  }
+}, we = mt.litHtmlPolyfillSupport;
+we?.($t, Jt), ((Rt = mt.litHtmlVersions) !== null && Rt !== void 0 ? Rt : mt.litHtmlVersions = []).push("2.8.0");
+var Li = yt`
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    width="40px"
+    height="40px"
+    fill="#0072D6"
+    viewBox="0 0 40 40"
+    enable-background="new 0 0 40 40"
+    xml:space="preserve"
+  >
+    <path
+      opacity="0.2"
+      fill="#0072D6"
+      d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+ s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+ c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
+    />
+    <path
+      fill="#0072D6"
+      d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+ C22.32,8.481,24.301,9.057,26.013,10.047z"
+    >
+      <animateTransform
+        attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0 20 20"
+        to="360 20 20"
+        keySplines="0.17 0.27 0.8 0.65"
+        calcMode="spline"
+        dur="0.6s"
+        repeatCount="indefinite"
+        keyTimes="0;1"
+      />
+    </path>
+  </svg>
+`, Oi = JSON.stringify([{ id: "1", name: "Item 1", publicName: "Item 1 public lorem ipsum dolor lorem impsum" }, { id: "2", name: "Item 2" }, { id: "3", name: "Item 3" }, { id: "4", name: "Item 4" }, { id: "5", name: "Item 5" }]), ji = async ({ accountId: e, userId: t }, i) => {
+  if (!e || !t)
+    return [];
+  const s = window.location.href, r = new URL(`${_i}/accounts/${e}/users/${t}/widget`);
+  return r.searchParams.set("url", s), r.searchParams.set("order_by", i), (await wi(r.toString())).json();
+}, D = class extends A {
+  constructor() {
+    super(...arguments), this.listItems = [], this.orderBy = "sort_order", this.limit = 5, this.listMock = Oi, this.mode = "live", this.fetchListItems = async () => {
+      if (this.mode === "preview")
+        return this.listItems = JSON.parse(this.listMock), JSON.parse(this.listMock);
+      const e = await Appcues?.user() ?? {}, { contents: t } = await ji({ accountId: AppcuesBundleSettings?.accountId, userId: e?.userId }, this.orderBy), i = t.map(({ id: s, name: r, public_name: o }) => ({ id: s, name: r, publicName: o }));
+      return this.listItems = i, i;
+    }, this.getListItems = new gi(this, { task: this.fetchListItems, args: () => [] }), this.handleItemClick = (e) => () => {
+      const t = new CustomEvent("flow-item-clicked", { detail: this.listItems.find((i) => i.id === e), bubbles: !0, composed: !0 });
+      this.dispatchEvent(t);
+    }, this.handleItemHover = (e) => () => {
+      const t = new CustomEvent("flow-item-hovered", { detail: this.listItems.find((i) => i.id === e), bubbles: !0, composed: !0 });
+      this.dispatchEvent(t);
+    }, this.containerTemplate = (e) => w`
+    <appcues-use-ref
+      name="list-container"
+      fallbackTag="ul"
+      defaultStyle=${ki}
+    >
+      ${e.slice(0, this.limit).map(this.itemTemplate)}
+    </appcues-use-ref>
+  `, this.itemTemplate = (e) => w`
+      <li
+        @click="${this.handleItemClick(e.id)}"
+        @mouseover="${this.handleItemHover(e.id)}"
+      >
+        <appcues-use-ref fallbackTag="span" name="list-item">
+          ${e.publicName ?? e.name}
+        </appcues-use-ref>
+      </li>
+    `, this.emptyMessageTemplate = w`
+    <slot name="empty-message">
+      <p>Nothing to see here at the moment</p>
+    </slot>
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.mode !== "live" && new MutationObserver((t) => {
+      t.forEach((i) => {
+        const [s] = i.addedNodes;
+        (i.type === "attributes" || s && ["UL", "LI", "SPAN"].includes(s.nodeName)) && this.getListItems.run();
+      });
+    }).observe(this, { childList: !0, subtree: !0, attributes: !0 });
+  }
+  render() {
+    return w`
+      <div class="container">
+        <slot name="title"></slot>
+        ${this.getListItems.render({ pending: () => w`<div class="loading">${Li}</div>`, complete: (e) => e.slice(0, this.limit).length === 0 ? this.emptyMessageTemplate : this.containerTemplate(e), error: () => w`
+              <div class="error-message">Nothing to see here at the moment</div>
+            ` })}
+      </div>
+    `;
+  }
+};
+D.styles = [xi, Ai, Si, Ci];
+g([N()], D.prototype, "listItems");
+g([v()], D.prototype, "orderBy");
+g([v({ type: Number })], D.prototype, "limit");
+g([v()], D.prototype, "listMock");
+g([v({ type: String })], D.prototype, "mode");
+B("appcues-flows-list", D);
+var zi = $`
+  .btn-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .btn-wrapper button {
+    background-color: var(--launcher-main-color, #0072d6);
+    color: white;
+    cursor: pointer;
+    outline-color: #0072d6;
+    outline-width: 2px;
+  }
+
+  .btn-wrapper button {
+    border: none;
+    border-start-start-radius: 80px;
+    border-end-start-radius: 80px;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    padding-inline: 16px 8px;
+    padding-block: 4px;
+    height: 52px;
+    outline-offset: 3px;
+  }
+
+  .btn-wrapper ::slotted(button) {
+    padding: 10px 16px;
+    border-radius: 80px;
+    border: 2px solid transparent;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    outline-offset: 4px;
+  }
+
+  .btn-wrapper button:hover:not(:active):not([disabled]) {
+    background-color: var(--launcher-hover-color, #4848eb) !important;
+  }
+
+  .btn-wrapper button:active {
+    background-color: var(--launcher-active-color, #8c8cff) !important;
+  }
+
+  .btn-wrapper > .slot-wrapper {
+    border: 2px solid white;
+    margin-top: -2px;
+    border-radius: 80px;
+    width: max-content;
+  }
+
+  .btn-wrapper > .slot-wrapper.active {
+    margin-inline-start: -18px;
+  }
+`, Bi = $`
+  .checklist-content {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-inline-end: 18px;
+    justify-content: center;
+    gap: 6px;
+    line-height: 1.2;
+  }
+`, Di = $`
+  .progress-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    border-radius: 6px;
+    min-width: 100px;
+    overflow: hidden;
+  }
+
+  .progress-bar,
+  progress {
+    background-color: rgba(255, 255, 255, 0.4);
+    height: 4px;
+    flex-grow: 1;
+  }
+
+  .progress-bar.completed {
+    background-color: white;
+  }
+
+  progress[value] {
+    --color: white;
+    --background: rgba(255, 255, 255, 0.4);
+    appearance: none;
+    background: var(--background);
+    border: none;
+  }
+
+  progress[value]::-webkit-progress-bar {
+    background: var(--background);
+  }
+
+  progress[value]::-webkit-progress-value {
+    background: var(--color);
+  }
+
+  progress[value]::-moz-progress-bar {
+    background: var(--color);
+  }
+`, C = class extends A {
+  constructor() {
+    super(...arguments), this.title = "Checklist", this.totalItems = 0, this.completedItems = 0, this.activeColor = "#4848eb", this.hoverColor = "#4848eb", this.mainColor = "#0072d6", this.checklistId = "", this.handleSlotchange = (e) => {
+      const r = (e.target?.assignedNodes({ flatten: !0 })).find((l) => l.querySelector ? l.querySelector("button") : !1)?.querySelector("button");
+      if (!r) return;
+      const { backgroundColor: o, background: n } = getComputedStyle(r);
+      this.mainColor = o || n, this.style.setProperty("--launcher-main-color", this.mainColor);
+    }, this.progressbar = () => {
+      if (this.totalItems > 8)
+        return rt`<progress
+        id="items"
+        value="${this.completedItems}"
+        max="${this.totalItems}"
+      ></progress>`;
+      const e = [];
+      for (let t = 0; t < this.totalItems; t++)
+        e.push(rt`<div
+          class="progress-bar ${t < this.completedItems && "completed"}"
+        ></div>`);
+      return e;
+    }, this.slotElement = () => rt`
+    <slot @slotchange=${this.handleSlotchange}></slot>
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.totalItems = Number.parseInt(this.getAttribute("totalitems") || "0", 10), this.completedItems = Number.parseInt(this.getAttribute("completeditems") || "0", 10), this.title = this.getAttribute("title") || "Checklist", We((e) => {
+      const t = e, { id: i, name: s, totalItems: r, completedItems: o } = t.detail;
+      this.totalItems = r, this.completedItems = o, this.title = s, this.checklistId = i, Fe();
+    }), Ze(() => {
+      this.totalItems = 0, this.completedItems = 0, this.title = "Checklist", this.checklistId = "";
+    });
+  }
+  attributeChangedCallback(e, t, i) {
+    if (e === "totalitems") {
+      const s = Number.parseInt(i || "0", 10);
+      this.totalItems = s > 0 ? s : 0;
+    }
+    if (e === "completeditems") {
+      const s = Number.parseInt(i || "0", 10);
+      s > this.totalItems ? this.completedItems = this.totalItems : s < 0 ? this.completedItems = 0 : this.completedItems = s;
+    }
+    e === "title" && (this.title = i || "Checklist"), e === "hovercolor" && (this.hoverColor = i || "#4848eb", this.style.setProperty("--launcher-hover-color", this.hoverColor)), e === "activecolor" && (this.activeColor = i || "#8c8cff", this.style.setProperty("--launcher-active-color", this.activeColor));
+  }
+  render() {
+    return rt`
+      <div class="btn-wrapper">
+        ${this.totalItems === 0 ? this.slotElement() : rt`
+              <button @click="${() => te(this.checklistId)}">
+                <div class="checklist-content">
+                  ${this.title}
+                  <div class="progress-wrapper" aria-role="progressbar">
+                    ${this.progressbar()}
+                  </div>
+                </div>
+              </button>
+              <div
+                class="slot-wrapper ${this.totalItems > 0 && "active"}"
+                @click="${{ handleEvent: () => te(this.checklistId, !0), capture: !0 }}"
+              >
+                ${this.slotElement()}
+              </div>
+            `}
+      </div>
+    `;
+  }
+};
+C.styles = [zi, Bi, Di];
+g([v()], C.prototype, "title");
+g([v()], C.prototype, "totalItems");
+g([v()], C.prototype, "completedItems");
+g([v()], C.prototype, "activeColor");
+g([v()], C.prototype, "hoverColor");
+g([N()], C.prototype, "mainColor");
+g([N()], C.prototype, "checklistId");
+B("appcues-checklist-wrapper", C);
+var qi = $`
+  .page {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .idle {
+    display: none;
+  }
+
+  .hidden {
+    pointer-events: none;
+  }
+
+  .animated {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+`, Vi = $`
+  .slide-in-bottom {
+    animation: slide-in-bottom 0.4s cubic-bezier(0.15, 1.03, 0.8, 1.03) forwards;
+  }
+
+  @keyframes slide-in-bottom {
+    0% {
+      opacity: 0;
+      transform: translateY(80%);
+    }
+    20% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`, Wi = $`
+  .slide-out-bottom {
+    animation: slide-out-bottom 0.4s cubic-bezier(0.7, 0, 0.57, 0.55) forwards;
+  }
+
+  @keyframes slide-out-bottom {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    80% {
+      opacity: 1;
+    }
+
+    99% {
+      transform: translateY(80%);
+      opacity: 0;
+    }
+
+    100% {
+      display: none;
+      max-height: 0;
+      overflow: hidden;
+    }
+  }
+`, _t = class extends A {
+  constructor() {
+    super(...arguments), this.status = "idle", this.animation = "", this.minHeight = "auto";
+  }
+  show({ animation: e = "" } = {}) {
+    e !== "" && (this.animation = e), this.status = "showing";
+  }
+  hide({ animation: e = "" } = {}) {
+    e !== "" && (this.animation = e), this.status = "hidden";
+  }
+  render() {
+    return w`
+      <div
+        class="page ${this.status} ${this.animation && "animated"} ${this.animation}"
+        aria-hidden="${["hidden", "idle"].includes(this.status)}"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+_t.styles = [qi, Vi, Wi];
+g([N()], _t.prototype, "status");
+g([v()], _t.prototype, "minHeight");
+B("appcues-page", _t);
+var Zi = $`
+  .grow {
+    animation: grow-min-height 0.4s cubic-bezier(0.7, 0, 0.57, 0.55) forwards;
+    min-height: auto;
+  }
+
+  .shrink {
+    animation: shrink-min-height 0.4s cubic-bezier(0.7, 0, 0.57, 0.55) forwards;
+  }
+`, q = class extends A {
+  constructor() {
+    super(...arguments), this.currentPage = 0, this.pages = [], this.currentHeight = "auto", this.entry = "slide-in-bottom", this.exit = "slide-out-bottom";
+  }
+  getChildren() {
+    return this.shadowRoot ? this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? [] : [];
+  }
+  updateHeight(e = this.currentPage) {
+    const t = this.pages[e].minHeight || "auto";
+    this.currentHeight = t !== "auto" ? t : "auto";
+  }
+  showFirstPage() {
+    this.updateHeight(), this.pages[this.currentPage].show();
+  }
+  prev() {
+    this.currentPage <= 0 || (this.updateHeight(this.currentPage - 1), this.pages[this.currentPage].hide({ animation: this.exit }), this.pages[this.currentPage - 1].show(), this.currentPage -= 1);
+  }
+  next() {
+    this.currentPage >= this.pages.length - 1 || (this.currentPage += 1, this.updateHeight(), this.pages[this.currentPage].show({ animation: this.entry }), this.pages[this.currentPage - 1].hide());
+  }
+  goTo(e = 0) {
+    e !== this.currentPage && (this.pages[e].show({ animation: e !== 0 ? this.entry : "" }), this.pages[this.currentPage].hide({ animation: this.currentPage !== 0 ? this.exit : "" }), this.currentPage = e, this.updateHeight());
+  }
+  firstUpdated() {
+    this.pages = this.getChildren(), this.showFirstPage();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    return w`
+      <style>
+        @keyframes grow-min-height {
+          0% {
+            min-height: 0;
+          }
+
+          100% {
+            min-height: ${this.currentHeight};
+          }
+        }
+
+        @keyframes shrink-min-height {
+          0% {
+            min-height: ${this.currentHeight};
+          }
+
+          100% {
+            min-height: auto;
+          }
+        }
+      </style>
+      <div
+        class="${this.currentPage !== 0 ? "grow" : "shrink"}"
+        style="position: relative;"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+q.styles = [Zi];
+g([N()], q.prototype, "currentPage");
+g([N()], q.prototype, "pages");
+g([N()], q.prototype, "currentHeight");
+g([v()], q.prototype, "entry");
+g([v()], q.prototype, "exit");
+B("appcues-navigation-stack", q);
+var Fi = yt`
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    width="40px"
+    height="40px"
+    fill="#0072D6"
+    viewBox="0 0 40 40"
+    enable-background="new 0 0 40 40"
+    xml:space="preserve"
+  >
+    <path
+      opacity="0.2"
+      fill="#0072D6"
+      d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+ s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+ c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
+    />
+    <path
+      fill="#0072D6"
+      d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+ C22.32,8.481,24.301,9.057,26.013,10.047z"
+    >
+      <animateTransform
+        attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0 20 20"
+        to="360 20 20"
+        keySplines="0.17 0.27 0.8 0.65"
+        calcMode="spline"
+        dur="0.6s"
+        repeatCount="indefinite"
+        keyTimes="0;1"
+      />
+    </path>
+  </svg>
+`, Ji = yt`
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <g id="material-icon" clip-path="url(#clip0_19386_6120)">
+      <path
+        id="Vector" 
+        d="M6.12522 8.00305L11.9239 13.8017C12.1702 14.048 12.2953 14.3528 12.2993 14.7161C12.3033 15.0794 12.1822 15.3842 11.9359 15.6305C11.6896 15.8769 11.3828 16 11.0155 16C10.6481 16 10.3413 15.8769 10.095 15.6305L3.93523 9.47075C3.7234 9.25892 3.57007 9.02893 3.47524 8.78077C3.38042 8.53262 3.33301 8.27338 3.33301 8.00305C3.33301 7.73273 3.38042 7.47349 3.47524 7.22534C3.57007 6.97718 3.7234 6.74719 3.93523 6.53536L10.095 0.375561C10.3413 0.129259 10.6461 0.00410428 11.0094 9.62603e-05C11.3727 -0.00391176 11.6776 0.117242 11.9239 0.363558C12.1702 0.60986 12.2933 0.916664 12.2933 1.28397C12.2933 1.65128 12.1702 1.95809 11.9239 2.20441L6.12522 8.00305Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+`, _e = yt`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"  viewBox="0 0 24 24">
+      <path 
+        fill="currentColor" 
+        d="M8.9 17.81a8.6 8.6 0 0 1-6.31-2.59A8.6 8.6 0 0 1 0 8.91c0-2.49.86-4.6 2.59-6.32A8.6 8.6 0 0 1 8.9 0a8.6 8.6 0 0 1 6.32 2.59A8.6 8.6 0 0 1 17.8 8.9a8.39 8.39 0 0 1-1.68 5.07l7.45 7.46c.28.29.42.65.42 1.07 0 .43-.14.78-.43 1.06-.29.29-.64.43-1.07.43-.43 0-.78-.14-1.07-.43L14 16.13a8.42 8.42 0 0 1-5.09 1.68Zm0-3.05c1.63 0 3.01-.57 4.15-1.7a5.65 5.65 0 0 0 1.7-4.15c0-1.63-.56-3.02-1.7-4.15a5.64 5.64 0 0 0-4.15-1.7c-1.63 0-3 .56-4.14 1.7a5.65 5.65 0 0 0-1.7 4.15c0 1.63.56 3 1.7 4.15a5.64 5.64 0 0 0 4.14 1.7Z" 
+      />
+  </svg>
+`, Xi = $`
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+      display: none;
+    }
+
+    100% {
+      opacity: 1;
+      display: flex;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+      display: flex;
+    }
+
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
+
+  @keyframes expand {
+    0% {
+      width: 0%;
+    }
+
+    100% {
+      width: 100%;
+    }
+  }
+
+  @keyframes collapse {
+    0% {
+      width: 100%;
+    }
+
+    100% {
+      width: 0%;
+    }
+  }
+
+  @keyframes slide-in {
+    0% {
+      transform: translateX(120px);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      transform: translateX(120px);
+    }
+  }
+`, Yi = $`
+  :host {
+    display: flex;
+    width: 100%;
+  }
+
+  .container {
+    align-items: center;
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+  }
+
+  svg {
+    height: 16px;
+  }
+
+  button {
+    align-items: center;
+    color: inherit;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    display: flex;
+    justify-content: center;
+    padding: 12px;
+  }
+`, Ki = $`
+  .search-container {
+    align-items: center;
+    display: none;
+    opacity: 0;
+    position: absolute;
+    width: calc(100% + 12px);
+    left: -12px;
+  }
+
+  .search-container input {
+    border: none;
+    border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    box-sizing: border-box;
+    height: 40px;
+    padding: 8px 12px 8px 16px;
+    width: 0;
+  }
+
+  .search-container input:focus {
+    outline: none;
+  }
+
+  .search-container .search-form {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+    margin-bottom: 0;
+  }
+
+  .search-container .search-button {
+    background: white;
+    border-start-end-radius: 8px;
+    border-end-end-radius: 8px;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    padding: 0 12px;
+  }
+
+  .search-container .search-button svg {
+    width: 16px;
+  }
+
+  .search-container .search-button svg path {
+    fill: black;
+  }
+
+  .search-container.show {
+    animation: fade-in 0.3s cubic-bezier(0.3, 0.4, 0.3, 0.8) forwards;
+    display: flex;
+  }
+
+  .search-container.show input {
+    animation: expand 0.3s cubic-bezier(0.3, 0.4, 0.3, 0.8) forwards;
+    width: 100%;
+  }
+
+  .search-container.hide {
+    animation: fade-out 0.3s cubic-bezier(0.3, 0.4, 0.3, 0.8) forwards;
+  }
+
+  .search-container.hide input {
+    animation: collapse 0.3s cubic-bezier(0.3, 0.4, 0.3, 0.8) forwards;
+    width: 0;
+  }
+
+  .content-container {
+    align-items: center;
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .content-container .content {
+    text-wrap: nowrap;
+  }
+
+  .content-container.show {
+    display: flex;
+    animation: fade-in 0.3s cubic-bezier(0.3, 0.4, 0.3, 0.8) forwards;
+  }
+
+  .content-container.show .content {
+    animation: slide-in 0.3s cubic-bezier(0.3, 0.4, 0.3, 0.8) forwards;
+  }
+
+  .content-container.hide {
+    animation: fade-out 0.3s cubic-bezier(0.3, 0.4, 0.3, 0.8) forwards;
+  }
+
+  .content-container.hide .content {
+    animation: slide-out 0.3s cubic-bezier(0.3, 0.4, 0.3, 0.8) forwards;
+  }
+
+  .search-bar {
+    align-items: center;
+    background: white;
+    border: none;
+    display: none;
+    justify-content: flex-end;
+    gap: 16px;
+    width: 100%;
+  }
+
+  .search-bar.show {
+    display: flex;
+  }
+`, xt = class extends A {
+  constructor() {
+    super(...arguments), this.showSearchBar = null, this.loading = !1, this.handleSubmit = () => {
+      const t = this.shadowRoot?.querySelector("input")?.value || "";
+      this.dispatchEvent(new CustomEvent("onSearch", { detail: { inputValue: t }, bubbles: !0, composed: !0 })), this.requestUpdate();
+    }, this.handleSearch = $i(this.handleSubmit, 700);
+  }
+  setSearchMode(e) {
+    this.showSearchBar = e;
+    const t = this.shadowRoot?.querySelector("input");
+    this.requestUpdate(), e ? setTimeout(() => {
+      t?.focus();
+    }, 100) : (this.dispatchEvent(new CustomEvent("onCancel", { bubbles: !0, composed: !0 })), t && (t.value = ""));
+  }
+  render() {
+    return w`
+      <div class="container">
+        <div
+          class="content-container ${this.showSearchBar === null ? "" : this.showSearchBar ? "hide" : "show"}"
+        >
+          <div class="content" style="${this.style}">
+            <slot></slot>
+          </div>
+          <button @click="${() => this.setSearchMode(!0)}">
+            ${_e}
+          </button>
+        </div>
+        <div class="search-container ${this.showSearchBar ? "show" : "hide"}">
+          <button
+            class="return-button"
+            @click="${() => this.setSearchMode(!1)}"
+          >
+            ${Ji}
+          </button>
+          <form
+            class="search-form"
+            @submit="${(e) => {
+      e.preventDefault(), this.handleSubmit();
+    }}"
+          >
+            <input
+              type="text"
+              placeholder="Type to search"
+              @keyup=${this.handleSearch}
+            />
+            <button class="search-button" type="submit">
+              ${this.loading ? Fi : _e}
+            </button>
+          </form>
+        </div>
+      </div>
+    `;
+  }
+};
+xt.styles = [Xi, Yi, Ki];
+g([N()], xt.prototype, "showSearchBar");
+g([v({ converter: (e) => e === "true" })], xt.prototype, "loading");
+B("appcues-search-header", xt);
+var Gi = (e) => e && new DOMParser().parseFromString(e, "text/html").body.textContent || "", Qi = $`
+  :host {
+    height: 100%;
+    display: block;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .root-wrapper {
+    height: 100%;
+    box-shadow: var(--search-results-block-shadow);
+    color: var(--search-results-block-color);
+    background-color: var(--search-results-block-background-color);
+  }
+
+  .content-wrapper {
+    padding: 16px 16px 16px 16px;
+    background: var(--search-results-block-content-wrapper-background-color);
+    min-height: 100%;
+  }
+
+  .content-wrapper .root-wrapper {
+    height: auto;
+    border-radius: var(--search-results-block-radius);
+  }
+
+  .root-wrapper[loading='true'] {
+    overflow: hidden;
+  }
+
+  .alert-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 16px;
+  }
+`, ts = $`
+  .pagination-btn {
+    align-items: center;
+    background: transparent;
+    border-bottom-left-radius: var(--search-results-block-radius);
+    border-bottom-right-radius: var(--search-results-block-radius);
+    border-top: 1px solid rgba(66, 86, 120, 0.1);
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 500;
+    justify-content: center;
+    line-height: 24px;
+    padding: 8px 16px;
+    width: 100%;
+    position: relative;
+    top: 1px;
+  }
+
+  .pagination-btn:hover {
+    background: var(--search-results-block-background-color-hover);
+  }
+
+  .pagination-btn:focus {
+    outline: 2px solid var(--search-results-block-outline-color);
+    background: var(--search-results-block-background-color-active);
+  }
+`, es = $`
+  .article-main-title-wrapper {
+    padding: 8px 16px;
+  }
+
+  .article-main-title {
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 700;
+  }
+
+  .article-list {
+    font-style: normal;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    list-style: none;
+  }
+
+  .article-list a {
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px 16px;
+    color: currentColor;
+  }
+
+  .article-list a[loading='false']:hover {
+    background-color: var(--search-results-block-background-color-hover);
+  }
+
+  .article-list a[loading='false']:focus {
+    outline: 2px solid var(--search-results-block-outline-color);
+    background: var(--search-results-block-background-color-active);
+  }
+
+  .article-title-wrapper {
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 160%;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .article-title-wrapper p {
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .article-title-wrapper svg {
+    min-width: 12px;
+    min-height: 12px;
+    width: 12px;
+    height: 12px;
+  }
+
+  .article-title-wrapper.loading {
+    width: 70%;
+  }
+
+  .article-description {
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 160%;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .article-description.loading {
+    height: 50px;
+  }
+`, is = $`
+  @keyframes animatedBackgroundPosition {
+    0% {
+      background-position: 0% 92%;
+    }
+    100% {
+      background-position: 100% 9%;
+    }
+  }
+
+  .loading {
+    opacity: 0.5;
+    background: linear-gradient(
+      135deg,
+      rgba(211, 223, 232, 0.5) 30%,
+      rgba(169, 184, 197, 0.5) 38%,
+      rgba(168, 182, 193, 0.6) 41%,
+      rgba(168, 182, 193, 0.6) 50%,
+      rgba(168, 182, 193, 0.6) 50%,
+      rgba(169, 184, 197, 0.6) 51%,
+      rgba(211, 223, 232, 0.6) 57%,
+      rgba(211, 223, 232, 0.6) 80%,
+      rgba(211, 223, 232, 0.6) 80%
+    );
+    background-size: 1200% 1200%;
+    animation: animatedBackgroundPosition 3s ease infinite reverse;
+    color: transparent;
+  }
+`, ss = Ee`
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Icon">
+      <path id="Vector" d="M11.4752 14.475L7.8502 10.85C7.8002 10.8 7.7627 10.7458 7.7377 10.6875C7.7127 10.6292 7.7002 10.5667 7.7002 10.5C7.7002 10.3667 7.74603 10.25 7.8377 10.15C7.92936 10.05 8.0502 10 8.2002 10H15.8002C15.9502 10 16.071 10.05 16.1627 10.15C16.2544 10.25 16.3002 10.3667 16.3002 10.5C16.3002 10.5333 16.2502 10.65 16.1502 10.85L12.5252 14.475C12.4419 14.5583 12.3585 14.6167 12.2752 14.65C12.1919 14.6833 12.1002 14.7 12.0002 14.7C11.9002 14.7 11.8085 14.6833 11.7252 14.65C11.6419 14.6167 11.5585 14.5583 11.4752 14.475Z" fill="currentColor"/>
+    </g>
+  </svg>
+`, rs = Ee`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12px"
+    height="12px"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden
+  >
+    <path
+      d="M3.44444 23C2.77222 23 2.19676 22.7606 1.71806 22.2819C1.23935 21.8032 1 21.2278 1 20.5556V3.44444C1 2.77222 1.23935 2.19676 1.71806 1.71806C2.19676 1.23935 2.77222 1 3.44444 1H10.7778C11.1241 1 11.4144 1.11713 11.6486 1.35139C11.8829 1.58565 12 1.87593 12 2.22222C12 2.56852 11.8829 2.8588 11.6486 3.09306C11.4144 3.32731 11.1241 3.44444 10.7778 3.44444H3.44444V20.5556H20.5556V13.2222C20.5556 12.8759 20.6727 12.5856 20.9069 12.3514C21.1412 12.1171 21.4315 12 21.7778 12C22.1241 12 22.4144 12.1171 22.6486 12.3514C22.8829 12.5856 23 12.8759 23 13.2222V20.5556C23 21.2278 22.7606 21.8032 22.2819 22.2819C21.8032 22.7606 21.2278 23 20.5556 23H3.44444ZM20.5556 5.15556L10.0444 15.6667C9.82037 15.8907 9.53518 16.0028 9.18889 16.0028C8.84259 16.0028 8.55741 15.8907 8.33333 15.6667C8.10926 15.4426 7.99722 15.1574 7.99722 14.8111C7.99722 14.4648 8.10926 14.1796 8.33333 13.9556L18.8444 3.44444H15.6667C15.3204 3.44444 15.0301 3.32731 14.7958 3.09306C14.5616 2.8588 14.4444 2.56852 14.4444 2.22222C14.4444 1.87593 14.5616 1.58565 14.7958 1.35139C15.0301 1.11713 15.3204 1 15.6667 1H21.7778C22.1241 1 22.4144 1.11713 22.6486 1.35139C22.8829 1.58565 23 1.87593 23 2.22222V8.33333C23 8.67963 22.8829 8.96991 22.6486 9.20417C22.4144 9.43843 22.1241 9.55556 21.7778 9.55556C21.4315 9.55556 21.1412 9.43843 20.9069 9.20417C20.6727 8.96991 20.5556 8.67963 20.5556 8.33333V5.15556Z"
+      fill="currentColor"
+    />
+  </svg>
+`, V = class extends A {
+  constructor() {
+    super(...arguments), this.state = "empty", this.searchTerm = "", this.hasNextPage = !1, this.pageSize = 10, this.results = [], this.handleRequestNextPage = () => {
+      this.dispatchEvent(new CustomEvent("onRequestNextPage", { bubbles: !0, composed: !0 }));
+    }, this.handleLinkClicked = (e) => () => {
+      this.dispatchEvent(new CustomEvent("onLinkClicked", { bubbles: !0, composed: !0, detail: e }));
+    }, this.mockResultData = () => {
+      this.results = Array.from({ length: this.pageSize }).map((e, t) => ({ url: `url ${t}`, excerpt: `excerpt ${t}`, title: `title ${t}` }));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.state === "loading" && this.mockResultData();
+  }
+  attributeChangedCallback(e, t, i) {
+    super.attributeChangedCallback(e, t, i), e === "state" && (i === "loading" && this.mockResultData(), this.state = i);
+  }
+  render() {
+    return this.state === "empty" ? w`
+        <div class="root-wrapper alert-wrapper">
+          <p>No results for '${this.searchTerm}'</p>
+        </div>
+      ` : this.state === "error" ? w`
+        <div class="root-wrapper alert-wrapper">
+          <p>We could not load the results</p>
+          <p>Try again later</p>
+        </div>
+      ` : w`
+      <div class="content-wrapper">
+        <div class="root-wrapper" loading="${this.state === "loading"}">
+          <ul class="article-list">
+            ${this.results.map((e) => w`
+                <li @click=${this.handleLinkClicked(e)}>
+                  <a
+                    href="${e.url}"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    loading="${this.state === "loading"}"
+                  >
+                    <div class="article-title-wrapper ${this.state}">
+                      <p>${e.title}</p>
+                      ${rs}
+                    </div>
+                    <p class="article-description ${this.state}">
+                      ${Gi(e.excerpt)}
+                    </p>
+                  </a>
+                </li>
+              `)}
+          </ul>
+
+          ${this.hasNextPage && this.state !== "loading" ? w`
+                <button
+                  class="pagination-btn"
+                  @click=${this.handleRequestNextPage}
+                >
+                  See more ${this.results.length} results ${ss}
+                </button>
+              ` : w``}
+        </div>
+      </div>
+    `;
+  }
+};
+V.styles = [Qi, es, is, ts];
+g([v()], V.prototype, "state");
+g([v()], V.prototype, "searchTerm");
+g([v({ converter: (e) => e === "true" })], V.prototype, "hasNextPage");
+g([v()], V.prototype, "pageSize");
+g([v({ type: Array })], V.prototype, "results");
+B("appcues-search-results", V);