@triptease/tt-navbar 0.0.21 → 0.0.22

package/dist/web/index.js

@@ -1,12 +1,12 @@
 /**
-* @triptease/tt-navbar v0.0.21
+* @triptease/tt-navbar v0.0.22
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i6 = decorators.length - 1, decorator; i6 >= 0; i6--)
-    if (decorator = decorators[i6])
+  for (var i7 = decorators.length - 1, decorator; i7 >= 0; i7--)
+    if (decorator = decorators[i7])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -18,44 +18,44 @@ var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "a
 var s = Symbol();
 var o = /* @__PURE__ */ new WeakMap();
 var n = class {
-  constructor(t5, e8, o8) {
-    if (this._$cssResult$ = true, o8 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = t5, this.t = e8;
+  constructor(t6, e10, o10) {
+    if (this._$cssResult$ = true, o10 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t6, this.t = e10;
   }
   get styleSheet() {
-    let t5 = this.o;
-    const s4 = this.t;
-    if (e && void 0 === t5) {
-      const e8 = void 0 !== s4 && 1 === s4.length;
-      e8 && (t5 = o.get(s4)), void 0 === t5 && ((this.o = t5 = new CSSStyleSheet()).replaceSync(this.cssText), e8 && o.set(s4, t5));
+    let t6 = this.o;
+    const s5 = this.t;
+    if (e && void 0 === t6) {
+      const e10 = void 0 !== s5 && 1 === s5.length;
+      e10 && (t6 = o.get(s5)), void 0 === t6 && ((this.o = t6 = new CSSStyleSheet()).replaceSync(this.cssText), e10 && o.set(s5, t6));
     }
-    return t5;
+    return t6;
   }
   toString() {
     return this.cssText;
   }
 };
-var r = (t5) => new n("string" == typeof t5 ? t5 : t5 + "", void 0, s);
-var i = (t5, ...e8) => {
-  const o8 = 1 === t5.length ? t5[0] : e8.reduce((e9, s4, o9) => e9 + ((t6) => {
-    if (true === t6._$cssResult$) return t6.cssText;
-    if ("number" == typeof t6) return t6;
-    throw Error("Value passed to 'css' function must be a 'css' function result: " + t6 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(s4) + t5[o9 + 1], t5[0]);
-  return new n(o8, t5, s);
+var r = (t6) => new n("string" == typeof t6 ? t6 : t6 + "", void 0, s);
+var i = (t6, ...e10) => {
+  const o10 = 1 === t6.length ? t6[0] : e10.reduce((e11, s5, o11) => e11 + ((t7) => {
+    if (true === t7._$cssResult$) return t7.cssText;
+    if ("number" == typeof t7) return t7;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + t7 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(s5) + t6[o11 + 1], t6[0]);
+  return new n(o10, t6, s);
 };
-var S = (s4, o8) => {
-  if (e) s4.adoptedStyleSheets = o8.map((t5) => t5 instanceof CSSStyleSheet ? t5 : t5.styleSheet);
-  else for (const e8 of o8) {
-    const o9 = document.createElement("style"), n5 = t.litNonce;
-    void 0 !== n5 && o9.setAttribute("nonce", n5), o9.textContent = e8.cssText, s4.appendChild(o9);
+var S = (s5, o10) => {
+  if (e) s5.adoptedStyleSheets = o10.map((t6) => t6 instanceof CSSStyleSheet ? t6 : t6.styleSheet);
+  else for (const e10 of o10) {
+    const o11 = document.createElement("style"), n5 = t.litNonce;
+    void 0 !== n5 && o11.setAttribute("nonce", n5), o11.textContent = e10.cssText, s5.appendChild(o11);
   }
 };
-var c = e ? (t5) => t5 : (t5) => t5 instanceof CSSStyleSheet ? ((t6) => {
-  let e8 = "";
-  for (const s4 of t6.cssRules) e8 += s4.cssText;
-  return r(e8);
-})(t5) : t5;
+var c = e ? (t6) => t6 : (t6) => t6 instanceof CSSStyleSheet ? ((t7) => {
+  let e10 = "";
+  for (const s5 of t7.cssRules) e10 += s5.cssText;
+  return r(e10);
+})(t6) : t6;
 
 // ../../node_modules/@lit/reactive-element/reactive-element.js
 var { is: i2, defineProperty: e2, getOwnPropertyDescriptor: h, getOwnPropertyNames: r2, getOwnPropertySymbols: o2, getPrototypeOf: n2 } = Object;
@@ -63,167 +63,167 @@ var a = globalThis;
 var c2 = a.trustedTypes;
 var l = c2 ? c2.emptyScript : "";
 var p = a.reactiveElementPolyfillSupport;
-var d = (t5, s4) => t5;
-var u = { toAttribute(t5, s4) {
-  switch (s4) {
+var d = (t6, s5) => t6;
+var u = { toAttribute(t6, s5) {
+  switch (s5) {
     case Boolean:
-      t5 = t5 ? l : null;
+      t6 = t6 ? l : null;
       break;
     case Object:
     case Array:
-      t5 = null == t5 ? t5 : JSON.stringify(t5);
+      t6 = null == t6 ? t6 : JSON.stringify(t6);
   }
-  return t5;
-}, fromAttribute(t5, s4) {
-  let i6 = t5;
-  switch (s4) {
+  return t6;
+}, fromAttribute(t6, s5) {
+  let i7 = t6;
+  switch (s5) {
     case Boolean:
-      i6 = null !== t5;
+      i7 = null !== t6;
       break;
     case Number:
-      i6 = null === t5 ? null : Number(t5);
+      i7 = null === t6 ? null : Number(t6);
       break;
     case Object:
     case Array:
       try {
-        i6 = JSON.parse(t5);
-      } catch (t6) {
-        i6 = null;
+        i7 = JSON.parse(t6);
+      } catch (t7) {
+        i7 = null;
       }
   }
-  return i6;
+  return i7;
 } };
-var f = (t5, s4) => !i2(t5, s4);
+var f = (t6, s5) => !i2(t6, s5);
 var b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 var y = class extends HTMLElement {
-  static addInitializer(t5) {
-    this._$Ei(), (this.l ?? (this.l = [])).push(t5);
+  static addInitializer(t6) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t6);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t5, s4 = b) {
-    if (s4.state && (s4.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t5) && ((s4 = Object.create(s4)).wrapped = true), this.elementProperties.set(t5, s4), !s4.noAccessor) {
-      const i6 = Symbol(), h3 = this.getPropertyDescriptor(t5, i6, s4);
-      void 0 !== h3 && e2(this.prototype, t5, h3);
+  static createProperty(t6, s5 = b) {
+    if (s5.state && (s5.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t6) && ((s5 = Object.create(s5)).wrapped = true), this.elementProperties.set(t6, s5), !s5.noAccessor) {
+      const i7 = Symbol(), h3 = this.getPropertyDescriptor(t6, i7, s5);
+      void 0 !== h3 && e2(this.prototype, t6, h3);
     }
   }
-  static getPropertyDescriptor(t5, s4, i6) {
-    const { get: e8, set: r7 } = h(this.prototype, t5) ?? { get() {
-      return this[s4];
-    }, set(t6) {
-      this[s4] = t6;
+  static getPropertyDescriptor(t6, s5, i7) {
+    const { get: e10, set: r8 } = h(this.prototype, t6) ?? { get() {
+      return this[s5];
+    }, set(t7) {
+      this[s5] = t7;
     } };
-    return { get: e8, set(s5) {
-      const h3 = e8?.call(this);
-      r7?.call(this, s5), this.requestUpdate(t5, h3, i6);
+    return { get: e10, set(s6) {
+      const h3 = e10?.call(this);
+      r8?.call(this, s6), this.requestUpdate(t6, h3, i7);
     }, configurable: true, enumerable: true };
   }
-  static getPropertyOptions(t5) {
-    return this.elementProperties.get(t5) ?? b;
+  static getPropertyOptions(t6) {
+    return this.elementProperties.get(t6) ?? b;
   }
   static _$Ei() {
     if (this.hasOwnProperty(d("elementProperties"))) return;
-    const t5 = n2(this);
-    t5.finalize(), void 0 !== t5.l && (this.l = [...t5.l]), this.elementProperties = new Map(t5.elementProperties);
+    const t6 = n2(this);
+    t6.finalize(), void 0 !== t6.l && (this.l = [...t6.l]), this.elementProperties = new Map(t6.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(d("finalized"))) return;
     if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
-      const t6 = this.properties, s4 = [...r2(t6), ...o2(t6)];
-      for (const i6 of s4) this.createProperty(i6, t6[i6]);
+      const t7 = this.properties, s5 = [...r2(t7), ...o2(t7)];
+      for (const i7 of s5) this.createProperty(i7, t7[i7]);
     }
-    const t5 = this[Symbol.metadata];
-    if (null !== t5) {
-      const s4 = litPropertyMetadata.get(t5);
-      if (void 0 !== s4) for (const [t6, i6] of s4) this.elementProperties.set(t6, i6);
+    const t6 = this[Symbol.metadata];
+    if (null !== t6) {
+      const s5 = litPropertyMetadata.get(t6);
+      if (void 0 !== s5) for (const [t7, i7] of s5) this.elementProperties.set(t7, i7);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [t6, s4] of this.elementProperties) {
-      const i6 = this._$Eu(t6, s4);
-      void 0 !== i6 && this._$Eh.set(i6, t6);
+    for (const [t7, s5] of this.elementProperties) {
+      const i7 = this._$Eu(t7, s5);
+      void 0 !== i7 && this._$Eh.set(i7, t7);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
-  static finalizeStyles(s4) {
-    const i6 = [];
-    if (Array.isArray(s4)) {
-      const e8 = new Set(s4.flat(1 / 0).reverse());
-      for (const s5 of e8) i6.unshift(c(s5));
-    } else void 0 !== s4 && i6.push(c(s4));
-    return i6;
+  static finalizeStyles(s5) {
+    const i7 = [];
+    if (Array.isArray(s5)) {
+      const e10 = new Set(s5.flat(1 / 0).reverse());
+      for (const s6 of e10) i7.unshift(c(s6));
+    } else void 0 !== s5 && i7.push(c(s5));
+    return i7;
   }
-  static _$Eu(t5, s4) {
-    const i6 = s4.attribute;
-    return false === i6 ? void 0 : "string" == typeof i6 ? i6 : "string" == typeof t5 ? t5.toLowerCase() : void 0;
+  static _$Eu(t6, s5) {
+    const i7 = s5.attribute;
+    return false === i7 ? void 0 : "string" == typeof i7 ? i7 : "string" == typeof t6 ? t6.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
   }
   _$Ev() {
-    this._$ES = new Promise((t5) => this.enableUpdating = t5), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t5) => t5(this));
+    this._$ES = new Promise((t6) => this.enableUpdating = t6), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t6) => t6(this));
   }
-  addController(t5) {
-    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t5), void 0 !== this.renderRoot && this.isConnected && t5.hostConnected?.();
+  addController(t6) {
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t6), void 0 !== this.renderRoot && this.isConnected && t6.hostConnected?.();
   }
-  removeController(t5) {
-    this._$EO?.delete(t5);
+  removeController(t6) {
+    this._$EO?.delete(t6);
   }
   _$E_() {
-    const t5 = /* @__PURE__ */ new Map(), s4 = this.constructor.elementProperties;
-    for (const i6 of s4.keys()) this.hasOwnProperty(i6) && (t5.set(i6, this[i6]), delete this[i6]);
-    t5.size > 0 && (this._$Ep = t5);
+    const t6 = /* @__PURE__ */ new Map(), s5 = this.constructor.elementProperties;
+    for (const i7 of s5.keys()) this.hasOwnProperty(i7) && (t6.set(i7, this[i7]), delete this[i7]);
+    t6.size > 0 && (this._$Ep = t6);
   }
   createRenderRoot() {
-    const t5 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return S(t5, this.constructor.elementStyles), t5;
+    const t6 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S(t6, this.constructor.elementStyles), t6;
   }
   connectedCallback() {
-    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((t5) => t5.hostConnected?.());
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((t6) => t6.hostConnected?.());
   }
-  enableUpdating(t5) {
+  enableUpdating(t6) {
   }
   disconnectedCallback() {
-    this._$EO?.forEach((t5) => t5.hostDisconnected?.());
+    this._$EO?.forEach((t6) => t6.hostDisconnected?.());
   }
-  attributeChangedCallback(t5, s4, i6) {
-    this._$AK(t5, i6);
+  attributeChangedCallback(t6, s5, i7) {
+    this._$AK(t6, i7);
   }
-  _$ET(t5, s4) {
-    const i6 = this.constructor.elementProperties.get(t5), e8 = this.constructor._$Eu(t5, i6);
-    if (void 0 !== e8 && true === i6.reflect) {
-      const h3 = (void 0 !== i6.converter?.toAttribute ? i6.converter : u).toAttribute(s4, i6.type);
-      this._$Em = t5, null == h3 ? this.removeAttribute(e8) : this.setAttribute(e8, h3), this._$Em = null;
+  _$ET(t6, s5) {
+    const i7 = this.constructor.elementProperties.get(t6), e10 = this.constructor._$Eu(t6, i7);
+    if (void 0 !== e10 && true === i7.reflect) {
+      const h3 = (void 0 !== i7.converter?.toAttribute ? i7.converter : u).toAttribute(s5, i7.type);
+      this._$Em = t6, null == h3 ? this.removeAttribute(e10) : this.setAttribute(e10, h3), this._$Em = null;
     }
   }
-  _$AK(t5, s4) {
-    const i6 = this.constructor, e8 = i6._$Eh.get(t5);
-    if (void 0 !== e8 && this._$Em !== e8) {
-      const t6 = i6.getPropertyOptions(e8), h3 = "function" == typeof t6.converter ? { fromAttribute: t6.converter } : void 0 !== t6.converter?.fromAttribute ? t6.converter : u;
-      this._$Em = e8, this[e8] = h3.fromAttribute(s4, t6.type) ?? this._$Ej?.get(e8) ?? null, this._$Em = null;
+  _$AK(t6, s5) {
+    const i7 = this.constructor, e10 = i7._$Eh.get(t6);
+    if (void 0 !== e10 && this._$Em !== e10) {
+      const t7 = i7.getPropertyOptions(e10), h3 = "function" == typeof t7.converter ? { fromAttribute: t7.converter } : void 0 !== t7.converter?.fromAttribute ? t7.converter : u;
+      this._$Em = e10, this[e10] = h3.fromAttribute(s5, t7.type) ?? this._$Ej?.get(e10) ?? null, this._$Em = null;
     }
   }
-  requestUpdate(t5, s4, i6) {
-    if (void 0 !== t5) {
-      const e8 = this.constructor, h3 = this[t5];
-      if (i6 ?? (i6 = e8.getPropertyOptions(t5)), !((i6.hasChanged ?? f)(h3, s4) || i6.useDefault && i6.reflect && h3 === this._$Ej?.get(t5) && !this.hasAttribute(e8._$Eu(t5, i6)))) return;
-      this.C(t5, s4, i6);
+  requestUpdate(t6, s5, i7) {
+    if (void 0 !== t6) {
+      const e10 = this.constructor, h3 = this[t6];
+      if (i7 ?? (i7 = e10.getPropertyOptions(t6)), !((i7.hasChanged ?? f)(h3, s5) || i7.useDefault && i7.reflect && h3 === this._$Ej?.get(t6) && !this.hasAttribute(e10._$Eu(t6, i7)))) return;
+      this.C(t6, s5, i7);
     }
     false === this.isUpdatePending && (this._$ES = this._$EP());
   }
-  C(t5, s4, { useDefault: i6, reflect: e8, wrapped: h3 }, r7) {
-    i6 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t5) && (this._$Ej.set(t5, r7 ?? s4 ?? this[t5]), true !== h3 || void 0 !== r7) || (this._$AL.has(t5) || (this.hasUpdated || i6 || (s4 = void 0), this._$AL.set(t5, s4)), true === e8 && this._$Em !== t5 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t5));
+  C(t6, s5, { useDefault: i7, reflect: e10, wrapped: h3 }, r8) {
+    i7 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t6) && (this._$Ej.set(t6, r8 ?? s5 ?? this[t6]), true !== h3 || void 0 !== r8) || (this._$AL.has(t6) || (this.hasUpdated || i7 || (s5 = void 0), this._$AL.set(t6, s5)), true === e10 && this._$Em !== t6 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t6));
   }
   async _$EP() {
     this.isUpdatePending = true;
     try {
       await this._$ES;
-    } catch (t6) {
-      Promise.reject(t6);
+    } catch (t7) {
+      Promise.reject(t7);
     }
-    const t5 = this.scheduleUpdate();
-    return null != t5 && await t5, !this.isUpdatePending;
+    const t6 = this.scheduleUpdate();
+    return null != t6 && await t6, !this.isUpdatePending;
   }
   scheduleUpdate() {
     return this.performUpdate();
@@ -232,28 +232,28 @@ var y = class extends HTMLElement {
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [t7, s5] of this._$Ep) this[t7] = s5;
+        for (const [t8, s6] of this._$Ep) this[t8] = s6;
         this._$Ep = void 0;
       }
-      const t6 = this.constructor.elementProperties;
-      if (t6.size > 0) for (const [s5, i6] of t6) {
-        const { wrapped: t7 } = i6, e8 = this[s5];
-        true !== t7 || this._$AL.has(s5) || void 0 === e8 || this.C(s5, void 0, i6, e8);
+      const t7 = this.constructor.elementProperties;
+      if (t7.size > 0) for (const [s6, i7] of t7) {
+        const { wrapped: t8 } = i7, e10 = this[s6];
+        true !== t8 || this._$AL.has(s6) || void 0 === e10 || this.C(s6, void 0, i7, e10);
       }
     }
-    let t5 = false;
-    const s4 = this._$AL;
+    let t6 = false;
+    const s5 = this._$AL;
     try {
-      t5 = this.shouldUpdate(s4), t5 ? (this.willUpdate(s4), this._$EO?.forEach((t6) => t6.hostUpdate?.()), this.update(s4)) : this._$EM();
-    } catch (s5) {
-      throw t5 = false, this._$EM(), s5;
+      t6 = this.shouldUpdate(s5), t6 ? (this.willUpdate(s5), this._$EO?.forEach((t7) => t7.hostUpdate?.()), this.update(s5)) : this._$EM();
+    } catch (s6) {
+      throw t6 = false, this._$EM(), s6;
     }
-    t5 && this._$AE(s4);
+    t6 && this._$AE(s5);
   }
-  willUpdate(t5) {
+  willUpdate(t6) {
   }
-  _$AE(t5) {
-    this._$EO?.forEach((t6) => t6.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t5)), this.updated(t5);
+  _$AE(t6) {
+    this._$EO?.forEach((t7) => t7.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t6)), this.updated(t6);
   }
   _$EM() {
     this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
@@ -264,15 +264,15 @@ var y = class extends HTMLElement {
   getUpdateComplete() {
     return this._$ES;
   }
-  shouldUpdate(t5) {
+  shouldUpdate(t6) {
     return true;
   }
-  update(t5) {
-    this._$Eq && (this._$Eq = this._$Eq.forEach((t6) => this._$ET(t6, this[t6]))), this._$EM();
+  update(t6) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach((t7) => this._$ET(t7, this[t7]))), this._$EM();
   }
-  updated(t5) {
+  updated(t6) {
   }
-  firstUpdated(t5) {
+  firstUpdated(t6) {
   }
 };
 y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.0");
@@ -280,16 +280,16 @@ y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProper
 // ../../node_modules/lit-html/lit-html.js
 var t2 = globalThis;
 var i3 = t2.trustedTypes;
-var s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t5) => t5 }) : void 0;
+var s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t6) => t6 }) : void 0;
 var e3 = "$lit$";
 var h2 = `lit$${Math.random().toFixed(9).slice(2)}$`;
 var o3 = "?" + h2;
 var n3 = `<${o3}>`;
 var r3 = document;
 var l2 = () => r3.createComment("");
-var c3 = (t5) => null === t5 || "object" != typeof t5 && "function" != typeof t5;
+var c3 = (t6) => null === t6 || "object" != typeof t6 && "function" != typeof t6;
 var a2 = Array.isArray;
-var u2 = (t5) => a2(t5) || "function" == typeof t5?.[Symbol.iterator];
+var u2 = (t6) => a2(t6) || "function" == typeof t6?.[Symbol.iterator];
 var d2 = "[ 	\n\f\r]";
 var f2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
 var v = /-->/g;
@@ -299,7 +299,7 @@ var m = RegExp(`>|${d2}(?:([^\\s"'>=/]+)(${d2}*=${d2}*(?:[^
 var p2 = /'/g;
 var g = /"/g;
 var $ = /^(?:script|style|textarea|title)$/i;
-var y2 = (t5) => (i6, ...s4) => ({ _$litType$: t5, strings: i6, values: s4 });
+var y2 = (t6) => (i7, ...s5) => ({ _$litType$: t6, strings: i7, values: s5 });
 var x = y2(1);
 var b2 = y2(2);
 var w = y2(3);
@@ -307,68 +307,68 @@ var T = Symbol.for("lit-noChange");
 var E = Symbol.for("lit-nothing");
 var A = /* @__PURE__ */ new WeakMap();
 var C = r3.createTreeWalker(r3, 129);
-function P(t5, i6) {
-  if (!a2(t5) || !t5.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return void 0 !== s2 ? s2.createHTML(i6) : i6;
+function P(t6, i7) {
+  if (!a2(t6) || !t6.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== s2 ? s2.createHTML(i7) : i7;
 }
-var V = (t5, i6) => {
-  const s4 = t5.length - 1, o8 = [];
-  let r7, l3 = 2 === i6 ? "<svg>" : 3 === i6 ? "<math>" : "", c4 = f2;
-  for (let i7 = 0; i7 < s4; i7++) {
-    const s5 = t5[i7];
-    let a3, u3, d3 = -1, y3 = 0;
-    for (; y3 < s5.length && (c4.lastIndex = y3, u3 = c4.exec(s5), null !== u3); ) y3 = c4.lastIndex, c4 === f2 ? "!--" === u3[1] ? c4 = v : void 0 !== u3[1] ? c4 = _ : void 0 !== u3[2] ? ($.test(u3[2]) && (r7 = RegExp("</" + u3[2], "g")), c4 = m) : void 0 !== u3[3] && (c4 = m) : c4 === m ? ">" === u3[0] ? (c4 = r7 ?? f2, d3 = -1) : void 0 === u3[1] ? d3 = -2 : (d3 = c4.lastIndex - u3[2].length, a3 = u3[1], c4 = void 0 === u3[3] ? m : '"' === u3[3] ? g : p2) : c4 === g || c4 === p2 ? c4 = m : c4 === v || c4 === _ ? c4 = f2 : (c4 = m, r7 = void 0);
-    const x2 = c4 === m && t5[i7 + 1].startsWith("/>") ? " " : "";
-    l3 += c4 === f2 ? s5 + n3 : d3 >= 0 ? (o8.push(a3), s5.slice(0, d3) + e3 + s5.slice(d3) + h2 + x2) : s5 + h2 + (-2 === d3 ? i7 : x2);
-  }
-  return [P(t5, l3 + (t5[s4] || "<?>") + (2 === i6 ? "</svg>" : 3 === i6 ? "</math>" : "")), o8];
+var V = (t6, i7) => {
+  const s5 = t6.length - 1, o10 = [];
+  let r8, l3 = 2 === i7 ? "<svg>" : 3 === i7 ? "<math>" : "", c5 = f2;
+  for (let i8 = 0; i8 < s5; i8++) {
+    const s6 = t6[i8];
+    let a3, u5, d3 = -1, y3 = 0;
+    for (; y3 < s6.length && (c5.lastIndex = y3, u5 = c5.exec(s6), null !== u5); ) y3 = c5.lastIndex, c5 === f2 ? "!--" === u5[1] ? c5 = v : void 0 !== u5[1] ? c5 = _ : void 0 !== u5[2] ? ($.test(u5[2]) && (r8 = RegExp("</" + u5[2], "g")), c5 = m) : void 0 !== u5[3] && (c5 = m) : c5 === m ? ">" === u5[0] ? (c5 = r8 ?? f2, d3 = -1) : void 0 === u5[1] ? d3 = -2 : (d3 = c5.lastIndex - u5[2].length, a3 = u5[1], c5 = void 0 === u5[3] ? m : '"' === u5[3] ? g : p2) : c5 === g || c5 === p2 ? c5 = m : c5 === v || c5 === _ ? c5 = f2 : (c5 = m, r8 = void 0);
+    const x2 = c5 === m && t6[i8 + 1].startsWith("/>") ? " " : "";
+    l3 += c5 === f2 ? s6 + n3 : d3 >= 0 ? (o10.push(a3), s6.slice(0, d3) + e3 + s6.slice(d3) + h2 + x2) : s6 + h2 + (-2 === d3 ? i8 : x2);
+  }
+  return [P(t6, l3 + (t6[s5] || "<?>") + (2 === i7 ? "</svg>" : 3 === i7 ? "</math>" : "")), o10];
 };
 var N = class _N {
-  constructor({ strings: t5, _$litType$: s4 }, n5) {
-    let r7;
+  constructor({ strings: t6, _$litType$: s5 }, n5) {
+    let r8;
     this.parts = [];
-    let c4 = 0, a3 = 0;
-    const u3 = t5.length - 1, d3 = this.parts, [f3, v2] = V(t5, s4);
-    if (this.el = _N.createElement(f3, n5), C.currentNode = this.el.content, 2 === s4 || 3 === s4) {
-      const t6 = this.el.content.firstChild;
-      t6.replaceWith(...t6.childNodes);
+    let c5 = 0, a3 = 0;
+    const u5 = t6.length - 1, d3 = this.parts, [f3, v3] = V(t6, s5);
+    if (this.el = _N.createElement(f3, n5), C.currentNode = this.el.content, 2 === s5 || 3 === s5) {
+      const t7 = this.el.content.firstChild;
+      t7.replaceWith(...t7.childNodes);
     }
-    for (; null !== (r7 = C.nextNode()) && d3.length < u3; ) {
-      if (1 === r7.nodeType) {
-        if (r7.hasAttributes()) for (const t6 of r7.getAttributeNames()) if (t6.endsWith(e3)) {
-          const i6 = v2[a3++], s5 = r7.getAttribute(t6).split(h2), e8 = /([.?@])?(.*)/.exec(i6);
-          d3.push({ type: 1, index: c4, name: e8[2], strings: s5, ctor: "." === e8[1] ? H : "?" === e8[1] ? I : "@" === e8[1] ? L : k }), r7.removeAttribute(t6);
-        } else t6.startsWith(h2) && (d3.push({ type: 6, index: c4 }), r7.removeAttribute(t6));
-        if ($.test(r7.tagName)) {
-          const t6 = r7.textContent.split(h2), s5 = t6.length - 1;
-          if (s5 > 0) {
-            r7.textContent = i3 ? i3.emptyScript : "";
-            for (let i6 = 0; i6 < s5; i6++) r7.append(t6[i6], l2()), C.nextNode(), d3.push({ type: 2, index: ++c4 });
-            r7.append(t6[s5], l2());
+    for (; null !== (r8 = C.nextNode()) && d3.length < u5; ) {
+      if (1 === r8.nodeType) {
+        if (r8.hasAttributes()) for (const t7 of r8.getAttributeNames()) if (t7.endsWith(e3)) {
+          const i7 = v3[a3++], s6 = r8.getAttribute(t7).split(h2), e10 = /([.?@])?(.*)/.exec(i7);
+          d3.push({ type: 1, index: c5, name: e10[2], strings: s6, ctor: "." === e10[1] ? H : "?" === e10[1] ? I : "@" === e10[1] ? L : k }), r8.removeAttribute(t7);
+        } else t7.startsWith(h2) && (d3.push({ type: 6, index: c5 }), r8.removeAttribute(t7));
+        if ($.test(r8.tagName)) {
+          const t7 = r8.textContent.split(h2), s6 = t7.length - 1;
+          if (s6 > 0) {
+            r8.textContent = i3 ? i3.emptyScript : "";
+            for (let i7 = 0; i7 < s6; i7++) r8.append(t7[i7], l2()), C.nextNode(), d3.push({ type: 2, index: ++c5 });
+            r8.append(t7[s6], l2());
           }
         }
-      } else if (8 === r7.nodeType) if (r7.data === o3) d3.push({ type: 2, index: c4 });
+      } else if (8 === r8.nodeType) if (r8.data === o3) d3.push({ type: 2, index: c5 });
       else {
-        let t6 = -1;
-        for (; -1 !== (t6 = r7.data.indexOf(h2, t6 + 1)); ) d3.push({ type: 7, index: c4 }), t6 += h2.length - 1;
+        let t7 = -1;
+        for (; -1 !== (t7 = r8.data.indexOf(h2, t7 + 1)); ) d3.push({ type: 7, index: c5 }), t7 += h2.length - 1;
       }
-      c4++;
+      c5++;
     }
   }
-  static createElement(t5, i6) {
-    const s4 = r3.createElement("template");
-    return s4.innerHTML = t5, s4;
+  static createElement(t6, i7) {
+    const s5 = r3.createElement("template");
+    return s5.innerHTML = t6, s5;
   }
 };
-function S2(t5, i6, s4 = t5, e8) {
-  if (i6 === T) return i6;
-  let h3 = void 0 !== e8 ? s4._$Co?.[e8] : s4._$Cl;
-  const o8 = c3(i6) ? void 0 : i6._$litDirective$;
-  return h3?.constructor !== o8 && (h3?._$AO?.(false), void 0 === o8 ? h3 = void 0 : (h3 = new o8(t5), h3._$AT(t5, s4, e8)), void 0 !== e8 ? (s4._$Co ?? (s4._$Co = []))[e8] = h3 : s4._$Cl = h3), void 0 !== h3 && (i6 = S2(t5, h3._$AS(t5, i6.values), h3, e8)), i6;
+function S2(t6, i7, s5 = t6, e10) {
+  if (i7 === T) return i7;
+  let h3 = void 0 !== e10 ? s5._$Co?.[e10] : s5._$Cl;
+  const o10 = c3(i7) ? void 0 : i7._$litDirective$;
+  return h3?.constructor !== o10 && (h3?._$AO?.(false), void 0 === o10 ? h3 = void 0 : (h3 = new o10(t6), h3._$AT(t6, s5, e10)), void 0 !== e10 ? (s5._$Co ?? (s5._$Co = []))[e10] = h3 : s5._$Cl = h3), void 0 !== h3 && (i7 = S2(t6, h3._$AS(t6, i7.values), h3, e10)), i7;
 }
 var M = class {
-  constructor(t5, i6) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t5, this._$AM = i6;
+  constructor(t6, i7) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t6, this._$AM = i7;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -376,35 +376,35 @@ var M = class {
   get _$AU() {
     return this._$AM._$AU;
   }
-  u(t5) {
-    const { el: { content: i6 }, parts: s4 } = this._$AD, e8 = (t5?.creationScope ?? r3).importNode(i6, true);
-    C.currentNode = e8;
-    let h3 = C.nextNode(), o8 = 0, n5 = 0, l3 = s4[0];
+  u(t6) {
+    const { el: { content: i7 }, parts: s5 } = this._$AD, e10 = (t6?.creationScope ?? r3).importNode(i7, true);
+    C.currentNode = e10;
+    let h3 = C.nextNode(), o10 = 0, n5 = 0, l3 = s5[0];
     for (; void 0 !== l3; ) {
-      if (o8 === l3.index) {
-        let i7;
-        2 === l3.type ? i7 = new R(h3, h3.nextSibling, this, t5) : 1 === l3.type ? i7 = new l3.ctor(h3, l3.name, l3.strings, this, t5) : 6 === l3.type && (i7 = new z(h3, this, t5)), this._$AV.push(i7), l3 = s4[++n5];
+      if (o10 === l3.index) {
+        let i8;
+        2 === l3.type ? i8 = new R(h3, h3.nextSibling, this, t6) : 1 === l3.type ? i8 = new l3.ctor(h3, l3.name, l3.strings, this, t6) : 6 === l3.type && (i8 = new z(h3, this, t6)), this._$AV.push(i8), l3 = s5[++n5];
       }
-      o8 !== l3?.index && (h3 = C.nextNode(), o8++);
+      o10 !== l3?.index && (h3 = C.nextNode(), o10++);
     }
-    return C.currentNode = r3, e8;
+    return C.currentNode = r3, e10;
   }
-  p(t5) {
-    let i6 = 0;
-    for (const s4 of this._$AV) void 0 !== s4 && (void 0 !== s4.strings ? (s4._$AI(t5, s4, i6), i6 += s4.strings.length - 2) : s4._$AI(t5[i6])), i6++;
+  p(t6) {
+    let i7 = 0;
+    for (const s5 of this._$AV) void 0 !== s5 && (void 0 !== s5.strings ? (s5._$AI(t6, s5, i7), i7 += s5.strings.length - 2) : s5._$AI(t6[i7])), i7++;
   }
 };
 var R = class _R {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
-  constructor(t5, i6, s4, e8) {
-    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t5, this._$AB = i6, this._$AM = s4, this.options = e8, this._$Cv = e8?.isConnected ?? true;
+  constructor(t6, i7, s5, e10) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t6, this._$AB = i7, this._$AM = s5, this.options = e10, this._$Cv = e10?.isConnected ?? true;
   }
   get parentNode() {
-    let t5 = this._$AA.parentNode;
-    const i6 = this._$AM;
-    return void 0 !== i6 && 11 === t5?.nodeType && (t5 = i6.parentNode), t5;
+    let t6 = this._$AA.parentNode;
+    const i7 = this._$AM;
+    return void 0 !== i7 && 11 === t6?.nodeType && (t6 = i7.parentNode), t6;
   }
   get startNode() {
     return this._$AA;
@@ -412,45 +412,45 @@ var R = class _R {
   get endNode() {
     return this._$AB;
   }
-  _$AI(t5, i6 = this) {
-    t5 = S2(this, t5, i6), c3(t5) ? t5 === E || null == t5 || "" === t5 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t5 !== this._$AH && t5 !== T && this._(t5) : void 0 !== t5._$litType$ ? this.$(t5) : void 0 !== t5.nodeType ? this.T(t5) : u2(t5) ? this.k(t5) : this._(t5);
+  _$AI(t6, i7 = this) {
+    t6 = S2(this, t6, i7), c3(t6) ? t6 === E || null == t6 || "" === t6 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t6 !== this._$AH && t6 !== T && this._(t6) : void 0 !== t6._$litType$ ? this.$(t6) : void 0 !== t6.nodeType ? this.T(t6) : u2(t6) ? this.k(t6) : this._(t6);
   }
-  O(t5) {
-    return this._$AA.parentNode.insertBefore(t5, this._$AB);
+  O(t6) {
+    return this._$AA.parentNode.insertBefore(t6, this._$AB);
   }
-  T(t5) {
-    this._$AH !== t5 && (this._$AR(), this._$AH = this.O(t5));
+  T(t6) {
+    this._$AH !== t6 && (this._$AR(), this._$AH = this.O(t6));
   }
-  _(t5) {
-    this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t5 : this.T(r3.createTextNode(t5)), this._$AH = t5;
+  _(t6) {
+    this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t6 : this.T(r3.createTextNode(t6)), this._$AH = t6;
   }
-  $(t5) {
-    const { values: i6, _$litType$: s4 } = t5, e8 = "number" == typeof s4 ? this._$AC(t5) : (void 0 === s4.el && (s4.el = N.createElement(P(s4.h, s4.h[0]), this.options)), s4);
-    if (this._$AH?._$AD === e8) this._$AH.p(i6);
+  $(t6) {
+    const { values: i7, _$litType$: s5 } = t6, e10 = "number" == typeof s5 ? this._$AC(t6) : (void 0 === s5.el && (s5.el = N.createElement(P(s5.h, s5.h[0]), this.options)), s5);
+    if (this._$AH?._$AD === e10) this._$AH.p(i7);
     else {
-      const t6 = new M(e8, this), s5 = t6.u(this.options);
-      t6.p(i6), this.T(s5), this._$AH = t6;
+      const t7 = new M(e10, this), s6 = t7.u(this.options);
+      t7.p(i7), this.T(s6), this._$AH = t7;
     }
   }
-  _$AC(t5) {
-    let i6 = A.get(t5.strings);
-    return void 0 === i6 && A.set(t5.strings, i6 = new N(t5)), i6;
+  _$AC(t6) {
+    let i7 = A.get(t6.strings);
+    return void 0 === i7 && A.set(t6.strings, i7 = new N(t6)), i7;
   }
-  k(t5) {
+  k(t6) {
     a2(this._$AH) || (this._$AH = [], this._$AR());
-    const i6 = this._$AH;
-    let s4, e8 = 0;
-    for (const h3 of t5) e8 === i6.length ? i6.push(s4 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s4 = i6[e8], s4._$AI(h3), e8++;
-    e8 < i6.length && (this._$AR(s4 && s4._$AB.nextSibling, e8), i6.length = e8);
-  }
-  _$AR(t5 = this._$AA.nextSibling, i6) {
-    for (this._$AP?.(false, true, i6); t5 && t5 !== this._$AB; ) {
-      const i7 = t5.nextSibling;
-      t5.remove(), t5 = i7;
+    const i7 = this._$AH;
+    let s5, e10 = 0;
+    for (const h3 of t6) e10 === i7.length ? i7.push(s5 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s5 = i7[e10], s5._$AI(h3), e10++;
+    e10 < i7.length && (this._$AR(s5 && s5._$AB.nextSibling, e10), i7.length = e10);
+  }
+  _$AR(t6 = this._$AA.nextSibling, i7) {
+    for (this._$AP?.(false, true, i7); t6 && t6 !== this._$AB; ) {
+      const i8 = t6.nextSibling;
+      t6.remove(), t6 = i8;
     }
   }
-  setConnected(t5) {
-    void 0 === this._$AM && (this._$Cv = t5, this._$AP?.(t5));
+  setConnected(t6) {
+    void 0 === this._$AM && (this._$Cv = t6, this._$AP?.(t6));
   }
 };
 var k = class {
@@ -460,74 +460,75 @@ var k = class {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(t5, i6, s4, e8, h3) {
-    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t5, this.name = i6, this._$AM = e8, this.options = h3, s4.length > 2 || "" !== s4[0] || "" !== s4[1] ? (this._$AH = Array(s4.length - 1).fill(new String()), this.strings = s4) : this._$AH = E;
+  constructor(t6, i7, s5, e10, h3) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t6, this.name = i7, this._$AM = e10, this.options = h3, s5.length > 2 || "" !== s5[0] || "" !== s5[1] ? (this._$AH = Array(s5.length - 1).fill(new String()), this.strings = s5) : this._$AH = E;
   }
-  _$AI(t5, i6 = this, s4, e8) {
+  _$AI(t6, i7 = this, s5, e10) {
     const h3 = this.strings;
-    let o8 = false;
-    if (void 0 === h3) t5 = S2(this, t5, i6, 0), o8 = !c3(t5) || t5 !== this._$AH && t5 !== T, o8 && (this._$AH = t5);
+    let o10 = false;
+    if (void 0 === h3) t6 = S2(this, t6, i7, 0), o10 = !c3(t6) || t6 !== this._$AH && t6 !== T, o10 && (this._$AH = t6);
     else {
-      const e9 = t5;
-      let n5, r7;
-      for (t5 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r7 = S2(this, e9[s4 + n5], i6, n5), r7 === T && (r7 = this._$AH[n5]), o8 || (o8 = !c3(r7) || r7 !== this._$AH[n5]), r7 === E ? t5 = E : t5 !== E && (t5 += (r7 ?? "") + h3[n5 + 1]), this._$AH[n5] = r7;
+      const e11 = t6;
+      let n5, r8;
+      for (t6 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r8 = S2(this, e11[s5 + n5], i7, n5), r8 === T && (r8 = this._$AH[n5]), o10 || (o10 = !c3(r8) || r8 !== this._$AH[n5]), r8 === E ? t6 = E : t6 !== E && (t6 += (r8 ?? "") + h3[n5 + 1]), this._$AH[n5] = r8;
     }
-    o8 && !e8 && this.j(t5);
+    o10 && !e10 && this.j(t6);
   }
-  j(t5) {
-    t5 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t5 ?? "");
+  j(t6) {
+    t6 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t6 ?? "");
   }
 };
 var H = class extends k {
   constructor() {
     super(...arguments), this.type = 3;
   }
-  j(t5) {
-    this.element[this.name] = t5 === E ? void 0 : t5;
+  j(t6) {
+    this.element[this.name] = t6 === E ? void 0 : t6;
   }
 };
 var I = class extends k {
   constructor() {
     super(...arguments), this.type = 4;
   }
-  j(t5) {
-    this.element.toggleAttribute(this.name, !!t5 && t5 !== E);
+  j(t6) {
+    this.element.toggleAttribute(this.name, !!t6 && t6 !== E);
   }
 };
 var L = class extends k {
-  constructor(t5, i6, s4, e8, h3) {
-    super(t5, i6, s4, e8, h3), this.type = 5;
+  constructor(t6, i7, s5, e10, h3) {
+    super(t6, i7, s5, e10, h3), this.type = 5;
   }
-  _$AI(t5, i6 = this) {
-    if ((t5 = S2(this, t5, i6, 0) ?? E) === T) return;
-    const s4 = this._$AH, e8 = t5 === E && s4 !== E || t5.capture !== s4.capture || t5.once !== s4.once || t5.passive !== s4.passive, h3 = t5 !== E && (s4 === E || e8);
-    e8 && this.element.removeEventListener(this.name, this, s4), h3 && this.element.addEventListener(this.name, this, t5), this._$AH = t5;
+  _$AI(t6, i7 = this) {
+    if ((t6 = S2(this, t6, i7, 0) ?? E) === T) return;
+    const s5 = this._$AH, e10 = t6 === E && s5 !== E || t6.capture !== s5.capture || t6.once !== s5.once || t6.passive !== s5.passive, h3 = t6 !== E && (s5 === E || e10);
+    e10 && this.element.removeEventListener(this.name, this, s5), h3 && this.element.addEventListener(this.name, this, t6), this._$AH = t6;
   }
-  handleEvent(t5) {
-    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t5) : this._$AH.handleEvent(t5);
+  handleEvent(t6) {
+    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t6) : this._$AH.handleEvent(t6);
   }
 };
 var z = class {
-  constructor(t5, i6, s4) {
-    this.element = t5, this.type = 6, this._$AN = void 0, this._$AM = i6, this.options = s4;
+  constructor(t6, i7, s5) {
+    this.element = t6, this.type = 6, this._$AN = void 0, this._$AM = i7, this.options = s5;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AI(t5) {
-    S2(this, t5);
+  _$AI(t6) {
+    S2(this, t6);
   }
 };
+var Z = { M: e3, P: h2, A: o3, C: 1, L: V, R: M, D: u2, V: S2, I: R, H: k, N: I, U: L, B: H, F: z };
 var j = t2.litHtmlPolyfillSupport;
 j?.(N, R), (t2.litHtmlVersions ?? (t2.litHtmlVersions = [])).push("3.3.0");
-var B = (t5, i6, s4) => {
-  const e8 = s4?.renderBefore ?? i6;
-  let h3 = e8._$litPart$;
+var B = (t6, i7, s5) => {
+  const e10 = s5?.renderBefore ?? i7;
+  let h3 = e10._$litPart$;
   if (void 0 === h3) {
-    const t6 = s4?.renderBefore ?? null;
-    e8._$litPart$ = h3 = new R(i6.insertBefore(l2(), t6), t6, void 0, s4 ?? {});
+    const t7 = s5?.renderBefore ?? null;
+    e10._$litPart$ = h3 = new R(i7.insertBefore(l2(), t7), t7, void 0, s5 ?? {});
   }
-  return h3._$AI(t5), h3;
+  return h3._$AI(t6), h3;
 };
 
 // ../../node_modules/lit-element/lit-element.js
@@ -538,12 +539,12 @@ var i4 = class extends y {
   }
   createRenderRoot() {
     var _a;
-    const t5 = super.createRenderRoot();
-    return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t5.firstChild), t5;
+    const t6 = super.createRenderRoot();
+    return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t6.firstChild), t6;
   }
-  update(t5) {
-    const r7 = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t5), this._$Do = B(r7, this.renderRoot, this.renderOptions);
+  update(t6) {
+    const r8 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t6), this._$Do = B(r8, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(true);
@@ -562,93 +563,128 @@ o4?.({ LitElement: i4 });
 
 // ../../node_modules/@lit/reactive-element/decorators/property.js
 var o5 = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f };
-var r4 = (t5 = o5, e8, r7) => {
-  const { kind: n5, metadata: i6 } = r7;
-  let s4 = globalThis.litPropertyMetadata.get(i6);
-  if (void 0 === s4 && globalThis.litPropertyMetadata.set(i6, s4 = /* @__PURE__ */ new Map()), "setter" === n5 && ((t5 = Object.create(t5)).wrapped = true), s4.set(r7.name, t5), "accessor" === n5) {
-    const { name: o8 } = r7;
-    return { set(r8) {
-      const n6 = e8.get.call(this);
-      e8.set.call(this, r8), this.requestUpdate(o8, n6, t5);
-    }, init(e9) {
-      return void 0 !== e9 && this.C(o8, void 0, t5, e9), e9;
+var r4 = (t6 = o5, e10, r8) => {
+  const { kind: n5, metadata: i7 } = r8;
+  let s5 = globalThis.litPropertyMetadata.get(i7);
+  if (void 0 === s5 && globalThis.litPropertyMetadata.set(i7, s5 = /* @__PURE__ */ new Map()), "setter" === n5 && ((t6 = Object.create(t6)).wrapped = true), s5.set(r8.name, t6), "accessor" === n5) {
+    const { name: o10 } = r8;
+    return { set(r9) {
+      const n6 = e10.get.call(this);
+      e10.set.call(this, r9), this.requestUpdate(o10, n6, t6);
+    }, init(e11) {
+      return void 0 !== e11 && this.C(o10, void 0, t6, e11), e11;
     } };
   }
   if ("setter" === n5) {
-    const { name: o8 } = r7;
-    return function(r8) {
-      const n6 = this[o8];
-      e8.call(this, r8), this.requestUpdate(o8, n6, t5);
+    const { name: o10 } = r8;
+    return function(r9) {
+      const n6 = this[o10];
+      e10.call(this, r9), this.requestUpdate(o10, n6, t6);
     };
   }
   throw Error("Unsupported decorator location: " + n5);
 };
-function n4(t5) {
-  return (e8, o8) => "object" == typeof o8 ? r4(t5, e8, o8) : ((t6, e9, o9) => {
-    const r7 = e9.hasOwnProperty(o9);
-    return e9.constructor.createProperty(o9, t6), r7 ? Object.getOwnPropertyDescriptor(e9, o9) : void 0;
-  })(t5, e8, o8);
+function n4(t6) {
+  return (e10, o10) => "object" == typeof o10 ? r4(t6, e10, o10) : ((t7, e11, o11) => {
+    const r8 = e11.hasOwnProperty(o11);
+    return e11.constructor.createProperty(o11, t7), r8 ? Object.getOwnPropertyDescriptor(e11, o11) : void 0;
+  })(t6, e10, o10);
 }
 
 // ../../node_modules/@lit/reactive-element/decorators/state.js
-function r5(r7) {
-  return n4({ ...r7, state: true, attribute: false });
+function r5(r8) {
+  return n4({ ...r8, state: true, attribute: false });
 }
 
 // ../../node_modules/@lit/reactive-element/decorators/base.js
-var e4 = (e8, t5, c4) => (c4.configurable = true, c4.enumerable = true, Reflect.decorate && "object" != typeof t5 && Object.defineProperty(e8, t5, c4), c4);
+var e4 = (e10, t6, c5) => (c5.configurable = true, c5.enumerable = true, Reflect.decorate && "object" != typeof t6 && Object.defineProperty(e10, t6, c5), c5);
+
+// ../../node_modules/@lit/reactive-element/decorators/query.js
+function e5(e10, r8) {
+  return (n5, s5, i7) => {
+    const o10 = (t6) => t6.renderRoot?.querySelector(e10) ?? null;
+    if (r8) {
+      const { get: e11, set: r9 } = "object" == typeof s5 ? n5 : i7 ?? (() => {
+        const t6 = Symbol();
+        return { get() {
+          return this[t6];
+        }, set(e12) {
+          this[t6] = e12;
+        } };
+      })();
+      return e4(n5, s5, { get() {
+        let t6 = e11.call(this);
+        return void 0 === t6 && (t6 = o10(this), (null !== t6 || this.hasUpdated) && r9.call(this, t6)), t6;
+      } });
+    }
+    return e4(n5, s5, { get() {
+      return o10(this);
+    } });
+  };
+}
 
 // ../../node_modules/@lit/reactive-element/decorators/query-all.js
-var e5;
-function r6(r7) {
-  return (n5, o8) => e4(n5, o8, { get() {
-    return (this.renderRoot ?? (e5 ?? (e5 = document.createDocumentFragment()))).querySelectorAll(r7);
+var e6;
+function r6(r8) {
+  return (n5, o10) => e4(n5, o10, { get() {
+    return (this.renderRoot ?? (e6 ?? (e6 = document.createDocumentFragment()))).querySelectorAll(r8);
   } });
 }
 
+// ../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js
+function o6(o10) {
+  return (e10, n5) => {
+    const { slot: r8, selector: s5 } = o10 ?? {}, c5 = "slot" + (r8 ? `[name=${r8}]` : ":not([name])");
+    return e4(e10, n5, { get() {
+      const t6 = this.renderRoot?.querySelector(c5), e11 = t6?.assignedElements(o10) ?? [];
+      return void 0 === s5 ? e11 : e11.filter((t7) => t7.matches(s5));
+    } });
+  };
+}
+
 // ../../node_modules/lit-html/directive.js
 var t3 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 };
-var e6 = (t5) => (...e8) => ({ _$litDirective$: t5, values: e8 });
+var e7 = (t6) => (...e10) => ({ _$litDirective$: t6, values: e10 });
 var i5 = class {
-  constructor(t5) {
+  constructor(t6) {
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AT(t5, e8, i6) {
-    this._$Ct = t5, this._$AM = e8, this._$Ci = i6;
+  _$AT(t6, e10, i7) {
+    this._$Ct = t6, this._$AM = e10, this._$Ci = i7;
   }
-  _$AS(t5, e8) {
-    return this.update(t5, e8);
+  _$AS(t6, e10) {
+    return this.update(t6, e10);
   }
-  update(t5, e8) {
-    return this.render(...e8);
+  update(t6, e10) {
+    return this.render(...e10);
   }
 };
 
 // ../../node_modules/lit-html/directives/unsafe-html.js
-var e7 = class extends i5 {
-  constructor(i6) {
-    if (super(i6), this.it = E, i6.type !== t3.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
-  }
-  render(r7) {
-    if (r7 === E || null == r7) return this._t = void 0, this.it = r7;
-    if (r7 === T) return r7;
-    if ("string" != typeof r7) throw Error(this.constructor.directiveName + "() called with a non-string value");
-    if (r7 === this.it) return this._t;
-    this.it = r7;
-    const s4 = [r7];
-    return s4.raw = s4, this._t = { _$litType$: this.constructor.resultType, strings: s4, values: [] };
+var e8 = class extends i5 {
+  constructor(i7) {
+    if (super(i7), this.it = E, i7.type !== t3.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(r8) {
+    if (r8 === E || null == r8) return this._t = void 0, this.it = r8;
+    if (r8 === T) return r8;
+    if ("string" != typeof r8) throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (r8 === this.it) return this._t;
+    this.it = r8;
+    const s5 = [r8];
+    return s5.raw = s5, this._t = { _$litType$: this.constructor.resultType, strings: s5, values: [] };
   }
 };
-e7.directiveName = "unsafeHTML", e7.resultType = 1;
-var o6 = e6(e7);
+e8.directiveName = "unsafeHTML", e8.resultType = 1;
+var o7 = e7(e8);
 
 // ../../node_modules/lit-html/directives/unsafe-svg.js
-var t4 = class extends e7 {
+var t4 = class extends e8 {
 };
 t4.directiveName = "unsafeSVG", t4.resultType = 2;
-var o7 = e6(t4);
+var o8 = e7(t4);
 
 // node_modules/@triptease/icons/dist/src/icons/chevron-down.js
 var chevronDown = `
@@ -710,6 +746,871 @@ var wallet = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor
 <path d="M14.2275 3.02681C16.5581 2.53634 18.7497 4.3152 18.75 6.69674V7.09518C20.0437 7.42823 20.9998 8.60187 21 9.99948V16.9995C21 18.6046 19.7394 19.9153 18.1543 19.9956L18 19.9995H6C4.39489 19.9995 3.08421 18.7389 3.00391 17.1538L3 16.9995V8.43405C3.00022 6.66092 4.2424 5.12941 5.97754 4.76412L14.2275 3.02681ZM6 8.49948C5.17173 8.49948 4.50026 9.17127 4.5 9.99948V16.9995C4.5 17.8279 5.17157 18.4995 6 18.4995H18C18.8284 18.4995 19.5 17.8279 19.5 16.9995V9.99948C19.4997 9.17127 18.8283 8.49948 18 8.49948H6ZM16.5 11.9995C17.3283 11.9995 17.9997 12.6713 18 13.4995C18 14.3279 17.3284 14.9995 16.5 14.9995C15.6716 14.9995 15 14.3279 15 13.4995C15.0003 12.6713 15.6717 11.9995 16.5 11.9995ZM17.25 6.69674C17.2497 5.26791 15.9344 4.20028 14.5361 4.49459L6.28613 6.2319C5.67607 6.36042 5.16896 6.73055 4.85254 7.22799C5.20609 7.08147 5.59347 6.99948 6 6.99948H17.25V6.69674Z" />
 </svg>`;
 
+// ../../node_modules/tslib/tslib.es6.mjs
+function __decorate(decorators, target, key, desc) {
+  var c5 = arguments.length, r8 = c5 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d3;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r8 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r8 = (c5 < 3 ? d3(r8) : c5 > 3 ? d3(target, key, r8) : d3(target, key)) || r8;
+  return c5 > 3 && r8 && Object.defineProperty(target, key, r8), r8;
+}
+
+// ../../node_modules/lit-html/directives/if-defined.js
+var o9 = (o10) => o10 ?? E;
+
+// ../../node_modules/lit-html/directive-helpers.js
+var { I: t5 } = Z;
+var s4 = () => document.createComment("");
+var r7 = (o10, i7, n5) => {
+  const e10 = o10._$AA.parentNode, l3 = void 0 === i7 ? o10._$AB : i7._$AA;
+  if (void 0 === n5) {
+    const i8 = e10.insertBefore(s4(), l3), c5 = e10.insertBefore(s4(), l3);
+    n5 = new t5(i8, c5, o10, o10.options);
+  } else {
+    const t6 = n5._$AB.nextSibling, i8 = n5._$AM, c5 = i8 !== o10;
+    if (c5) {
+      let t7;
+      n5._$AQ?.(o10), n5._$AM = o10, void 0 !== n5._$AP && (t7 = o10._$AU) !== i8._$AU && n5._$AP(t7);
+    }
+    if (t6 !== l3 || c5) {
+      let o11 = n5._$AA;
+      for (; o11 !== t6; ) {
+        const t7 = o11.nextSibling;
+        e10.insertBefore(o11, l3), o11 = t7;
+      }
+    }
+  }
+  return n5;
+};
+var v2 = (o10, t6, i7 = o10) => (o10._$AI(t6, i7), o10);
+var u3 = {};
+var m2 = (o10, t6 = u3) => o10._$AH = t6;
+var p3 = (o10) => o10._$AH;
+var M2 = (o10) => {
+  o10._$AP?.(false, true);
+  let t6 = o10._$AA;
+  const i7 = o10._$AB.nextSibling;
+  for (; t6 !== i7; ) {
+    const o11 = t6.nextSibling;
+    t6.remove(), t6 = o11;
+  }
+};
+
+// ../../node_modules/lit-html/directives/repeat.js
+var u4 = (e10, s5, t6) => {
+  const r8 = /* @__PURE__ */ new Map();
+  for (let l3 = s5; l3 <= t6; l3++) r8.set(e10[l3], l3);
+  return r8;
+};
+var c4 = e7(class extends i5 {
+  constructor(e10) {
+    if (super(e10), e10.type !== t3.CHILD) throw Error("repeat() can only be used in text expressions");
+  }
+  dt(e10, s5, t6) {
+    let r8;
+    void 0 === t6 ? t6 = s5 : void 0 !== s5 && (r8 = s5);
+    const l3 = [], o10 = [];
+    let i7 = 0;
+    for (const s6 of e10) l3[i7] = r8 ? r8(s6, i7) : i7, o10[i7] = t6(s6, i7), i7++;
+    return { values: o10, keys: l3 };
+  }
+  render(e10, s5, t6) {
+    return this.dt(e10, s5, t6).values;
+  }
+  update(s5, [t6, r8, c5]) {
+    const d3 = p3(s5), { values: p4, keys: a3 } = this.dt(t6, r8, c5);
+    if (!Array.isArray(d3)) return this.ut = a3, p4;
+    const h3 = this.ut ?? (this.ut = []), v3 = [];
+    let m3, y3, x2 = 0, j2 = d3.length - 1, k2 = 0, w2 = p4.length - 1;
+    for (; x2 <= j2 && k2 <= w2; ) if (null === d3[x2]) x2++;
+    else if (null === d3[j2]) j2--;
+    else if (h3[x2] === a3[k2]) v3[k2] = v2(d3[x2], p4[k2]), x2++, k2++;
+    else if (h3[j2] === a3[w2]) v3[w2] = v2(d3[j2], p4[w2]), j2--, w2--;
+    else if (h3[x2] === a3[w2]) v3[w2] = v2(d3[x2], p4[w2]), r7(s5, v3[w2 + 1], d3[x2]), x2++, w2--;
+    else if (h3[j2] === a3[k2]) v3[k2] = v2(d3[j2], p4[k2]), r7(s5, d3[x2], d3[j2]), j2--, k2++;
+    else if (void 0 === m3 && (m3 = u4(a3, k2, w2), y3 = u4(h3, x2, j2)), m3.has(h3[x2])) if (m3.has(h3[j2])) {
+      const e10 = y3.get(a3[k2]), t7 = void 0 !== e10 ? d3[e10] : null;
+      if (null === t7) {
+        const e11 = r7(s5, d3[x2]);
+        v2(e11, p4[k2]), v3[k2] = e11;
+      } else v3[k2] = v2(t7, p4[k2]), r7(s5, d3[x2], t7), d3[e10] = null;
+      k2++;
+    } else M2(d3[j2]), j2--;
+    else M2(d3[x2]), x2++;
+    for (; k2 <= w2; ) {
+      const e10 = r7(s5, v3[w2 + 1]);
+      v2(e10, p4[k2]), v3[k2++] = e10;
+    }
+    for (; x2 <= j2; ) {
+      const e10 = d3[x2++];
+      null !== e10 && M2(e10);
+    }
+    return this.ut = a3, m2(s5, v3), T;
+  }
+});
+
+// ../../node_modules/lit-html/directives/guard.js
+var e9 = {};
+var i6 = e7(class extends i5 {
+  constructor() {
+    super(...arguments), this.ot = e9;
+  }
+  render(r8, t6) {
+    return t6();
+  }
+  update(t6, [s5, e10]) {
+    if (Array.isArray(s5)) {
+      if (Array.isArray(this.ot) && this.ot.length === s5.length && s5.every((r8, t7) => r8 === this.ot[t7])) return T;
+    } else if (this.ot === s5) return T;
+    return this.ot = Array.isArray(s5) ? Array.from(s5) : s5, this.render(s5, e10);
+  }
+});
+
+// ../../node_modules/@triptease/icons/dist/src/icons/chevron-down.js
+var chevronDown2 = `
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down chevron-down"
+       viewBox="0 0 16 16" role="presentation">
+    <path fill-rule="evenodd"
+          d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+          stroke="currentColor"/>
+  </svg>`;
+
+// ../../node_modules/@triptease/icons/dist/src/icons/alert.js
+var alert2 = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.25 5.75C9.25 5.33579 9.58579 5 10 5C10.4142 5 10.75 5.33579 10.75 5.75V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V5.75ZM10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13C10.4142 13 10.75 13.3358 10.75 13.75Z" fill="#3B353B"/>
+</svg>`;
+
+// ../../node_modules/@triptease/tt-combobox/dist/src/styles.js
+var styles = i`
+  :host {
+    display: flex;
+    flex-direction: var(--tt-combobox-flex-direction, row);
+    align-items: var(--tt-combobox-align-items, center);
+    justify-content: var(--tt-combobox-justify-content, initial);
+    align-content: var(--tt-combobox-align-content, initial);
+    gap: var(--tt-combobox-gap, 0.5rem);
+    font-size: var(--tt-combobox-font-size, var(--font-size-200));
+    color: var(--tt-combobox-color, var(--color-text-400));
+  }
+
+  :host([disabled]) .tt-combobox-container {
+    border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));
+    color: var(--tt-combobox-disabled-color, var(--color-text-200));
+    background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));
+    pointer-events: none;
+  }
+
+  .tt-combobox-container:focus-within {
+    outline: 5px auto Highlight;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  .tt-combobox-container:hover {
+    background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));
+  }
+
+  :host([invalid]) .tt-combobox-container,
+  :host(:state(interacted):invalid) .tt-combobox-container {
+    outline: 1px solid var(--color-alert-400, red);
+  }
+
+  .errormessage {
+    visibility: hidden;
+    display: flex;
+    align-items: center;
+    gap: var(--space-scale-0-5);
+    color: var(--color-alert-400, red);
+
+    &[data-hidden] {
+      display: none;
+    }
+  }
+
+  .errormessage svg path {
+    fill: var(--color-alert-400, red);
+    height: 20px;
+  }
+
+  .tt-combobox-container:has([role="combobox"][aria-invalid="true"]) ~ .errormessage {
+    visibility: visible;
+  }
+
+  :has([role="combobox"][aria-invalid="true"]) ::slotted([slot="error"]) {
+    color: var(--color-alert-400, darkred);
+    font-size: var(--font-size-100);
+    margin: 0;
+    font-weight: var(--font-weight-regular);
+    line-height: 1.2;
+  }
+
+  slot[name="option"]::slotted(*) {
+    display: none;
+  }
+
+  * {
+    box-sizing: border-box;
+    font-family: var(--font-family-sans);
+    cursor: inherit;
+  }
+
+  .tt-combobox-container {
+    position: relative;
+    max-width: var(--tt-combobox-max-width, 300px);
+    min-width: var(--tt-combobox-min-width, 250px);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--border-radius);
+    border-color: var(--tt-combobox-border-color, var(--color-border-400));
+    border-style: solid;
+    border-width: var(--tt-combobox-border-width, 1px);
+    background-color: var(--tt-combobox-background-color, var(--color-surface-100));
+    padding: 0.5rem;
+    gap: 0.25rem;
+    //width: 100%;
+  }
+
+  [role="listbox"] {
+    display: none;
+  }
+
+  [role="combobox"] {
+    width: 100%;
+    border-style: none;
+    background-color: transparent;
+    font-size: var(--tt-combobox-font-size, var(--font-size-200));
+  }
+
+  .hide-caret {
+    caret-color: transparent;
+  }
+
+  [role="combobox"]::placeholder {
+    color: var(--tt-combobox-placeholder-color, var(--color-text-300));
+    font-family: var(--font-family-inter);
+    font-size: var(--tt-combobox-font-size, var(--font-size-200));
+  }
+
+  :host([disabled]) [role="combobox"]::placeholder {
+    color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));
+  }
+
+  [role="combobox"]:placeholder-shown {
+    text-overflow: ellipsis;
+    overflow: clip;
+  }
+
+  [role="combobox"]:focus {
+    outline: none;
+  }
+
+  [role="combobox"] ~ button {
+    appearance: none;
+    padding: 0;
+    border-width: 0;
+    background-color: transparent;
+    aspect-ratio: 1;
+  }
+
+  [role="combobox"] ~ button svg {
+    transition: transform 0.2s ease-in-out;
+    color: var(--tt-combobox-dropdown-color, var(--color-text-400));
+  }
+
+  [role="combobox"][aria-expanded="true"] ~ button svg {
+    transform: rotate(180deg);
+  }
+
+  [role="combobox"][aria-expanded="true"] ~ [role="listbox"] {
+    display: block;
+    width: max-content;
+    max-width: var(--tt-combobox-list-max-width, 35ch);
+    min-width: 100%;
+    background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));
+    border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow-lg);
+    padding: 0;
+    position: absolute;
+    top: var(--tt-combobox-top, calc(100% + 0.5rem));
+    left: var(--tt-combobox-left, 0);
+    right: var(--tt-combobox-right, unset);
+    bottom: var(--tt-combobox-bottom, unset);
+    z-index: 2;
+    margin: 0;
+    list-style: none;
+    max-height: var(--tt-combobox-max-height, 400px);
+    overflow-y: auto;
+
+
+    li {
+      display: flex;
+      padding: 0.5rem;
+      box-sizing: border-box;
+      text-align: left;
+      text-overflow: ellipsis;
+      text-wrap: nowrap;
+      align-items: center;
+      gap: 0.25rem;
+      max-width: 100%;
+      width: 100%;
+      overflow-y: visible;
+      flex: 1;
+
+
+      input[type="checkbox"] {
+        width: var(--checkbox-size, var(--space-scale-2));
+        aspect-ratio: 1;
+        flex: 0 0 auto;
+      }
+
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        line-height: 1.1;
+      }
+
+      &.no-results {
+        display: none;
+      }
+
+      &[aria-hidden="true"] {
+        visibility: hidden;
+        display: none;
+      }
+    }
+
+    &:not(:has([role="option"]:not([data-value="select-all"]))) {
+      .no-results {
+        display: flex;
+      }
+
+      .select-all {
+        display: none;
+      }
+    }
+
+
+  }
+
+  [role="combobox"][aria-expanded="true"] ~ [role="listbox"][data-open-upward] {
+    top: unset;
+    bottom: calc(100% + 0.5rem);
+  }
+
+  slot[name="icon"] {
+    display: inline-block;
+    max-width: var(--tt-combobox-icon-size, 1rem);
+    aspect-ratio: 1;
+  }
+
+  [role="option"].select-all {
+    border-bottom: 1px solid var(--color-border-300);
+  }
+
+  [aria-multiselectable="false"] [role="option"][aria-selected="true"] {
+    color: var(--color-primary-400);
+    font-weight: var(--font-weight-medium);
+  }
+
+  [role="option"]:is(:hover, [data-active="true"]) {
+    background-color: var(--tt-combobox-option-background-color-hover, inherit);
+    color: var(--tt-combobox-option-color-hover, inherit);
+
+    &:first-child {
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
+    }
+  }
+
+  [role="option"]:hover {
+    cursor: pointer;
+  }
+
+  [role="option"][aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  [role="listbox"][aria-multiselectable="true"] [role="option"] input[type="checkbox"] {
+    accent-color: var(--color-primary-400);
+    width: var(--checkbox-size, var(--space-scale-2));
+    aspect-ratio: 1;
+    pointer-events: none;
+  }
+
+  [role="listbox"][aria-multiselectable="true"] [role="option"][aria-disabled="true"] input[type="checkbox"] {
+    pointer-events: none;
+  }
+
+  label {
+    font-size: var(--tt-combobox-label-font-size, inherit);
+    color: var(--tt-combobox-label-color, inherit);
+    font-weight: var(--tt-combobox-label-font-weight, inherit);
+
+    &[data-hidden] {
+      display: none;
+    }
+
+  }
+`;
+
+// ../../node_modules/@triptease/tt-combobox/dist/src/TtCombobox.js
+var TtCombobox = class extends i4 {
+  get form() {
+    return this.internals.form;
+  }
+  get _isAllSelected() {
+    return Array.from(this._selectableVisibleOptions).every((option) => Array.from(this._selectedVisibleOptions).includes(option));
+  }
+  constructor() {
+    super();
+    this.multiselect = false;
+    this.disabled = false;
+    this.invalid = false;
+    this.displaySelectAll = false;
+    this.required = false;
+    this.name = "";
+    this.ariaLabelledby = E;
+    this.hideCaret = false;
+    this.openUpward = false;
+    this._activeOption = -1;
+    this._expanded = false;
+    this._filter = "";
+    this.value = [];
+    this._slotObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes") {
+          this.requestUpdate("options");
+        }
+      });
+    });
+    this._valueChanged = () => {
+      this._selectableOptions.forEach((option) => {
+        if (this.value.includes(option.dataset.value)) {
+          this._checkOption(option);
+        } else {
+          this._uncheckOption(option);
+        }
+      });
+      this.internals.setFormValue(JSON.stringify(this.value));
+    };
+    this._listenForOptionChange = () => {
+      this.options.forEach((option) => {
+        this._slotObserver.observe(option, { attributes: true, attributeFilter: ["selected", "disabled", "hidden"] });
+      });
+    };
+    this._selectAll = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.value.length === this._selectableOptions.length) {
+        this.value = [];
+      } else {
+        this.value = Array.from(this._selectableOptions).map((option) => option.dataset.value);
+      }
+    };
+    this._renderSelectAll = () => {
+      if (!this.multiselect || !this.displaySelectAll) {
+        return E;
+      }
+      const id = `${this.id}-option-select-all`;
+      const active = this._getActiveOptionId() === id;
+      const selected = this._isAllSelected;
+      return x`
+      <li
+        class="select-all"
+        role="option"
+        id="${this.id}-option-select-all"
+        aria-selected="${selected}"
+        data-active=${active}
+        @click="${this._selectAll}"
+        @mousedown="${(evt) => evt.preventDefault()}"
+        data-value="select-all"
+        part="option"
+      >
+        <input type="checkbox" ?checked=${selected} role="presentation" tabindex="-1" part="checkbox">
+        Select all
+      </li>`;
+    };
+    this._renderChevron = () => x`
+    <button type="button" aria-label="Expand" @click="${this._onChevronClick}" aria-expanded="${this._expanded}"
+            aria-controls="${this.id}-list" tabindex="-1" ?disabled=${this.disabled} part="arrow">
+      ${o8(chevronDown2)}
+    </button>
+  `;
+    this.internals = this.attachInternals();
+  }
+  _handleFocusOut(e10) {
+    if (!this.shadowRoot.contains(e10.relatedTarget)) {
+      this._expanded = false;
+    }
+  }
+  _onFocus() {
+    this._comboboxInput.focus();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("focus", this._onFocus);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("focus", this._onFocus);
+  }
+  firstUpdated(changedProperties) {
+    this.internals.setFormValue(JSON.stringify(this.value));
+    this._reportValidity();
+    this._listenForOptionChange();
+    super.firstUpdated(changedProperties);
+  }
+  update(changedProperties) {
+    if (changedProperties.has("value")) {
+      this._valueChanged();
+      if (changedProperties.get("value") !== void 0 && JSON.stringify(changedProperties.get("value")) !== JSON.stringify(this.value)) {
+        this._dispatchSelectedOptions();
+        this._reportValidity();
+      }
+    }
+    if (changedProperties.has("_expanded") && changedProperties.get("_expanded") && !this._expanded) {
+      this.internals.states.add("interacted");
+    }
+    if (changedProperties.has("options")) {
+      this.updateComplete.then(() => {
+        this.value = Array.from(/* @__PURE__ */ new Set([...this.value, ...Array.from(this._selectedOptions).map((option) => option.dataset.value)]));
+        this._listenForOptionChange();
+      });
+    }
+    super.update(changedProperties);
+  }
+  _reportValidity() {
+    if (this.required && !this.value.length) {
+      const errorMessage = this.multiselect ? "Please select at least one option" : "Please select an option";
+      this.internals.setValidity({
+        valueMissing: true
+      }, errorMessage, this._comboboxInput);
+      this.internals.states.add("--invalid");
+    } else if (!this.internals.validity.valid) {
+      this.internals.setValidity({});
+      if (this.internals.states.has("--invalid")) {
+        this.internals.states.delete("--invalid");
+      }
+    }
+  }
+  get labels() {
+    return [...this.internals.labels];
+  }
+  get labelContent() {
+    if (this.ariaLabel !== null) {
+      return this.ariaLabel;
+    }
+    return this.labels.map((label) => label.innerText).join(", ");
+  }
+  _onKeyUp(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this._expanded) {
+          this._expanded = true;
+          this._activeOption = -1;
+        } else {
+          this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (this._expanded) {
+          this._activeOption = Math.max(0, this._activeOption - 1);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        if (this._expanded) {
+          this._expanded = false;
+        } else if (this._filter !== "") {
+          this._filter = "";
+        }
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this._expanded) {
+          this._visibleOptions[this._activeOption].click();
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  _uncheckOption(option) {
+    if (option.dataset.deselectable !== "true")
+      return;
+    option.setAttribute("aria-selected", "false");
+    const checkbox = option.querySelector('input[type="checkbox"]');
+    if (checkbox) {
+      checkbox.checked = false;
+    }
+  }
+  _checkOption(option) {
+    if (!this.multiselect) {
+      this._selectableOptions.forEach((opt) => {
+        this._uncheckOption(opt);
+      });
+    }
+    option.setAttribute("aria-selected", "true");
+    const checkbox = option.querySelector('input[type="checkbox"]');
+    if (checkbox) {
+      checkbox.checked = true;
+    }
+  }
+  _getActiveOptionId() {
+    if (this._activeOption === -1 || this._visibleOptions.length === 0) {
+      return void 0;
+    }
+    const option = this._visibleOptions[this._activeOption];
+    return option.id;
+  }
+  _onClick() {
+    this._expanded = !this._expanded;
+    if (this._expanded) {
+      this.shadowRoot?.querySelector('input[role="combobox"]')?.focus();
+    }
+  }
+  _onChevronClick() {
+    this.shadowRoot?.querySelector('input[role="combobox"]')?.focus();
+  }
+  _onClickOption(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const option = event.currentTarget;
+    const selectedValue = option.dataset.value;
+    if (this.multiselect) {
+      if (this.value.includes(selectedValue)) {
+        this.value = this.value.filter((value) => value !== selectedValue);
+      } else {
+        this.value = [...this.value, selectedValue];
+      }
+    } else {
+      this.value = [selectedValue];
+      this._expanded = false;
+    }
+  }
+  _onInput(event) {
+    const input = event.target;
+    const filter = input.value.toLowerCase();
+    if (filter !== "" && !this._expanded) {
+      this._expanded = true;
+    }
+    this._activeOption = -1;
+    this._filter = filter;
+  }
+  _dispatchSelectedOptions() {
+    this.dispatchEvent(new Event("change", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  get _isValid() {
+    return this.internals.validity.valid && !this.invalid;
+  }
+  _renderCombobox() {
+    const placeHolderValue = i6([this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder], () => {
+      if (this.placeholder) {
+        return this.placeholder;
+      }
+      if (this.disabled) {
+        return "Disabled";
+      }
+      if (!this._selectedVisibleOptions.length) {
+        return "No options selected";
+      }
+      if (this._selectedVisibleOptions.length === 1) {
+        return this._selectedVisibleOptions[0].textContent?.trim();
+      }
+      if (this._isAllSelected) {
+        return this.selectAllPlaceholder || "All options selected";
+      }
+      return `${this._selectedVisibleOptions.length} options selected`;
+    });
+    return x`
+      <input
+        type="text"
+        id="${this.id}"
+        name="${this.name}"
+        autocomplete="off"
+        aria-label="${this.labelContent}"
+        aria-labelledby="${this.ariaLabelledby}"
+        role="combobox"
+        aria-controls="${this.id}-list"
+        aria-expanded="${this._expanded}"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        aria-disabled="${this.disabled}"
+        aria-invalid="${!this._isValid}"
+        aria-errormessage="${!this._isValid ? `error-msg-${this.id}` : E}"
+        aria-required="${this.required}"
+        ?disabled=${this.disabled}
+        aria-activedescendant="${o9(this._getActiveOptionId())}"
+        @input="${this._onInput}"
+        .value="${this._filter}"
+        .placeholder="${placeHolderValue}"
+        @focusout="${this._handleFocusOut}"
+        part="input"
+        class=${this.hideCaret ? "hide-caret" : ""}
+      />`;
+  }
+  _renderOption(option) {
+    if (this._filter !== "" && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {
+      return E;
+    }
+    const id = `${this.id}-option-${option.value}`;
+    const active = this._getActiveOptionId() === id;
+    const selected = Boolean(this.multiselect && option.selected);
+    return x`
+      <li
+        role="option"
+        id="${this.id}-option-${option.value}"
+        aria-selected=${this.multiselect && option.selected}
+        data-active=${active}
+        @click="${this._onClickOption}"
+        @mousedown="${(event) => event.preventDefault()}"
+        data-value="${option.value}"
+        aria-disabled=${option.disabled}
+        aria-hidden=${option.hidden || E}
+        data-deselectable=${!option.selected}
+        part="option"
+      >
+        ${this.multiselect ? x`<input type="checkbox" ?checked=${selected}
+                                         role="presentation" tabindex="-1" part="checkbox">` : E}
+        <span>${o7(option.innerHTML)}</span>
+      </li>`;
+  }
+  _hasErrorContent() {
+    return this.errorElements?.length > 0;
+  }
+  render() {
+    return x`
+      <div class="tt-combobox-container" @focus="${this._onFocus}" @keydown="${this._onKeyUp}" @click="${this._onClick}"
+           aria-disabled="${this.disabled}" part="container">
+        <slot name="icon" part="icon"></slot>
+        ${this._renderCombobox()}
+        ${this._renderChevron()}
+        <ul
+          id="${this.id}-list"
+          role="listbox"
+          aria-multiselectable="${this.multiselect}"
+          aria-label="${this.labelContent}"
+          part="listbox"
+          ?data-open-upward="${this.openUpward}"
+        >
+          ${this._renderSelectAll()}
+
+          ${c4(this.options, (opt) => opt.value, this._renderOption.bind(this))}
+
+          <li part="no-results" class="no-results">No results</li>
+        </ul>
+      </div>
+      <slot name="option" @slotchange=${() => this.requestUpdate("options")}></slot>
+      <div class="errormessage" id="error-msg-${this.id}" role="alert" aria-atomic="true"
+           ?data-hidden="${!this._hasErrorContent()}" part="error">
+        ${o8(alert2)}
+        <slot name="error"></slot>
+      </div>
+    `;
+  }
+};
+TtCombobox.styles = styles;
+TtCombobox.formAssociated = true;
+TtCombobox.shadowRootOptions = {
+  ...i4.shadowRootOptions,
+  delegatesFocus: true
+};
+__decorate([
+  n4({ type: Boolean })
+], TtCombobox.prototype, "multiselect", void 0);
+__decorate([
+  n4({ type: Boolean })
+], TtCombobox.prototype, "disabled", void 0);
+__decorate([
+  n4({ type: Boolean })
+], TtCombobox.prototype, "invalid", void 0);
+__decorate([
+  n4({ type: Boolean, attribute: "display-select-all" })
+], TtCombobox.prototype, "displaySelectAll", void 0);
+__decorate([
+  n4({ type: Boolean })
+], TtCombobox.prototype, "required", void 0);
+__decorate([
+  n4({ type: String })
+], TtCombobox.prototype, "name", void 0);
+__decorate([
+  n4({ type: String, attribute: "aria-labelledby" })
+], TtCombobox.prototype, "ariaLabelledby", void 0);
+__decorate([
+  n4({ type: Boolean, attribute: "hide-caret" })
+], TtCombobox.prototype, "hideCaret", void 0);
+__decorate([
+  n4({ type: String })
+], TtCombobox.prototype, "placeholder", void 0);
+__decorate([
+  n4({ type: String, attribute: "select-all-placeholder" })
+], TtCombobox.prototype, "selectAllPlaceholder", void 0);
+__decorate([
+  n4({ type: Boolean, attribute: "open-upward" })
+], TtCombobox.prototype, "openUpward", void 0);
+__decorate([
+  r5()
+], TtCombobox.prototype, "_activeOption", void 0);
+__decorate([
+  r5()
+], TtCombobox.prototype, "_expanded", void 0);
+__decorate([
+  r5()
+], TtCombobox.prototype, "_filter", void 0);
+__decorate([
+  o6({ slot: "option", selector: "option" })
+], TtCombobox.prototype, "options", void 0);
+__decorate([
+  o6({ slot: "option", selector: "option:not([disabled])" })
+], TtCombobox.prototype, "activeOptions", void 0);
+__decorate([
+  o6({ slot: "error" })
+], TtCombobox.prototype, "errorElements", void 0);
+__decorate([
+  r6('li[role="option"]:not([aria-disabled="true"], [aria-hidden="true"])')
+], TtCombobox.prototype, "_visibleOptions", void 0);
+__decorate([
+  r6('li[role="option"]:not([aria-disabled="true"], [data-value="select-all"])')
+], TtCombobox.prototype, "_selectableOptions", void 0);
+__decorate([
+  r6('li[role="option"]:not([aria-disabled="true"], [data-value="select-all"], [aria-hidden="true"])')
+], TtCombobox.prototype, "_selectableVisibleOptions", void 0);
+__decorate([
+  r6('li[role="option"]:not([data-value="select-all"])[aria-selected="true"]')
+], TtCombobox.prototype, "_selectedOptions", void 0);
+__decorate([
+  r6('li[role="option"]:not([data-value="select-all"], [aria-hidden="true"])[aria-selected="true"]')
+], TtCombobox.prototype, "_selectedVisibleOptions", void 0);
+__decorate([
+  e5('input[role="combobox"]')
+], TtCombobox.prototype, "_comboboxInput", void 0);
+__decorate([
+  e5("button:has(svg)")
+], TtCombobox.prototype, "_chevronButton", void 0);
+__decorate([
+  n4({ type: Array, attribute: "value" })
+], TtCombobox.prototype, "value", void 0);
+
+// ../../node_modules/@triptease/tt-combobox/dist/src/tt-combobox.js
+if (typeof window !== "undefined") {
+  if (!window.customElements.get("tt-combobox")) {
+    window.customElements.define("tt-combobox", TtCombobox);
+  }
+}
+
 // src/styles.ts
 var visuallyHiddenCss = i`
   position: absolute;
@@ -723,7 +1624,7 @@ var visuallyHiddenCss = i`
   clip-path: inset(50%);
   white-space: nowrap;
 `;
-var styles = i`
+var styles2 = i`
   :host {
     --nav-bar-width: 260px;
 
@@ -817,8 +1718,8 @@ var styles = i`
 
     .tertiary-nav.sidebar-closed {
       .external-link,
-      slot,
-      hr {
+      hr,
+      #client-selector {
         display: none;
         visibility: hidden;
       }
@@ -1046,6 +1947,31 @@ var styles = i`
     visibility: visible;
     opacity: 1;
   }
+
+  #client-selector {
+    display: flex;
+    align-items: center;
+  }
+
+  #client-selector tt-combobox {
+    --tt-combobox-color: var(--color-text-inverted-400);
+    --tt-combobox-dropdown-color: var(--color-text-inverted-400);
+    --tt-combobox-list-background-color: var(--color-surface-inverted-100);
+    --tt-combobox-option-background-color-hover: var(--color-surface-inverted-200);
+    --tt-combobox-placeholder-color: var(--color-text-inverted-300);
+    --tt-combobox-background-color: var(--color-surface-inverted-100);
+    --tt-combobox-hover-background-color: var(--color-surface-inverted-200);
+    --tt-combobox-list-max-width: 80ch;
+    --tt-combobox-min-width: 244px;
+    --tt-combobox-max-width: 244px;
+  }
+
+  .single-client-name {
+    height: 39px;
+    padding: var(--space-scale-1); /* match tt-combobox height */
+    font-size: var(--font-size-100);
+    color: var(--color-text-inverted-400);
+  }
 `;
 
 // src/triptease-logo.ts
@@ -1076,10 +2002,19 @@ var Routes = {
 };
 
 // src/TtNavbar.ts
+var jsonArrayConverter = (value) => {
+  if (!value) return [];
+  try {
+    return JSON.parse(value);
+  } catch {
+    return [];
+  }
+};
 var TtNavbar = class extends i4 {
   constructor() {
     super(...arguments);
     this.campaignManagerUrl = "https://app.campaign-manager.triptease.io";
+    this.clients = [];
     this.sidebarOpen = true;
     /*
      * Set the active state for the current page.
@@ -1152,9 +2087,9 @@ var TtNavbar = class extends i4 {
       this.closeAllDetails();
       this.sidebarOpen = !this.sidebarOpen;
     };
-    this.handleToggle = (e8) => {
-      const { newState } = e8;
-      const target = e8.currentTarget;
+    this.handleToggle = (e10) => {
+      const { newState } = e10;
+      const target = e10.currentTarget;
       if (newState === "open") {
         if (!this.sidebarOpen) {
           this.sidebarOpen = true;
@@ -1168,9 +2103,9 @@ var TtNavbar = class extends i4 {
       if (!this.platformUrl) return formattedPath;
       return new URL(formattedPath, this.platformUrl).toString();
     };
-    this.onAnchorClick = (e8) => {
+    this.onAnchorClick = (e10) => {
       if (this.navigate) {
-        this.navigate(e8);
+        this.navigate(e10);
         this.setActiveState();
       }
     };
@@ -1183,12 +2118,12 @@ var TtNavbar = class extends i4 {
       <nav id=${this.id} class="${this.sidebarOpen ? "" : "sidebar-closed"}">
         <div class="sidebar-header ${this.sidebarOpen ? "" : "sidebar-closed"}">
           <div class="logo">
-            ${o7(tripteaseLogo)}
+            ${o8(tripteaseLogo)}
           </div>
           <button id="navbar-toggle-btn" class="nav-item nav-toggle-button" @click=${this.toggleSidebar}>
-            ${o7(sidebarCollapsed)}
+            ${o8(sidebarCollapsed)}
             <span class="tooltip nav-toggle-tooltip">
-              ${o7(sidebarCollapsed)}
+              ${o8(sidebarCollapsed)}
               <span>Collapse sidebar</span>
             </span>
           </button>
@@ -1199,22 +2134,22 @@ var TtNavbar = class extends i4 {
             class="nav-item"
             href=${this.buildUrl("/")}
             @click=${this.onAnchorClick}
-          >${o7(home)}<span>Dashboard</span></a
+          >${o8(home)}<span>Dashboard</span></a
           >
           <a id="${Routes.CampaignManager}" class="nav-item" href=${this.campaignManagerUrl}
-          >${o7(campaigns)}<span>Campaigns</span></a
+          >${o8(campaigns)}<span>Campaigns</span></a
           >
           <a
             class="nav-item"
             href=${this.buildUrl("/channels")}
             @click=${this.onAnchorClick}
-          >${o7(channels)}<span>Channels</span></a
+          >${o8(channels)}<span>Channels</span></a
           >
           <details id="market-insights" @toggle=${this.handleToggle}>
             <summary>
-              ${o7(graph)}
+              ${o8(graph)}
               <span>Market Insights</span>
-              <span class="icon chevron"> ${o7(chevronDown)}</span>
+              <span class="icon chevron"> ${o8(chevronDown)}</span>
             </summary>
             <div class="dropdown-items">
               <a
@@ -1233,9 +2168,9 @@ var TtNavbar = class extends i4 {
           </details>
           <details id="settings" @toggle=${this.handleToggle}>
             <summary>
-              ${o7(gear)}
+              ${o8(gear)}
               <span>Settings</span>
-              <span class="icon chevron"> ${o7(chevronDown)}</span>
+              <span class="icon chevron"> ${o8(chevronDown)}</span>
             </summary>
             <div class="dropdown-items">
               <a
@@ -1267,9 +2202,9 @@ var TtNavbar = class extends i4 {
           <hr />
           <details id="account" @toggle=${this.handleToggle}>
             <summary>
-              ${o7(user)}
+              ${o8(user)}
               <span>Account</span>
-              <span class="icon chevron"> ${o7(chevronDown)}</span>
+              <span class="icon chevron"> ${o8(chevronDown)}</span>
             </summary>
             <div class="dropdown-items">
               <a
@@ -1288,9 +2223,9 @@ var TtNavbar = class extends i4 {
           </details>
           <details id="billing-routes" @toggle=${this.handleToggle}>
             <summary>
-              ${o7(wallet)}
+              ${o8(wallet)}
               <span>Billing</span>
-              <span class="icon chevron"> ${o7(chevronDown)}</span>
+              <span class="icon chevron"> ${o8(chevronDown)}</span>
             </summary>
             <div>
               <a
@@ -1317,7 +2252,7 @@ var TtNavbar = class extends i4 {
               rel="noreferrer"
             >
               Feature requests
-              ${o7(external)}
+              ${o8(external)}
             </a>
             <a
               class='nav-item external-link'
@@ -1326,7 +2261,7 @@ var TtNavbar = class extends i4 {
               rel="noreferrer"
             >
               Product updates
-              ${o7(external)}
+              ${o8(external)}
             </a>
             <a
               class='nav-item external-link'
@@ -1335,25 +2270,42 @@ var TtNavbar = class extends i4 {
               rel="noreferrer"
             >
               Help center
-              ${o7(external)}
+              ${o8(external)}
             </a>
             <hr />
           </div>
           <div class='nav-items'>
-            <slot id="client-selector" name="clientSelector"></slot>
+            <div id="client-selector">
+              ${this.clients.length > 1 ? x`
+                <tt-combobox
+                  .openUpward=${true}
+                  .value=${this.clientKey}
+                  .onChange=${this.onClientChange}
+                >
+                  ${this.clients.map((client) => x`
+                    <option slot="option" value=${client.clientKey}>
+                      ${client.displayName}
+                    </option>
+                  `)}
+                </tt-combobox>
+              ` : x`
+                <div class="single-client-name">
+                  ${this.clients.find((m3) => m3.clientKey === this.clientKey)?.displayName}
+                </div>
+              `}
+            </div>
             <a
               id="logout-link"
               class="nav-item"
               href=${this.buildUrl("/logout")}
               @click=${this.onAnchorClick}
-            >${o7(logout)}<span>Logout</span></a>
+            >${o8(logout)}<span>Logout</span></a>
           </div>
-          <div>
       </nav>
     `;
   }
 };
-TtNavbar.styles = styles;
+TtNavbar.styles = styles2;
 __decorateClass([
   n4({ type: Function })
 ], TtNavbar.prototype, "navigate", 2);
@@ -1369,6 +2321,12 @@ __decorateClass([
 __decorateClass([
   n4({ type: String, attribute: "active-route" })
 ], TtNavbar.prototype, "activeRoute", 2);
+__decorateClass([
+  n4({ type: Array, converter: jsonArrayConverter })
+], TtNavbar.prototype, "clients", 2);
+__decorateClass([
+  n4({ type: Object })
+], TtNavbar.prototype, "onClientChange", 2);
 __decorateClass([
   r6("details")
 ], TtNavbar.prototype, "allDetailsElements", 2);
@@ -1509,5 +2467,33 @@ lit-html/directives/unsafe-svg.js:
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    *)
+
+lit-html/directives/if-defined.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directive-helpers.js:
+  (**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/repeat.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/guard.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
 */
 //# sourceMappingURL=index.js.map