obi-sdk 0.14.0 → 0.14.1

package/dist/modular/chunks/{obi-widget-aa83cfb0.js → obi-widget-381a94c3.js}

@@ -1,4 +1,4 @@
-import { S as SDKState, E as EventEmitter, R as RoomEvent, T as Track, z as z$3, a as Room, A as API_BASE_URL, N as N$2 } from "./types-f38a47f6.js";
+import { S as SDKState, E as EventEmitter, R as RoomEvent, T as Track, z as z$3, a as Room, A as API_BASE_URL, N as N$2 } from "./types-eb1fb85a.js";
 const PATH_PARAM_RE = /\{[^{}]+\}/g;
 function randomID() {
   return Math.random().toString(36).slice(2, 11);
@@ -620,12 +620,12 @@ class ObiClient {
       body: data
     });
   }
-  async getJoinToken(token, { skipIntro, user } = {}) {
+  async getJoinToken(token, { clientType, user } = {}) {
     return await this.client.GET("/api/join-token", {
       params: {
         query: {
           token,
-          ...skipIntro && { skip_intro: "true" },
+          ...clientType && { client_type: clientType },
           ...user && { user: encodeURIComponent(user) }
         }
       }
@@ -646,10 +646,10 @@ class ObiClient {
 }
 const DEFAULT_API_BASE_URL = "https://app.coragents.ai";
 class ObiSession {
-  constructor({ sessionId, apiBaseUrl, embedded, user }) {
+  constructor({ sessionId, apiBaseUrl, clientType, user }) {
     this.currentState = SDKState.READY;
     this.livekitState = "speaking";
-    this.embedded = false;
+    this.clientType = "lp";
     this.agentHasSpoken = false;
     this.assistantAudioContext = null;
     this.userAudioContext = null;
@@ -658,7 +658,7 @@ class ObiSession {
     this.user = void 0;
     this.sessionId = sessionId;
     this.apiBaseUrl = apiBaseUrl || DEFAULT_API_BASE_URL;
-    this.embedded = embedded ?? true;
+    this.clientType = clientType ?? "lp";
     this.client = new ObiClient({
       baseUrl: this.apiBaseUrl
     });
@@ -807,7 +807,7 @@ class ObiSession {
       });
       this.setupRoomEventListeners();
       const joinToken = await this.client.getJoinToken(this.sessionId, {
-        skipIntro: this.embedded,
+        clientType: this.clientType,
         ...this.user && { user: JSON.stringify(this.user) }
       });
       await this.room.connect(joinToken.data.url, joinToken.data.token);
@@ -896,6 +896,22 @@ class ObiSession {
       throw new Error("Microphone permission denied");
     }
   }
+  async requestMicrophoneAndPublish() {
+    if (!this.room) {
+      console.warn("[obi] shareMic called while not connected");
+      return;
+    }
+    await this.requestMicrophone();
+    if (!this.microphoneStream) {
+      console.warn("[obi] failed to share microphone");
+      return;
+    }
+    const micTrack = this.microphoneStream.getAudioTracks()[0];
+    await this.room.localParticipant.publishTrack(micTrack, {
+      name: "microphone",
+      source: Track.Source.Microphone
+    });
+  }
   async shareMic() {
     if (!this.room) {
       console.warn("[obi] shareMic called while not connected");
@@ -903,22 +919,18 @@ class ObiSession {
     }
     this.emitter.emit("preMicShare");
     try {
-      await this.requestMicrophone();
-      if (!this.microphoneStream) {
-        console.warn("[obi] failed to share microphone");
-        return;
-      }
-      const micTrack = this.microphoneStream.getAudioTracks()[0];
-      await this.room.localParticipant.publishTrack(micTrack, {
-        name: "microphone",
-        source: Track.Source.Microphone
-      });
+      await this.requestMicrophoneAndPublish();
       await this.room.localParticipant.publishData(new TextEncoder().encode(JSON.stringify({
         request: "share_mic",
         success: true
       })), { reliable: true });
-      this.emitter.emit("micShared");
+      this.emitter.emit("micShared", true);
     } catch (error) {
+      await this.room.localParticipant.publishData(new TextEncoder().encode(JSON.stringify({
+        request: "share_mic",
+        success: false
+      })), { reliable: true });
+      this.emitter.emit("micShared", false);
       console.error("[obi] error sharing microphone:", error);
       this.emitter.emit("error", error instanceof Error ? error : new Error(String(error)));
     }
@@ -8909,7 +8921,7 @@ var CanvasRenderer = (
     };
     CanvasRenderer2.prototype.renderStackContent = function(stack) {
       return __awaiter(this, void 0, void 0, function() {
-        var _i, _a2, child, _b2, _c, child, _d, _e2, child, _f, _g, child, _h, _j, child, _k, _l, child, _m, _o, child;
+        var _i, _a2, child, _b2, _c, child, _d, _e2, child, _f, _g, child, _h, _j, child, _k, _l, child, _m, _o2, child;
         return __generator(this, function(_p) {
           switch (_p.label) {
             case 0:
@@ -9010,12 +9022,12 @@ var CanvasRenderer = (
               _k++;
               return [3, 23];
             case 26:
-              _m = 0, _o = stack.positiveZIndex;
+              _m = 0, _o2 = stack.positiveZIndex;
               _p.label = 27;
             case 27:
-              if (!(_m < _o.length))
+              if (!(_m < _o2.length))
                 return [3, 30];
-              child = _o[_m];
+              child = _o2[_m];
               return [4, this.renderStack(child)];
             case 28:
               _p.sent();
@@ -9665,7 +9677,7 @@ if (typeof window !== "undefined") {
 var renderElement = function(element, opts) {
   return __awaiter(void 0, void 0, void 0, function() {
     var ownerDocument, defaultView, resourceOptions, contextOptions, windowOptions, windowBounds, context, foreignObjectRendering, cloneOptions, documentCloner, clonedElement, container, _a2, width, height, left, top, backgroundColor2, renderOptions, canvas, renderer, root, renderer;
-    var _b2, _c, _d, _e2, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t2;
+    var _b2, _c, _d, _e2, _f, _g, _h, _j, _k, _l, _m, _o2, _p, _q, _r, _s, _t2;
     return __generator(this, function(_u) {
       switch (_u.label) {
         case 0:
@@ -9718,7 +9730,7 @@ var renderElement = function(element, opts) {
           renderOptions = {
             canvas: opts.canvas,
             backgroundColor: backgroundColor2,
-            scale: (_o = (_m = opts.scale) !== null && _m !== void 0 ? _m : defaultView.devicePixelRatio) !== null && _o !== void 0 ? _o : 1,
+            scale: (_o2 = (_m = opts.scale) !== null && _m !== void 0 ? _m : defaultView.devicePixelRatio) !== null && _o2 !== void 0 ? _o2 : 1,
             x: ((_p = opts.x) !== null && _p !== void 0 ? _p : 0) + left,
             y: ((_q = opts.y) !== null && _q !== void 0 ? _q : 0) + top,
             width: (_r = opts.width) !== null && _r !== void 0 ? _r : Math.ceil(width),
@@ -10029,8 +10041,8 @@ let y$1 = class y extends HTMLElement {
   }
 };
 y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$1("elementProperties")] = /* @__PURE__ */ new Map(), y$1[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1?.({ ReactiveElement: y$1 }), (a$2.reactiveElementVersions ?? (a$2.reactiveElementVersions = [])).push("2.1.0");
-const t$1 = globalThis, i$2 = t$1.trustedTypes, s$2 = i$2 ? i$2.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$2 = "$lit$", h$2 = `lit$${Math.random().toFixed(9).slice(2)}$`, o$4 = "?" + h$2, n$3 = `<${o$4}>`, r$3 = document, l = () => r$3.createComment(""), c$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a$1 = Array.isArray, u = (t2) => a$1(t2) || "function" == typeof t2?.[Symbol.iterator], d = "[ 	\n\f\r]", f$3 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v$1 = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g$1 = /"/g, $$1 = /^(?:script|style|textarea|title)$/i, y2 = (t2) => (i3, ...s2) => ({ _$litType$: t2, strings: i3, values: s2 }), x = y2(1), b = y2(2), T$1 = Symbol.for("lit-noChange"), E$1 = Symbol.for("lit-nothing"), A$1 = /* @__PURE__ */ new WeakMap(), C$1 = r$3.createTreeWalker(r$3, 129);
+const t$1 = globalThis, i$2 = t$1.trustedTypes, s$2 = i$2 ? i$2.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$2 = "$lit$", h$2 = `lit$${Math.random().toFixed(9).slice(2)}$`, o$4 = "?" + h$2, n$3 = `<${o$4}>`, r$3 = document, l = () => r$3.createComment(""), c$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a$1 = Array.isArray, u = (t2) => a$1(t2) || "function" == typeof t2?.[Symbol.iterator], d = "[ 	\n\f\r]", f$3 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v$1 = /-->/g, _ = />/g, m$1 = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $$1 = /^(?:script|style|textarea|title)$/i, y2 = (t2) => (i3, ...s2) => ({ _$litType$: t2, strings: i3, values: s2 }), x = y2(1), b = y2(2), T$1 = Symbol.for("lit-noChange"), E$1 = Symbol.for("lit-nothing"), A$1 = /* @__PURE__ */ new WeakMap(), C$1 = r$3.createTreeWalker(r$3, 129);
 function P$1(t2, i3) {
   if (!a$1(t2) || !t2.hasOwnProperty("raw"))
     throw Error("invalid template strings array");
@@ -10043,8 +10055,8 @@ const V$1 = (t2, i3) => {
     const s3 = t2[i4];
     let a2, u2, d2 = -1, y3 = 0;
     for (; y3 < s3.length && (c2.lastIndex = y3, u2 = c2.exec(s3), null !== u2); )
-      y3 = c2.lastIndex, c2 === f$3 ? "!--" === u2[1] ? c2 = v$1 : void 0 !== u2[1] ? c2 = _ : void 0 !== u2[2] ? ($$1.test(u2[2]) && (r2 = RegExp("</" + u2[2], "g")), c2 = m) : void 0 !== u2[3] && (c2 = m) : c2 === m ? ">" === u2[0] ? (c2 = r2 ?? f$3, d2 = -1) : void 0 === u2[1] ? d2 = -2 : (d2 = c2.lastIndex - u2[2].length, a2 = u2[1], c2 = void 0 === u2[3] ? m : '"' === u2[3] ? g$1 : p) : c2 === g$1 || c2 === p ? c2 = m : c2 === v$1 || c2 === _ ? c2 = f$3 : (c2 = m, r2 = void 0);
-    const x2 = c2 === m && t2[i4 + 1].startsWith("/>") ? " " : "";
+      y3 = c2.lastIndex, c2 === f$3 ? "!--" === u2[1] ? c2 = v$1 : void 0 !== u2[1] ? c2 = _ : void 0 !== u2[2] ? ($$1.test(u2[2]) && (r2 = RegExp("</" + u2[2], "g")), c2 = m$1) : void 0 !== u2[3] && (c2 = m$1) : c2 === m$1 ? ">" === u2[0] ? (c2 = r2 ?? f$3, d2 = -1) : void 0 === u2[1] ? d2 = -2 : (d2 = c2.lastIndex - u2[2].length, a2 = u2[1], c2 = void 0 === u2[3] ? m$1 : '"' === u2[3] ? g : p) : c2 === g || c2 === p ? c2 = m$1 : c2 === v$1 || c2 === _ ? c2 = f$3 : (c2 = m$1, r2 = void 0);
+    const x2 = c2 === m$1 && t2[i4 + 1].startsWith("/>") ? " " : "";
     l2 += c2 === f$3 ? s3 + n$3 : d2 >= 0 ? (o2.push(a2), s3.slice(0, d2) + e$2 + s3.slice(d2) + h$2 + x2) : s3 + h$2 + (-2 === d2 ? i4 : x2);
   }
   return [P$1(t2, l2 + (t2[s2] || "<?>") + (2 === i3 ? "</svg>" : 3 === i3 ? "</math>" : "")), o2];
@@ -17836,19 +17848,19 @@ if (!customElements.get("obi-searching-loader")) {
   customElements.define("obi-searching-loader", SearchingLoader);
 }
 const searchingLoader = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, SearchingLoader }, Symbol.toStringTag, { value: "Module" }));
-const ne = globalThis, we = ne.ShadowRoot && (ne.ShadyCSS === void 0 || ne.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Me = Symbol(), Pe = /* @__PURE__ */ new WeakMap();
-let Xe = class {
+const de = globalThis, Ae = de.ShadowRoot && (de.ShadyCSS === void 0 || de.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, qe = Symbol(), Ne = /* @__PURE__ */ new WeakMap();
+let tt = class {
   constructor(e2, i3, o2) {
-    if (this._$cssResult$ = true, o2 !== Me)
+    if (this._$cssResult$ = true, o2 !== qe)
       throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e2, this.t = i3;
   }
   get styleSheet() {
     let e2 = this.o;
     const i3 = this.t;
-    if (we && e2 === void 0) {
+    if (Ae && e2 === void 0) {
       const o2 = i3 !== void 0 && i3.length === 1;
-      o2 && (e2 = Pe.get(i3)), e2 === void 0 && ((this.o = e2 = new CSSStyleSheet()).replaceSync(this.cssText), o2 && Pe.set(i3, e2));
+      o2 && (e2 = Ne.get(i3)), e2 === void 0 && ((this.o = e2 = new CSSStyleSheet()).replaceSync(this.cssText), o2 && Ne.set(i3, e2));
     }
     return e2;
   }
@@ -17856,24 +17868,24 @@ let Xe = class {
     return this.cssText;
   }
 };
-const Ze = (s2) => new Xe(typeof s2 == "string" ? s2 : s2 + "", void 0, Me), Je = (s2, e2) => {
-  if (we)
+const ot = (s2) => new tt(typeof s2 == "string" ? s2 : s2 + "", void 0, qe), it = (s2, e2) => {
+  if (Ae)
     s2.adoptedStyleSheets = e2.map((i3) => i3 instanceof CSSStyleSheet ? i3 : i3.styleSheet);
   else
     for (const i3 of e2) {
-      const o2 = document.createElement("style"), t2 = ne.litNonce;
+      const o2 = document.createElement("style"), t2 = de.litNonce;
       t2 !== void 0 && o2.setAttribute("nonce", t2), o2.textContent = i3.cssText, s2.appendChild(o2);
     }
-}, Se = we ? (s2) => s2 : (s2) => s2 instanceof CSSStyleSheet ? ((e2) => {
+}, ke = Ae ? (s2) => s2 : (s2) => s2 instanceof CSSStyleSheet ? ((e2) => {
   let i3 = "";
   for (const o2 of e2.cssRules)
     i3 += o2.cssText;
-  return Ze(i3);
+  return ot(i3);
 })(s2) : s2;
-const { is: Ke, defineProperty: Qe, getOwnPropertyDescriptor: et, getOwnPropertyNames: tt, getOwnPropertySymbols: ot, getPrototypeOf: it } = Object, C = globalThis, De = C.trustedTypes, st = De ? De.emptyScript : "", rt = C.reactiveElementPolyfillSupport, Q = (s2, e2) => s2, ae = { toAttribute(s2, e2) {
+const { is: st, defineProperty: rt, getOwnPropertyDescriptor: nt, getOwnPropertyNames: at, getOwnPropertySymbols: lt, getPrototypeOf: ct } = Object, C = globalThis, ze = C.trustedTypes, dt = ze ? ze.emptyScript : "", ht = C.reactiveElementPolyfillSupport, oe = (s2, e2) => s2, he = { toAttribute(s2, e2) {
   switch (e2) {
     case Boolean:
-      s2 = s2 ? st : null;
+      s2 = s2 ? dt : null;
       break;
     case Object:
     case Array:
@@ -17898,46 +17910,46 @@ const { is: Ke, defineProperty: Qe, getOwnPropertyDescriptor: et, getOwnProperty
       }
   }
   return i3;
-} }, _e = (s2, e2) => !Ke(s2, e2), je = { attribute: true, type: String, converter: ae, reflect: false, useDefault: false, hasChanged: _e };
+} }, Pe = (s2, e2) => !st(s2, e2), Be = { attribute: true, type: String, converter: he, reflect: false, useDefault: false, hasChanged: Pe };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), C.litPropertyMetadata ?? (C.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class J extends HTMLElement {
+class ee extends HTMLElement {
   static addInitializer(e2) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e2);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e2, i3 = je) {
+  static createProperty(e2, i3 = Be) {
     if (i3.state && (i3.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(e2) && ((i3 = Object.create(i3)).wrapped = true), this.elementProperties.set(e2, i3), !i3.noAccessor) {
       const o2 = Symbol(), t2 = this.getPropertyDescriptor(e2, o2, i3);
-      t2 !== void 0 && Qe(this.prototype, e2, t2);
+      t2 !== void 0 && rt(this.prototype, e2, t2);
     }
   }
   static getPropertyDescriptor(e2, i3, o2) {
-    const { get: t2, set: r2 } = et(this.prototype, e2) ?? { get() {
+    const { get: t2, set: r2 } = nt(this.prototype, e2) ?? { get() {
       return this[i3];
     }, set(n3) {
       this[i3] = n3;
     } };
     return { get: t2, set(n3) {
-      const h2 = t2?.call(this);
-      r2?.call(this, n3), this.requestUpdate(e2, h2, o2);
+      const d2 = t2?.call(this);
+      r2?.call(this, n3), this.requestUpdate(e2, d2, o2);
     }, configurable: true, enumerable: true };
   }
   static getPropertyOptions(e2) {
-    return this.elementProperties.get(e2) ?? je;
+    return this.elementProperties.get(e2) ?? Be;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(Q("elementProperties")))
+    if (this.hasOwnProperty(oe("elementProperties")))
       return;
-    const e2 = it(this);
+    const e2 = ct(this);
     e2.finalize(), e2.l !== void 0 && (this.l = [...e2.l]), this.elementProperties = new Map(e2.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(Q("finalized")))
+    if (this.hasOwnProperty(oe("finalized")))
       return;
-    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(Q("properties"))) {
-      const i3 = this.properties, o2 = [...tt(i3), ...ot(i3)];
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(oe("properties"))) {
+      const i3 = this.properties, o2 = [...at(i3), ...lt(i3)];
       for (const t2 of o2)
         this.createProperty(t2, i3[t2]);
     }
@@ -17960,9 +17972,9 @@ class J extends HTMLElement {
     if (Array.isArray(e2)) {
       const o2 = new Set(e2.flat(1 / 0).reverse());
       for (const t2 of o2)
-        i3.unshift(Se(t2));
+        i3.unshift(ke(t2));
     } else
-      e2 !== void 0 && i3.push(Se(e2));
+      e2 !== void 0 && i3.push(ke(e2));
     return i3;
   }
   static _$Eu(e2, i3) {
@@ -17989,7 +18001,7 @@ class J extends HTMLElement {
   }
   createRenderRoot() {
     const e2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Je(e2, this.constructor.elementStyles), e2;
+    return it(e2, this.constructor.elementStyles), e2;
   }
   connectedCallback() {
     this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((e2) => e2.hostConnected?.());
@@ -18005,21 +18017,21 @@ class J extends HTMLElement {
   _$ET(e2, i3) {
     const o2 = this.constructor.elementProperties.get(e2), t2 = this.constructor._$Eu(e2, o2);
     if (t2 !== void 0 && o2.reflect === true) {
-      const r2 = (o2.converter?.toAttribute !== void 0 ? o2.converter : ae).toAttribute(i3, o2.type);
+      const r2 = (o2.converter?.toAttribute !== void 0 ? o2.converter : he).toAttribute(i3, o2.type);
       this._$Em = e2, r2 == null ? this.removeAttribute(t2) : this.setAttribute(t2, r2), this._$Em = null;
     }
   }
   _$AK(e2, i3) {
     const o2 = this.constructor, t2 = o2._$Eh.get(e2);
     if (t2 !== void 0 && this._$Em !== t2) {
-      const r2 = o2.getPropertyOptions(t2), n3 = typeof r2.converter == "function" ? { fromAttribute: r2.converter } : r2.converter?.fromAttribute !== void 0 ? r2.converter : ae;
+      const r2 = o2.getPropertyOptions(t2), n3 = typeof r2.converter == "function" ? { fromAttribute: r2.converter } : r2.converter?.fromAttribute !== void 0 ? r2.converter : he;
       this._$Em = t2, this[t2] = n3.fromAttribute(i3, r2.type) ?? this._$Ej?.get(t2) ?? null, this._$Em = null;
     }
   }
   requestUpdate(e2, i3, o2) {
     if (e2 !== void 0) {
       const t2 = this.constructor, r2 = this[e2];
-      if (o2 ?? (o2 = t2.getPropertyOptions(e2)), !((o2.hasChanged ?? _e)(r2, i3) || o2.useDefault && o2.reflect && r2 === this._$Ej?.get(e2) && !this.hasAttribute(t2._$Eu(e2, o2))))
+      if (o2 ?? (o2 = t2.getPropertyOptions(e2)), !((o2.hasChanged ?? Pe)(r2, i3) || o2.useDefault && o2.reflect && r2 === this._$Ej?.get(e2) && !this.hasAttribute(t2._$Eu(e2, o2))))
         return;
       this.C(e2, i3, o2);
     }
@@ -18053,8 +18065,8 @@ class J extends HTMLElement {
       const o2 = this.constructor.elementProperties;
       if (o2.size > 0)
         for (const [t2, r2] of o2) {
-          const { wrapped: n3 } = r2, h2 = this[t2];
-          n3 !== true || this._$AL.has(t2) || h2 === void 0 || this.C(t2, void 0, r2, h2);
+          const { wrapped: n3 } = r2, d2 = this[t2];
+          n3 !== true || this._$AL.has(t2) || d2 === void 0 || this.C(t2, void 0, r2, d2);
         }
     }
     let e2 = false;
@@ -18091,30 +18103,30 @@ class J extends HTMLElement {
   firstUpdated(e2) {
   }
 }
-J.elementStyles = [], J.shadowRootOptions = { mode: "open" }, J[Q("elementProperties")] = /* @__PURE__ */ new Map(), J[Q("finalized")] = /* @__PURE__ */ new Map(), rt?.({ ReactiveElement: J }), (C.reactiveElementVersions ?? (C.reactiveElementVersions = [])).push("2.1.0");
-const nt = { attribute: true, type: String, converter: ae, reflect: false, hasChanged: _e }, at = (s2 = nt, e2, i3) => {
+ee.elementStyles = [], ee.shadowRootOptions = { mode: "open" }, ee[oe("elementProperties")] = /* @__PURE__ */ new Map(), ee[oe("finalized")] = /* @__PURE__ */ new Map(), ht?.({ ReactiveElement: ee }), (C.reactiveElementVersions ?? (C.reactiveElementVersions = [])).push("2.1.0");
+const pt = { attribute: true, type: String, converter: he, reflect: false, hasChanged: Pe }, ut = (s2 = pt, e2, i3) => {
   const { kind: o2, metadata: t2 } = i3;
   let r2 = globalThis.litPropertyMetadata.get(t2);
   if (r2 === void 0 && globalThis.litPropertyMetadata.set(t2, r2 = /* @__PURE__ */ new Map()), o2 === "setter" && ((s2 = Object.create(s2)).wrapped = true), r2.set(i3.name, s2), o2 === "accessor") {
     const { name: n3 } = i3;
-    return { set(h2) {
+    return { set(d2) {
       const l2 = e2.get.call(this);
-      e2.set.call(this, h2), this.requestUpdate(n3, l2, s2);
-    }, init(h2) {
-      return h2 !== void 0 && this.C(n3, void 0, s2, h2), h2;
+      e2.set.call(this, d2), this.requestUpdate(n3, l2, s2);
+    }, init(d2) {
+      return d2 !== void 0 && this.C(n3, void 0, s2, d2), d2;
     } };
   }
   if (o2 === "setter") {
     const { name: n3 } = i3;
-    return function(h2) {
+    return function(d2) {
       const l2 = this[n3];
-      e2.call(this, h2), this.requestUpdate(n3, l2, s2);
+      e2.call(this, d2), this.requestUpdate(n3, l2, s2);
     };
   }
   throw Error("Unsupported decorator location: " + o2);
 };
 function a(s2) {
-  return (e2, i3) => typeof i3 == "object" ? at(s2, e2, i3) : ((o2, t2, r2) => {
+  return (e2, i3) => typeof i3 == "object" ? ut(s2, e2, i3) : ((o2, t2, r2) => {
     const n3 = t2.hasOwnProperty(r2);
     return t2.constructor.createProperty(r2, o2), n3 ? Object.getOwnPropertyDescriptor(t2, r2) : void 0;
   })(s2, e2, i3);
@@ -18122,12 +18134,12 @@ function a(s2) {
 function v(s2) {
   return a({ ...s2, state: true, attribute: false });
 }
-const Fe = (s2, e2, i3) => (i3.configurable = true, i3.enumerable = true, Reflect.decorate && typeof e2 != "object" && Object.defineProperty(s2, e2, i3), i3);
-function lt(s2, e2) {
+const Le = (s2, e2, i3) => (i3.configurable = true, i3.enumerable = true, Reflect.decorate && typeof e2 != "object" && Object.defineProperty(s2, e2, i3), i3);
+function bt(s2, e2) {
   return (i3, o2, t2) => {
     const r2 = (n3) => n3.renderRoot?.querySelector(s2) ?? null;
     if (e2) {
-      const { get: n3, set: h2 } = typeof o2 == "object" ? i3 : t2 ?? (() => {
+      const { get: n3, set: d2 } = typeof o2 == "object" ? i3 : t2 ?? (() => {
         const l2 = Symbol();
         return { get() {
           return this[l2];
@@ -18135,67 +18147,67 @@ function lt(s2, e2) {
           this[l2] = u2;
         } };
       })();
-      return Fe(i3, o2, { get() {
+      return Le(i3, o2, { get() {
         let l2 = n3.call(this);
-        return l2 === void 0 && (l2 = r2(this), (l2 !== null || this.hasUpdated) && h2.call(this, l2)), l2;
+        return l2 === void 0 && (l2 = r2(this), (l2 !== null || this.hasUpdated) && d2.call(this, l2)), l2;
       } });
     }
-    return Fe(i3, o2, { get() {
+    return Le(i3, o2, { get() {
       return r2(this);
     } });
   };
 }
-const ee = globalThis, le = ee.trustedTypes, Te = le ? le.createPolicy("lit-html", { createHTML: (s2) => s2 }) : void 0, Re = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ue = "?" + E, ct = `<${Ue}>`, k2 = document, ce = () => k2.createComment(""), te = (s2) => s2 === null || typeof s2 != "object" && typeof s2 != "function", Ee = Array.isArray, dt = (s2) => Ee(s2) || typeof s2?.[Symbol.iterator] == "function", ye = `[ 	
-\f\r]`, K = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ke = /-->/g, Ne = />/g, F = RegExp(`>|${ye}(?:([^\\s"'>=/]+)(${ye}*=${ye}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ze = /'/g, Be = /"/g, He = /^(?:script|style|textarea|title)$/i, M2 = Symbol.for("lit-noChange"), f2 = Symbol.for("lit-nothing"), Le = /* @__PURE__ */ new WeakMap(), T = k2.createTreeWalker(k2, 129);
-function Ie(s2, e2) {
-  if (!Ee(s2) || !s2.hasOwnProperty("raw"))
+const ie = globalThis, pe = ie.trustedTypes, Me = pe ? pe.createPolicy("lit-html", { createHTML: (s2) => s2 }) : void 0, We = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ye = "?" + E, gt = `<${Ye}>`, k2 = document, ue = () => k2.createComment(""), se = (s2) => s2 === null || typeof s2 != "object" && typeof s2 != "function", De = Array.isArray, mt = (s2) => De(s2) || typeof s2?.[Symbol.iterator] == "function", Ce = `[ 	
+\f\r]`, te = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Re = /-->/g, Ue = />/g, T = RegExp(`>|${Ce}(?:([^\\s"'>=/]+)(${Ce}*=${Ce}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), He = /'/g, Ie = /"/g, Ge = /^(?:script|style|textarea|title)$/i, R2 = Symbol.for("lit-noChange"), f2 = Symbol.for("lit-nothing"), Ve = /* @__PURE__ */ new WeakMap(), N2 = k2.createTreeWalker(k2, 129);
+function Xe(s2, e2) {
+  if (!De(s2) || !s2.hasOwnProperty("raw"))
     throw Error("invalid template strings array");
-  return Te !== void 0 ? Te.createHTML(e2) : e2;
+  return Me !== void 0 ? Me.createHTML(e2) : e2;
 }
-const ht = (s2, e2) => {
+const ft = (s2, e2) => {
   const i3 = s2.length - 1, o2 = [];
-  let t2, r2 = e2 === 2 ? "<svg>" : e2 === 3 ? "<math>" : "", n3 = K;
-  for (let h2 = 0; h2 < i3; h2++) {
-    const l2 = s2[h2];
-    let u2, d2, p2 = -1, m2 = 0;
-    for (; m2 < l2.length && (n3.lastIndex = m2, d2 = n3.exec(l2), d2 !== null); )
-      m2 = n3.lastIndex, n3 === K ? d2[1] === "!--" ? n3 = ke : d2[1] !== void 0 ? n3 = Ne : d2[2] !== void 0 ? (He.test(d2[2]) && (t2 = RegExp("</" + d2[2], "g")), n3 = F) : d2[3] !== void 0 && (n3 = F) : n3 === F ? d2[0] === ">" ? (n3 = t2 ?? K, p2 = -1) : d2[1] === void 0 ? p2 = -2 : (p2 = n3.lastIndex - d2[2].length, u2 = d2[1], n3 = d2[3] === void 0 ? F : d2[3] === '"' ? Be : ze) : n3 === Be || n3 === ze ? n3 = F : n3 === ke || n3 === Ne ? n3 = K : (n3 = F, t2 = void 0);
-    const x2 = n3 === F && s2[h2 + 1].startsWith("/>") ? " " : "";
-    r2 += n3 === K ? l2 + ct : p2 >= 0 ? (o2.push(u2), l2.slice(0, p2) + Re + l2.slice(p2) + E + x2) : l2 + E + (p2 === -2 ? h2 : x2);
-  }
-  return [Ie(s2, r2 + (s2[i3] || "<?>") + (e2 === 2 ? "</svg>" : e2 === 3 ? "</math>" : "")), o2];
-};
-class oe {
+  let t2, r2 = e2 === 2 ? "<svg>" : e2 === 3 ? "<math>" : "", n3 = te;
+  for (let d2 = 0; d2 < i3; d2++) {
+    const l2 = s2[d2];
+    let u2, h2, p2 = -1, b2 = 0;
+    for (; b2 < l2.length && (n3.lastIndex = b2, h2 = n3.exec(l2), h2 !== null); )
+      b2 = n3.lastIndex, n3 === te ? h2[1] === "!--" ? n3 = Re : h2[1] !== void 0 ? n3 = Ue : h2[2] !== void 0 ? (Ge.test(h2[2]) && (t2 = RegExp("</" + h2[2], "g")), n3 = T) : h2[3] !== void 0 && (n3 = T) : n3 === T ? h2[0] === ">" ? (n3 = t2 ?? te, p2 = -1) : h2[1] === void 0 ? p2 = -2 : (p2 = n3.lastIndex - h2[2].length, u2 = h2[1], n3 = h2[3] === void 0 ? T : h2[3] === '"' ? Ie : He) : n3 === Ie || n3 === He ? n3 = T : n3 === Re || n3 === Ue ? n3 = te : (n3 = T, t2 = void 0);
+    const x2 = n3 === T && s2[d2 + 1].startsWith("/>") ? " " : "";
+    r2 += n3 === te ? l2 + gt : p2 >= 0 ? (o2.push(u2), l2.slice(0, p2) + We + l2.slice(p2) + E + x2) : l2 + E + (p2 === -2 ? d2 : x2);
+  }
+  return [Xe(s2, r2 + (s2[i3] || "<?>") + (e2 === 2 ? "</svg>" : e2 === 3 ? "</math>" : "")), o2];
+};
+class re {
   constructor({ strings: e2, _$litType$: i3 }, o2) {
     let t2;
     this.parts = [];
     let r2 = 0, n3 = 0;
-    const h2 = e2.length - 1, l2 = this.parts, [u2, d2] = ht(e2, i3);
-    if (this.el = oe.createElement(u2, o2), T.currentNode = this.el.content, i3 === 2 || i3 === 3) {
+    const d2 = e2.length - 1, l2 = this.parts, [u2, h2] = ft(e2, i3);
+    if (this.el = re.createElement(u2, o2), N2.currentNode = this.el.content, i3 === 2 || i3 === 3) {
       const p2 = this.el.content.firstChild;
       p2.replaceWith(...p2.childNodes);
     }
-    for (; (t2 = T.nextNode()) !== null && l2.length < h2; ) {
+    for (; (t2 = N2.nextNode()) !== null && l2.length < d2; ) {
       if (t2.nodeType === 1) {
         if (t2.hasAttributes())
           for (const p2 of t2.getAttributeNames())
-            if (p2.endsWith(Re)) {
-              const m2 = d2[n3++], x2 = t2.getAttribute(p2).split(E), _2 = /([.?@])?(.*)/.exec(m2);
-              l2.push({ type: 1, index: r2, name: _2[2], strings: x2, ctor: _2[1] === "." ? ut : _2[1] === "?" ? bt : _2[1] === "@" ? gt : he }), t2.removeAttribute(p2);
+            if (p2.endsWith(We)) {
+              const b2 = h2[n3++], x2 = t2.getAttribute(p2).split(E), _2 = /([.?@])?(.*)/.exec(b2);
+              l2.push({ type: 1, index: r2, name: _2[2], strings: x2, ctor: _2[1] === "." ? yt : _2[1] === "?" ? xt : _2[1] === "@" ? wt : ge }), t2.removeAttribute(p2);
             } else
               p2.startsWith(E) && (l2.push({ type: 6, index: r2 }), t2.removeAttribute(p2));
-        if (He.test(t2.tagName)) {
-          const p2 = t2.textContent.split(E), m2 = p2.length - 1;
-          if (m2 > 0) {
-            t2.textContent = le ? le.emptyScript : "";
-            for (let x2 = 0; x2 < m2; x2++)
-              t2.append(p2[x2], ce()), T.nextNode(), l2.push({ type: 2, index: ++r2 });
-            t2.append(p2[m2], ce());
+        if (Ge.test(t2.tagName)) {
+          const p2 = t2.textContent.split(E), b2 = p2.length - 1;
+          if (b2 > 0) {
+            t2.textContent = pe ? pe.emptyScript : "";
+            for (let x2 = 0; x2 < b2; x2++)
+              t2.append(p2[x2], ue()), N2.nextNode(), l2.push({ type: 2, index: ++r2 });
+            t2.append(p2[b2], ue());
           }
         }
       } else if (t2.nodeType === 8)
-        if (t2.data === Ue)
+        if (t2.data === Ye)
           l2.push({ type: 2, index: r2 });
         else {
           let p2 = -1;
@@ -18210,14 +18222,14 @@ class oe {
     return o2.innerHTML = e2, o2;
   }
 }
-function R2(s2, e2, i3 = s2, o2) {
-  if (e2 === M2)
+function U(s2, e2, i3 = s2, o2) {
+  if (e2 === R2)
     return e2;
   let t2 = o2 !== void 0 ? i3._$Co?.[o2] : i3._$Cl;
-  const r2 = te(e2) ? void 0 : e2._$litDirective$;
-  return t2?.constructor !== r2 && (t2?._$AO?.(false), r2 === void 0 ? t2 = void 0 : (t2 = new r2(s2), t2._$AT(s2, i3, o2)), o2 !== void 0 ? (i3._$Co ?? (i3._$Co = []))[o2] = t2 : i3._$Cl = t2), t2 !== void 0 && (e2 = R2(s2, t2._$AS(s2, e2.values), t2, o2)), e2;
+  const r2 = se(e2) ? void 0 : e2._$litDirective$;
+  return t2?.constructor !== r2 && (t2?._$AO?.(false), r2 === void 0 ? t2 = void 0 : (t2 = new r2(s2), t2._$AT(s2, i3, o2)), o2 !== void 0 ? (i3._$Co ?? (i3._$Co = []))[o2] = t2 : i3._$Cl = t2), t2 !== void 0 && (e2 = U(s2, t2._$AS(s2, e2.values), t2, o2)), e2;
 }
-class pt {
+class vt {
   constructor(e2, i3) {
     this._$AV = [], this._$AN = void 0, this._$AD = e2, this._$AM = i3;
   }
@@ -18229,16 +18241,16 @@ class pt {
   }
   u(e2) {
     const { el: { content: i3 }, parts: o2 } = this._$AD, t2 = (e2?.creationScope ?? k2).importNode(i3, true);
-    T.currentNode = t2;
-    let r2 = T.nextNode(), n3 = 0, h2 = 0, l2 = o2[0];
+    N2.currentNode = t2;
+    let r2 = N2.nextNode(), n3 = 0, d2 = 0, l2 = o2[0];
     for (; l2 !== void 0; ) {
       if (n3 === l2.index) {
         let u2;
-        l2.type === 2 ? u2 = new de(r2, r2.nextSibling, this, e2) : l2.type === 1 ? u2 = new l2.ctor(r2, l2.name, l2.strings, this, e2) : l2.type === 6 && (u2 = new mt(r2, this, e2)), this._$AV.push(u2), l2 = o2[++h2];
+        l2.type === 2 ? u2 = new be(r2, r2.nextSibling, this, e2) : l2.type === 1 ? u2 = new l2.ctor(r2, l2.name, l2.strings, this, e2) : l2.type === 6 && (u2 = new $t(r2, this, e2)), this._$AV.push(u2), l2 = o2[++d2];
       }
-      n3 !== l2?.index && (r2 = T.nextNode(), n3++);
+      n3 !== l2?.index && (r2 = N2.nextNode(), n3++);
     }
-    return T.currentNode = k2, t2;
+    return N2.currentNode = k2, t2;
   }
   p(e2) {
     let i3 = 0;
@@ -18246,7 +18258,7 @@ class pt {
       o2 !== void 0 && (o2.strings !== void 0 ? (o2._$AI(e2, o2, i3), i3 += o2.strings.length - 2) : o2._$AI(e2[i3])), i3++;
   }
 }
-class de {
+class be {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
@@ -18265,7 +18277,7 @@ class de {
     return this._$AB;
   }
   _$AI(e2, i3 = this) {
-    e2 = R2(this, e2, i3), te(e2) ? e2 === f2 || e2 == null || e2 === "" ? (this._$AH !== f2 && this._$AR(), this._$AH = f2) : e2 !== this._$AH && e2 !== M2 && this._(e2) : e2._$litType$ !== void 0 ? this.$(e2) : e2.nodeType !== void 0 ? this.T(e2) : dt(e2) ? this.k(e2) : this._(e2);
+    e2 = U(this, e2, i3), se(e2) ? e2 === f2 || e2 == null || e2 === "" ? (this._$AH !== f2 && this._$AR(), this._$AH = f2) : e2 !== this._$AH && e2 !== R2 && this._(e2) : e2._$litType$ !== void 0 ? this.$(e2) : e2.nodeType !== void 0 ? this.T(e2) : mt(e2) ? this.k(e2) : this._(e2);
   }
   O(e2) {
     return this._$AA.parentNode.insertBefore(e2, this._$AB);
@@ -18274,27 +18286,27 @@ class de {
     this._$AH !== e2 && (this._$AR(), this._$AH = this.O(e2));
   }
   _(e2) {
-    this._$AH !== f2 && te(this._$AH) ? this._$AA.nextSibling.data = e2 : this.T(k2.createTextNode(e2)), this._$AH = e2;
+    this._$AH !== f2 && se(this._$AH) ? this._$AA.nextSibling.data = e2 : this.T(k2.createTextNode(e2)), this._$AH = e2;
   }
   $(e2) {
-    const { values: i3, _$litType$: o2 } = e2, t2 = typeof o2 == "number" ? this._$AC(e2) : (o2.el === void 0 && (o2.el = oe.createElement(Ie(o2.h, o2.h[0]), this.options)), o2);
+    const { values: i3, _$litType$: o2 } = e2, t2 = typeof o2 == "number" ? this._$AC(e2) : (o2.el === void 0 && (o2.el = re.createElement(Xe(o2.h, o2.h[0]), this.options)), o2);
     if (this._$AH?._$AD === t2)
       this._$AH.p(i3);
     else {
-      const r2 = new pt(t2, this), n3 = r2.u(this.options);
+      const r2 = new vt(t2, this), n3 = r2.u(this.options);
       r2.p(i3), this.T(n3), this._$AH = r2;
     }
   }
   _$AC(e2) {
-    let i3 = Le.get(e2.strings);
-    return i3 === void 0 && Le.set(e2.strings, i3 = new oe(e2)), i3;
+    let i3 = Ve.get(e2.strings);
+    return i3 === void 0 && Ve.set(e2.strings, i3 = new re(e2)), i3;
   }
   k(e2) {
-    Ee(this._$AH) || (this._$AH = [], this._$AR());
+    De(this._$AH) || (this._$AH = [], this._$AR());
     const i3 = this._$AH;
     let o2, t2 = 0;
     for (const r2 of e2)
-      t2 === i3.length ? i3.push(o2 = new de(this.O(ce()), this.O(ce()), this, this.options)) : o2 = i3[t2], o2._$AI(r2), t2++;
+      t2 === i3.length ? i3.push(o2 = new be(this.O(ue()), this.O(ue()), this, this.options)) : o2 = i3[t2], o2._$AI(r2), t2++;
     t2 < i3.length && (this._$AR(o2 && o2._$AB.nextSibling, t2), i3.length = t2);
   }
   _$AR(e2 = this._$AA.nextSibling, i3) {
@@ -18307,7 +18319,7 @@ class de {
     this._$AM === void 0 && (this._$Cv = e2, this._$AP?.(e2));
   }
 }
-class he {
+class ge {
   get tagName() {
     return this.element.tagName;
   }
@@ -18321,12 +18333,12 @@ class he {
     const r2 = this.strings;
     let n3 = false;
     if (r2 === void 0)
-      e2 = R2(this, e2, i3, 0), n3 = !te(e2) || e2 !== this._$AH && e2 !== M2, n3 && (this._$AH = e2);
+      e2 = U(this, e2, i3, 0), n3 = !se(e2) || e2 !== this._$AH && e2 !== R2, n3 && (this._$AH = e2);
     else {
-      const h2 = e2;
+      const d2 = e2;
       let l2, u2;
       for (e2 = r2[0], l2 = 0; l2 < r2.length - 1; l2++)
-        u2 = R2(this, h2[o2 + l2], i3, l2), u2 === M2 && (u2 = this._$AH[l2]), n3 || (n3 = !te(u2) || u2 !== this._$AH[l2]), u2 === f2 ? e2 = f2 : e2 !== f2 && (e2 += (u2 ?? "") + r2[l2 + 1]), this._$AH[l2] = u2;
+        u2 = U(this, d2[o2 + l2], i3, l2), u2 === R2 && (u2 = this._$AH[l2]), n3 || (n3 = !se(u2) || u2 !== this._$AH[l2]), u2 === f2 ? e2 = f2 : e2 !== f2 && (e2 += (u2 ?? "") + r2[l2 + 1]), this._$AH[l2] = u2;
     }
     n3 && !t2 && this.j(e2);
   }
@@ -18334,7 +18346,7 @@ class he {
     e2 === f2 ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e2 ?? "");
   }
 }
-class ut extends he {
+class yt extends ge {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -18342,7 +18354,7 @@ class ut extends he {
     this.element[this.name] = e2 === f2 ? void 0 : e2;
   }
 }
-class bt extends he {
+class xt extends ge {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -18350,12 +18362,12 @@ class bt extends he {
     this.element.toggleAttribute(this.name, !!e2 && e2 !== f2);
   }
 }
-class gt extends he {
+class wt extends ge {
   constructor(e2, i3, o2, t2, r2) {
     super(e2, i3, o2, t2, r2), this.type = 5;
   }
   _$AI(e2, i3 = this) {
-    if ((e2 = R2(this, e2, i3, 0) ?? f2) === M2)
+    if ((e2 = U(this, e2, i3, 0) ?? f2) === R2)
       return;
     const o2 = this._$AH, t2 = e2 === f2 && o2 !== f2 || e2.capture !== o2.capture || e2.once !== o2.once || e2.passive !== o2.passive, r2 = e2 !== f2 && (o2 === f2 || t2);
     t2 && this.element.removeEventListener(this.name, this, o2), r2 && this.element.addEventListener(this.name, this, e2), this._$AH = e2;
@@ -18364,7 +18376,7 @@ class gt extends he {
     typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e2) : this._$AH.handleEvent(e2);
   }
 }
-class mt {
+class $t {
   constructor(e2, i3, o2) {
     this.element = e2, this.type = 6, this._$AN = void 0, this._$AM = i3, this.options = o2;
   }
@@ -18372,13 +18384,13 @@ class mt {
     return this._$AM._$AU;
   }
   _$AI(e2) {
-    R2(this, e2);
+    U(this, e2);
   }
 }
-const ft = ee.litHtmlPolyfillSupport;
-ft?.(oe, de), (ee.litHtmlVersions ?? (ee.litHtmlVersions = [])).push("3.3.0");
-const vt = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, xt = (s2) => (...e2) => ({ _$litDirective$: s2, values: e2 });
-class yt {
+const _t = ie.litHtmlPolyfillSupport;
+_t?.(re, be), (ie.litHtmlVersions ?? (ie.litHtmlVersions = [])).push("3.3.0");
+const Et = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, Ct = (s2) => (...e2) => ({ _$litDirective$: s2, values: e2 });
+class Ot {
   constructor(e2) {
   }
   get _$AU() {
@@ -18394,9 +18406,9 @@ class yt {
     return this.render(...i3);
   }
 }
-const $e = xt(class extends yt {
+const Oe = Ct(class extends Ot {
   constructor(s2) {
-    if (super(s2), s2.type !== vt.ATTRIBUTE || s2.name !== "class" || s2.strings?.length > 2)
+    if (super(s2), s2.type !== Et.ATTRIBUTE || s2.name !== "class" || s2.strings?.length > 2)
       throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
   }
   render(s2) {
@@ -18416,9 +18428,9 @@ const $e = xt(class extends yt {
       const t2 = !!e2[o2];
       t2 === this.st.has(o2) || this.nt?.has(o2) || (t2 ? (i3.add(o2), this.st.add(o2)) : (i3.remove(o2), this.st.delete(o2)));
     }
-    return M2;
+    return R2;
   }
-}), pe = i$4`
+}), me = i$4`
   :host {
     /* Colors */
     --obi-color-primary: #a10fff;
@@ -18490,7 +18502,7 @@ const $e = xt(class extends yt {
     --obi-spinner-size: 16px;
     --obi-spinner-border-width: 2px;
   }
-`, g = i$4`
+`, m = i$4`
   :host {
     box-sizing: border-box;
     font-family: var(--obi-font-family-secondary);
@@ -18500,12 +18512,12 @@ const $e = xt(class extends yt {
     box-sizing: inherit;
   }
 `;
-var $t = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, A = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? wt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+var At = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, O = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Pt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && $t(e2, i3, t2), t2;
+  return o2 && t2 && At(e2, i3, t2), t2;
 };
-class $ extends i$1 {
+class w extends i$1 {
   constructor() {
     super(...arguments), this.open = false, this.size = "medium", this.showClose = true, this.closeOnBackdropClick = true, this.closeOnEscape = true, this.closeDisabled = false, this.contentCentered = false, this.handleDialogClick = (e2) => {
       if (!this.closeOnBackdropClick || this.closeDisabled)
@@ -18559,7 +18571,7 @@ class $ extends i$1 {
       "modal-inner--centered": this.contentCentered
     };
     return x`
-      <dialog class=${$e(e2)}>
+      <dialog class=${Oe(e2)}>
         ${this.showClose ? x`
           <button
             class="close-button"
@@ -18572,7 +18584,7 @@ class $ extends i$1 {
           </button>
         ` : ""}
         
-        <div class=${$e(i3)}>
+        <div class=${Oe(i3)}>
           <div class="header">
             <slot name="header"></slot>
           </div>
@@ -18589,9 +18601,9 @@ class $ extends i$1 {
     `;
   }
 }
-$.styles = [
-  g,
-  pe,
+w.styles = [
+  m,
+  me,
   i$4`
       :host {
         display: contents;
@@ -18725,37 +18737,37 @@ $.styles = [
       }
     `
 ];
-A([
+O([
   a({ type: Boolean, reflect: true })
-], $.prototype, "open", 2);
-A([
+], w.prototype, "open", 2);
+O([
   a({ reflect: true })
-], $.prototype, "size", 2);
-A([
+], w.prototype, "size", 2);
+O([
   a({ type: Boolean, attribute: "show-close" })
-], $.prototype, "showClose", 2);
-A([
+], w.prototype, "showClose", 2);
+O([
   a({ type: Boolean, attribute: "close-on-backdrop-click" })
-], $.prototype, "closeOnBackdropClick", 2);
-A([
+], w.prototype, "closeOnBackdropClick", 2);
+O([
   a({ type: Boolean, attribute: "close-on-escape" })
-], $.prototype, "closeOnEscape", 2);
-A([
+], w.prototype, "closeOnEscape", 2);
+O([
   a({ type: Boolean, attribute: "close-disabled" })
-], $.prototype, "closeDisabled", 2);
-A([
+], w.prototype, "closeDisabled", 2);
+O([
   a({ type: Boolean, attribute: "content-centered" })
-], $.prototype, "contentCentered", 2);
-A([
-  lt("dialog")
-], $.prototype, "dialog", 2);
-customElements.get("obi-modal") || customElements.define("obi-modal", $);
-var _t = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, Ct = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Et(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], w.prototype, "contentCentered", 2);
+O([
+  bt("dialog")
+], w.prototype, "dialog", 2);
+customElements.get("obi-modal") || customElements.define("obi-modal", w);
+var Dt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, Ft = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? St(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && _t(e2, i3, t2), t2;
+  return o2 && t2 && Dt(e2, i3, t2), t2;
 };
-class Ce extends i$1 {
+class Se extends i$1 {
   constructor() {
     super(...arguments), this.size = "medium";
   }
@@ -18763,9 +18775,9 @@ class Ce extends i$1 {
     return x`<div class="spinner" role="status" aria-label="Loading"></div>`;
   }
 }
-Ce.styles = [
-  g,
-  pe,
+Se.styles = [
+  m,
+  me,
   i$4`
       :host {
         display: inline-block;
@@ -18801,16 +18813,16 @@ Ce.styles = [
       }
     `
 ];
-Ct([
+Ft([
   a({ reflect: true })
-], Ce.prototype, "size", 2);
-customElements.get("obi-spinner") || customElements.define("obi-spinner", Ce);
-var At = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, N2 = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Ot(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], Se.prototype, "size", 2);
+customElements.get("obi-spinner") || customElements.define("obi-spinner", Se);
+var jt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, z2 = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Tt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && At(e2, i3, t2), t2;
+  return o2 && t2 && jt(e2, i3, t2), t2;
 };
-class w extends i$1 {
+class $ extends i$1 {
   constructor() {
     super(...arguments), this.variant = "primary", this.size = "medium", this.disabled = false, this.loading = false, this.type = "button", this.fullWidth = false, this.loadingText = "";
   }
@@ -18834,7 +18846,7 @@ class w extends i$1 {
     };
     return x`
       <button
-        class=${$e(e2)}
+        class=${Oe(e2)}
         type=${this.type}
         ?disabled=${this.disabled || this.loading}
         @click=${this.handleClick}
@@ -18861,9 +18873,9 @@ class w extends i$1 {
     `;
   }
 }
-w.styles = [
-  g,
-  pe,
+$.styles = [
+  m,
+  me,
   i$4`
       :host {
         display: inline-block;
@@ -18985,34 +18997,34 @@ w.styles = [
       }
     `
 ];
-N2([
+z2([
   a({ reflect: true })
-], w.prototype, "variant", 2);
-N2([
+], $.prototype, "variant", 2);
+z2([
   a({ reflect: true })
-], w.prototype, "size", 2);
-N2([
+], $.prototype, "size", 2);
+z2([
   a({ type: Boolean, reflect: true })
-], w.prototype, "disabled", 2);
-N2([
+], $.prototype, "disabled", 2);
+z2([
   a({ type: Boolean, reflect: true })
-], w.prototype, "loading", 2);
-N2([
+], $.prototype, "loading", 2);
+z2([
   a()
-], w.prototype, "type", 2);
-N2([
+], $.prototype, "type", 2);
+z2([
   a({ type: Boolean, reflect: true, attribute: "full-width" })
-], w.prototype, "fullWidth", 2);
-N2([
+], $.prototype, "fullWidth", 2);
+z2([
   a({ attribute: "loading-text" })
-], w.prototype, "loadingText", 2);
-customElements.get("obi-button") || customElements.define("obi-button", w);
-var Pt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, ue = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? St(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], $.prototype, "loadingText", 2);
+customElements.get("obi-button") || customElements.define("obi-button", $);
+var Nt = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, fe = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? kt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Pt(e2, i3, t2), t2;
+  return o2 && t2 && Nt(e2, i3, t2), t2;
 };
-class U extends i$1 {
+class H4 extends i$1 {
   constructor() {
     super(...arguments), this.showRetry = false, this.showDismiss = false, this.retryText = "Retry", this.dismissText = "Dismiss";
   }
@@ -19062,9 +19074,9 @@ class U extends i$1 {
     `;
   }
 }
-U.styles = [
-  g,
-  pe,
+H4.styles = [
+  m,
+  me,
   i$4`
       :host {
         display: block;
@@ -19124,46 +19136,46 @@ U.styles = [
       }
     `
 ];
-ue([
+fe([
   a({ type: Boolean, attribute: "show-retry" })
-], U.prototype, "showRetry", 2);
-ue([
+], H4.prototype, "showRetry", 2);
+fe([
   a({ type: Boolean, attribute: "show-dismiss" })
-], U.prototype, "showDismiss", 2);
-ue([
+], H4.prototype, "showDismiss", 2);
+fe([
   a({ attribute: "retry-text" })
-], U.prototype, "retryText", 2);
-ue([
+], H4.prototype, "retryText", 2);
+fe([
   a({ attribute: "dismiss-text" })
-], U.prototype, "dismissText", 2);
-customElements.get("obi-error-message") || customElements.define("obi-error-message", U);
-function Ve(s2, e2) {
+], H4.prototype, "dismissText", 2);
+customElements.get("obi-error-message") || customElements.define("obi-error-message", H4);
+function Ze(s2, e2) {
   if (!s2)
     return "";
-  const i3 = (d2) => {
-    let p2 = "0", m2 = "0", x2 = "0";
-    return d2.length === 4 ? (p2 = "0x" + d2[1] + d2[1], m2 = "0x" + d2[2] + d2[2], x2 = "0x" + d2[3] + d2[3]) : d2.length === 7 && (p2 = "0x" + d2[1] + d2[2], m2 = "0x" + d2[3] + d2[4], x2 = "0x" + d2[5] + d2[6]), {
+  const i3 = (h2) => {
+    let p2 = "0", b2 = "0", x2 = "0";
+    return h2.length === 4 ? (p2 = "0x" + h2[1] + h2[1], b2 = "0x" + h2[2] + h2[2], x2 = "0x" + h2[3] + h2[3]) : h2.length === 7 && (p2 = "0x" + h2[1] + h2[2], b2 = "0x" + h2[3] + h2[4], x2 = "0x" + h2[5] + h2[6]), {
       r: parseInt(p2),
-      g: parseInt(m2),
+      g: parseInt(b2),
       b: parseInt(x2)
     };
-  }, o2 = (d2, p2, m2) => "#" + [d2, p2, m2].map((x2) => {
+  }, o2 = (h2, p2, b2) => "#" + [h2, p2, b2].map((x2) => {
     const _2 = x2.toString(16);
     return _2.length === 1 ? "0" + _2 : _2;
-  }).join(""), { r: t2, g: r2, b: n3 } = i3(s2), h2 = Math.round(t2 + (255 - t2) * e2), l2 = Math.round(r2 + (255 - r2) * e2), u2 = Math.round(n3 + (255 - n3) * e2);
-  return o2(h2, l2, u2);
+  }).join(""), { r: t2, g: r2, b: n3 } = i3(s2), d2 = Math.round(t2 + (255 - t2) * e2), l2 = Math.round(r2 + (255 - r2) * e2), u2 = Math.round(n3 + (255 - n3) * e2);
+  return o2(d2, l2, u2);
 }
-var Dt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, H4 = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? jt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+var zt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, I2 = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Bt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Dt(e2, i3, t2), t2;
+  return o2 && t2 && zt(e2, i3, t2), t2;
 };
-class O extends i$1 {
+class A extends i$1 {
   constructor() {
     super(...arguments), this.title = "", this.subtitle = "", this.agentName = "Obi", this.buttonText = "Continue", this.disabled = false, this.color = "#9500FF";
   }
   getBackgroundColor() {
-    return Ve(this.color, 0.95);
+    return Ze(this.color, 0.95);
   }
   handleAction() {
     this.disabled || this.dispatchEvent(new CustomEvent("obi-action", {
@@ -19192,13 +19204,15 @@ class O extends i$1 {
 
         <!-- Action button and error -->
         <div class="button-container">
-          <button 
-            class="action-button" 
-            @click=${this.handleAction}
-            ?disabled=${this.disabled}
-          >
-            <span class="action-button-text">${this.disabled ? `${this.agentName} is speaking` : this.buttonText}</span>
-          </button>
+          <slot name="button">
+            <button 
+              class="action-button" 
+              @click=${this.handleAction}
+              ?disabled=${this.disabled}
+            >
+              <span class="action-button-text">${this.disabled ? `${this.agentName} is speaking` : this.buttonText}</span>
+            </button>
+          </slot>
 
           <slot name="error"></slot>
         </div>
@@ -19206,8 +19220,8 @@ class O extends i$1 {
     `;
   }
 }
-O.styles = [
-  g,
+A.styles = [
+  m,
   i$4`
       :host {
         display: block;
@@ -19335,31 +19349,31 @@ O.styles = [
       }
     `
 ];
-H4([
+I2([
   a()
-], O.prototype, "title", 2);
-H4([
+], A.prototype, "title", 2);
+I2([
   a()
-], O.prototype, "subtitle", 2);
-H4([
+], A.prototype, "subtitle", 2);
+I2([
   a({ attribute: "agent-name" })
-], O.prototype, "agentName", 2);
-H4([
+], A.prototype, "agentName", 2);
+I2([
   a({ attribute: "button-text" })
-], O.prototype, "buttonText", 2);
-H4([
+], A.prototype, "buttonText", 2);
+I2([
   a({ type: Boolean, reflect: true })
-], O.prototype, "disabled", 2);
-H4([
+], A.prototype, "disabled", 2);
+I2([
   a()
-], O.prototype, "color", 2);
-customElements.get("obi-base-onboarding-content") || customElements.define("obi-base-onboarding-content", O);
-var Ft = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, We = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Tt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], A.prototype, "color", 2);
+customElements.get("obi-base-onboarding-content") || customElements.define("obi-base-onboarding-content", A);
+var Lt = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, Je = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Mt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Ft(e2, i3, t2), t2;
+  return o2 && t2 && Lt(e2, i3, t2), t2;
 };
-class be extends i$1 {
+class ve extends i$1 {
   constructor() {
     super(...arguments), this.logoUrl = "", this.appName = "App";
   }
@@ -19394,8 +19408,8 @@ class be extends i$1 {
     `;
   }
 }
-be.styles = [
-  g,
+ve.styles = [
+  m,
   i$4`
       :host {
         display: block;
@@ -19457,19 +19471,19 @@ be.styles = [
       }
     `
 ];
-We([
+Je([
   a({ attribute: "logo-url" })
-], be.prototype, "logoUrl", 2);
-We([
+], ve.prototype, "logoUrl", 2);
+Je([
   a({ attribute: "app-name" })
-], be.prototype, "appName", 2);
-customElements.get("obi-app-logo-visual") || customElements.define("obi-app-logo-visual", be);
-var kt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, ie = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Nt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], ve.prototype, "appName", 2);
+customElements.get("obi-app-logo-visual") || customElements.define("obi-app-logo-visual", ve);
+var Rt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, ne = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Ut(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && kt(e2, i3, t2), t2;
+  return o2 && t2 && Rt(e2, i3, t2), t2;
 };
-class z2 extends i$1 {
+class B extends i$1 {
   constructor() {
     super(...arguments), this.color = "#9500FF", this.isLoading = false, this.error = null, this.navigateAttempts = 0;
   }
@@ -19555,24 +19569,24 @@ class z2 extends i$1 {
     `;
   }
 }
-z2.styles = [g];
-ie([
+B.styles = [m];
+ne([
   a({ type: Object })
-], z2.prototype, "session", 2);
-ie([
+], B.prototype, "session", 2);
+ne([
   a()
-], z2.prototype, "color", 2);
-ie([
+], B.prototype, "color", 2);
+ne([
   v()
-], z2.prototype, "isLoading", 2);
-ie([
+], B.prototype, "isLoading", 2);
+ne([
   v()
-], z2.prototype, "error", 2);
-ie([
+], B.prototype, "error", 2);
+ne([
   v()
-], z2.prototype, "navigateAttempts", 2);
-customElements.get("obi-navigate-to-content") || customElements.define("obi-navigate-to-content", z2);
-const zt = x`
+], B.prototype, "navigateAttempts", 2);
+customElements.get("obi-navigate-to-content") || customElements.define("obi-navigate-to-content", B);
+const Ht = x`
   <img
     src="data:image/svg+xml;base64,${btoa(`<?xml version="1.0" encoding="UTF-8"?>
       <svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -19582,12 +19596,12 @@ const zt = x`
     style="width: 100%; height: 100%; object-fit: contain;"
   />
 `;
-var Bt = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, Mt = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Lt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+var It = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, qt = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Vt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Bt(e2, i3, t2), t2;
+  return o2 && t2 && It(e2, i3, t2), t2;
 };
-class Ae extends i$1 {
+class Fe extends i$1 {
   constructor() {
     super(...arguments), this.color = "#9500FF";
   }
@@ -19604,15 +19618,15 @@ class Ae extends i$1 {
       <div class="container">
         <div class="logo" style="background: ${this.color}; box-shadow: ${r2};">
           <slot>
-            <div class="logo-icon">${zt}</div>
+            <div class="logo-icon">${Ht}</div>
           </slot>
         </div>
       </div>
     `;
   }
 }
-Ae.styles = [
-  g,
+Fe.styles = [
+  m,
   i$4`
       :host {
         display: block;
@@ -19657,14 +19671,14 @@ Ae.styles = [
       }
     `
 ];
-Mt([
+qt([
   a()
-], Ae.prototype, "color", 2);
-customElements.get("obi-logo-visual") || customElements.define("obi-logo-visual", Ae);
-var Rt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, I2 = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Ut(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], Fe.prototype, "color", 2);
+customElements.get("obi-logo-visual") || customElements.define("obi-logo-visual", Fe);
+var Wt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, V = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Yt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Rt(e2, i3, t2), t2;
+  return o2 && t2 && Wt(e2, i3, t2), t2;
 };
 class P extends i$1 {
   constructor() {
@@ -19748,27 +19762,27 @@ class P extends i$1 {
     `;
   }
 }
-P.styles = [g];
-I2([
+P.styles = [m];
+V([
   a({ type: Object })
 ], P.prototype, "session", 2);
-I2([
+V([
   a({ type: Boolean, reflect: true })
 ], P.prototype, "disabled", 2);
-I2([
+V([
   a()
 ], P.prototype, "color", 2);
-I2([
+V([
   v()
 ], P.prototype, "isLoading", 2);
-I2([
+V([
   v()
 ], P.prototype, "error", 2);
-I2([
+V([
   v()
 ], P.prototype, "startAttempts", 2);
 customElements.get("obi-session-start-content") || customElements.define("obi-session-start-content", P);
-class qe extends i$1 {
+class Ke extends i$1 {
   render() {
     return x`
       <div class="container">
@@ -19800,8 +19814,8 @@ class qe extends i$1 {
     `;
   }
 }
-qe.styles = [
-  g,
+Ke.styles = [
+  m,
   i$4`
       :host {
         display: block;
@@ -19956,13 +19970,13 @@ qe.styles = [
       }
     `
 ];
-customElements.get("obi-microphone-permission-visual") || customElements.define("obi-microphone-permission-visual", qe);
-var Ht = Object.defineProperty, It = Object.getOwnPropertyDescriptor, V = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? It(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+customElements.get("obi-microphone-permission-visual") || customElements.define("obi-microphone-permission-visual", Ke);
+var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, q = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Xt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Ht(e2, i3, t2), t2;
+  return o2 && t2 && Gt(e2, i3, t2), t2;
 };
-class S extends i$1 {
+class D extends i$1 {
   constructor() {
     super(...arguments), this.disabled = false, this.color = "#9500FF", this.isLoading = false, this.error = null, this.micPermissionGranted = false;
   }
@@ -20012,30 +20026,30 @@ class S extends i$1 {
     `;
   }
 }
-S.styles = [g];
-V([
+D.styles = [m];
+q([
   a({ type: Object })
-], S.prototype, "session", 2);
-V([
+], D.prototype, "session", 2);
+q([
   a({ type: Boolean, reflect: true })
-], S.prototype, "disabled", 2);
-V([
+], D.prototype, "disabled", 2);
+q([
   a()
-], S.prototype, "color", 2);
-V([
+], D.prototype, "color", 2);
+q([
   v()
-], S.prototype, "isLoading", 2);
-V([
+], D.prototype, "isLoading", 2);
+q([
   v()
-], S.prototype, "error", 2);
-V([
+], D.prototype, "error", 2);
+q([
   v()
-], S.prototype, "micPermissionGranted", 2);
-customElements.get("obi-share-mic-content") || customElements.define("obi-share-mic-content", S);
-var Vt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, ge = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Wt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], D.prototype, "micPermissionGranted", 2);
+customElements.get("obi-share-mic-content") || customElements.define("obi-share-mic-content", D);
+var Zt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, ye = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Jt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Vt(e2, i3, t2), t2;
+  return o2 && t2 && Zt(e2, i3, t2), t2;
 };
 class W extends i$1 {
   constructor() {
@@ -20053,13 +20067,13 @@ class W extends i$1 {
   startAnimation() {
     const r2 = () => {
       this.clearTimeouts();
-      for (let h2 = 0; h2 < 5; h2++) {
-        const l2 = h2 * 140, u2 = window.setTimeout(() => {
-          this.activeDots = this.activeDots.map((p2, m2) => m2 === h2), this.requestUpdate();
-          const d2 = window.setTimeout(() => {
-            this.activeDots = this.activeDots.map((p2, m2) => m2 === h2 ? false : this.activeDots[m2]), this.requestUpdate();
+      for (let d2 = 0; d2 < 5; d2++) {
+        const l2 = d2 * 140, u2 = window.setTimeout(() => {
+          this.activeDots = this.activeDots.map((p2, b2) => b2 === d2), this.requestUpdate();
+          const h2 = window.setTimeout(() => {
+            this.activeDots = this.activeDots.map((p2, b2) => b2 === d2 ? false : this.activeDots[b2]), this.requestUpdate();
           }, 200);
-          this.animationTimeouts.push(d2);
+          this.animationTimeouts.push(h2);
         }, l2);
         this.animationTimeouts.push(u2);
       }
@@ -20087,7 +20101,7 @@ class W extends i$1 {
   }
 }
 W.styles = [
-  g,
+  m,
   i$4`
       :host {
         display: flex;
@@ -20132,25 +20146,25 @@ W.styles = [
       }
     `
 ];
-ge([
+ye([
   a()
 ], W.prototype, "color", 2);
-ge([
+ye([
   a({ attribute: "dot-color" })
 ], W.prototype, "dotColor", 2);
-ge([
+ye([
   v()
 ], W.prototype, "activeDots", 2);
-ge([
+ye([
   v()
 ], W.prototype, "animationTimeouts", 2);
 customElements.get("obi-voice-guidance-visual") || customElements.define("obi-voice-guidance-visual", W);
-var qt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, se = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Gt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+var Kt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, ae = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? Qt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && qt(e2, i3, t2), t2;
+  return o2 && t2 && Kt(e2, i3, t2), t2;
 };
-class B extends i$1 {
+class L2 extends i$1 {
   constructor() {
     super(...arguments), this.color = "#9500FF", this.disabled = false, this.loading = false, this.error = null;
   }
@@ -20222,24 +20236,24 @@ class B extends i$1 {
     `;
   }
 }
-B.styles = [g];
-se([
+L2.styles = [m];
+ae([
   a({ type: Object })
-], B.prototype, "session", 2);
-se([
+], L2.prototype, "session", 2);
+ae([
   a()
-], B.prototype, "color", 2);
-se([
+], L2.prototype, "color", 2);
+ae([
   a({ type: Boolean, reflect: true })
-], B.prototype, "disabled", 2);
-se([
+], L2.prototype, "disabled", 2);
+ae([
   a({ type: Boolean, reflect: true })
-], B.prototype, "loading", 2);
-se([
+], L2.prototype, "loading", 2);
+ae([
   v()
-], B.prototype, "error", 2);
-customElements.get("obi-voice-guidance-content") || customElements.define("obi-voice-guidance-content", B);
-class Ge extends i$1 {
+], L2.prototype, "error", 2);
+customElements.get("obi-voice-guidance-content") || customElements.define("obi-voice-guidance-content", L2);
+class Qe extends i$1 {
   render() {
     return x`
       <article class="skeleton-container" role="status" aria-label="Loading content">
@@ -20257,8 +20271,8 @@ class Ge extends i$1 {
     `;
   }
 }
-Ge.styles = [
-  g,
+Qe.styles = [
+  m,
   i$4`
       :host {
         display: flex;
@@ -20371,18 +20385,18 @@ Ge.styles = [
       }
     `
 ];
-customElements.get("obi-skeleton-loader-visual") || customElements.define("obi-skeleton-loader-visual", Ge);
-var Yt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, Zt = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Xt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+customElements.get("obi-skeleton-loader-visual") || customElements.define("obi-skeleton-loader-visual", Qe);
+var eo = Object.defineProperty, to = Object.getOwnPropertyDescriptor, oo = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? to(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Yt(e2, i3, t2), t2;
+  return o2 && t2 && eo(e2, i3, t2), t2;
 };
-class Oe extends i$1 {
+class je extends i$1 {
   constructor() {
     super(...arguments), this.color = "#9500FF";
   }
   getBackgroundColor() {
-    return Ve(this.color, 0.95);
+    return Ze(this.color, 0.95);
   }
   render() {
     return x`
@@ -20414,8 +20428,8 @@ class Oe extends i$1 {
     `;
   }
 }
-Oe.styles = [
-  g,
+je.styles = [
+  m,
   i$4`
       :host {
         display: block;
@@ -20506,16 +20520,16 @@ Oe.styles = [
       }
     `
 ];
-Zt([
+oo([
   a()
-], Oe.prototype, "color", 2);
-customElements.get("obi-screen-share-visual") || customElements.define("obi-screen-share-visual", Oe);
-var Jt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, q = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? Kt(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], je.prototype, "color", 2);
+customElements.get("obi-screen-share-visual") || customElements.define("obi-screen-share-visual", je);
+var io = Object.defineProperty, so = Object.getOwnPropertyDescriptor, Y = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? so(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Jt(e2, i3, t2), t2;
+  return o2 && t2 && io(e2, i3, t2), t2;
 };
-class D extends i$1 {
+class S extends i$1 {
   constructor() {
     super(...arguments), this.disabled = false, this.color = "#9500FF", this.isLoading = false, this.error = null, this.continueAttempts = 0;
   }
@@ -20592,32 +20606,32 @@ class D extends i$1 {
     `;
   }
 }
-D.styles = [g];
-q([
+S.styles = [m];
+Y([
   a({ type: Object })
-], D.prototype, "session", 2);
-q([
+], S.prototype, "session", 2);
+Y([
   a({ type: Boolean, reflect: true })
-], D.prototype, "disabled", 2);
-q([
+], S.prototype, "disabled", 2);
+Y([
   a()
-], D.prototype, "color", 2);
-q([
+], S.prototype, "color", 2);
+Y([
   v()
-], D.prototype, "isLoading", 2);
-q([
+], S.prototype, "isLoading", 2);
+Y([
   v()
-], D.prototype, "error", 2);
-q([
+], S.prototype, "error", 2);
+Y([
   v()
-], D.prototype, "continueAttempts", 2);
-customElements.get("obi-share-screen-content") || customElements.define("obi-share-screen-content", D);
-var Qt = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, Ye = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? eo(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], S.prototype, "continueAttempts", 2);
+customElements.get("obi-share-screen-content") || customElements.define("obi-share-screen-content", S);
+var ro = Object.defineProperty, no = Object.getOwnPropertyDescriptor, et = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? no(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && Qt(e2, i3, t2), t2;
+  return o2 && t2 && ro(e2, i3, t2), t2;
 };
-class me extends i$1 {
+class xe extends i$1 {
   constructor() {
     super(...arguments), this.open = false, this.closeDisabled = false, this.closeReason = null;
   }
@@ -20666,8 +20680,8 @@ class me extends i$1 {
     `;
   }
 }
-me.styles = [
-  g,
+xe.styles = [
+  m,
   i$4`
       :host {
         --obi-modal-width: 640px;
@@ -20735,17 +20749,17 @@ me.styles = [
       }
     `
 ];
-Ye([
+et([
   a({ type: Boolean, reflect: true })
-], me.prototype, "open", 2);
-Ye([
+], xe.prototype, "open", 2);
+et([
   a({ type: Boolean, attribute: "close-disabled" })
-], me.prototype, "closeDisabled", 2);
-customElements.get("obi-base-onboarding-modal") || customElements.define("obi-base-onboarding-modal", me);
-var to = Object.defineProperty, oo = Object.getOwnPropertyDescriptor, fe = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? oo(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], xe.prototype, "closeDisabled", 2);
+customElements.get("obi-base-onboarding-modal") || customElements.define("obi-base-onboarding-modal", xe);
+var ao = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, we = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? lo(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && to(e2, i3, t2), t2;
+  return o2 && t2 && ao(e2, i3, t2), t2;
 };
 class G extends i$1 {
   constructor() {
@@ -20766,26 +20780,26 @@ class G extends i$1 {
     `;
   }
 }
-G.styles = [g];
-fe([
+G.styles = [m];
+we([
   a({ type: Object })
 ], G.prototype, "session", 2);
-fe([
+we([
   a({ type: Boolean, reflect: true })
 ], G.prototype, "open", 2);
-fe([
+we([
   a({ type: Boolean, reflect: true })
 ], G.prototype, "disabled", 2);
-fe([
+we([
   a()
 ], G.prototype, "color", 2);
 customElements.get("obi-share-screen-modal") || customElements.define("obi-share-screen-modal", G);
-var io = Object.defineProperty, so = Object.getOwnPropertyDescriptor, re = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? so(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+var co = Object.defineProperty, ho = Object.getOwnPropertyDescriptor, le = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? ho(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && io(e2, i3, t2), t2;
+  return o2 && t2 && co(e2, i3, t2), t2;
 };
-class L2 extends i$1 {
+class M2 extends i$1 {
   constructor() {
     super(...arguments), this.open = false, this.color = "#9500FF", this.disabled = false, this.closeDisabled = false;
   }
@@ -20805,29 +20819,29 @@ class L2 extends i$1 {
     `;
   }
 }
-L2.styles = [g];
-re([
+M2.styles = [m];
+le([
   a({ type: Object })
-], L2.prototype, "session", 2);
-re([
+], M2.prototype, "session", 2);
+le([
   a({ type: Boolean, reflect: true })
-], L2.prototype, "open", 2);
-re([
+], M2.prototype, "open", 2);
+le([
   a()
-], L2.prototype, "color", 2);
-re([
+], M2.prototype, "color", 2);
+le([
   a({ type: Boolean, reflect: true })
-], L2.prototype, "disabled", 2);
-re([
+], M2.prototype, "disabled", 2);
+le([
   a({ type: Boolean, attribute: "close-disabled" })
-], L2.prototype, "closeDisabled", 2);
-customElements.get("obi-navigate-to-modal") || customElements.define("obi-navigate-to-modal", L2);
-var ro = Object.defineProperty, no = Object.getOwnPropertyDescriptor, ve = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? no(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], M2.prototype, "closeDisabled", 2);
+customElements.get("obi-navigate-to-modal") || customElements.define("obi-navigate-to-modal", M2);
+var po = Object.defineProperty, uo = Object.getOwnPropertyDescriptor, $e = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? uo(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && ro(e2, i3, t2), t2;
+  return o2 && t2 && po(e2, i3, t2), t2;
 };
-class Y extends i$1 {
+class X extends i$1 {
   constructor() {
     super(...arguments), this.disabled = false, this.open = false, this.color = "#9500FF";
   }
@@ -20843,26 +20857,26 @@ class Y extends i$1 {
     `;
   }
 }
-Y.styles = [g];
-ve([
+X.styles = [m];
+$e([
   a({ type: Object })
-], Y.prototype, "session", 2);
-ve([
+], X.prototype, "session", 2);
+$e([
   a({ type: Boolean, reflect: true })
-], Y.prototype, "disabled", 2);
-ve([
+], X.prototype, "disabled", 2);
+$e([
   a({ type: Boolean, reflect: true })
-], Y.prototype, "open", 2);
-ve([
+], X.prototype, "open", 2);
+$e([
   a()
-], Y.prototype, "color", 2);
-customElements.get("obi-session-start-modal") || customElements.define("obi-session-start-modal", Y);
-var ao = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, xe = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? lo(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], X.prototype, "color", 2);
+customElements.get("obi-session-start-modal") || customElements.define("obi-session-start-modal", X);
+var bo = Object.defineProperty, go = Object.getOwnPropertyDescriptor, _e = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? go(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && ao(e2, i3, t2), t2;
+  return o2 && t2 && bo(e2, i3, t2), t2;
 };
-class X extends i$1 {
+class Z extends i$1 {
   constructor() {
     super(...arguments), this.open = false, this.disabled = false, this.color = "#9500FF";
   }
@@ -20881,26 +20895,26 @@ class X extends i$1 {
     `;
   }
 }
-X.styles = [g];
-xe([
+Z.styles = [m];
+_e([
   a({ type: Object })
-], X.prototype, "session", 2);
-xe([
+], Z.prototype, "session", 2);
+_e([
   a({ type: Boolean, reflect: true })
-], X.prototype, "open", 2);
-xe([
+], Z.prototype, "open", 2);
+_e([
   a({ type: Boolean, reflect: true })
-], X.prototype, "disabled", 2);
-xe([
+], Z.prototype, "disabled", 2);
+_e([
   a()
-], X.prototype, "color", 2);
-customElements.get("obi-share-mic-modal") || customElements.define("obi-share-mic-modal", X);
-var co = Object.defineProperty, ho = Object.getOwnPropertyDescriptor, Z = (s2, e2, i3, o2) => {
-  for (var t2 = o2 > 1 ? void 0 : o2 ? ho(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+], Z.prototype, "color", 2);
+customElements.get("obi-share-mic-modal") || customElements.define("obi-share-mic-modal", Z);
+var mo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, J = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? fo(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
     (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
-  return o2 && t2 && co(e2, i3, t2), t2;
+  return o2 && t2 && mo(e2, i3, t2), t2;
 };
-class j extends i$1 {
+class F extends i$1 {
   constructor() {
     super(...arguments), this.open = false, this.color = "#9500FF", this.disabled = false, this.loading = false, this.closeDisabled = false;
   }
@@ -20922,26 +20936,227 @@ class j extends i$1 {
     `;
   }
 }
-j.styles = [g];
-Z([
+F.styles = [m];
+J([
+  a({ type: Object })
+], F.prototype, "session", 2);
+J([
+  a({ type: Boolean, reflect: true })
+], F.prototype, "open", 2);
+J([
+  a()
+], F.prototype, "color", 2);
+J([
+  a({ type: Boolean, reflect: true })
+], F.prototype, "disabled", 2);
+J([
+  a({ type: Boolean, reflect: true })
+], F.prototype, "loading", 2);
+J([
+  a({ type: Boolean, attribute: "close-disabled" })
+], F.prototype, "closeDisabled", 2);
+customElements.get("obi-voice-guidance-modal") || customElements.define("obi-voice-guidance-modal", F);
+var vo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, Ee = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? yo(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+    (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
+  return o2 && t2 && vo(e2, i3, t2), t2;
+};
+class K extends i$1 {
+  constructor() {
+    super(...arguments), this.color = "#9500FF", this.dotColor = "#FFFFFF", this.activeDots = Array(5).fill(false), this.animationTimeouts = [];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.startAnimation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.clearTimeouts();
+  }
+  clearTimeouts() {
+    this.animationTimeouts.forEach((e2) => clearTimeout(e2)), this.animationTimeouts = [];
+  }
+  startAnimation() {
+    const r2 = () => {
+      this.clearTimeouts();
+      for (let d2 = 0; d2 < 5; d2++) {
+        const l2 = d2 * 140, u2 = window.setTimeout(() => {
+          this.activeDots = this.activeDots.map((p2, b2) => b2 === d2), this.requestUpdate();
+          const h2 = window.setTimeout(() => {
+            this.activeDots = this.activeDots.map((p2, b2) => b2 === d2 ? false : this.activeDots[b2]), this.requestUpdate();
+          }, 200);
+          this.animationTimeouts.push(h2);
+        }, l2);
+        this.animationTimeouts.push(u2);
+      }
+      const n3 = window.setTimeout(
+        r2,
+        5 * 200 * 0.7 + 300
+      );
+      this.animationTimeouts.push(n3);
+    };
+    r2();
+  }
+  updated(e2) {
+    super.updated(e2), e2.has("color") && this.style.setProperty("--voice-guidance-color", this.color), e2.has("dotColor") && this.style.setProperty("--voice-guidance-dot-color", this.dotColor);
+  }
+  render() {
+    return x`
+      <div class="container">
+        <div class="dots-container">
+          ${this.activeDots.map((e2, i3) => x`
+            <div class="dot ${e2 ? "active" : ""}" key=${i3}></div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+}
+K.styles = [
+  m,
+  i$4`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .container {
+        width: 96px;
+        height: 96px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 20px 5px var(--voice-guidance-color, #9500FF);
+        background-color: var(--voice-guidance-color, #9500FF);
+      }
+
+      .dots-container {
+        display: flex;
+        flex-direction: row;
+        width: 64px;
+        height: 14px;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+        gap: 8px;
+      }
+
+      .dot {
+        width: 3px;
+        height: 3px;
+        border-radius: 50%;
+        background-color: var(--voice-guidance-dot-color, #FFFFFF);
+        transition: transform 200ms ease-in-out;
+        transform: translateY(0);
+      }
+
+      .dot.active {
+        transform: translateY(-20px);
+      }
+    `
+];
+Ee([
+  a()
+], K.prototype, "color", 2);
+Ee([
+  a({ attribute: "dot-color" })
+], K.prototype, "dotColor", 2);
+Ee([
+  v()
+], K.prototype, "activeDots", 2);
+Ee([
+  v()
+], K.prototype, "animationTimeouts", 2);
+customElements.get("obi-overview-visual") || customElements.define("obi-overview-visual", K);
+var xo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, Te = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? wo(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+    (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
+  return o2 && t2 && xo(e2, i3, t2), t2;
+};
+class ce extends i$1 {
+  constructor() {
+    super(...arguments), this.color = "#9500FF", this.loading = false;
+  }
+  render() {
+    return x`
+      <obi-base-onboarding-content
+        title="Welcome to the tour"
+        subtitle="Let's get started!"
+        agent-name=${this.session.agentName || "Obi"}
+        color=${this.color}
+        disabled
+      >
+        <obi-overview-visual
+          slot="center-visual" 
+          color=${this.color}
+        ></obi-overview-visual>
+        
+        <div slot="description">
+          ${this.session.agentName || "Obi"} will guide you through the tour by talking with you.
+        </div>
+      </obi-base-onboarding-content>
+    `;
+  }
+}
+ce.styles = [m];
+Te([
+  a({ type: Object })
+], ce.prototype, "session", 2);
+Te([
+  a()
+], ce.prototype, "color", 2);
+Te([
+  a({ type: Boolean, reflect: true })
+], ce.prototype, "loading", 2);
+customElements.get("obi-overview-content") || customElements.define("obi-overview-content", ce);
+var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, Q = (s2, e2, i3, o2) => {
+  for (var t2 = o2 > 1 ? void 0 : o2 ? _o(e2, i3) : e2, r2 = s2.length - 1, n3; r2 >= 0; r2--)
+    (n3 = s2[r2]) && (t2 = (o2 ? n3(e2, i3, t2) : n3(t2)) || t2);
+  return o2 && t2 && $o(e2, i3, t2), t2;
+};
+class j extends i$1 {
+  constructor() {
+    super(...arguments), this.open = false, this.color = "#9500FF", this.disabled = false, this.loading = false, this.closeDisabled = false;
+  }
+  render() {
+    return x`
+      <obi-base-onboarding-modal
+        .session=${this.session}
+        ?open=${this.open}
+        ?disabled=${this.disabled}
+        ?close-disabled=${this.closeDisabled || this.loading}
+      >
+        <obi-overview-content
+          .session=${this.session}
+          .color=${this.color}
+          .loading=${this.loading}
+          .disabled=${this.disabled}
+        ></obi-overview-content>
+      </obi-base-onboarding-modal>
+    `;
+  }
+}
+j.styles = [m];
+Q([
   a({ type: Object })
 ], j.prototype, "session", 2);
-Z([
+Q([
   a({ type: Boolean, reflect: true })
 ], j.prototype, "open", 2);
-Z([
+Q([
   a()
 ], j.prototype, "color", 2);
-Z([
+Q([
   a({ type: Boolean, reflect: true })
 ], j.prototype, "disabled", 2);
-Z([
+Q([
   a({ type: Boolean, reflect: true })
 ], j.prototype, "loading", 2);
-Z([
+Q([
   a({ type: Boolean, attribute: "close-disabled" })
 ], j.prototype, "closeDisabled", 2);
-customElements.get("obi-voice-guidance-modal") || customElements.define("obi-voice-guidance-modal", j);
+customElements.get("obi-overview-modal") || customElements.define("obi-overview-modal", j);
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20968,6 +21183,7 @@ class ObiWidget extends i$1 {
     this.showSessionStartModal = false;
     this.showShareMicModal = false;
     this.micShareEnabled = false;
+    this.showOverviewModal = false;
     this.showVoiceGuidanceModal = false;
     this.voiceGuidanceEnabled = false;
     this.selectedCourse = null;
@@ -21085,6 +21301,7 @@ class ObiWidget extends i$1 {
       this.showCourseModal = false;
       this.showSessionStartModal = false;
       this.showShareMicModal = false;
+      this.showOverviewModal = false;
     };
     this.handleCourseSelectEvent = (event) => {
       const customEvent = event;
@@ -21092,6 +21309,7 @@ class ObiWidget extends i$1 {
       this.showCourseModal = false;
       this.showSessionStartModal = true;
       this.showShareMicModal = false;
+      this.showOverviewModal = false;
       this.micShareEnabled = false;
       this.showVoiceGuidanceModal = false;
       this.voiceGuidanceEnabled = false;
@@ -21264,6 +21482,10 @@ class ObiWidget extends i$1 {
         sessionId
       });
     };
+    this.handleOverviewModalClose = () => {
+      this.showOverviewModal = false;
+      this.handleCloseModals();
+    };
     this.handleShareMicModalContinue = async (event) => {
       const { session, micPermissionGranted } = event.detail;
       console.log("[ShareMicModal] Continue button clicked", {
@@ -21285,7 +21507,6 @@ class ObiWidget extends i$1 {
       }
       await this.activeSession.shareMic();
       this.showShareMicModal = false;
-      this.showVoiceGuidanceModal = true;
     };
     this.handleShareMicModalClose = () => {
       console.log("[ShareMicModal] Close button clicked", {
@@ -21307,6 +21528,8 @@ class ObiWidget extends i$1 {
       );
       await this.activeSession?.promptContinue();
       this.showVoiceGuidanceModal = false;
+      this.voiceGuidanceEnabled = false;
+      this.showOverviewModal = true;
     };
     this.handleVoiceGuidanceModalClose = () => {
       console.log("[obi] voice guidance modal close", {
@@ -21482,6 +21705,7 @@ class ObiWidget extends i$1 {
       const session = new ObiSession({
         sessionId: sessionToken,
         apiBaseUrl: API_BASE_URL,
+        clientType: "sdk",
         ...this.user && { user: this.user }
       });
       if (!session) {
@@ -21533,27 +21757,21 @@ class ObiWidget extends i$1 {
         onError();
       }
     });
-    session.on("micShareRequested", () => {
-      this.micShareEnabled = true;
-    });
     session.on("micCheck", (permissionGranted) => {
-      if (permissionGranted) {
-        this.showVoiceGuidanceModal = false;
-        this.showShareMicModal = true;
-      } else {
+      this.showOverviewModal = false;
+      if (!permissionGranted) {
         this.showShareMicModal = true;
-        this.showVoiceGuidanceModal = false;
       }
     });
+    session.on("micShareRequested", () => {
+      this.micShareEnabled = true;
+    });
+    session.on("micShared", () => {
+      this.showOverviewModal = false;
+    });
     session.on("promptUser", () => {
       this.voiceGuidanceEnabled = true;
     });
-    session.on("micCheck", (permissionGranted) => {
-      if (permissionGranted) {
-        this.showVoiceGuidanceModal = true;
-        this.showShareMicModal = false;
-      }
-    });
   }
   /**
    * Handle session creation failure
@@ -21884,38 +22102,52 @@ class ObiWidget extends i$1 {
             >
             </obi-session-start-modal>
           ` : E$1}
-      ${this.showShareMicModal ? x`
-            <obi-share-mic-modal
+      ${this.showVoiceGuidanceModal ? x`
+            <obi-voice-guidance-modal
               .session=${this.selectedCourse ? {
       id: this.selectedCourse.id,
       name: this.selectedCourse.name,
       description: this.selectedCourse.description,
       agentName: this.databaseConfig?.agentName
     } : {}}
-              ?open=${this.showShareMicModal}
-              ?disabled=${!this.micShareEnabled}
+              ?open=${this.showVoiceGuidanceModal}
+              ?disabled=${!this.voiceGuidanceEnabled}
               color=${this.primaryColor}
-              @obi-continue=${this.handleShareMicModalContinue}
-              @obi-close=${this.handleShareMicModalClose}
+              @obi-continue=${this.handleVoiceGuidanceModalContinue}
+              @obi-close=${this.handleVoiceGuidanceModalClose}
             >
-            </obi-share-mic-modal>
+            </obi-voice-guidance-modal>
           ` : E$1}
-      ${this.showVoiceGuidanceModal ? x`
-            <obi-voice-guidance-modal
+      ${this.showOverviewModal ? x`
+            <obi-overview-modal
               .session=${this.selectedCourse ? {
       id: this.selectedCourse.id,
       name: this.selectedCourse.name,
       description: this.selectedCourse.description,
       agentName: this.databaseConfig?.agentName
     } : {}}
-              ?open=${this.showVoiceGuidanceModal}
-              ?disabled=${!this.voiceGuidanceEnabled}
+              ?open=${this.showOverviewModal}
               color=${this.primaryColor}
-              @obi-continue=${this.handleVoiceGuidanceModalContinue}
-              @obi-close=${this.handleVoiceGuidanceModalClose}
+              @obi-close=${this.handleOverviewModalClose}
             >
             </obi-voice-guidance-modal>
           ` : E$1}
+      ${this.showShareMicModal ? x`
+            <obi-share-mic-modal
+              .session=${this.selectedCourse ? {
+      id: this.selectedCourse.id,
+      name: this.selectedCourse.name,
+      description: this.selectedCourse.description,
+      agentName: this.databaseConfig?.agentName
+    } : {}}
+              ?open=${this.showShareMicModal}
+              ?disabled=${!this.micShareEnabled}
+              color=${this.primaryColor}
+              @obi-continue=${this.handleShareMicModalContinue}
+              @obi-close=${this.handleShareMicModalClose}
+            >
+            </obi-share-mic-modal>
+          ` : E$1}
     `;
   }
 }
@@ -22105,6 +22337,9 @@ __decorateClass([
 __decorateClass([
   r$1()
 ], ObiWidget.prototype, "micShareEnabled", 2);
+__decorateClass([
+  r$1()
+], ObiWidget.prototype, "showOverviewModal", 2);
 __decorateClass([
   r$1()
 ], ObiWidget.prototype, "showVoiceGuidanceModal", 2);
@@ -22165,4 +22400,4 @@ export {
   withSentryAsyncHandler as w,
   x
 };
-//# sourceMappingURL=obi-widget-aa83cfb0.js.map
+//# sourceMappingURL=obi-widget-381a94c3.js.map