@appcues/web-sdk 7.13.3 → 7.15.0

package/build/index.DS2nSQoy.js

@@ -0,0 +1,3077 @@
+import { c as wt, g as gi, o as vi, a as _i, n as Se, b as bi } from "./index.Ce_rhcOH.js";
+const yi = !1, xt = window, pe = xt.ShadowRoot && (xt.ShadyCSS === void 0 || xt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, me = /* @__PURE__ */ Symbol(), Ae = /* @__PURE__ */ new WeakMap();
+class Ye {
+  constructor(t, i, s) {
+    if (this._$cssResult$ = !0, s !== me)
+      throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t, this._strings = i;
+  }
+  // This is a getter so that it's lazy. In practice, this means stylesheets
+  // are not created until the first element instance is made.
+  get styleSheet() {
+    let t = this._styleSheet;
+    const i = this._strings;
+    if (pe && t === void 0) {
+      const s = i !== void 0 && i.length === 1;
+      s && (t = Ae.get(i)), t === void 0 && ((this._styleSheet = t = new CSSStyleSheet()).replaceSync(this.cssText), s && Ae.set(i, t));
+    }
+    return t;
+  }
+  toString() {
+    return this.cssText;
+  }
+}
+const $i = (e) => {
+  if (e._$cssResult$ === !0)
+    return e.cssText;
+  if (typeof e == "number")
+    return e;
+  throw new Error(`Value passed to 'css' function must be a 'css' function result: ${e}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`);
+}, wi = (e) => new Ye(typeof e == "string" ? e : String(e), void 0, me), y = (e, ...t) => {
+  const i = e.length === 1 ? e[0] : t.reduce((s, r, n) => s + $i(r) + e[n + 1], e[0]);
+  return new Ye(i, e, me);
+}, xi = (e, t) => {
+  pe ? e.adoptedStyleSheets = t.map((i) => i instanceof CSSStyleSheet ? i : i.styleSheet) : t.forEach((i) => {
+    const s = document.createElement("style"), r = xt.litNonce;
+    r !== void 0 && s.setAttribute("nonce", r), s.textContent = i.cssText, e.appendChild(s);
+  });
+}, Ci = (e) => {
+  let t = "";
+  for (const i of e.cssRules)
+    t += i.cssText;
+  return wi(t);
+}, Te = pe || yi ? (e) => e : (e) => e instanceof CSSStyleSheet ? Ci(e) : e;
+var jt, Bt, Wt, Ke;
+const P = window;
+let Qe, L;
+const Ee = P.trustedTypes, ki = Ee ? Ee.emptyScript : "", Ct = P.reactiveElementPolyfillSupportDevMode;
+{
+  const e = (jt = P.litIssuedWarnings) !== null && jt !== void 0 ? jt : P.litIssuedWarnings = /* @__PURE__ */ new Set();
+  L = (t, i) => {
+    i += ` See https://lit.dev/msg/${t} for more information.`, e.has(i) || e.add(i);
+  }, L("dev-mode", "Lit is in dev mode. Not recommended for production!"), !((Bt = P.ShadyDOM) === null || Bt === void 0) && Bt.inUse && Ct === void 0 && L("polyfill-support-missing", "Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded."), Qe = (t) => ({
+    then: (i, s) => {
+      L("request-update-promise", `The \`requestUpdate\` method should no longer return a Promise but does so on \`${t}\`. Use \`updateComplete\` instead.`), i !== void 0 && i(!1);
+    }
+  });
+}
+const qt = (e) => {
+  P.emitLitDebugLogEvents && P.dispatchEvent(new CustomEvent("lit-debug", {
+    detail: e
+  }));
+}, Je = (e, t) => e, le = {
+  toAttribute(e, t) {
+    switch (t) {
+      case Boolean:
+        e = e ? ki : null;
+        break;
+      case Object:
+      case Array:
+        e = e == null ? e : JSON.stringify(e);
+        break;
+    }
+    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;
+        }
+        break;
+    }
+    return i;
+  }
+}, fe = (e, t) => t !== e && (t === t || e === e), Ft = {
+  attribute: !0,
+  type: String,
+  converter: le,
+  reflect: !1,
+  hasChanged: fe
+}, de = "finalized";
+class N extends HTMLElement {
+  constructor() {
+    super(), this.__instanceProperties = /* @__PURE__ */ new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this.__reflectingProperty = null, this.__initialize();
+  }
+  /**
+   * Adds an initializer function to the class that is called during instance
+   * construction.
+   *
+   * This is useful for code that runs against a `ReactiveElement`
+   * subclass, such as a decorator, that needs to do work for each
+   * instance, such as setting up a `ReactiveController`.
+   *
+   * ```ts
+   * const myDecorator = (target: typeof ReactiveElement, key: string) => {
+   *   target.addInitializer((instance: ReactiveElement) => {
+   *     // This is run during construction of the element
+   *     new MyController(instance);
+   *   });
+   * }
+   * ```
+   *
+   * Decorating a field will then cause each instance to run an initializer
+   * that adds a controller:
+   *
+   * ```ts
+   * class MyElement extends LitElement {
+   *   @myDecorator foo;
+   * }
+   * ```
+   *
+   * Initializers are stored per-constructor. Adding an initializer to a
+   * subclass does not add it to a superclass. Since initializers are run in
+   * constructors, initializers will run in order of the class hierarchy,
+   * starting with superclasses and progressing to the instance's class.
+   *
+   * @nocollapse
+   */
+  static addInitializer(t) {
+    var i;
+    this.finalize(), ((i = this._initializers) !== null && i !== void 0 ? i : this._initializers = []).push(t);
+  }
+  /**
+   * Returns a list of attributes corresponding to the registered properties.
+   * @nocollapse
+   * @category attributes
+   */
+  static get observedAttributes() {
+    this.finalize();
+    const t = [];
+    return this.elementProperties.forEach((i, s) => {
+      const r = this.__attributeNameForProperty(s, i);
+      r !== void 0 && (this.__attributeToPropertyMap.set(r, s), t.push(r));
+    }), t;
+  }
+  /**
+   * Creates a property accessor on the element prototype if one does not exist
+   * and stores a {@linkcode PropertyDeclaration} for the property with the
+   * given options. The property setter calls the property's `hasChanged`
+   * property option or uses a strict identity check to determine whether or not
+   * to request an update.
+   *
+   * This method may be overridden to customize properties; however,
+   * when doing so, it's important to call `super.createProperty` to ensure
+   * the property is setup correctly. This method calls
+   * `getPropertyDescriptor` internally to get a descriptor to install.
+   * To customize what properties do when they are get or set, override
+   * `getPropertyDescriptor`. To customize the options for a property,
+   * implement `createProperty` like this:
+   *
+   * ```ts
+   * static createProperty(name, options) {
+   *   options = Object.assign(options, {myOption: true});
+   *   super.createProperty(name, options);
+   * }
+   * ```
+   *
+   * @nocollapse
+   * @category properties
+   */
+  static createProperty(t, i = Ft) {
+    var s;
+    if (i.state && (i.attribute = !1), this.finalize(), this.elementProperties.set(t, i), !i.noAccessor && !this.prototype.hasOwnProperty(t)) {
+      const r = typeof t == "symbol" ? /* @__PURE__ */ Symbol() : `__${t}`, n = this.getPropertyDescriptor(t, r, i);
+      n !== void 0 && (Object.defineProperty(this.prototype, t, n), this.hasOwnProperty("__reactivePropertyKeys") || (this.__reactivePropertyKeys = new Set((s = this.__reactivePropertyKeys) !== null && s !== void 0 ? s : [])), this.__reactivePropertyKeys.add(t));
+    }
+  }
+  /**
+   * Returns a property descriptor to be defined on the given named property.
+   * If no descriptor is returned, the property will not become an accessor.
+   * For example,
+   *
+   * ```ts
+   * class MyElement extends LitElement {
+   *   static getPropertyDescriptor(name, key, options) {
+   *     const defaultDescriptor =
+   *         super.getPropertyDescriptor(name, key, options);
+   *     const setter = defaultDescriptor.set;
+   *     return {
+   *       get: defaultDescriptor.get,
+   *       set(value) {
+   *         setter.call(this, value);
+   *         // custom action.
+   *       },
+   *       configurable: true,
+   *       enumerable: true
+   *     }
+   *   }
+   * }
+   * ```
+   *
+   * @nocollapse
+   * @category properties
+   */
+  static getPropertyDescriptor(t, i, s) {
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      get() {
+        return this[i];
+      },
+      set(r) {
+        const n = this[t];
+        this[i] = r, this.requestUpdate(t, n, s);
+      },
+      configurable: !0,
+      enumerable: !0
+    };
+  }
+  /**
+   * Returns the property options associated with the given property.
+   * These options are defined with a `PropertyDeclaration` via the `properties`
+   * object or the `@property` decorator and are registered in
+   * `createProperty(...)`.
+   *
+   * Note, this method should be considered "final" and not overridden. To
+   * customize the options for a given property, override
+   * {@linkcode createProperty}.
+   *
+   * @nocollapse
+   * @final
+   * @category properties
+   */
+  static getPropertyOptions(t) {
+    return this.elementProperties.get(t) || Ft;
+  }
+  /**
+   * Creates property accessors for registered properties, sets up element
+   * styling, and ensures any superclasses are also finalized. Returns true if
+   * the element was finalized.
+   * @nocollapse
+   */
+  static finalize() {
+    if (this.hasOwnProperty(de))
+      return !1;
+    this[de] = !0;
+    const t = Object.getPrototypeOf(this);
+    if (t.finalize(), t._initializers !== void 0 && (this._initializers = [...t._initializers]), this.elementProperties = new Map(t.elementProperties), this.__attributeToPropertyMap = /* @__PURE__ */ new Map(), this.hasOwnProperty(Je("properties"))) {
+      const i = this.properties, s = [
+        ...Object.getOwnPropertyNames(i),
+        ...Object.getOwnPropertySymbols(i)
+      ];
+      for (const r of s)
+        this.createProperty(r, i[r]);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+    {
+      const i = (s, r = !1) => {
+        this.prototype.hasOwnProperty(s) && L(r ? "renamed-api" : "removed-api", `\`${s}\` is implemented on class ${this.name}. It has been ${r ? "renamed" : "removed"} in this version of LitElement.`);
+      };
+      i("initialize"), i("requestUpdateInternal"), i("_getUpdateComplete", !0);
+    }
+    return !0;
+  }
+  /**
+   * Takes the styles the user supplied via the `static styles` property and
+   * returns the array of styles to apply to the element.
+   * Override this method to integrate into a style management system.
+   *
+   * Styles are deduplicated preserving the _last_ instance in the list. This
+   * is a performance optimization to avoid duplicated styles that can occur
+   * especially when composing via subclassing. The last item is kept to try
+   * to preserve the cascade order with the assumption that it's most important
+   * that last added styles override previous styles.
+   *
+   * @nocollapse
+   * @category styles
+   */
+  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(Te(r));
+    } else t !== void 0 && i.push(Te(t));
+    return i;
+  }
+  /**
+   * Returns the property name for the given attribute `name`.
+   * @nocollapse
+   */
+  static __attributeNameForProperty(t, i) {
+    const s = i.attribute;
+    return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
+  }
+  /**
+   * Internal only override point for customizing work done when elements
+   * are constructed.
+   */
+  __initialize() {
+    var t;
+    this.__updatePromise = new Promise((i) => this.enableUpdating = i), this._$changedProperties = /* @__PURE__ */ new Map(), this.__saveInstanceProperties(), this.requestUpdate(), (t = this.constructor._initializers) === null || t === void 0 || t.forEach((i) => i(this));
+  }
+  /**
+   * Registers a `ReactiveController` to participate in the element's reactive
+   * update cycle. The element automatically calls into any registered
+   * controllers during its lifecycle callbacks.
+   *
+   * If the element is connected when `addController()` is called, the
+   * controller's `hostConnected()` callback will be immediately called.
+   * @category controllers
+   */
+  addController(t) {
+    var i, s;
+    ((i = this.__controllers) !== null && i !== void 0 ? i : this.__controllers = []).push(t), this.renderRoot !== void 0 && this.isConnected && ((s = t.hostConnected) === null || s === void 0 || s.call(t));
+  }
+  /**
+   * Removes a `ReactiveController` from the element.
+   * @category controllers
+   */
+  removeController(t) {
+    var i;
+    (i = this.__controllers) === null || i === void 0 || i.splice(this.__controllers.indexOf(t) >>> 0, 1);
+  }
+  /**
+   * Fixes any properties set on the instance before upgrade time.
+   * Otherwise these would shadow the accessor and break these properties.
+   * The properties are stored in a Map which is played back after the
+   * constructor runs. Note, on very old versions of Safari (<=9) or Chrome
+   * (<=41), properties created for native platform properties like (`id` or
+   * `name`) may not have default values set in the element constructor. On
+   * these browsers native properties appear on instances and therefore their
+   * default value will overwrite any element default (e.g. if the element sets
+   * this.id = 'id' in the constructor, the 'id' will become '' since this is
+   * the native platform default).
+   */
+  __saveInstanceProperties() {
+    this.constructor.elementProperties.forEach((t, i) => {
+      this.hasOwnProperty(i) && (this.__instanceProperties.set(i, this[i]), delete this[i]);
+    });
+  }
+  /**
+   * Returns the node into which the element should render and by default
+   * creates and returns an open shadowRoot. Implement to customize where the
+   * element's DOM is rendered. For example, to render into the element's
+   * childNodes, return `this`.
+   *
+   * @return Returns a node into which to render.
+   * @category rendering
+   */
+  createRenderRoot() {
+    var t;
+    const i = (t = this.shadowRoot) !== null && t !== void 0 ? t : this.attachShadow(this.constructor.shadowRootOptions);
+    return xi(i, this.constructor.elementStyles), i;
+  }
+  /**
+   * On first connection, creates the element's renderRoot, sets up
+   * element styling, and enables updating.
+   * @category lifecycle
+   */
+  connectedCallback() {
+    var t;
+    this.renderRoot === void 0 && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this.__controllers) === null || t === void 0 || t.forEach((i) => {
+      var s;
+      return (s = i.hostConnected) === null || s === void 0 ? void 0 : s.call(i);
+    });
+  }
+  /**
+   * Note, this method should be considered final and not overridden. It is
+   * overridden on the element instance with a function that triggers the first
+   * update.
+   * @category updates
+   */
+  enableUpdating(t) {
+  }
+  /**
+   * Allows for `super.disconnectedCallback()` in extensions while
+   * reserving the possibility of making non-breaking feature additions
+   * when disconnecting at some point in the future.
+   * @category lifecycle
+   */
+  disconnectedCallback() {
+    var t;
+    (t = this.__controllers) === null || t === void 0 || t.forEach((i) => {
+      var s;
+      return (s = i.hostDisconnected) === null || s === void 0 ? void 0 : s.call(i);
+    });
+  }
+  /**
+   * Synchronizes property values when attributes change.
+   *
+   * Specifically, when an attribute is set, the corresponding property is set.
+   * You should rarely need to implement this callback. If this method is
+   * overridden, `super.attributeChangedCallback(name, _old, value)` must be
+   * called.
+   *
+   * See [using the lifecycle callbacks](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks)
+   * on MDN for more information about the `attributeChangedCallback`.
+   * @category attributes
+   */
+  attributeChangedCallback(t, i, s) {
+    this._$attributeToProperty(t, s);
+  }
+  __propertyToAttribute(t, i, s = Ft) {
+    var r;
+    const n = this.constructor.__attributeNameForProperty(t, s);
+    if (n !== void 0 && s.reflect === !0) {
+      const l = (((r = s.converter) === null || r === void 0 ? void 0 : r.toAttribute) !== void 0 ? s.converter : le).toAttribute(i, s.type);
+      this.constructor.enabledWarnings.indexOf("migration") >= 0 && l === void 0 && L("undefined-attribute-value", `The attribute value for the ${t} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`), this.__reflectingProperty = t, l == null ? this.removeAttribute(n) : this.setAttribute(n, l), this.__reflectingProperty = null;
+    }
+  }
+  /** @internal */
+  _$attributeToProperty(t, i) {
+    var s;
+    const r = this.constructor, n = r.__attributeToPropertyMap.get(t);
+    if (n !== void 0 && this.__reflectingProperty !== n) {
+      const o = r.getPropertyOptions(n), l = typeof o.converter == "function" ? { fromAttribute: o.converter } : ((s = o.converter) === null || s === void 0 ? void 0 : s.fromAttribute) !== void 0 ? o.converter : le;
+      this.__reflectingProperty = n, this[n] = l.fromAttribute(
+        i,
+        o.type
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ), this.__reflectingProperty = null;
+    }
+  }
+  /**
+   * Requests an update which is processed asynchronously. This should be called
+   * when an element should update based on some state not triggered by setting
+   * a reactive property. In this case, pass no arguments. It should also be
+   * called when manually implementing a property setter. In this case, pass the
+   * property `name` and `oldValue` to ensure that any configured property
+   * options are honored.
+   *
+   * @param name name of requesting property
+   * @param oldValue old value of requesting property
+   * @param options property options to use instead of the previously
+   *     configured options
+   * @category updates
+   */
+  requestUpdate(t, i, s) {
+    let r = !0;
+    return t !== void 0 && (s = s || this.constructor.getPropertyOptions(t), (s.hasChanged || fe)(this[t], i) ? (this._$changedProperties.has(t) || this._$changedProperties.set(t, i), s.reflect === !0 && this.__reflectingProperty !== t && (this.__reflectingProperties === void 0 && (this.__reflectingProperties = /* @__PURE__ */ new Map()), this.__reflectingProperties.set(t, s))) : r = !1), !this.isUpdatePending && r && (this.__updatePromise = this.__enqueueUpdate()), Qe(this.localName);
+  }
+  /**
+   * Sets up the element to asynchronously update.
+   */
+  async __enqueueUpdate() {
+    this.isUpdatePending = !0;
+    try {
+      await this.__updatePromise;
+    } catch (i) {
+      Promise.reject(i);
+    }
+    const t = this.scheduleUpdate();
+    return t != null && await t, !this.isUpdatePending;
+  }
+  /**
+   * Schedules an element update. You can override this method to change the
+   * timing of updates by returning a Promise. The update will await the
+   * returned Promise, and you should resolve the Promise to allow the update
+   * to proceed. If this method is overridden, `super.scheduleUpdate()`
+   * must be called.
+   *
+   * For instance, to schedule updates to occur just before the next frame:
+   *
+   * ```ts
+   * override protected async scheduleUpdate(): Promise<unknown> {
+   *   await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+   *   super.scheduleUpdate();
+   * }
+   * ```
+   * @category updates
+   */
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  /**
+   * Performs an element update. Note, if an exception is thrown during the
+   * update, `firstUpdated` and `updated` will not be called.
+   *
+   * Call `performUpdate()` to immediately process a pending update. This should
+   * generally not be needed, but it can be done in rare cases when you need to
+   * update synchronously.
+   *
+   * Note: To ensure `performUpdate()` synchronously completes a pending update,
+   * it should not be overridden. In LitElement 2.x it was suggested to override
+   * `performUpdate()` to also customizing update scheduling. Instead, you should now
+   * override `scheduleUpdate()`. For backwards compatibility with LitElement 2.x,
+   * scheduling updates via `performUpdate()` continues to work, but will make
+   * also calling `performUpdate()` to synchronously process updates difficult.
+   *
+   * @category updates
+   */
+  performUpdate() {
+    var t, i;
+    if (!this.isUpdatePending)
+      return;
+    if (qt?.({ kind: "update" }), !this.hasUpdated) {
+      const n = [];
+      if ((t = this.constructor.__reactivePropertyKeys) === null || t === void 0 || t.forEach((o) => {
+        var l;
+        this.hasOwnProperty(o) && !(!((l = this.__instanceProperties) === null || l === void 0) && l.has(o)) && n.push(o);
+      }), n.length)
+        throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${n.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`);
+    }
+    this.__instanceProperties && (this.__instanceProperties.forEach((n, o) => this[o] = n), this.__instanceProperties = void 0);
+    let s = !1;
+    const r = this._$changedProperties;
+    try {
+      s = this.shouldUpdate(r), s ? (this.willUpdate(r), (i = this.__controllers) === null || i === void 0 || i.forEach((n) => {
+        var o;
+        return (o = n.hostUpdate) === null || o === void 0 ? void 0 : o.call(n);
+      }), this.update(r)) : this.__markUpdated();
+    } catch (n) {
+      throw s = !1, this.__markUpdated(), n;
+    }
+    s && this._$didUpdate(r);
+  }
+  /**
+   * Invoked before `update()` to compute values needed during the update.
+   *
+   * Implement `willUpdate` to compute property values that depend on other
+   * properties and are used in the rest of the update process.
+   *
+   * ```ts
+   * willUpdate(changedProperties) {
+   *   // only need to check changed properties for an expensive computation.
+   *   if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
+   *     this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
+   *   }
+   * }
+   *
+   * render() {
+   *   return html`SHA: ${this.sha}`;
+   * }
+   * ```
+   *
+   * @category updates
+   */
+  willUpdate(t) {
+  }
+  // Note, this is an override point for polyfill-support.
+  // @internal
+  _$didUpdate(t) {
+    var i;
+    (i = this.__controllers) === 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), this.isUpdatePending && this.constructor.enabledWarnings.indexOf("change-in-update") >= 0 && L("change-in-update", `Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`);
+  }
+  __markUpdated() {
+    this._$changedProperties = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+  }
+  /**
+   * Returns a Promise that resolves when the element has completed updating.
+   * The Promise value is a boolean that is `true` if the element completed the
+   * update without triggering another update. The Promise result is `false` if
+   * a property was set inside `updated()`. If the Promise is rejected, an
+   * exception was thrown during the update.
+   *
+   * To await additional asynchronous work, override the `getUpdateComplete`
+   * method. For example, it is sometimes useful to await a rendered element
+   * before fulfilling this Promise. To do this, first await
+   * `super.getUpdateComplete()`, then any subsequent state.
+   *
+   * @return A promise of a boolean that resolves to true if the update completed
+   *     without triggering another update.
+   * @category updates
+   */
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  /**
+   * Override point for the `updateComplete` promise.
+   *
+   * It is not safe to override the `updateComplete` getter directly due to a
+   * limitation in TypeScript which means it is not possible to call a
+   * superclass getter (e.g. `super.updateComplete.then(...)`) when the target
+   * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
+   * This method should be overridden instead. For example:
+   *
+   * ```ts
+   * class MyElement extends LitElement {
+   *   override async getUpdateComplete() {
+   *     const result = await super.getUpdateComplete();
+   *     await this._myChild.updateComplete;
+   *     return result;
+   *   }
+   * }
+   * ```
+   *
+   * @return A promise of a boolean that resolves to true if the update completed
+   *     without triggering another update.
+   * @category updates
+   */
+  getUpdateComplete() {
+    return this.__updatePromise;
+  }
+  /**
+   * Controls whether or not `update()` should be called when the element requests
+   * an update. By default, this method always returns `true`, but this can be
+   * customized to control when to update.
+   *
+   * @param _changedProperties Map of changed properties with old values
+   * @category updates
+   */
+  shouldUpdate(t) {
+    return !0;
+  }
+  /**
+   * Updates the element. This method reflects property values to attributes.
+   * It can be overridden to render and keep updated element DOM.
+   * Setting properties inside this method will *not* trigger
+   * another update.
+   *
+   * @param _changedProperties Map of changed properties with old values
+   * @category updates
+   */
+  update(t) {
+    this.__reflectingProperties !== void 0 && (this.__reflectingProperties.forEach((i, s) => this.__propertyToAttribute(s, this[s], i)), this.__reflectingProperties = void 0), this.__markUpdated();
+  }
+  /**
+   * Invoked whenever the element is updated. Implement to perform
+   * post-updating tasks via DOM APIs, for example, focusing an element.
+   *
+   * Setting properties inside this method will trigger the element to update
+   * again after this update cycle completes.
+   *
+   * @param _changedProperties Map of changed properties with old values
+   * @category updates
+   */
+  updated(t) {
+  }
+  /**
+   * Invoked when the element is first updated. Implement to perform one time
+   * work on the element after update.
+   *
+   * ```ts
+   * firstUpdated() {
+   *   this.renderRoot.getElementById('my-text-area').focus();
+   * }
+   * ```
+   *
+   * Setting properties inside this method will trigger the element to update
+   * again after this update cycle completes.
+   *
+   * @param _changedProperties Map of changed properties with old values
+   * @category updates
+   */
+  firstUpdated(t) {
+  }
+}
+Ke = de;
+N[Ke] = !0;
+N.elementProperties = /* @__PURE__ */ new Map();
+N.elementStyles = [];
+N.shadowRootOptions = { mode: "open" };
+Ct?.({ ReactiveElement: N });
+{
+  N.enabledWarnings = ["change-in-update"];
+  const e = function(t) {
+    t.hasOwnProperty(Je("enabledWarnings")) || (t.enabledWarnings = t.enabledWarnings.slice());
+  };
+  N.enableWarning = function(t) {
+    e(this), this.enabledWarnings.indexOf(t) < 0 && this.enabledWarnings.push(t);
+  }, N.disableWarning = function(t) {
+    e(this);
+    const i = this.enabledWarnings.indexOf(t);
+    i >= 0 && this.enabledWarnings.splice(i, 1);
+  };
+}
+((Wt = P.reactiveElementVersions) !== null && Wt !== void 0 ? Wt : P.reactiveElementVersions = []).push("1.6.3");
+P.reactiveElementVersions.length > 1 && L("multiple-versions", "Multiple versions of Lit loaded. Loading multiple versions is not recommended.");
+var Gt, Zt, Yt, Kt;
+const k = window, c = (e) => {
+  k.emitLitDebugLogEvents && k.dispatchEvent(new CustomEvent("lit-debug", {
+    detail: e
+  }));
+};
+let Si = 0, St;
+(Gt = k.litIssuedWarnings) !== null && Gt !== void 0 || (k.litIssuedWarnings = /* @__PURE__ */ new Set()), St = (e, t) => {
+  t += e ? ` See https://lit.dev/msg/${e} for more information.` : "", k.litIssuedWarnings.has(t) || k.litIssuedWarnings.add(t);
+}, St("dev-mode", "Lit is in dev mode. Not recommended for production!");
+const S = !((Zt = k.ShadyDOM) === null || Zt === void 0) && Zt.inUse && ((Yt = k.ShadyDOM) === null || Yt === void 0 ? void 0 : Yt.noPatch) === !0 ? k.ShadyDOM.wrap : (e) => e, et = k.trustedTypes, Pe = et ? et.createPolicy("lit-html", {
+  createHTML: (e) => e
+}) : void 0, Ai = (e) => e, It = (e, t, i) => Ai, Ti = (e) => {
+  if (q !== It)
+    throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");
+  q = e;
+}, Ei = () => {
+  q = It;
+}, ce = (e, t, i) => q(e, t, i), he = "$lit$", R = `lit$${String(Math.random()).slice(9)}$`, Xe = "?" + R, Pi = `<${Xe}>`, B = document, pt = () => B.createComment(""), mt = (e) => e === null || typeof e != "object" && typeof e != "function", ti = Array.isArray, Ni = (e) => ti(e) || // eslint-disable-next-line @typescript-eslint/no-explicit-any
+typeof e?.[Symbol.iterator] == "function", Qt = `[ 	
+\f\r]`, Ii = `[^ 	
+\f\r"'\`<>=]`, Ri = `[^\\s"'>=/]`, ct = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Ne = 1, Jt = 2, Mi = 3, Ie = /-->/g, Re = />/g, tt = new RegExp(`>|${Qt}(?:(${Ri}+)(${Qt}*=${Qt}*(?:${Ii}|("|')|))|$)`, "g"), zi = 0, Me = 1, Oi = 2, ze = 3, Oe = /'/g, Le = /"/g, ei = /^(?:script|style|textarea|title)$/i, Li = 1, At = 2, ge = 1, Tt = 2, Hi = 3, Ui = 4, Vi = 5, ve = 6, Di = 7, ii = (e) => (t, ...i) => (t.some((s) => s === void 0), {
+  // This property needs to remain unminified.
+  _$litType$: e,
+  strings: t,
+  values: i
+}), w = ii(Li), si = ii(At), W = /* @__PURE__ */ Symbol.for("lit-noChange"), _ = /* @__PURE__ */ Symbol.for("lit-nothing"), He = /* @__PURE__ */ new WeakMap(), D = B.createTreeWalker(B, 129, null, !1);
+let q = It;
+function ri(e, t) {
+  if (!Array.isArray(e) || !e.hasOwnProperty("raw")) {
+    let i = "invalid template strings array";
+    throw i = `
+          Internal Error: expected template strings to be an array
+          with a 'raw' field. Faking a template strings array by
+          calling html or svg like an ordinary function is effectively
+          the same as calling unsafeHtml and can lead to major security
+          issues, e.g. opening your code up to XSS attacks.
+          If you're using the html or svg tagged template functions normally
+          and still seeing this error, please file a bug at
+          https://github.com/lit/lit/issues/new?template=bug_report.md
+          and include information about your build tooling, if any.
+        `.trim().replace(/\n */g, `
+`), new Error(i);
+  }
+  return Pe !== void 0 ? Pe.createHTML(t) : t;
+}
+const ji = (e, t) => {
+  const i = e.length - 1, s = [];
+  let r = t === At ? "<svg>" : "", n, o = ct;
+  for (let a = 0; a < i; a++) {
+    const d = e[a];
+    let h = -1, u, p = 0, g;
+    for (; p < d.length && (o.lastIndex = p, g = o.exec(d), g !== null); )
+      if (p = o.lastIndex, o === ct) {
+        if (g[Ne] === "!--")
+          o = Ie;
+        else if (g[Ne] !== void 0)
+          o = Re;
+        else if (g[Jt] !== void 0)
+          ei.test(g[Jt]) && (n = new RegExp(`</${g[Jt]}`, "g")), o = tt;
+        else if (g[Mi] !== void 0)
+          throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions");
+      } else o === tt ? g[zi] === ">" ? (o = n ?? ct, h = -1) : g[Me] === void 0 ? h = -2 : (h = o.lastIndex - g[Oi].length, u = g[Me], o = g[ze] === void 0 ? tt : g[ze] === '"' ? Le : Oe) : o === Le || o === Oe ? o = tt : o === Ie || o === Re ? o = ct : (o = tt, n = void 0);
+    const E = o === tt && e[a + 1].startsWith("/>") ? " " : "";
+    r += o === ct ? d + Pi : h >= 0 ? (s.push(u), d.slice(0, h) + he + d.slice(h) + R + E) : d + R + (h === -2 ? (s.push(void 0), a) : E);
+  }
+  const l = r + (e[i] || "<?>") + (t === At ? "</svg>" : "");
+  return [ri(e, l), s];
+};
+class ft {
+  constructor({ strings: t, ["_$litType$"]: i }, s) {
+    this.parts = [];
+    let r, n = 0, o = 0;
+    const l = t.length - 1, a = this.parts, [d, h] = ji(t, i);
+    if (this.el = ft.createElement(d, s), D.currentNode = this.el.content, i === At) {
+      const u = this.el.content, p = u.firstChild;
+      p.remove(), u.append(...p.childNodes);
+    }
+    for (; (r = D.nextNode()) !== null && a.length < l; ) {
+      if (r.nodeType === 1) {
+        {
+          const u = r.localName;
+          if (/^(?:textarea|template)$/i.test(u) && r.innerHTML.includes(R)) {
+            const p = `Expressions are not supported inside \`${u}\` elements. See https://lit.dev/msg/expression-in-${u} for more information.`;
+            if (u === "template")
+              throw new Error(p);
+            St("", p);
+          }
+        }
+        if (r.hasAttributes()) {
+          const u = [];
+          for (const p of r.getAttributeNames())
+            if (p.endsWith(he) || p.startsWith(R)) {
+              const g = h[o++];
+              if (u.push(p), g !== void 0) {
+                const nt = r.getAttribute(g.toLowerCase() + he).split(R), Q = /([.?@])?(.*)/.exec(g);
+                a.push({
+                  type: ge,
+                  index: n,
+                  name: Q[2],
+                  strings: nt,
+                  ctor: Q[1] === "." ? Wi : Q[1] === "?" ? Fi : Q[1] === "@" ? Gi : Rt
+                });
+              } else
+                a.push({
+                  type: ve,
+                  index: n
+                });
+            }
+          for (const p of u)
+            r.removeAttribute(p);
+        }
+        if (ei.test(r.tagName)) {
+          const u = r.textContent.split(R), p = u.length - 1;
+          if (p > 0) {
+            r.textContent = et ? et.emptyScript : "";
+            for (let g = 0; g < p; g++)
+              r.append(u[g], pt()), D.nextNode(), a.push({ type: Tt, index: ++n });
+            r.append(u[p], pt());
+          }
+        }
+      } else if (r.nodeType === 8)
+        if (r.data === Xe)
+          a.push({ type: Tt, index: n });
+        else {
+          let p = -1;
+          for (; (p = r.data.indexOf(R, p + 1)) !== -1; )
+            a.push({ type: Di, index: n }), p += R.length - 1;
+        }
+      n++;
+    }
+    c?.({
+      kind: "template prep",
+      template: this,
+      clonableTemplate: this.el,
+      parts: this.parts,
+      strings: t
+    });
+  }
+  // Overridden via `litHtmlPolyfillSupport` to provide platform support.
+  /** @nocollapse */
+  static createElement(t, i) {
+    const s = B.createElement("template");
+    return s.innerHTML = t, s;
+  }
+}
+function it(e, t, i = e, s) {
+  var r, n, o, l;
+  if (t === W)
+    return t;
+  let a = s !== void 0 ? (r = i.__directives) === null || r === void 0 ? void 0 : r[s] : i.__directive;
+  const d = mt(t) ? void 0 : (
+    // This property needs to remain unminified.
+    t._$litDirective$
+  );
+  return a?.constructor !== d && ((n = a?._$notifyDirectiveConnectionChanged) === null || n === void 0 || n.call(a, !1), d === void 0 ? a = void 0 : (a = new d(e), a._$initialize(e, i, s)), s !== void 0 ? ((o = (l = i).__directives) !== null && o !== void 0 ? o : l.__directives = [])[s] = a : i.__directive = a), a !== void 0 && (t = it(e, a._$resolve(e, t.values), a, s)), t;
+}
+class Bi {
+  constructor(t, i) {
+    this._$parts = [], this._$disconnectableChildren = void 0, this._$template = t, this._$parent = i;
+  }
+  // Called by ChildPart parentNode getter
+  get parentNode() {
+    return this._$parent.parentNode;
+  }
+  // See comment in Disconnectable interface for why this is a getter
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  // This method is separate from the constructor because we need to return a
+  // DocumentFragment and we don't want to hold onto it with an instance field.
+  _clone(t) {
+    var i;
+    const { el: { content: s }, parts: r } = this._$template, n = ((i = t?.creationScope) !== null && i !== void 0 ? i : B).importNode(s, !0);
+    D.currentNode = n;
+    let o = D.nextNode(), l = 0, a = 0, d = r[0];
+    for (; d !== void 0; ) {
+      if (l === d.index) {
+        let h;
+        d.type === Tt ? h = new _t(o, o.nextSibling, this, t) : d.type === ge ? h = new d.ctor(o, d.name, d.strings, this, t) : d.type === ve && (h = new Zi(o, this, t)), this._$parts.push(h), d = r[++a];
+      }
+      l !== d?.index && (o = D.nextNode(), l++);
+    }
+    return D.currentNode = B, n;
+  }
+  _update(t) {
+    let i = 0;
+    for (const s of this._$parts)
+      s !== void 0 && (c?.({
+        kind: "set part",
+        part: s,
+        value: t[i],
+        valueIndex: i,
+        values: t,
+        templateInstance: this
+      }), s.strings !== void 0 ? (s._$setValue(t, s, i), i += s.strings.length - 2) : s._$setValue(t[i])), i++;
+  }
+}
+class _t {
+  constructor(t, i, s, r) {
+    var n;
+    this.type = Tt, this._$committedValue = _, this._$disconnectableChildren = void 0, this._$startNode = t, this._$endNode = i, this._$parent = s, this.options = r, this.__isConnected = (n = r?.isConnected) !== null && n !== void 0 ? n : !0, this._textSanitizer = void 0;
+  }
+  // See comment in Disconnectable interface for why this is a getter
+  get _$isConnected() {
+    var t, i;
+    return (i = (t = this._$parent) === null || t === void 0 ? void 0 : t._$isConnected) !== null && i !== void 0 ? i : this.__isConnected;
+  }
+  /**
+   * The parent node into which the part renders its content.
+   *
+   * A ChildPart's content consists of a range of adjacent child nodes of
+   * `.parentNode`, possibly bordered by 'marker nodes' (`.startNode` and
+   * `.endNode`).
+   *
+   * - If both `.startNode` and `.endNode` are non-null, then the part's content
+   * consists of all siblings between `.startNode` and `.endNode`, exclusively.
+   *
+   * - If `.startNode` is non-null but `.endNode` is null, then the part's
+   * content consists of all siblings following `.startNode`, up to and
+   * including the last child of `.parentNode`. If `.endNode` is non-null, then
+   * `.startNode` will always be non-null.
+   *
+   * - If both `.endNode` and `.startNode` are null, then the part's content
+   * consists of all child nodes of `.parentNode`.
+   */
+  get parentNode() {
+    let t = S(this._$startNode).parentNode;
+    const i = this._$parent;
+    return i !== void 0 && t?.nodeType === 11 && (t = i.parentNode), t;
+  }
+  /**
+   * The part's leading marker node, if any. See `.parentNode` for more
+   * information.
+   */
+  get startNode() {
+    return this._$startNode;
+  }
+  /**
+   * The part's trailing marker node, if any. See `.parentNode` for more
+   * information.
+   */
+  get endNode() {
+    return this._$endNode;
+  }
+  _$setValue(t, i = this) {
+    var s;
+    if (this.parentNode === null)
+      throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");
+    if (t = it(this, t, i), mt(t))
+      t === _ || t == null || t === "" ? (this._$committedValue !== _ && (c?.({
+        kind: "commit nothing to child",
+        start: this._$startNode,
+        end: this._$endNode,
+        parent: this._$parent,
+        options: this.options
+      }), this._$clear()), this._$committedValue = _) : t !== this._$committedValue && t !== W && this._commitText(t);
+    else if (t._$litType$ !== void 0)
+      this._commitTemplateResult(t);
+    else if (t.nodeType !== void 0) {
+      if (((s = this.options) === null || s === void 0 ? void 0 : s.host) === t) {
+        this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]");
+        return;
+      }
+      this._commitNode(t);
+    } else Ni(t) ? this._commitIterable(t) : this._commitText(t);
+  }
+  _insert(t) {
+    return S(S(this._$startNode).parentNode).insertBefore(t, this._$endNode);
+  }
+  _commitNode(t) {
+    var i;
+    if (this._$committedValue !== t) {
+      if (this._$clear(), q !== It) {
+        const s = (i = this._$startNode.parentNode) === null || i === void 0 ? void 0 : i.nodeName;
+        if (s === "STYLE" || s === "SCRIPT") {
+          let r = "Forbidden";
+          throw s === "STYLE" ? r = "Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and make do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets." : r = "Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.", new Error(r);
+        }
+      }
+      c?.({
+        kind: "commit node",
+        start: this._$startNode,
+        parent: this._$parent,
+        value: t,
+        options: this.options
+      }), this._$committedValue = this._insert(t);
+    }
+  }
+  _commitText(t) {
+    if (this._$committedValue !== _ && mt(this._$committedValue)) {
+      const i = S(this._$startNode).nextSibling;
+      this._textSanitizer === void 0 && (this._textSanitizer = ce(i, "data", "property")), t = this._textSanitizer(t), c?.({
+        kind: "commit text",
+        node: i,
+        value: t,
+        options: this.options
+      }), i.data = t;
+    } else {
+      const i = B.createTextNode("");
+      this._commitNode(i), this._textSanitizer === void 0 && (this._textSanitizer = ce(i, "data", "property")), t = this._textSanitizer(t), c?.({
+        kind: "commit text",
+        node: i,
+        value: t,
+        options: this.options
+      }), i.data = t;
+    }
+    this._$committedValue = t;
+  }
+  _commitTemplateResult(t) {
+    var i;
+    const { values: s, ["_$litType$"]: r } = t, n = typeof r == "number" ? this._$getTemplate(t) : (r.el === void 0 && (r.el = ft.createElement(ri(r.h, r.h[0]), this.options)), r);
+    if (((i = this._$committedValue) === null || i === void 0 ? void 0 : i._$template) === n)
+      c?.({
+        kind: "template updating",
+        template: n,
+        instance: this._$committedValue,
+        parts: this._$committedValue._$parts,
+        options: this.options,
+        values: s
+      }), this._$committedValue._update(s);
+    else {
+      const o = new Bi(n, this), l = o._clone(this.options);
+      c?.({
+        kind: "template instantiated",
+        template: n,
+        instance: o,
+        parts: o._$parts,
+        options: this.options,
+        fragment: l,
+        values: s
+      }), o._update(s), c?.({
+        kind: "template instantiated and updated",
+        template: n,
+        instance: o,
+        parts: o._$parts,
+        options: this.options,
+        fragment: l,
+        values: s
+      }), this._commitNode(l), this._$committedValue = o;
+    }
+  }
+  // Overridden via `litHtmlPolyfillSupport` to provide platform support.
+  /** @internal */
+  _$getTemplate(t) {
+    let i = He.get(t.strings);
+    return i === void 0 && He.set(t.strings, i = new ft(t)), i;
+  }
+  _commitIterable(t) {
+    ti(this._$committedValue) || (this._$committedValue = [], this._$clear());
+    const i = this._$committedValue;
+    let s = 0, r;
+    for (const n of t)
+      s === i.length ? i.push(r = new _t(this._insert(pt()), this._insert(pt()), this, this.options)) : r = i[s], r._$setValue(n), s++;
+    s < i.length && (this._$clear(r && S(r._$endNode).nextSibling, s), i.length = s);
+  }
+  /**
+   * Removes the nodes contained within this Part from the DOM.
+   *
+   * @param start Start node to clear from, for clearing a subset of the part's
+   *     DOM (used when truncating iterables)
+   * @param from  When `start` is specified, the index within the iterable from
+   *     which ChildParts are being removed, used for disconnecting directives in
+   *     those Parts.
+   *
+   * @internal
+   */
+  _$clear(t = S(this._$startNode).nextSibling, i) {
+    var s;
+    for ((s = this._$notifyConnectionChanged) === null || s === void 0 || s.call(this, !1, !0, i); t && t !== this._$endNode; ) {
+      const r = S(t).nextSibling;
+      S(t).remove(), t = r;
+    }
+  }
+  /**
+   * Implementation of RootPart's `isConnected`. Note that this metod
+   * should only be called on `RootPart`s (the `ChildPart` returned from a
+   * top-level `render()` call). It has no effect on non-root ChildParts.
+   * @param isConnected Whether to set
+   * @internal
+   */
+  setConnected(t) {
+    var i;
+    if (this._$parent === void 0)
+      this.__isConnected = t, (i = this._$notifyConnectionChanged) === null || i === void 0 || i.call(this, t);
+    else
+      throw new Error("part.setConnected() may only be called on a RootPart returned from render().");
+  }
+}
+class Rt {
+  constructor(t, i, s, r, n) {
+    this.type = ge, this._$committedValue = _, this._$disconnectableChildren = void 0, this.element = t, this.name = i, this._$parent = r, this.options = n, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$committedValue = new Array(s.length - 1).fill(new String()), this.strings = s) : this._$committedValue = _, this._sanitizer = void 0;
+  }
+  get tagName() {
+    return this.element.tagName;
+  }
+  // See comment in Disconnectable interface for why this is a getter
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  /**
+   * Sets the value of this part by resolving the value from possibly multiple
+   * values and static strings and committing it to the DOM.
+   * If this part is single-valued, `this._strings` will be undefined, and the
+   * method will be called with a single value argument. If this part is
+   * multi-value, `this._strings` will be defined, and the method is called
+   * with the value array of the part's owning TemplateInstance, and an offset
+   * into the value array from which the values should be read.
+   * This method is overloaded this way to eliminate short-lived array slices
+   * of the template instance values, and allow a fast-path for single-valued
+   * parts.
+   *
+   * @param value The part value, or an array of values for multi-valued parts
+   * @param valueIndex the index to start reading values from. `undefined` for
+   *   single-valued parts
+   * @param noCommit causes the part to not commit its value to the DOM. Used
+   *   in hydration to prime attribute parts with their first-rendered value,
+   *   but not set the attribute, and in SSR to no-op the DOM operation and
+   *   capture the value for serialization.
+   *
+   * @internal
+   */
+  _$setValue(t, i = this, s, r) {
+    const n = this.strings;
+    let o = !1;
+    if (n === void 0)
+      t = it(this, t, i, 0), o = !mt(t) || t !== this._$committedValue && t !== W, o && (this._$committedValue = t);
+    else {
+      const l = t;
+      t = n[0];
+      let a, d;
+      for (a = 0; a < n.length - 1; a++)
+        d = it(this, l[s + a], i, a), d === W && (d = this._$committedValue[a]), o || (o = !mt(d) || d !== this._$committedValue[a]), d === _ ? t = _ : t !== _ && (t += (d ?? "") + n[a + 1]), this._$committedValue[a] = d;
+    }
+    o && !r && this._commitValue(t);
+  }
+  /** @internal */
+  _commitValue(t) {
+    t === _ ? S(this.element).removeAttribute(this.name) : (this._sanitizer === void 0 && (this._sanitizer = q(this.element, this.name, "attribute")), t = this._sanitizer(t ?? ""), c?.({
+      kind: "commit attribute",
+      element: this.element,
+      name: this.name,
+      value: t,
+      options: this.options
+    }), S(this.element).setAttribute(this.name, t ?? ""));
+  }
+}
+class Wi extends Rt {
+  constructor() {
+    super(...arguments), this.type = Hi;
+  }
+  /** @internal */
+  _commitValue(t) {
+    this._sanitizer === void 0 && (this._sanitizer = q(this.element, this.name, "property")), t = this._sanitizer(t), c?.({
+      kind: "commit property",
+      element: this.element,
+      name: this.name,
+      value: t,
+      options: this.options
+    }), this.element[this.name] = t === _ ? void 0 : t;
+  }
+}
+const qi = et ? et.emptyScript : "";
+class Fi extends Rt {
+  constructor() {
+    super(...arguments), this.type = Ui;
+  }
+  /** @internal */
+  _commitValue(t) {
+    c?.({
+      kind: "commit boolean attribute",
+      element: this.element,
+      name: this.name,
+      value: !!(t && t !== _),
+      options: this.options
+    }), t && t !== _ ? S(this.element).setAttribute(this.name, qi) : S(this.element).removeAttribute(this.name);
+  }
+}
+class Gi extends Rt {
+  constructor(t, i, s, r, n) {
+    if (super(t, i, s, r, n), this.type = Vi, this.strings !== void 0)
+      throw new Error(`A \`<${t.localName}>\` has a \`@${i}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`);
+  }
+  // EventPart does not use the base _$setValue/_resolveValue implementation
+  // since the dirty checking is more complex
+  /** @internal */
+  _$setValue(t, i = this) {
+    var s;
+    if (t = (s = it(this, t, i, 0)) !== null && s !== void 0 ? s : _, t === W)
+      return;
+    const r = this._$committedValue, n = t === _ && r !== _ || t.capture !== r.capture || t.once !== r.once || t.passive !== r.passive, o = t !== _ && (r === _ || n);
+    c?.({
+      kind: "commit event listener",
+      element: this.element,
+      name: this.name,
+      value: t,
+      options: this.options,
+      removeListener: n,
+      addListener: o,
+      oldListener: r
+    }), n && this.element.removeEventListener(this.name, this, r), o && this.element.addEventListener(this.name, this, t), this._$committedValue = t;
+  }
+  handleEvent(t) {
+    var i, s;
+    typeof this._$committedValue == "function" ? this._$committedValue.call((s = (i = this.options) === null || i === void 0 ? void 0 : i.host) !== null && s !== void 0 ? s : this.element, t) : this._$committedValue.handleEvent(t);
+  }
+}
+class Zi {
+  constructor(t, i, s) {
+    this.element = t, this.type = ve, this._$disconnectableChildren = void 0, this._$parent = i, this.options = s;
+  }
+  // See comment in Disconnectable interface for why this is a getter
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  _$setValue(t) {
+    c?.({
+      kind: "commit to element binding",
+      element: this.element,
+      value: t,
+      options: this.options
+    }), it(this, t);
+  }
+}
+const Xt = k.litHtmlPolyfillSupportDevMode;
+Xt?.(ft, _t);
+((Kt = k.litHtmlVersions) !== null && Kt !== void 0 ? Kt : k.litHtmlVersions = []).push("2.8.0");
+k.litHtmlVersions.length > 1 && St("multiple-versions", "Multiple versions of Lit loaded. Loading multiple versions is not recommended.");
+const kt = (e, t, i) => {
+  var s, r;
+  if (t == null)
+    throw new TypeError(`The container to render into may not be ${t}`);
+  const n = Si++, o = (s = i?.renderBefore) !== null && s !== void 0 ? s : t;
+  let l = o._$litPart$;
+  if (c?.({
+    kind: "begin render",
+    id: n,
+    value: e,
+    container: t,
+    options: i,
+    part: l
+  }), l === void 0) {
+    const a = (r = i?.renderBefore) !== null && r !== void 0 ? r : null;
+    o._$litPart$ = l = new _t(t.insertBefore(pt(), a), a, void 0, i ?? {});
+  }
+  return l._$setValue(e), c?.({
+    kind: "end render",
+    id: n,
+    value: e,
+    container: t,
+    options: i,
+    part: l
+  }), l;
+};
+kt.setSanitizer = Ti, kt.createSanitizer = ce, kt._testOnlyClearSanitizerFactoryDoNotCallOrElse = Ei;
+var te, ee, ie;
+let _e;
+{
+  const e = (te = globalThis.litIssuedWarnings) !== null && te !== void 0 ? te : globalThis.litIssuedWarnings = /* @__PURE__ */ new Set();
+  _e = (t, i) => {
+    i += ` See https://lit.dev/msg/${t} for more information.`, e.has(i) || e.add(i);
+  };
+}
+class A extends N {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this.__childPart = void 0;
+  }
+  /**
+   * @category rendering
+   */
+  createRenderRoot() {
+    var t, i;
+    const s = super.createRenderRoot();
+    return (t = (i = this.renderOptions).renderBefore) !== null && t !== void 0 || (i.renderBefore = s.firstChild), s;
+  }
+  /**
+   * Updates the element. This method reflects property values to attributes
+   * and calls `render` to render DOM via lit-html. Setting properties inside
+   * this method will *not* trigger another update.
+   * @param changedProperties Map of changed properties with old values
+   * @category updates
+   */
+  update(t) {
+    const i = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this.__childPart = kt(i, this.renderRoot, this.renderOptions);
+  }
+  /**
+   * Invoked when the component is added to the document's DOM.
+   *
+   * In `connectedCallback()` you should setup tasks that should only occur when
+   * the element is connected to the document. The most common of these is
+   * adding event listeners to nodes external to the element, like a keydown
+   * event handler added to the window.
+   *
+   * ```ts
+   * connectedCallback() {
+   *   super.connectedCallback();
+   *   addEventListener('keydown', this._handleKeydown);
+   * }
+   * ```
+   *
+   * Typically, anything done in `connectedCallback()` should be undone when the
+   * element is disconnected, in `disconnectedCallback()`.
+   *
+   * @category lifecycle
+   */
+  connectedCallback() {
+    var t;
+    super.connectedCallback(), (t = this.__childPart) === null || t === void 0 || t.setConnected(!0);
+  }
+  /**
+   * Invoked when the component is removed from the document's DOM.
+   *
+   * This callback is the main signal to the element that it may no longer be
+   * used. `disconnectedCallback()` should ensure that nothing is holding a
+   * reference to the element (such as event listeners added to nodes external
+   * to the element), so that it is free to be garbage collected.
+   *
+   * ```ts
+   * disconnectedCallback() {
+   *   super.disconnectedCallback();
+   *   window.removeEventListener('keydown', this._handleKeydown);
+   * }
+   * ```
+   *
+   * An element may be re-connected after being disconnected.
+   *
+   * @category lifecycle
+   */
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this.__childPart) === null || t === void 0 || t.setConnected(!1);
+  }
+  /**
+   * Invoked on each update to perform rendering tasks. This method may return
+   * any value renderable by lit-html's `ChildPart` - typically a
+   * `TemplateResult`. Setting properties inside this method will *not* trigger
+   * the element to update.
+   * @category rendering
+   */
+  render() {
+    return W;
+  }
+}
+A.finalized = !0;
+A._$litElement$ = !0;
+(ee = globalThis.litElementHydrateSupport) === null || ee === void 0 || ee.call(globalThis, { LitElement: A });
+const se = globalThis.litElementPolyfillSupportDevMode;
+se?.({ LitElement: A });
+A.finalize = function() {
+  if (!N.finalize.call(this))
+    return !1;
+  const t = (i, s, r = !1) => {
+    if (i.hasOwnProperty(s)) {
+      const n = (typeof i == "function" ? i : i.constructor).name;
+      _e(r ? "renamed-api" : "removed-api", `\`${s}\` is implemented on class ${n}. It has been ${r ? "renamed" : "removed"} in this version of LitElement.`);
+    }
+  };
+  return t(this, "render"), t(this, "getStyles", !0), t(this.prototype, "adoptStyles"), !0;
+};
+((ie = globalThis.litElementVersions) !== null && ie !== void 0 ? ie : globalThis.litElementVersions = []).push("3.3.3");
+globalThis.litElementVersions.length > 1 && _e("multiple-versions", "Multiple versions of Lit loaded. Loading multiple versions is not recommended.");
+const Yi = (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: {},
+  // store the original key so subsequent decorators have access to it.
+  originalKey: t.key,
+  // When @babel/plugin-proposal-decorators implements initializers,
+  // do this instead of the initializer below. See:
+  // https://github.com/babel/babel/issues/9260 extras: [
+  //   {
+  //     kind: 'initializer',
+  //     placement: 'own',
+  //     initializer: descriptor.initializer,
+  //   }
+  // ],
+  initializer() {
+    typeof t.initializer == "function" && (this[t.key] = t.initializer.call(this));
+  },
+  finisher(i) {
+    i.createProperty(t.key, e);
+  }
+}, Ki = (e, t, i) => {
+  t.constructor.createProperty(i, e);
+};
+function v(e) {
+  return (t, i) => i !== void 0 ? Ki(e, t, i) : Yi(e, t);
+}
+function H(e) {
+  return v({
+    ...e,
+    state: !0
+  });
+}
+var re;
+const Qi = window;
+((re = Qi.HTMLSlotElement) === null || re === void 0 ? void 0 : re.prototype.assignedElements) != null;
+const Ji = {
+  CHILD: 2
+}, Xi = (e) => (...t) => ({
+  // This property needs to remain unminified.
+  _$litDirective$: e,
+  values: t
+});
+class ts {
+  constructor(t) {
+  }
+  // See comment in Disconnectable interface for why this is a getter
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  /** @internal */
+  _$initialize(t, i, s) {
+    this.__part = t, this._$parent = i, this.__attributeIndex = s;
+  }
+  /** @internal */
+  _$resolve(t, i) {
+    return this.update(t, i);
+  }
+  update(t, i) {
+    return this.render(...i);
+  }
+}
+const es = 1;
+class be extends ts {
+  constructor(t) {
+    if (super(t), this._value = _, t.type !== Ji.CHILD)
+      throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`);
+  }
+  render(t) {
+    if (t === _ || t == null)
+      return this._templateResult = void 0, this._value = t;
+    if (t === W)
+      return t;
+    if (typeof t != "string")
+      throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
+    if (t === this._value)
+      return this._templateResult;
+    this._value = t;
+    const i = [t];
+    return i.raw = i, this._templateResult = {
+      // Cast to a known set of integers that satisfy ResultType so that we
+      // don't have to export ResultType and possibly encourage this pattern.
+      // This property needs to remain unminified.
+      _$litType$: this.constructor.resultType,
+      strings: i,
+      values: []
+    };
+  }
+}
+be.directiveName = "unsafeHTML";
+be.resultType = es;
+const is = Xi(be);
+const C = {
+  INITIAL: 0,
+  PENDING: 1,
+  COMPLETE: 2,
+  ERROR: 3
+}, ss = /* @__PURE__ */ Symbol();
+class rs {
+  /**
+   * A Promise that resolve when the current task run is complete.
+   *
+   * If a new task run is started while a previous run is pending, the Promise
+   * is kept and only resolved when the new run is completed.
+   */
+  get taskComplete() {
+    return this._taskComplete ? this._taskComplete : (this._status === C.PENDING ? this._taskComplete = new Promise((t, i) => {
+      this._resolveTaskComplete = t, this._rejectTaskComplete = i;
+    }) : this._status === C.ERROR ? this._taskComplete = Promise.reject(this._error) : this._taskComplete = Promise.resolve(this._value), this._taskComplete);
+  }
+  constructor(t, i, s) {
+    this._callId = 0, this._status = C.INITIAL, (this._host = t).addController(this);
+    const r = typeof i == "object" ? i : { task: i, args: s };
+    this._task = r.task, this._argsFn = r.args, this._argsEqual = r.argsEqual ?? ns, this._onComplete = r.onComplete, this._onError = r.onError, this.autoRun = r.autoRun ?? !0, "initialValue" in r && (this._value = r.initialValue, this._status = C.COMPLETE, this._previousArgs = this._getArgs?.());
+  }
+  hostUpdate() {
+    this.autoRun === !0 && this._performTask();
+  }
+  hostUpdated() {
+    this.autoRun === "afterUpdate" && this._performTask();
+  }
+  _getArgs() {
+    if (this._argsFn === void 0)
+      return;
+    const t = this._argsFn();
+    if (!Array.isArray(t))
+      throw new Error("The args function must return an array");
+    return t;
+  }
+  /**
+   * Determines if the task should run when it's triggered because of a
+   * host update, and runs the task if it should.
+   *
+   * A task should run when its arguments change from the previous run, based on
+   * the args equality function.
+   *
+   * This method is side-effectful: it stores the new args as the previous args.
+   */
+  async _performTask() {
+    const t = this._getArgs(), i = this._previousArgs;
+    this._previousArgs = t, t !== i && t !== void 0 && (i === void 0 || !this._argsEqual(i, t)) && await this.run(t);
+  }
+  /**
+   * Runs a task manually.
+   *
+   * This can be useful for running tasks in response to events as opposed to
+   * automatically running when host element state changes.
+   *
+   * @param args an optional set of arguments to use for this task run. If args
+   *     is not given, the args function is called to get the arguments for
+   *     this run.
+   */
+  async run(t) {
+    t ??= this._getArgs(), this._previousArgs = t, this._status === C.PENDING ? this._abortController?.abort() : (this._taskComplete = void 0, this._resolveTaskComplete = void 0, this._rejectTaskComplete = void 0), this._status = C.PENDING;
+    let i, s;
+    this.autoRun === "afterUpdate" ? queueMicrotask(() => this._host.requestUpdate()) : this._host.requestUpdate();
+    const r = ++this._callId;
+    this._abortController = new AbortController();
+    let n = !1;
+    try {
+      i = await this._task(t, { signal: this._abortController.signal });
+    } catch (o) {
+      n = !0, s = o;
+    }
+    if (this._callId === r) {
+      if (i === ss)
+        this._status = C.INITIAL;
+      else {
+        if (n === !1) {
+          try {
+            this._onComplete?.(i);
+          } catch {
+          }
+          this._status = C.COMPLETE, this._resolveTaskComplete?.(i);
+        } else {
+          try {
+            this._onError?.(s);
+          } catch {
+          }
+          this._status = C.ERROR, this._rejectTaskComplete?.(s);
+        }
+        this._value = i, this._error = s;
+      }
+      this._host.requestUpdate();
+    }
+  }
+  /**
+   * Aborts the currently pending task run by aborting the AbortSignal
+   * passed to the task function.
+   *
+   * Aborting a task does nothing if the task is not running: ie, in the
+   * complete, error, or initial states.
+   *
+   * Aborting a task does not automatically cancel the task function. The task
+   * function must be written to accept the AbortSignal and either forward it
+   * to other APIs like `fetch()`, or handle cancellation manually by using
+   * [`signal.throwIfAborted()`]{@link https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/throwIfAborted}
+   * or the
+   * [`abort`]{@link https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/abort_event}
+   * event.
+   *
+   * @param reason The reason for aborting. Passed to
+   *     `AbortController.abort()`.
+   */
+  abort(t) {
+    this._status === C.PENDING && this._abortController?.abort(t);
+  }
+  /**
+   * The result of the previous task run, if it resolved.
+   *
+   * Is `undefined` if the task has not run yet, or if the previous run errored.
+   */
+  get value() {
+    return this._value;
+  }
+  /**
+   * The error from the previous task run, if it rejected.
+   *
+   * Is `undefined` if the task has not run yet, or if the previous run
+   * completed successfully.
+   */
+  get error() {
+    return this._error;
+  }
+  get status() {
+    return this._status;
+  }
+  render(t) {
+    switch (this._status) {
+      case C.INITIAL:
+        return t.initial?.();
+      case C.PENDING:
+        return t.pending?.();
+      case C.COMPLETE:
+        return t.complete?.(this.value);
+      case C.ERROR:
+        return t.error?.(this.error);
+      default:
+        throw new Error(`Unexpected status: ${this._status}`);
+    }
+  }
+}
+const ns = (e, t) => e === t || e.length === t.length && e.every((i, s) => !fe(i, t[s]));
+var ne, Ue;
+function os() {
+  if (Ue) return ne;
+  Ue = 1;
+  var e = "Expected a function", t = NaN, i = "[object Symbol]", s = /^\s+|\s+$/g, r = /^[-+]0x[0-9a-f]+$/i, n = /^0b[01]+$/i, o = /^0o[0-7]+$/i, l = parseInt, a = typeof wt == "object" && wt && wt.Object === Object && wt, d = typeof self == "object" && self && self.Object === Object && self, h = a || d || Function("return this")(), u = Object.prototype, p = u.toString, g = Math.max, E = Math.min, nt = function() {
+    return h.Date.now();
+  };
+  function Q(m, x, I) {
+    var J, ot, yt, X, T, U, at = 0, we = !1, lt = !1, Ut = !0;
+    if (typeof m != "function")
+      throw new TypeError(e);
+    x = $e(x) || 0, Ht(I) && (we = !!I.leading, lt = "maxWait" in I, yt = lt ? g($e(I.maxWait) || 0, x) : yt, Ut = "trailing" in I ? !!I.trailing : Ut);
+    function Vt(b) {
+      var z = J, dt = ot;
+      return J = ot = void 0, at = b, X = m.apply(dt, z), X;
+    }
+    function ui(b) {
+      return at = b, T = setTimeout($t, x), we ? Vt(b) : X;
+    }
+    function pi(b) {
+      var z = b - U, dt = b - at, ke = x - z;
+      return lt ? E(ke, yt - dt) : ke;
+    }
+    function xe(b) {
+      var z = b - U, dt = b - at;
+      return U === void 0 || z >= x || z < 0 || lt && dt >= yt;
+    }
+    function $t() {
+      var b = nt();
+      if (xe(b))
+        return Ce(b);
+      T = setTimeout($t, pi(b));
+    }
+    function Ce(b) {
+      return T = void 0, Ut && J ? Vt(b) : (J = ot = void 0, X);
+    }
+    function mi() {
+      T !== void 0 && clearTimeout(T), at = 0, J = U = ot = T = void 0;
+    }
+    function fi() {
+      return T === void 0 ? X : Ce(nt());
+    }
+    function Dt() {
+      var b = nt(), z = xe(b);
+      if (J = arguments, ot = this, U = b, z) {
+        if (T === void 0)
+          return ui(U);
+        if (lt)
+          return T = setTimeout($t, x), Vt(U);
+      }
+      return T === void 0 && (T = setTimeout($t, x)), X;
+    }
+    return Dt.cancel = mi, Dt.flush = fi, Dt;
+  }
+  function Ht(m) {
+    var x = typeof m;
+    return !!m && (x == "object" || x == "function");
+  }
+  function ci(m) {
+    return !!m && typeof m == "object";
+  }
+  function hi(m) {
+    return typeof m == "symbol" || ci(m) && p.call(m) == i;
+  }
+  function $e(m) {
+    if (typeof m == "number")
+      return m;
+    if (hi(m))
+      return t;
+    if (Ht(m)) {
+      var x = typeof m.valueOf == "function" ? m.valueOf() : m;
+      m = Ht(x) ? x + "" : x;
+    }
+    if (typeof m != "string")
+      return m === 0 ? m : +m;
+    m = m.replace(s, "");
+    var I = n.test(m);
+    return I || o.test(m) ? l(m.slice(2), I ? 2 : 8) : r.test(m) ? t : +m;
+  }
+  return ne = Q, ne;
+}
+var as = os();
+const ls = /* @__PURE__ */ gi(as);
+var ds = Object.defineProperty, f = (e, t, i, s) => {
+  for (var r = void 0, n = e.length - 1, o; n >= 0; n--) (o = e[n]) && (r = o(t, i, r) || r);
+  return r && ds(t, i, r), r;
+}, G = (e = "", t) => {
+  customElements.get(e) || customElements.define(e, t);
+}, Ve = (e, t) => [...e].reduce((i, s) => t?.skip?.includes(s.name) ? i : `${i}${s.name}="${s.value}" `, ""), bt = 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 = Ve(this.attributes, { skip: ["name", "fallbacktag"] }), t = Ve(this.refElement?.attributes ?? []);
+    return w`${is(`
+      <style>${this.defaultStyle}</style>
+      <${this.fallbackTag} ${e} ${t}>
+        <slot></slot>
+      </${this.fallbackTag}>`)}`;
+  }
+};
+f([v()], bt.prototype, "name");
+f([v({ type: String || null })], bt.prototype, "fallbackTag");
+f([v({ type: String || null })], bt.prototype, "defaultStyle");
+f([v({ type: String || null })], bt.prototype, "refElement");
+G("appcues-use-ref", bt);
+var cs = () => {
+  let e = {};
+  const t = window.AppcuesSettings?.userIdSignature;
+  return t && (e = { Authorization: `Bearer ${t}` }), e;
+}, hs = async (e, t) => {
+  const i = cs();
+  return await fetch(e, { headers: i, ...t });
+}, us = "https://api.appcues.net/v1/", ps = y`
+  .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;
+  }
+`, ms = y`
+  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;
+  }
+`, fs = y`
+  ul {
+    list-style-type: square;
+    list-style-position: inside;
+    margin: 0;
+    padding: 0 4px;
+  }
+`, gs = y`
+  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);
+  }
+`, vs = y`
+  ::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;
+  }
+`, oe, Et = window, st = Et.trustedTypes, De = st ? st.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, ue = "$lit$", O = `lit$${(Math.random() + "").slice(9)}$`, ni = "?" + O, _s = `<${ni}>`, F = document, Pt = () => F.createComment(""), gt = (e) => e === null || typeof e != "object" && typeof e != "function", oi = Array.isArray, bs = (e) => oi(e) || typeof e?.[Symbol.iterator] == "function", ae = `[ 	
+\f\r]`, ht = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, je = /-->/g, Be = />/g, V = RegExp(`>|${ae}(?:([^\\s"'>=/]+)(${ae}*=${ae}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), We = /'/g, qe = /"/g, ai = /^(?:script|style|textarea|title)$/i, li = (e) => (t, ...i) => ({ _$litType$: e, strings: t, values: i }), ut = li(1), Mt = li(2), vt = /* @__PURE__ */ Symbol.for("lit-noChange"), $ = /* @__PURE__ */ Symbol.for("lit-nothing"), Fe = /* @__PURE__ */ new WeakMap(), j = F.createTreeWalker(F, 129, null, !1);
+function di(e, t) {
+  if (!Array.isArray(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return De !== void 0 ? De.createHTML(t) : t;
+}
+var ys = (e, t) => {
+  const i = e.length - 1, s = [];
+  let r, n = t === 2 ? "<svg>" : "", o = ht;
+  for (let l = 0; l < i; l++) {
+    const a = e[l];
+    let d, h, u = -1, p = 0;
+    for (; p < a.length && (o.lastIndex = p, h = o.exec(a), h !== null); ) p = o.lastIndex, o === ht ? h[1] === "!--" ? o = je : h[1] !== void 0 ? o = Be : h[2] !== void 0 ? (ai.test(h[2]) && (r = RegExp("</" + h[2], "g")), o = V) : h[3] !== void 0 && (o = V) : o === V ? h[0] === ">" ? (o = r ?? ht, u = -1) : h[1] === void 0 ? u = -2 : (u = o.lastIndex - h[2].length, d = h[1], o = h[3] === void 0 ? V : h[3] === '"' ? qe : We) : o === qe || o === We ? o = V : o === je || o === Be ? o = ht : (o = V, r = void 0);
+    const g = o === V && e[l + 1].startsWith("/>") ? " " : "";
+    n += o === ht ? a + _s : u >= 0 ? (s.push(d), a.slice(0, u) + ue + a.slice(u) + O + g) : a + O + (u === -2 ? (s.push(void 0), l) : g);
+  }
+  return [di(e, n + (e[i] || "<?>") + (t === 2 ? "</svg>" : "")), s];
+}, Nt = class {
+  constructor({ strings: e, _$litType$: t }, i) {
+    let s;
+    this.parts = [];
+    let r = 0, n = 0;
+    const o = e.length - 1, l = this.parts, [a, d] = ys(e, t);
+    if (this.el = Nt.createElement(a, i), j.currentNode = this.el.content, t === 2) {
+      const h = this.el.content, u = h.firstChild;
+      u.remove(), h.append(...u.childNodes);
+    }
+    for (; (s = j.nextNode()) !== null && l.length < o; ) {
+      if (s.nodeType === 1) {
+        if (s.hasAttributes()) {
+          const h = [];
+          for (const u of s.getAttributeNames()) if (u.endsWith(ue) || u.startsWith(O)) {
+            const p = d[n++];
+            if (h.push(u), p !== void 0) {
+              const g = s.getAttribute(p.toLowerCase() + ue).split(O), E = /([.?@])?(.*)/.exec(p);
+              l.push({ type: 1, index: r, name: E[2], strings: g, ctor: E[1] === "." ? ws : E[1] === "?" ? Cs : E[1] === "@" ? ks : zt });
+            } else l.push({ type: 6, index: r });
+          }
+          for (const u of h) s.removeAttribute(u);
+        }
+        if (ai.test(s.tagName)) {
+          const h = s.textContent.split(O), u = h.length - 1;
+          if (u > 0) {
+            s.textContent = st ? st.emptyScript : "";
+            for (let p = 0; p < u; p++) s.append(h[p], Pt()), j.nextNode(), l.push({ type: 2, index: ++r });
+            s.append(h[u], Pt());
+          }
+        }
+      } else if (s.nodeType === 8) if (s.data === ni) l.push({ type: 2, index: r });
+      else {
+        let h = -1;
+        for (; (h = s.data.indexOf(O, h + 1)) !== -1; ) l.push({ type: 7, index: r }), h += O.length - 1;
+      }
+      r++;
+    }
+  }
+  static createElement(e, t) {
+    const i = F.createElement("template");
+    return i.innerHTML = e, i;
+  }
+};
+function rt(e, t, i = e, s) {
+  var r, n, o, l;
+  if (t === vt) return t;
+  let a = s !== void 0 ? (r = i._$Co) === null || r === void 0 ? void 0 : r[s] : i._$Cl;
+  const d = gt(t) ? void 0 : t._$litDirective$;
+  return a?.constructor !== d && ((n = a?._$AO) === null || n === void 0 || n.call(a, !1), d === void 0 ? a = void 0 : (a = new d(e), a._$AT(e, i, s)), s !== void 0 ? ((o = (l = i)._$Co) !== null && o !== void 0 ? o : l._$Co = [])[s] = a : i._$Cl = a), a !== void 0 && (t = rt(e, a._$AS(e, t.values), a, s)), t;
+}
+var $s = 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 : F).importNode(i, !0);
+    j.currentNode = r;
+    let n = j.nextNode(), o = 0, l = 0, a = s[0];
+    for (; a !== void 0; ) {
+      if (o === a.index) {
+        let d;
+        a.type === 2 ? d = new ye(n, n.nextSibling, this, e) : a.type === 1 ? d = new a.ctor(n, a.name, a.strings, this, e) : a.type === 6 && (d = new Ss(n, this, e)), this._$AV.push(d), a = s[++l];
+      }
+      o !== a?.index && (n = j.nextNode(), o++);
+    }
+    return j.currentNode = F, 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++;
+  }
+}, ye = class {
+  constructor(e, t, i, s) {
+    var r;
+    this.type = 2, this._$AH = $, 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 = rt(this, e, t), gt(e) ? e === $ || e == null || e === "" ? (this._$AH !== $ && this._$AR(), this._$AH = $) : e !== this._$AH && e !== vt && this._(e) : e._$litType$ !== void 0 ? this.g(e) : e.nodeType !== void 0 ? this.$(e) : bs(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 !== $ && gt(this._$AH) ? this._$AA.nextSibling.data = e : this.$(F.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 = Nt.createElement(di(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 n = new $s(r, this), o = n.u(this.options);
+      n.v(i), this.$(o), this._$AH = n;
+    }
+  }
+  _$AC(e) {
+    let t = Fe.get(e.strings);
+    return t === void 0 && Fe.set(e.strings, t = new Nt(e)), t;
+  }
+  T(e) {
+    oi(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 ye(this.k(Pt()), this.k(Pt()), 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));
+  }
+}, zt = class {
+  constructor(e, t, i, s, r) {
+    this.type = 1, this._$AH = $, 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 = $;
+  }
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e, t = this, i, s) {
+    const r = this.strings;
+    let n = !1;
+    if (r === void 0) e = rt(this, e, t, 0), n = !gt(e) || e !== this._$AH && e !== vt, n && (this._$AH = e);
+    else {
+      const o = e;
+      let l, a;
+      for (e = r[0], l = 0; l < r.length - 1; l++) a = rt(this, o[i + l], t, l), a === vt && (a = this._$AH[l]), n || (n = !gt(a) || a !== this._$AH[l]), a === $ ? e = $ : e !== $ && (e += (a ?? "") + r[l + 1]), this._$AH[l] = a;
+    }
+    n && !s && this.j(e);
+  }
+  j(e) {
+    e === $ ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+  }
+}, ws = class extends zt {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(e) {
+    this.element[this.name] = e === $ ? void 0 : e;
+  }
+}, xs = st ? st.emptyScript : "", Cs = class extends zt {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(e) {
+    e && e !== $ ? this.element.setAttribute(this.name, xs) : this.element.removeAttribute(this.name);
+  }
+}, ks = class extends zt {
+  constructor(e, t, i, s, r) {
+    super(e, t, i, s, r), this.type = 5;
+  }
+  _$AI(e, t = this) {
+    var i;
+    if ((e = (i = rt(this, e, t, 0)) !== null && i !== void 0 ? i : $) === vt) return;
+    const s = this._$AH, r = e === $ && s !== $ || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, n = e !== $ && (s === $ || r);
+    r && this.element.removeEventListener(this.name, this, s), n && 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);
+  }
+}, Ss = 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) {
+    rt(this, e);
+  }
+}, Ge = Et.litHtmlPolyfillSupport;
+Ge?.(Nt, ye), ((oe = Et.litHtmlVersions) !== null && oe !== void 0 ? oe : Et.litHtmlVersions = []).push("2.8.0");
+var As = Mt`
+  <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>
+`, Ts = 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" }]), Es = async ({ accountId: e, userId: t }, i) => {
+  if (!e || !t)
+    return [];
+  const s = window.location.href, r = new URL(`${us}/accounts/${e}/users/${t}/widget`);
+  return r.searchParams.set("url", s), r.searchParams.set("order_by", i), (await hs(r.toString())).json();
+}, Z = class extends A {
+  constructor() {
+    super(...arguments), this.listItems = [], this.orderBy = "sort_order", this.limit = 5, this.listMock = Ts, 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 Es({ accountId: AppcuesBundleSettings?.accountId, userId: e?.userId }, this.orderBy), i = t.map(({ id: s, name: r, public_name: n }) => ({ id: s, name: r, publicName: n }));
+      return this.listItems = i, i;
+    }, this.getListItems = new rs(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=${fs}
+    >
+      ${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">${As}</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>
+    `;
+  }
+};
+Z.styles = [ps, ms, vs, gs];
+f([H()], Z.prototype, "listItems");
+f([v()], Z.prototype, "orderBy");
+f([v({ type: Number })], Z.prototype, "limit");
+f([v()], Z.prototype, "listMock");
+f([v({ type: String })], Z.prototype, "mode");
+G("appcues-flows-list", Z);
+var Ps = y`
+  .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;
+  }
+`, Ns = y`
+  .checklist-content {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-inline-end: 18px;
+    justify-content: center;
+    gap: 6px;
+    line-height: 1.2;
+  }
+`, Is = y`
+  .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);
+  }
+`, M = 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: n, background: o } = getComputedStyle(r);
+      this.mainColor = n || o, this.style.setProperty("--launcher-main-color", this.mainColor);
+    }, this.progressbar = () => {
+      if (this.totalItems > 8)
+        return ut`<progress
+        id="items"
+        value="${this.completedItems}"
+        max="${this.totalItems}"
+      ></progress>`;
+      const e = [];
+      for (let t = 0; t < this.totalItems; t++)
+        e.push(ut`<div
+          class="progress-bar ${t < this.completedItems && "completed"}"
+        ></div>`);
+      return e;
+    }, this.slotElement = () => ut`
+    <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", vi((e) => {
+      const t = e, { id: i, name: s, totalItems: r, completedItems: n } = t.detail;
+      this.totalItems = r, this.completedItems = n, this.title = s, this.checklistId = i, bi();
+    }), _i(() => {
+      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 ut`
+      <div class="btn-wrapper">
+        ${this.totalItems === 0 ? this.slotElement() : ut`
+              <button @click="${() => Se(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: () => Se(this.checklistId, !0), capture: !0 }}"
+              >
+                ${this.slotElement()}
+              </div>
+            `}
+      </div>
+    `;
+  }
+};
+M.styles = [Ps, Ns, Is];
+f([v()], M.prototype, "title");
+f([v()], M.prototype, "totalItems");
+f([v()], M.prototype, "completedItems");
+f([v()], M.prototype, "activeColor");
+f([v()], M.prototype, "hoverColor");
+f([H()], M.prototype, "mainColor");
+f([H()], M.prototype, "checklistId");
+G("appcues-checklist-wrapper", M);
+var Rs = y`
+  .page {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .idle {
+    display: none;
+  }
+
+  .hidden {
+    pointer-events: none;
+  }
+
+  .animated {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+`, Ms = y`
+  .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);
+    }
+  }
+`, zs = y`
+  .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;
+    }
+  }
+`, Ot = 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>
+    `;
+  }
+};
+Ot.styles = [Rs, Ms, zs];
+f([H()], Ot.prototype, "status");
+f([v()], Ot.prototype, "minHeight");
+G("appcues-page", Ot);
+var Os = y`
+  .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;
+  }
+`, Y = 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>
+    `;
+  }
+};
+Y.styles = [Os];
+f([H()], Y.prototype, "currentPage");
+f([H()], Y.prototype, "pages");
+f([H()], Y.prototype, "currentHeight");
+f([v()], Y.prototype, "entry");
+f([v()], Y.prototype, "exit");
+G("appcues-navigation-stack", Y);
+var Ls = Mt`
+  <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>
+`, Hs = Mt`
+  <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>
+`, Ze = Mt`
+  <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>
+`, Us = y`
+  @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);
+    }
+  }
+`, Vs = y`
+  :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;
+  }
+`, Ds = y`
+  .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;
+  }
+`, Lt = 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 = ls(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)}">
+            ${Ze}
+          </button>
+        </div>
+        <div class="search-container ${this.showSearchBar ? "show" : "hide"}">
+          <button
+            class="return-button"
+            @click="${() => this.setSearchMode(!1)}"
+          >
+            ${Hs}
+          </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 ? Ls : Ze}
+            </button>
+          </form>
+        </div>
+      </div>
+    `;
+  }
+};
+Lt.styles = [Us, Vs, Ds];
+f([H()], Lt.prototype, "showSearchBar");
+f([v({ converter: (e) => e === "true" })], Lt.prototype, "loading");
+G("appcues-search-header", Lt);
+var js = (e) => e && new DOMParser().parseFromString(e, "text/html").body.textContent || "", Bs = y`
+  :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;
+  }
+`, Ws = y`
+  .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);
+  }
+`, qs = y`
+  .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;
+  }
+`, Fs = y`
+  @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;
+  }
+`, Gs = si`
+  <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>
+`, Zs = si`
+  <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>
+`, K = 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>
+                      ${Zs}
+                    </div>
+                    <p class="article-description ${this.state}">
+                      ${js(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 ${Gs}
+                </button>
+              ` : w``}
+        </div>
+      </div>
+    `;
+  }
+};
+K.styles = [Bs, qs, Fs, Ws];
+f([v()], K.prototype, "state");
+f([v()], K.prototype, "searchTerm");
+f([v({ converter: (e) => e === "true" })], K.prototype, "hasNextPage");
+f([v()], K.prototype, "pageSize");
+f([v({ type: Array })], K.prototype, "results");
+G("appcues-search-results", K);