@telia-ace/widget-conversation-flamingo 0.0.1

package/conversation-525fb3e8.mjs

@@ -0,0 +1,1884 @@
+import { p as Dt, P as he, h as ue, i as w, n as x, t as k, E as ft, m as fe, a as It, b as at, e as lt, A as $, s as P, x as f, C as V, o as Nt, T as pe } from "./index-b459e13f.mjs";
+import { g as $e, s as ge } from "./send-1e9780e5.mjs";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const L = (e) => (t) => typeof t == "function" ? ((s, i) => (customElements.define(s, i), i))(e, t) : ((s, i) => {
+  const { kind: n, elements: o } = i;
+  return { kind: n, elements: o, finisher(r) {
+    customElements.define(s, r);
+  } };
+})(e, t);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ve = ({ finisher: e, descriptor: t }) => (s, i) => {
+  var n;
+  if (i === void 0) {
+    const o = (n = s.originalKey) !== null && n !== void 0 ? n : s.key, r = t != null ? { kind: "method", placement: "prototype", key: o, descriptor: t(s.key) } : { ...s, key: o };
+    return e != null && (r.finisher = function(a) {
+      e(a, o);
+    }), r;
+  }
+  {
+    const o = s.constructor;
+    t !== void 0 && Object.defineProperty(s, i, t(i)), e == null || e(o, i);
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let Ht = class extends Event {
+  constructor(t, s, i) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.callback = s, this.subscribe = i != null && i;
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let me = class {
+  constructor(t, s, i, n) {
+    var o;
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (r, a) => {
+      this.unsubscribe && (this.unsubscribe !== a && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = r, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(r, a)), this.unsubscribe = a;
+    }, this.host = t, s.context !== void 0) {
+      const r = s;
+      this.context = r.context, this.callback = r.callback, this.subscribe = (o = r.subscribe) !== null && o !== void 0 && o;
+    } else
+      this.context = s, this.callback = i, this.subscribe = n != null && n;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    this.dispatchRequest();
+  }
+  hostDisconnected() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
+  }
+  dispatchRequest() {
+    this.host.dispatchEvent(new Ht(this.context, this.t, this.subscribe));
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let be = class {
+  constructor(t) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [s, { disposer: i }] of this.subscriptions)
+        s(this.o, i);
+    }, t !== void 0 && (this.value = t);
+  }
+  get value() {
+    return this.o;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  setValue(t, s = !1) {
+    const i = s || !Object.is(t, this.o);
+    this.o = t, i && this.updateObservers();
+  }
+  addCallback(t, s, i) {
+    if (!i)
+      return void t(this.value);
+    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
+      this.subscriptions.delete(t);
+    }, consumerHost: s });
+    const { disposer: n } = this.subscriptions.get(t);
+    t(this.value, n);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let ye = class extends Event {
+  constructor(t) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t;
+  }
+}, j = class extends be {
+  constructor(t, s, i) {
+    super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (n) => {
+      const o = n.composedPath()[0];
+      n.context === this.context && o !== this.host && (n.stopPropagation(), this.addCallback(n.callback, o, n.subscribe));
+    }, this.onProviderRequest = (n) => {
+      const o = n.composedPath()[0];
+      if (n.context !== this.context || o === this.host)
+        return;
+      const r = /* @__PURE__ */ new Set();
+      for (const [a, { consumerHost: l }] of this.subscriptions)
+        r.has(a) || (r.add(a), l.dispatchEvent(new Ht(this.context, a, !0)));
+      n.stopPropagation();
+    }, this.host = t, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), this.host.addController(this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new ye(this.context));
+  }
+};
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function xe({ context: e, subscribe: t }) {
+  return ve({ finisher: (s, i) => {
+    s.addInitializer((n) => {
+      new me(n, { context: e, callback: (o) => {
+        n[i] = o;
+      }, subscribe: t });
+    });
+  } });
+}
+const _e = "children", we = "descriptor", ke = "container", Ce = "context", Se = "layout", Te = "properties";
+class Oe {
+  constructor(t) {
+    (this.host = t).addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+  }
+  setDescriptor(t) {
+    this._descriptor = t;
+  }
+  setContainer(t) {
+    this._container = t;
+  }
+  async dispatch(t, s) {
+    if (!this._container || !this._descriptor)
+      return;
+    const i = await Dt.getInstance(
+      this._container
+    ), n = new he(i).withId(
+      this._descriptor.id
+    );
+    await i.actions(
+      n,
+      this._descriptor.type || ue()
+    ).dispatch(t, s);
+  }
+}
+const Ae = (e) => {
+  const t = {};
+  return Object.keys(e).forEach((s) => {
+    s.indexOf("css-") > -1 && (t[s] = e[s]);
+  }), t;
+}, Pe = (e, t) => {
+  const s = Ae(t);
+  Object.entries(s).forEach(([i, n]) => {
+    e.style.setProperty(i.replace("css-", ""), n);
+  });
+};
+var Le = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, y = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? Ee(t, s) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (n = (i ? r(t, s, n) : r(n)) || n);
+  return i && n && Le(t, s, n), n;
+};
+const je = (e) => {
+  class t extends e {
+    constructor() {
+      super(...arguments), this.entry = "", this._descriptorProvider = new j(
+        this,
+        we,
+        void 0
+      ), this._childrenProvider = new j(this, _e, []), this._propertiesProvider = new j(this, Te, {}), this._contextProvider = new j(this, Ce, {}), this._layoutProvider = new j(this, Se, {}), this.actions = new Oe(this), this.context = {}, this.layout = {}, this.properties = {};
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.container && (this.actions.setContainer(this.container), Dt.getInstance(this.container).then(
+        async (i) => {
+          var o;
+          const n = i.nodes.get(this.entry);
+          if (n) {
+            this._propertyChangeListener = i.events.subscribe(
+              "components:properties-changed",
+              (h, d) => {
+                n.id === d.node.id && this._setProperties(d.node.attributes.properties);
+              }
+            ), this._contextChangeListener = i.events.subscribe(
+              "components:context-changed",
+              (h, d) => {
+                n.id === d.node.id && this._setContext(d.node.attributes.context);
+              }
+            ), this._layoutChangeListener = i.events.subscribe(
+              "components:layout-changed",
+              (h, d) => {
+                n.id === d.node.id && this._setLayout(d.node.attributes.layout);
+              }
+            );
+            const r = "default";
+            this._unmountNode = n.mount(this.container), this._setDescriptor(ft(n, r)), this._setProperties(n.attributes.properties), this._setContext(n.attributes.context), this._setLayout(this.layout);
+            const a = n.getChildren(r).map((h) => ft(h));
+            this._childrenProvider.setValue(a);
+            const c = (await this.container.getAsync("componentResolver")).getComponent(
+              ((o = this.descriptor) == null ? void 0 : o.type) || ""
+            );
+            c.then && c.then((h) => {
+              this.component = h.default;
+            });
+          }
+        }
+      ));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._propertyChangeListener && this._propertyChangeListener(), this._contextChangeListener && this._contextChangeListener(), this._layoutChangeListener && this._layoutChangeListener(), this._unmountNode && this._unmountNode();
+    }
+    updated() {
+      this.container && this.actions.setContainer(this.container), fe(this.context, this.renderRoot.host), this.renderRoot.host.style.setProperty(
+        "--width",
+        this.layout.size === "full" ? "var(--columns, 1)" : `min(${this.layout.size || "var(--columns)"}, var(--columns))`
+      ), Pe(this.renderRoot.host, this.properties);
+    }
+    _setProperties(i) {
+      this._propertiesProvider.setValue(i), this.properties = i;
+    }
+    _setContext(i) {
+      this._contextProvider.setValue(i), this.context = i;
+    }
+    _setLayout(i) {
+      this._layoutProvider.setValue(i), this.layout = i;
+    }
+    _setDescriptor(i) {
+      this.descriptor = i, this._descriptorProvider.setValue(i), this.actions.setDescriptor(i);
+    }
+  }
+  return t.styles = [
+    e.styles ?? [],
+    w`
+        :host {
+          font-family: var(--font-family);
+          grid-column: span var(--width);
+          max-width: 100%;
+          overflow: hidden;
+          box-sizing: border-box;
+          display: block;
+        }
+        * {
+          box-sizing: border-box;
+        }
+      `
+  ], y([
+    xe({ context: ke }),
+    x({ attribute: !1 })
+  ], t.prototype, "container", 2), y([
+    x()
+  ], t.prototype, "entry", 2), y([
+    k()
+  ], t.prototype, "descriptor", 2), y([
+    k()
+  ], t.prototype, "component", 2), y([
+    k()
+  ], t.prototype, "context", 2), y([
+    k()
+  ], t.prototype, "layout", 2), y([
+    k()
+  ], t.prototype, "properties", 2), t;
+};
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Re = (e) => e.strings === void 0;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const R = (e, t) => {
+  var s, i;
+  const n = e._$AN;
+  if (n === void 0)
+    return !1;
+  for (const o of n)
+    (i = (s = o)._$AO) === null || i === void 0 || i.call(s, t, !1), R(o, t);
+  return !0;
+}, M = (e) => {
+  let t, s;
+  do {
+    if ((t = e._$AM) === void 0)
+      break;
+    s = t._$AN, s.delete(e), e = t;
+  } while ((s == null ? void 0 : s.size) === 0);
+}, zt = (e) => {
+  for (let t; t = e._$AM; e = t) {
+    let s = t._$AN;
+    if (s === void 0)
+      t._$AN = s = /* @__PURE__ */ new Set();
+    else if (s.has(e))
+      break;
+    s.add(e), Ne(t);
+  }
+};
+function De(e) {
+  this._$AN !== void 0 ? (M(this), this._$AM = e, zt(this)) : this._$AM = e;
+}
+function Ie(e, t = !1, s = 0) {
+  const i = this._$AH, n = this._$AN;
+  if (n !== void 0 && n.size !== 0)
+    if (t)
+      if (Array.isArray(i))
+        for (let o = s; o < i.length; o++)
+          R(i[o], !1), M(i[o]);
+      else
+        i != null && (R(i, !1), M(i));
+    else
+      R(this, e);
+}
+const Ne = (e) => {
+  var t, s, i, n;
+  e.type == at.CHILD && ((t = (i = e)._$AP) !== null && t !== void 0 || (i._$AP = Ie), (s = (n = e)._$AQ) !== null && s !== void 0 || (n._$AQ = De));
+};
+class Mt extends It {
+  constructor() {
+    super(...arguments), this._$AN = void 0;
+  }
+  _$AT(t, s, i) {
+    super._$AT(t, s, i), zt(this), this.isConnected = t._$AU;
+  }
+  _$AO(t, s = !0) {
+    var i, n;
+    t !== this.isConnected && (this.isConnected = t, t ? (i = this.reconnected) === null || i === void 0 || i.call(this) : (n = this.disconnected) === null || n === void 0 || n.call(this)), s && (R(this, t), M(this));
+  }
+  setValue(t) {
+    if (Re(this._$Ct))
+      this._$Ct._$AI(t, this);
+    else {
+      const s = [...this._$Ct._$AH];
+      s[this._$Ci] = t, this._$Ct._$AI(s, this, 0);
+    }
+  }
+  disconnected() {
+  }
+  reconnected() {
+  }
+}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const He = () => new ze();
+let ze = class {
+};
+const tt = /* @__PURE__ */ new WeakMap(), Me = lt(class extends Mt {
+  render(e) {
+    return $;
+  }
+  update(e, [t]) {
+    var s;
+    const i = t !== this.G;
+    return i && this.G !== void 0 && this.ot(void 0), (i || this.rt !== this.lt) && (this.G = t, this.dt = (s = e.options) === null || s === void 0 ? void 0 : s.host, this.ot(this.lt = e.element)), $;
+  }
+  ot(e) {
+    var t;
+    if (typeof this.G == "function") {
+      const s = (t = this.dt) !== null && t !== void 0 ? t : globalThis;
+      let i = tt.get(s);
+      i === void 0 && (i = /* @__PURE__ */ new WeakMap(), tt.set(s, i)), i.get(this.G) !== void 0 && this.G.call(this.dt, void 0), i.set(this.G, e), e !== void 0 && this.G.call(this.dt, e);
+    } else
+      this.G.value = e;
+  }
+  get rt() {
+    var e, t, s;
+    return typeof this.G == "function" ? (t = tt.get((e = this.dt) !== null && e !== void 0 ? e : globalThis)) === null || t === void 0 ? void 0 : t.get(this.G) : (s = this.G) === null || s === void 0 ? void 0 : s.value;
+  }
+  disconnected() {
+    this.rt === this.lt && this.ot(void 0);
+  }
+  reconnected() {
+    this.ot(this.lt);
+  }
+}), Fe = /* @__PURE__ */ new WeakMap();
+let pt = 0;
+const et = /* @__PURE__ */ new Map(), $t = /* @__PURE__ */ new WeakSet(), gt = () => new Promise((e) => requestAnimationFrame(e)), vt = [{ opacity: 0 }], mt = [{ opacity: 0 }, { opacity: 1 }], bt = (e, t) => {
+  const s = e - t;
+  return s === 0 ? void 0 : s;
+}, yt = (e, t) => {
+  const s = e / t;
+  return s === 1 ? void 0 : s;
+}, st = { left: (e, t) => {
+  const s = bt(e, t);
+  return { value: s, transform: s == null || isNaN(s) ? void 0 : `translateX(${s}px)` };
+}, top: (e, t) => {
+  const s = bt(e, t);
+  return { value: s, transform: s == null || isNaN(s) ? void 0 : `translateY(${s}px)` };
+}, width: (e, t) => {
+  let s;
+  t === 0 && (t = 1, s = { width: "1px" });
+  const i = yt(e, t);
+  return { value: i, overrideFrom: s, transform: i == null || isNaN(i) ? void 0 : `scaleX(${i})` };
+}, height: (e, t) => {
+  let s;
+  t === 0 && (t = 1, s = { height: "1px" });
+  const i = yt(e, t);
+  return { value: i, overrideFrom: s, transform: i == null || isNaN(i) ? void 0 : `scaleY(${i})` };
+} }, Ue = { duration: 333, easing: "ease-in-out" }, Be = ["left", "top", "width", "height", "opacity", "color", "background"], xt = /* @__PURE__ */ new WeakMap();
+class We extends Mt {
+  constructor(t) {
+    if (super(t), this.t = null, this.i = null, this.o = !0, this.shouldLog = !1, t.type === at.CHILD)
+      throw Error("The `animate` directive must be used in attribute position.");
+    this.createFinished();
+  }
+  createFinished() {
+    var t;
+    (t = this.resolveFinished) === null || t === void 0 || t.call(this), this.finished = new Promise((s) => {
+      this.h = s;
+    });
+  }
+  async resolveFinished() {
+    var t;
+    (t = this.h) === null || t === void 0 || t.call(this), this.h = void 0;
+  }
+  render(t) {
+    return $;
+  }
+  getController() {
+    return Fe.get(this.l);
+  }
+  isDisabled() {
+    var t;
+    return this.options.disabled || ((t = this.getController()) === null || t === void 0 ? void 0 : t.disabled);
+  }
+  update(t, [s]) {
+    var i;
+    const n = this.l === void 0;
+    return n && (this.l = (i = t.options) === null || i === void 0 ? void 0 : i.host, this.l.addController(this), this.element = t.element, xt.set(this.element, this)), this.optionsOrCallback = s, (n || typeof s != "function") && this.u(s), this.render(s);
+  }
+  u(t) {
+    var s, i;
+    t = t ?? {};
+    const n = this.getController();
+    n !== void 0 && ((t = { ...n.defaultOptions, ...t }).keyframeOptions = { ...n.defaultOptions.keyframeOptions, ...t.keyframeOptions }), (s = (i = t).properties) !== null && s !== void 0 || (i.properties = Be), this.options = t;
+  }
+  v() {
+    const t = {}, s = this.element.getBoundingClientRect(), i = getComputedStyle(this.element);
+    return this.options.properties.forEach((n) => {
+      var o;
+      const r = (o = s[n]) !== null && o !== void 0 ? o : st[n] ? void 0 : i[n], a = Number(r);
+      t[n] = isNaN(a) ? r + "" : a;
+    }), t;
+  }
+  p() {
+    let t, s = !0;
+    return this.options.guard && (t = this.options.guard(), s = ((i, n) => {
+      if (Array.isArray(i)) {
+        if (Array.isArray(n) && n.length === i.length && i.every((o, r) => o === n[r]))
+          return !1;
+      } else if (n === i)
+        return !1;
+      return !0;
+    })(t, this.m)), this.o = this.l.hasUpdated && !this.isDisabled() && !this.isAnimating() && s && this.element.isConnected, this.o && (this.m = Array.isArray(t) ? Array.from(t) : t), this.o;
+  }
+  hostUpdate() {
+    var t;
+    typeof this.optionsOrCallback == "function" && this.u(this.optionsOrCallback()), this.p() && (this.g = this.v(), this.t = (t = this.t) !== null && t !== void 0 ? t : this.element.parentNode, this.i = this.element.nextSibling);
+  }
+  async hostUpdated() {
+    if (!this.o || !this.element.isConnected || this.options.skipInitial && !this.isHostRendered)
+      return;
+    let t;
+    this.prepare(), await gt;
+    const s = this._(), i = this.A(this.options.keyframeOptions, s), n = this.v();
+    if (this.g !== void 0) {
+      const { from: o, to: r } = this.O(this.g, n, s);
+      this.log("measured", [this.g, n, o, r]), t = this.calculateKeyframes(o, r);
+    } else {
+      const o = et.get(this.options.inId);
+      if (o) {
+        et.delete(this.options.inId);
+        const { from: r, to: a } = this.O(o, n, s);
+        t = this.calculateKeyframes(r, a), t = this.options.in ? [{ ...this.options.in[0], ...t[0] }, ...this.options.in.slice(1), t[1]] : t, pt++, t.forEach((l) => l.zIndex = pt);
+      } else
+        this.options.in && (t = [...this.options.in, {}]);
+    }
+    this.animate(t, i);
+  }
+  resetStyles() {
+    var t;
+    this.j !== void 0 && (this.element.setAttribute("style", (t = this.j) !== null && t !== void 0 ? t : ""), this.j = void 0);
+  }
+  commitStyles() {
+    var t, s;
+    this.j = this.element.getAttribute("style"), (t = this.webAnimation) === null || t === void 0 || t.commitStyles(), (s = this.webAnimation) === null || s === void 0 || s.cancel();
+  }
+  reconnected() {
+  }
+  async disconnected() {
+    var t;
+    if (!this.o || (this.options.id !== void 0 && et.set(this.options.id, this.g), this.options.out === void 0))
+      return;
+    if (this.prepare(), await gt(), (t = this.t) === null || t === void 0 ? void 0 : t.isConnected) {
+      const i = this.i && this.i.parentNode === this.t ? this.i : null;
+      if (this.t.insertBefore(this.element, i), this.options.stabilizeOut) {
+        const n = this.v();
+        this.log("stabilizing out");
+        const o = this.g.left - n.left, r = this.g.top - n.top;
+        getComputedStyle(this.element).position !== "static" || o === 0 && r === 0 || (this.element.style.position = "relative"), o !== 0 && (this.element.style.left = o + "px"), r !== 0 && (this.element.style.top = r + "px");
+      }
+    }
+    const s = this.A(this.options.keyframeOptions);
+    await this.animate(this.options.out, s), this.element.remove();
+  }
+  prepare() {
+    this.createFinished();
+  }
+  start() {
+    var t, s;
+    (s = (t = this.options).onStart) === null || s === void 0 || s.call(t, this);
+  }
+  didFinish(t) {
+    var s, i;
+    t && ((i = (s = this.options).onComplete) === null || i === void 0 || i.call(s, this)), this.g = void 0, this.animatingProperties = void 0, this.frames = void 0, this.resolveFinished();
+  }
+  _() {
+    const t = [];
+    for (let s = this.element.parentNode; s; s = s == null ? void 0 : s.parentNode) {
+      const i = xt.get(s);
+      i && !i.isDisabled() && i && t.push(i);
+    }
+    return t;
+  }
+  get isHostRendered() {
+    const t = $t.has(this.l);
+    return t || this.l.updateComplete.then(() => {
+      $t.add(this.l);
+    }), t;
+  }
+  A(t, s = this._()) {
+    const i = { ...Ue };
+    return s.forEach((n) => Object.assign(i, n.options.keyframeOptions)), Object.assign(i, t), i;
+  }
+  O(t, s, i) {
+    t = { ...t }, s = { ...s };
+    const n = i.map((a) => a.animatingProperties).filter((a) => a !== void 0);
+    let o = 1, r = 1;
+    return n !== void 0 && (n.forEach((a) => {
+      a.width && (o /= a.width), a.height && (r /= a.height);
+    }), t.left !== void 0 && s.left !== void 0 && (t.left = o * t.left, s.left = o * s.left), t.top !== void 0 && s.top !== void 0 && (t.top = r * t.top, s.top = r * s.top)), { from: t, to: s };
+  }
+  calculateKeyframes(t, s, i = !1) {
+    var n;
+    const o = {}, r = {};
+    let a = !1;
+    const l = {};
+    for (const c in s) {
+      const h = t[c], d = s[c];
+      if (c in st) {
+        const u = st[c];
+        if (h === void 0 || d === void 0)
+          continue;
+        const p = u(h, d);
+        p.transform !== void 0 && (l[c] = p.value, a = !0, o.transform = `${(n = o.transform) !== null && n !== void 0 ? n : ""} ${p.transform}`, p.overrideFrom !== void 0 && Object.assign(o, p.overrideFrom));
+      } else
+        h !== d && h !== void 0 && d !== void 0 && (a = !0, o[c] = h, r[c] = d);
+    }
+    return o.transformOrigin = r.transformOrigin = i ? "center center" : "top left", this.animatingProperties = l, a ? [o, r] : void 0;
+  }
+  async animate(t, s = this.options.keyframeOptions) {
+    this.start(), this.frames = t;
+    let i = !1;
+    if (!this.isAnimating() && !this.isDisabled() && (this.options.onFrames && (this.frames = t = this.options.onFrames(this), this.log("modified frames", t)), t !== void 0)) {
+      this.log("animate", [t, s]), i = !0, this.webAnimation = this.element.animate(t, s);
+      const n = this.getController();
+      n == null || n.add(this);
+      try {
+        await this.webAnimation.finished;
+      } catch {
+      }
+      n == null || n.remove(this);
+    }
+    return this.didFinish(i), i;
+  }
+  isAnimating() {
+    var t, s;
+    return ((t = this.webAnimation) === null || t === void 0 ? void 0 : t.playState) === "running" || ((s = this.webAnimation) === null || s === void 0 ? void 0 : s.pending);
+  }
+  log(t, s) {
+    this.shouldLog && !this.isDisabled() && console.log(t, this.options.id, s);
+  }
+}
+const _t = lt(We), C = {
+  allRenderFn: !1,
+  cmpDidLoad: !0,
+  cmpDidUnload: !1,
+  cmpDidUpdate: !0,
+  cmpDidRender: !0,
+  cmpWillLoad: !0,
+  cmpWillUpdate: !0,
+  cmpWillRender: !0,
+  connectedCallback: !0,
+  disconnectedCallback: !0,
+  element: !0,
+  event: !0,
+  hasRenderFn: !0,
+  lifecycle: !0,
+  hostListener: !0,
+  hostListenerTargetWindow: !0,
+  hostListenerTargetDocument: !0,
+  hostListenerTargetBody: !0,
+  hostListenerTargetParent: !1,
+  hostListenerTarget: !0,
+  member: !0,
+  method: !0,
+  mode: !0,
+  observeAttribute: !0,
+  prop: !0,
+  propMutable: !0,
+  reflect: !0,
+  scoped: !0,
+  shadowDom: !0,
+  slot: !0,
+  cssAnnotations: !0,
+  state: !0,
+  style: !0,
+  svg: !0,
+  updatable: !0,
+  vdomAttribute: !0,
+  vdomXlink: !0,
+  vdomClass: !0,
+  vdomFunctional: !0,
+  vdomKey: !0,
+  vdomListener: !0,
+  vdomRef: !0,
+  vdomPropOrAttr: !0,
+  vdomRender: !0,
+  vdomStyle: !0,
+  vdomText: !0,
+  watchCallback: !0,
+  taskQueue: !0,
+  hotModuleReplacement: !1,
+  isDebug: !1,
+  isDev: !1,
+  isTesting: !1,
+  hydrateServerSide: !1,
+  hydrateClientSide: !1,
+  lifecycleDOMEvents: !1,
+  lazyLoad: !1,
+  profile: !1,
+  slotRelocation: !0,
+  appendChildSlotFix: !1,
+  cloneNodeFix: !1,
+  hydratedAttribute: !1,
+  hydratedClass: !0,
+  safari10: !1,
+  scriptDataOpts: !1,
+  scopedSlotTextContentFix: !1,
+  shadowDomShim: !1,
+  slotChildNodesFix: !1,
+  invisiblePrehydration: !0,
+  propBoolean: !0,
+  propNumber: !0,
+  propString: !0,
+  cssVarShim: !1,
+  constructableCSS: !0,
+  cmpShouldUpdate: !0,
+  devTools: !1,
+  dynamicImportShim: !1,
+  shadowDelegatesFocus: !0,
+  initializeNextTick: !1,
+  asyncLoading: !1,
+  asyncQueue: !1,
+  transformTagName: !1,
+  attachStyles: !0
+};
+let S, Ft, Y, Ut = !1, F = !1, ct = !1, v = !1, wt = null, it = !1;
+const J = typeof window < "u" ? window : {}, b = J.document || { head: {} }, Bt = J.HTMLElement || class {
+}, g = {
+  $flags$: 0,
+  $resourcesUrl$: "",
+  jmp: (e) => e(),
+  raf: (e) => requestAnimationFrame(e),
+  ael: (e, t, s, i) => e.addEventListener(t, s, i),
+  rel: (e, t, s, i) => e.removeEventListener(t, s, i),
+  ce: (e, t) => new CustomEvent(e, t)
+}, qe = /* @__PURE__ */ (() => {
+  let e = !1;
+  try {
+    b.addEventListener("e", null, Object.defineProperty({}, "passive", {
+      get() {
+        e = !0;
+      }
+    }));
+  } catch {
+  }
+  return e;
+})(), Ge = (e) => Promise.resolve(e), Ke = /* @__PURE__ */ (() => {
+  try {
+    return new CSSStyleSheet(), typeof new CSSStyleSheet().replace == "function";
+  } catch {
+  }
+  return !1;
+})(), Wt = (e, t, s, i) => {
+  s && s.map(([n, o, r]) => {
+    const a = Xe(e, n), l = Qe(t, r), c = Ye(n);
+    g.ael(a, o, l, c), (t.$rmListeners$ = t.$rmListeners$ || []).push(() => g.rel(a, o, l, c));
+  });
+}, Qe = (e, t) => (s) => {
+  try {
+    C.lazyLoad || e.$hostElement$[t](s);
+  } catch (i) {
+    N(i);
+  }
+}, Xe = (e, t) => t & 4 ? b : t & 8 ? J : t & 16 ? b.body : e, Ye = (e) => qe ? {
+  passive: (e & 1) !== 0,
+  capture: (e & 2) !== 0
+} : (e & 2) !== 0, kt = "http://www.w3.org/1999/xlink", _ = (e, t = "") => () => {
+}, Ct = /* @__PURE__ */ new WeakMap(), Je = (e, t, s) => {
+  let i = W.get(e);
+  Ke && s ? (i = i || new CSSStyleSheet(), i.replace(t)) : i = t, W.set(e, i);
+}, Ze = (e, t, s, i) => {
+  let n = qt(t, s), o = W.get(n);
+  if (e = e.nodeType === 11 ? e : b, o)
+    if (typeof o == "string") {
+      e = e.head || e;
+      let r = Ct.get(e), a;
+      r || Ct.set(e, r = /* @__PURE__ */ new Set()), r.has(n) || (a = b.createElement("style"), a.innerHTML = o, e.insertBefore(a, e.querySelector("link")), r && r.add(n));
+    } else
+      e.adoptedStyleSheets.includes(o) || (e.adoptedStyleSheets = [...e.adoptedStyleSheets, o]);
+  return n;
+}, Ve = (e) => {
+  const t = e.$cmpMeta$, s = e.$hostElement$, i = t.$flags$, n = _("attachStyles", t.$tagName$), o = Ze(s.shadowRoot ? s.shadowRoot : s.getRootNode(), t, e.$modeName$);
+  i & 10 && (s["s-sc"] = o, s.classList.add(o + "-h"), i & 2 && s.classList.add(o + "-s")), n();
+}, qt = (e, t) => "sc-" + (t && e.$flags$ & 32 ? e.$tagName$ + "-" + t : e.$tagName$), ts = (e) => Os.map((t) => t(e)).find((t) => !!t), St = {}, es = "http://www.w3.org/2000/svg", ss = "http://www.w3.org/1999/xhtml", is = (e) => e != null, dt = (e) => (e = typeof e, e === "object" || e === "function"), O = (e, t, ...s) => {
+  let i = null, n = null, o = null, r = !1, a = !1, l = [];
+  const c = (d) => {
+    for (let u = 0; u < d.length; u++)
+      i = d[u], Array.isArray(i) ? c(i) : i != null && typeof i != "boolean" && ((r = typeof e != "function" && !dt(i)) && (i = String(i)), r && a ? l[l.length - 1].$text$ += i : l.push(r ? U(null, i) : i), a = r);
+  };
+  if (c(s), t) {
+    t.key && (n = t.key), t.name && (o = t.name);
+    {
+      const d = t.className || t.class;
+      d && (t.class = typeof d != "object" ? d : Object.keys(d).filter((u) => d[u]).join(" "));
+    }
+  }
+  if (typeof e == "function")
+    return e(t === null ? {} : t, l, os);
+  const h = U(e, null);
+  return h.$attrs$ = t, l.length > 0 && (h.$children$ = l), h.$key$ = n, h.$name$ = o, h;
+}, U = (e, t) => {
+  const s = {
+    $flags$: 0,
+    $tag$: e,
+    $text$: t,
+    $elm$: null,
+    $children$: null
+  };
+  return s.$attrs$ = null, s.$key$ = null, s.$name$ = null, s;
+}, ht = {}, ns = (e) => e && e.$tag$ === ht, os = {
+  forEach: (e, t) => e.map(Tt).forEach(t),
+  map: (e, t) => e.map(Tt).map(t).map(rs)
+}, Tt = (e) => ({
+  vattrs: e.$attrs$,
+  vchildren: e.$children$,
+  vkey: e.$key$,
+  vname: e.$name$,
+  vtag: e.$tag$,
+  vtext: e.$text$
+}), rs = (e) => {
+  if (typeof e.vtag == "function") {
+    const s = Object.assign({}, e.vattrs);
+    return e.vkey && (s.key = e.vkey), e.vname && (s.name = e.vname), O(e.vtag, s, ...e.vchildren || []);
+  }
+  const t = U(e.vtag, e.vtext);
+  return t.$attrs$ = e.vattrs, t.$children$ = e.vchildren, t.$key$ = e.vkey, t.$name$ = e.vname, t;
+}, Ot = (e, t, s, i, n, o) => {
+  if (s !== i) {
+    let r = Et(e, t), a = t.toLowerCase();
+    if (t === "class") {
+      const l = e.classList, c = At(s), h = At(i);
+      l.remove(...c.filter((d) => d && !h.includes(d))), l.add(...h.filter((d) => d && !c.includes(d)));
+    } else if (t === "style") {
+      for (const l in s)
+        (!i || i[l] == null) && (l.includes("-") ? e.style.removeProperty(l) : e.style[l] = "");
+      for (const l in i)
+        (!s || i[l] !== s[l]) && (l.includes("-") ? e.style.setProperty(l, i[l]) : e.style[l] = i[l]);
+    } else if (t !== "key")
+      if (t === "ref")
+        i && i(e);
+      else if (!e.__lookupSetter__(t) && t[0] === "o" && t[1] === "n")
+        t[2] === "-" ? t = t.slice(3) : Et(J, a) ? t = a.slice(2) : t = a[2] + t.slice(3), s && g.rel(e, t, s, !1), i && g.ael(e, t, i, !1);
+      else {
+        const l = dt(i);
+        if ((r || l && i !== null) && !n)
+          try {
+            if (e.tagName.includes("-"))
+              e[t] = i;
+            else {
+              let h = i ?? "";
+              t === "list" ? r = !1 : (s == null || e[t] != h) && (e[t] = h);
+            }
+          } catch {
+          }
+        let c = !1;
+        a !== (a = a.replace(/^xlink\:?/, "")) && (t = a, c = !0), i == null || i === !1 ? (i !== !1 || e.getAttribute(t) === "") && (c ? e.removeAttributeNS(kt, t) : e.removeAttribute(t)) : (!r || o & 4 || n) && !l && (i = i === !0 ? "" : i, c ? e.setAttributeNS(kt, t, i) : e.setAttribute(t, i));
+      }
+  }
+}, as = /\s/, At = (e) => e ? e.split(as) : [], Gt = (e, t, s, i) => {
+  const n = t.$elm$.nodeType === 11 && t.$elm$.host ? t.$elm$.host : t.$elm$, o = e && e.$attrs$ || St, r = t.$attrs$ || St;
+  for (i in o)
+    i in r || Ot(n, i, o[i], void 0, s, t.$flags$);
+  for (i in r)
+    Ot(n, i, o[i], r[i], s, t.$flags$);
+}, B = (e, t, s, i) => {
+  let n = t.$children$[s], o = 0, r, a, l;
+  if (Ut || (ct = !0, n.$tag$ === "slot" && (S && i.classList.add(S + "-s"), n.$flags$ |= n.$children$ ? (
+    // slot element has fallback content
+    2
+  ) : (
+    // slot element does not have fallback content
+    1
+  ))), n.$text$ !== null)
+    r = n.$elm$ = b.createTextNode(n.$text$);
+  else if (n.$flags$ & 1)
+    r = n.$elm$ = b.createTextNode("");
+  else {
+    if (v || (v = n.$tag$ === "svg"), r = n.$elm$ = b.createElementNS(v ? es : ss, n.$flags$ & 2 ? "slot-fb" : n.$tag$), v && n.$tag$ === "foreignObject" && (v = !1), Gt(null, n, v), is(S) && r["s-si"] !== S && r.classList.add(r["s-si"] = S), n.$children$)
+      for (o = 0; o < n.$children$.length; ++o)
+        a = B(e, n, o, r), a && r.appendChild(a);
+    n.$tag$ === "svg" ? v = !1 : r.tagName === "foreignObject" && (v = !0);
+  }
+  return r["s-hn"] = Y, n.$flags$ & 3 && (r["s-sr"] = !0, r["s-cr"] = Ft, r["s-sn"] = n.$name$ || "", l = e && e.$children$ && e.$children$[s], l && l.$tag$ === n.$tag$ && e.$elm$ && D(e.$elm$, !1)), r;
+}, D = (e, t) => {
+  g.$flags$ |= 1;
+  const s = e.childNodes;
+  for (let i = s.length - 1; i >= 0; i--) {
+    const n = s[i];
+    n["s-hn"] !== Y && n["s-ol"] && (Xt(n).insertBefore(n, ut(n)), n["s-ol"].remove(), n["s-ol"] = void 0, ct = !0), t && D(n, t);
+  }
+  g.$flags$ &= -2;
+}, Kt = (e, t, s, i, n, o) => {
+  let r = e["s-cr"] && e["s-cr"].parentNode || e, a;
+  for (r.shadowRoot && r.tagName === Y && (r = r.shadowRoot); n <= o; ++n)
+    i[n] && (a = B(null, s, n, e), a && (i[n].$elm$ = a, r.insertBefore(a, ut(t))));
+}, Qt = (e, t, s, i, n) => {
+  for (; t <= s; ++t)
+    (i = e[t]) && (n = i.$elm$, Zt(i), F = !0, n["s-ol"] ? n["s-ol"].remove() : D(n, !0), n.remove());
+}, ls = (e, t, s, i) => {
+  let n = 0, o = 0, r = 0, a = 0, l = t.length - 1, c = t[0], h = t[l], d = i.length - 1, u = i[0], p = i[d], E, H;
+  for (; n <= l && o <= d; )
+    if (c == null)
+      c = t[++n];
+    else if (h == null)
+      h = t[--l];
+    else if (u == null)
+      u = i[++o];
+    else if (p == null)
+      p = i[--d];
+    else if (z(c, u))
+      T(c, u), c = t[++n], u = i[++o];
+    else if (z(h, p))
+      T(h, p), h = t[--l], p = i[--d];
+    else if (z(c, p))
+      (c.$tag$ === "slot" || p.$tag$ === "slot") && D(c.$elm$.parentNode, !1), T(c, p), e.insertBefore(c.$elm$, h.$elm$.nextSibling), c = t[++n], p = i[--d];
+    else if (z(h, u))
+      (c.$tag$ === "slot" || p.$tag$ === "slot") && D(h.$elm$.parentNode, !1), T(h, u), e.insertBefore(h.$elm$, c.$elm$), h = t[--l], u = i[++o];
+    else {
+      for (r = -1, a = n; a <= l; ++a)
+        if (t[a] && t[a].$key$ !== null && t[a].$key$ === u.$key$) {
+          r = a;
+          break;
+        }
+      r >= 0 ? (H = t[r], H.$tag$ !== u.$tag$ ? E = B(t && t[o], s, r, e) : (T(H, u), t[r] = void 0, E = H.$elm$), u = i[++o]) : (E = B(t && t[o], s, o, e), u = i[++o]), E && Xt(c.$elm$).insertBefore(E, ut(c.$elm$));
+    }
+  n > l ? Kt(e, i[d + 1] == null ? null : i[d + 1].$elm$, s, i, o, d) : o > d && Qt(t, n, l);
+}, z = (e, t) => e.$tag$ === t.$tag$ ? e.$tag$ === "slot" ? e.$name$ === t.$name$ : e.$key$ === t.$key$ : !1, ut = (e) => e && e["s-ol"] || e, Xt = (e) => (e["s-ol"] ? e["s-ol"] : e).parentNode, T = (e, t) => {
+  const s = t.$elm$ = e.$elm$, i = e.$children$, n = t.$children$, o = t.$tag$, r = t.$text$;
+  let a;
+  r === null ? (v = o === "svg" ? !0 : o === "foreignObject" ? !1 : v, o === "slot" || Gt(e, t, v), i !== null && n !== null ? ls(s, i, t, n) : n !== null ? (e.$text$ !== null && (s.textContent = ""), Kt(s, null, t, n, 0, n.length - 1)) : i !== null && Qt(i, 0, i.length - 1), v && o === "svg" && (v = !1)) : (a = s["s-cr"]) ? a.parentNode.textContent = r : e.$text$ !== r && (s.data = r);
+}, Yt = (e) => {
+  let t = e.childNodes, s, i, n, o, r, a;
+  for (i = 0, n = t.length; i < n; i++)
+    if (s = t[i], s.nodeType === 1) {
+      if (s["s-sr"]) {
+        for (r = s["s-sn"], s.hidden = !1, o = 0; o < n; o++)
+          if (a = t[o].nodeType, t[o]["s-hn"] !== s["s-hn"] || r !== "") {
+            if (a === 1 && r === t[o].getAttribute("slot")) {
+              s.hidden = !0;
+              break;
+            }
+          } else if (a === 1 || a === 3 && t[o].textContent.trim() !== "") {
+            s.hidden = !0;
+            break;
+          }
+      }
+      Yt(s);
+    }
+}, m = [], Jt = (e) => {
+  let t, s, i, n, o, r, a = 0, l = e.childNodes, c = l.length;
+  for (; a < c; a++) {
+    if (t = l[a], t["s-sr"] && (s = t["s-cr"]) && s.parentNode)
+      for (i = s.parentNode.childNodes, n = t["s-sn"], r = i.length - 1; r >= 0; r--)
+        s = i[r], !s["s-cn"] && !s["s-nr"] && s["s-hn"] !== t["s-hn"] && (Pt(s, n) ? (o = m.find((h) => h.$nodeToRelocate$ === s), F = !0, s["s-sn"] = s["s-sn"] || n, o ? o.$slotRefNode$ = t : m.push({
+          $slotRefNode$: t,
+          $nodeToRelocate$: s
+        }), s["s-sr"] && m.map((h) => {
+          Pt(h.$nodeToRelocate$, s["s-sn"]) && (o = m.find((d) => d.$nodeToRelocate$ === s), o && !h.$slotRefNode$ && (h.$slotRefNode$ = o.$slotRefNode$));
+        })) : m.some((h) => h.$nodeToRelocate$ === s) || m.push({
+          $nodeToRelocate$: s
+        }));
+    t.nodeType === 1 && Jt(t);
+  }
+}, Pt = (e, t) => e.nodeType === 1 ? e.getAttribute("slot") === null && t === "" || e.getAttribute("slot") === t : e["s-sn"] === t ? !0 : t === "", Zt = (e) => {
+  e.$attrs$ && e.$attrs$.ref && e.$attrs$.ref(null), e.$children$ && e.$children$.map(Zt);
+}, cs = (e, t) => {
+  const s = e.$hostElement$, i = e.$cmpMeta$, n = e.$vnode$ || U(null, null), o = ns(t) ? t : O(null, null, t);
+  Y = s.tagName, i.$attrsToReflect$ && (o.$attrs$ = o.$attrs$ || {}, i.$attrsToReflect$.map(([r, a]) => o.$attrs$[a] = s[r])), o.$tag$ = null, o.$flags$ |= 4, e.$vnode$ = o, o.$elm$ = n.$elm$ = s.shadowRoot || s, S = s["s-sc"], Ft = s["s-cr"], Ut = (i.$flags$ & 1) !== 0, F = !1, T(n, o);
+  {
+    if (g.$flags$ |= 1, ct) {
+      Jt(o.$elm$);
+      let r, a, l, c, h, d, u = 0;
+      for (; u < m.length; u++)
+        r = m[u], a = r.$nodeToRelocate$, a["s-ol"] || (l = b.createTextNode(""), l["s-nr"] = a, a.parentNode.insertBefore(a["s-ol"] = l, a));
+      for (u = 0; u < m.length; u++)
+        if (r = m[u], a = r.$nodeToRelocate$, r.$slotRefNode$) {
+          for (c = r.$slotRefNode$.parentNode, h = r.$slotRefNode$.nextSibling, l = a["s-ol"]; l = l.previousSibling; )
+            if (d = l["s-nr"], d && d["s-sn"] === a["s-sn"] && c === d.parentNode && (d = d.nextSibling, !d || !d["s-nr"])) {
+              h = d;
+              break;
+            }
+          (!h && c !== a.parentNode || a.nextSibling !== h) && a !== h && (!a["s-hn"] && a["s-ol"] && (a["s-hn"] = a["s-ol"].parentNode.nodeName), c.insertBefore(a, h));
+        } else
+          a.nodeType === 1 && (a.hidden = !0);
+    }
+    F && Yt(o.$elm$), g.$flags$ &= -2, m.length = 0;
+  }
+}, ds = (e) => e, hs = (e, t, s) => {
+  const i = ds(e);
+  return {
+    emit: (n) => us(i, t, {
+      bubbles: !!(s & 4),
+      composed: !!(s & 2),
+      cancelable: !!(s & 1),
+      detail: n
+    })
+  };
+}, us = (e, t, s) => {
+  const i = g.ce(t, s);
+  return e.dispatchEvent(i), i;
+}, fs = (e, t) => {
+}, Vt = (e, t) => (e.$flags$ |= 16, fs(e, e.$ancestorComponent$), Ls(() => ps(e, t))), ps = (e, t) => {
+  const s = e.$hostElement$, i = _("scheduleUpdate", e.$cmpMeta$.$tagName$), n = s;
+  let o;
+  return t ? o = A(n, "componentWillLoad") : o = A(n, "componentWillUpdate"), o = Lt(o, () => A(n, "componentWillRender")), i(), Lt(o, () => $s(e, n, t));
+}, $s = async (e, t, s) => {
+  const i = e.$hostElement$, n = _("update", e.$cmpMeta$.$tagName$);
+  i["s-rc"], s && Ve(e);
+  const o = _("render", e.$cmpMeta$.$tagName$);
+  gs(e, t, i), o(), n(), vs(e);
+}, gs = (e, t, s) => {
+  try {
+    wt = t, t = t.render && t.render(), e.$flags$ &= -17, e.$flags$ |= 2, (C.hasRenderFn || C.reflect) && (C.vdomRender || C.reflect) && (C.hydrateServerSide || cs(e, t));
+  } catch (a) {
+    N(a, e.$hostElement$);
+  }
+  return wt = null, null;
+}, vs = (e) => {
+  const t = e.$cmpMeta$.$tagName$, s = e.$hostElement$, i = _("postUpdate", t), n = s;
+  e.$ancestorComponent$, A(n, "componentDidRender"), e.$flags$ & 64 ? (A(n, "componentDidUpdate"), i()) : (e.$flags$ |= 64, A(n, "componentDidLoad"), i());
+}, A = (e, t, s) => {
+  if (e && e[t])
+    try {
+      return e[t](s);
+    } catch (i) {
+      N(i);
+    }
+}, Lt = (e, t) => e && e.then ? e.then(t) : t(), ms = (e, t) => e != null && !dt(e) ? t & 4 ? e === "false" ? !1 : e === "" || !!e : t & 2 ? parseFloat(e) : t & 1 ? String(e) : e : e, bs = (e, t) => Z(e).$instanceValues$.get(t), ys = (e, t, s, i) => {
+  const n = Z(e), o = e, r = n.$instanceValues$.get(t), a = n.$flags$, l = o;
+  s = ms(s, i.$members$[t][0]);
+  const c = Number.isNaN(r) && Number.isNaN(s);
+  if (s !== r && !c) {
+    n.$instanceValues$.set(t, s);
+    {
+      if (i.$watchers$ && a & 128) {
+        const d = i.$watchers$[t];
+        d && d.map((u) => {
+          try {
+            l[u](s, r, t);
+          } catch (p) {
+            N(p, o);
+          }
+        });
+      }
+      if ((a & 18) === 2) {
+        if (l.componentShouldUpdate && l.componentShouldUpdate(s, r, t) === !1)
+          return;
+        Vt(n, !1);
+      }
+    }
+  }
+}, xs = (e, t, s) => {
+  if (t.$members$) {
+    e.watchers && (t.$watchers$ = e.watchers);
+    const i = Object.entries(t.$members$), n = e.prototype;
+    i.map(([o, [r]]) => {
+      (r & 31 || r & 32) && Object.defineProperty(n, o, {
+        get() {
+          return bs(this, o);
+        },
+        set(a) {
+          ys(this, o, a, t);
+        },
+        configurable: !0,
+        enumerable: !0
+      });
+    });
+    {
+      const o = /* @__PURE__ */ new Map();
+      n.attributeChangedCallback = function(r, a, l) {
+        g.jmp(() => {
+          const c = o.get(r);
+          if (this.hasOwnProperty(c))
+            l = this[c], delete this[c];
+          else if (n.hasOwnProperty(c) && typeof this[c] == "number" && this[c] == l)
+            return;
+          this[c] = l === null && typeof this[c] == "boolean" ? !1 : l;
+        });
+      }, e.observedAttributes = i.filter(
+        ([r, a]) => a[0] & 15
+        /* HasAttribute */
+      ).map(([r, a]) => {
+        const l = a[1] || r;
+        return o.set(l, r), a[0] & 512 && t.$attrsToReflect$.push([r, l]), l;
+      });
+    }
+  }
+  return e;
+}, _s = async (e, t, s, i, n) => {
+  if (!(t.$flags$ & 32) && (n = e.constructor, t.$flags$ |= 32, customElements.whenDefined(s.$tagName$).then(() => t.$flags$ |= 128), n.style)) {
+    let r = n.style;
+    typeof r != "string" && (r = r[t.$modeName$ = ts(e)]);
+    const a = qt(s, t.$modeName$);
+    if (!W.has(a)) {
+      const l = _("registerStyles", s.$tagName$);
+      Je(a, r, !!(s.$flags$ & 1)), l();
+    }
+  }
+  t.$ancestorComponent$, (() => Vt(t, !0))();
+}, ws = (e) => {
+}, ks = (e) => {
+  if (!(g.$flags$ & 1)) {
+    const t = Z(e), s = t.$cmpMeta$, i = _("connectedCallback", s.$tagName$);
+    t.$flags$ & 1 ? (Wt(e, t, s.$listeners$), ws(t.$lazyInstance$)) : (t.$flags$ |= 1, s.$flags$ & 12 && Cs(e), s.$members$ && Object.entries(s.$members$).map(([n, [o]]) => {
+      if (o & 31 && e.hasOwnProperty(n)) {
+        const r = e[n];
+        delete e[n], e[n] = r;
+      }
+    }), _s(e, t, s)), i();
+  }
+}, Cs = (e) => {
+  const t = e["s-cr"] = b.createComment("");
+  t["s-cn"] = !0, e.insertBefore(t, e.firstChild);
+}, Ss = (e) => {
+  if (!(g.$flags$ & 1)) {
+    const t = Z(e);
+    t.$rmListeners$ && (t.$rmListeners$.map((s) => s()), t.$rmListeners$ = void 0);
+  }
+}, te = (e, t) => {
+  const s = {
+    $flags$: t[0],
+    $tagName$: t[1]
+  };
+  s.$members$ = t[2], s.$listeners$ = t[3], s.$watchers$ = e.$watchers$, s.$attrsToReflect$ = [];
+  const i = e.prototype.connectedCallback, n = e.prototype.disconnectedCallback;
+  return Object.assign(e.prototype, {
+    __registerHost() {
+      Ts(this, s);
+    },
+    connectedCallback() {
+      ks(this), i && i.call(this);
+    },
+    disconnectedCallback() {
+      Ss(this), n && n.call(this);
+    },
+    __attachShadow() {
+      this.attachShadow({
+        mode: "open",
+        delegatesFocus: !!(s.$flags$ & 16)
+      });
+    }
+  }), e.is = s.$tagName$, xs(e, s);
+}, ee = /* @__PURE__ */ new WeakMap(), Z = (e) => ee.get(e), Ts = (e, t) => {
+  const s = {
+    $flags$: 0,
+    $hostElement$: e,
+    $cmpMeta$: t,
+    $instanceValues$: /* @__PURE__ */ new Map()
+  };
+  return Wt(e, s, t.$listeners$), ee.set(e, s);
+}, Et = (e, t) => t in e, N = (e, t) => (0, console.error)(e, t), W = /* @__PURE__ */ new Map(), Os = [], jt = [], se = [], As = (e, t) => (s) => {
+  e.push(s), it || (it = !0, t && g.$flags$ & 4 ? Ps(nt) : g.raf(nt));
+}, Rt = (e) => {
+  for (let t = 0; t < e.length; t++)
+    try {
+      e[t](performance.now());
+    } catch (s) {
+      N(s);
+    }
+  e.length = 0;
+}, nt = () => {
+  Rt(jt), Rt(se), (it = jt.length > 0) && g.raf(nt);
+}, Ps = (e) => Ge().then(e), Ls = /* @__PURE__ */ As(se, !0), Es = (e = {}) => {
+  const { content: t = "", title: s, attributes: i = [] } = e;
+  let n = "", o = [
+    { name: "xmlns", value: "http://www.w3.org/2000/svg" },
+    { name: "fill", value: "currentColor" },
+    ...i
+  ];
+  return s && (n = `<title>${s}</title>`), `<svg ${o.map((a) => `${a.name}="${a.value}"`).join(" ")}>${n}${t}</svg>`;
+}, js = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim();
+function Rs(e) {
+  return `${e.getFullYear()}.${e.getMonth() + 1}`;
+}
+class Ds {
+  constructor(t) {
+    this.voca_component = t, this.voca_added = Rs(/* @__PURE__ */ new Date());
+  }
+}
+const Is = "telia-vst{display:none}", Ns = /* @__PURE__ */ te(class extends Bt {
+  constructor() {
+    super(), this.__registerHost(), this.vocaInternalUStats = hs(this, "vocaInternalUStats", 7);
+  }
+  connectedCallback() {
+    this.vocaInternalUStats.emit(new Ds(this.dataTrackingId));
+  }
+  render() {
+    return O(ht, null);
+  }
+  static get style() {
+    return Is;
+  }
+}, [0, "telia-vst", {
+  dataTrackingId: [1, "data-tracking-id"]
+}]);
+function ie() {
+  if (typeof customElements > "u")
+    return;
+  ["telia-vst"].forEach((t) => {
+    switch (t) {
+      case "telia-vst":
+        customElements.get(t) || customElements.define(t, Ns);
+        break;
+    }
+  });
+}
+ie();
+function ot() {
+  return typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : { vocadsIcons: void 0, vocadsIconsRegistered: !1 };
+}
+function Hs() {
+  if (typeof ot().vocadsIcons !== void 0)
+    return ot().vocadsIcons;
+}
+function zs() {
+  return ot().vocadsIconsRegistered;
+}
+const Ms = ".telia-icon{display:inline-block}.telia-icon__container{display:block;height:inherit}.telia-icon svg{display:block}.telia-icon--sm{height:calc(1.6rem * var(--voca-rem-multiplier));min-width:calc(1.6rem * var(--voca-rem-multiplier));width:calc(1.6rem * var(--voca-rem-multiplier))}.telia-icon--md{height:calc(2.4rem * var(--voca-rem-multiplier));min-width:calc(2.4rem * var(--voca-rem-multiplier));width:calc(2.4rem * var(--voca-rem-multiplier))}.telia-icon--lg{height:calc(3.2rem * var(--voca-rem-multiplier));min-width:calc(3.2rem * var(--voca-rem-multiplier));width:calc(3.2rem * var(--voca-rem-multiplier))}", Fs = /* @__PURE__ */ te(class extends Bt {
+  constructor() {
+    super(), this.__registerHost(), this.size = "md", this.allyTitle = null, this.dataTrackingId = "telia-icon";
+  }
+  /**
+   * Returns svg string from svg property or svg string from icons bundle if icons bundle is registered
+   * @private
+   * @returns string
+   */
+  getSvgString() {
+    if (this.svg)
+      return this.svg;
+    if (zs() && this.name) {
+      const e = Hs();
+      return e[this.name] ? e[this.name].svg : "";
+    }
+    return this.name && console.warn(this.name, "Icons bundle is not registered and will not be rendered. Check if you have registered icons bundle or use svg property"), "";
+  }
+  render() {
+    let e = this.getSvgString(), t = [{ name: "viewBox", value: "0 0 64 64" }];
+    this.allyTitle ? t = [...t, { name: "role", value: "img" }] : t = [
+      ...t,
+      { name: "aria-hidden", value: "true" }
+    ];
+    const s = Es({
+      content: js(e),
+      attributes: t,
+      title: this.allyTitle
+    });
+    return O(ht, { class: `telia-icon telia-icon--${this.size}` }, O("span", { "aria-label": this.allyTitle, class: "telia-icon__container", innerHTML: s }), O("telia-vst", { dataTrackingId: this.dataTrackingId }));
+  }
+  static get style() {
+    return Ms;
+  }
+}, [0, "telia-icon", {
+  name: [1],
+  svg: [1],
+  size: [1],
+  allyTitle: [1, "ally-title"],
+  dataTestid: [1, "data-testid"]
+}]);
+function Us() {
+  if (typeof customElements > "u")
+    return;
+  ["telia-icon", "telia-vst"].forEach((t) => {
+    switch (t) {
+      case "telia-icon":
+        customElements.get(t) || customElements.define(t, Fs);
+        break;
+      case "telia-vst":
+        customElements.get(t) || ie();
+        break;
+    }
+  });
+}
+Us();
+var Bs = Object.defineProperty, Ws = Object.getOwnPropertyDescriptor, ne = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? Ws(t, s) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (n = (i ? r(t, s, n) : r(n)) || n);
+  return i && n && Bs(t, s, n), n;
+};
+let q = class extends P {
+  _renderTimestamp(e, t) {
+    if (!e && !t)
+      return $;
+    const s = (n) => new Date(n).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+    let i = "";
+    return e ? t ? i = `${e}: ${s(t)}` : i = e : t && (i = s(t)), f`<p class="conversation-timestamp">${i}</p>`;
+  }
+  render() {
+    var e, t;
+    switch (this.message.type) {
+      case V.System:
+        return "";
+      case V.Agent:
+        return f`<div
+          class=${Nt({
+          "conversation-agent-message": !0,
+          "has-avatar": !!((e = this.message.sender) != null && e.avatar)
+        })}
+        >
+          ${(t = this.message.sender) != null && t.avatar ? f`<div class="avatar">
+                <img src=${this.message.sender.avatar} />
+              </div>` : $}
+
+          <div class="content-bundle">
+            ${this.message.content.map(
+          (s) => f`
+                <div class="message-container">
+                  <div class="message-content">
+                    <conversation-component-message-list
+                      .items=${s.items || []}
+                    ></conversation-component-message-list>
+                  </div>
+                </div>
+              `
+        )}
+          </div>
+          ${this._renderTimestamp(
+          this.message.sender.name || "",
+          this.message.timestamp
+        )}
+        </div>`;
+      case V.User:
+        return f`<div class="conversation-user-message">
+          <div class="content-bundle">
+            ${this.message.content.map(
+          (s) => f`
+                <div class="message-container">
+                  <div class="message-content">
+                    <conversation-component-message-list
+                      .items=${s.items || []}
+                    ></conversation-component-message-list>
+                  </div>
+                </div>
+              `
+        )}
+          </div>
+          ${this._renderTimestamp(
+          "",
+          // TODO: properties.userLabel || ''
+          this.message.timestamp
+        )}
+        </div>`;
+      default:
+        return $;
+    }
+  }
+};
+q.styles = w`
+    :host {
+      box-sizing: border-box;
+      display: block;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    .message-content {
+      padding: var(--spacing-md);
+      display: inline-block;
+      margin-top: var(--spacing-md);
+      max-width: 100%;
+      border: 1px solid var(--gray-color);
+      border-radius: var(--border-radius);
+      background-color: var(--bubble-bg-color);
+      color: var(--bubble-text-color);
+    }
+
+    .conversation-user-message {
+      --bubble-bg-color: var(--conversation-user-bg-color);
+      --bubble-text-color: var(--conversation-user-text-color);
+      margin-left: 10%;
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .conversation-agent-message {
+      --bubble-bg-color: var(--conversation-agent-bg-color);
+      --bubble-text-color: var(--conversation-agent-text-color);
+      display: grid;
+      margin-right: 10%;
+      width: 90%;
+
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr auto;
+      grid-template-areas:
+        'content'
+        'info';
+    }
+    .conversation-agent-message.has-avatar {
+      grid-template-columns: auto 1fr;
+      grid-template-rows: 1fr auto;
+      grid-template-areas:
+        'avatar content'
+        '. info';
+    }
+
+    .avatar {
+      grid-area: avatar;
+      place-self: flex-end;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: var(--accent-color);
+      align-self: flex-end;
+      justify-self: center;
+      overflow: hidden;
+      margin-right: var(--spacing-md);
+      justify-content: center;
+      align-items: center;
+    }
+    .avatar img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+
+    .conversation-timestamp {
+      grid-area: info;
+      margin: 0;
+      line-height: 1.5em;
+      grid-area: info;
+      color: var(--text-color);
+      font-size: 0.8rem;
+      font-weight: 300;
+    }
+
+    .content-bundle {
+      grid-area: content;
+    }
+  `;
+ne([
+  x()
+], q.prototype, "message", 2);
+q = ne([
+  L("conversation-component-message")
+], q);
+var qs = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, oe = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? Gs(t, s) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (n = (i ? r(t, s, n) : r(n)) || n);
+  return i && n && qs(t, s, n), n;
+};
+let G = class extends P {
+  constructor() {
+    super(...arguments), this.items = [];
+  }
+  _isCustomComponent(e) {
+    return !["html", "link-list"].includes(e);
+  }
+  _createCustomComponent(e, t) {
+    const s = customElements.get(e);
+    if (s) {
+      const i = new s();
+      return i.message = t, i;
+    }
+    return $;
+  }
+  render() {
+    return f` <div class="message-list">
+      ${this.items.map(
+      ([e, t]) => f`
+          ${e === "html" ? f`
+                <message-type-html .message=${t}> </message-type-html>
+              ` : $}
+          ${e === "link-list" ? f`
+                <message-type-link-list .message=${t}>
+                </message-type-link-list>
+              ` : $}
+          ${e === "separator" ? f`
+                <message-type-separator .message=${t}>
+                </message-type-separator>
+              ` : $}
+          ${this._isCustomComponent(e) ? this._createCustomComponent(e, t) : $}
+        `
+    )}
+    </div>`;
+  }
+};
+G.styles = w`
+    :host {
+      box-sizing: border-box;
+      display: block;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    .message-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-md);
+    }
+  `;
+oe([
+  x()
+], G.prototype, "items", 2);
+G = oe([
+  L("conversation-component-message-list")
+], G);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class rt extends It {
+  constructor(t) {
+    if (super(t), this.et = $, t.type !== at.CHILD)
+      throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(t) {
+    if (t === $ || t == null)
+      return this.ft = void 0, this.et = t;
+    if (t === pe)
+      return t;
+    if (typeof t != "string")
+      throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (t === this.et)
+      return this.ft;
+    this.et = t;
+    const s = [t];
+    return s.raw = s, this.ft = { _$litType$: this.constructor.resultType, strings: s, values: [] };
+  }
+}
+rt.directiveName = "unsafeHTML", rt.resultType = 1;
+const Ks = lt(rt);
+var Qs = Object.defineProperty, Xs = Object.getOwnPropertyDescriptor, re = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? Xs(t, s) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (n = (i ? r(t, s, n) : r(n)) || n);
+  return i && n && Qs(t, s, n), n;
+};
+let K = class extends P {
+  render() {
+    return f`<div class="message-type-html">
+      ${Ks(this.message.body)}
+    </div>`;
+  }
+};
+K.styles = [
+  w`
+      :host {
+        box-sizing: border-box;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      p {
+        margin: 0;
+        padding: 0;
+        word-break: break-word;
+      }
+    `
+];
+re([
+  x()
+], K.prototype, "message", 2);
+K = re([
+  L("message-type-html")
+], K);
+var Ys = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, ae = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? Js(t, s) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (n = (i ? r(t, s, n) : r(n)) || n);
+  return i && n && Ys(t, s, n), n;
+};
+let Q = class extends P {
+  _onItemClick(e) {
+    const t = new CustomEvent("action", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        actionKey: "action",
+        payload: e
+      }
+    });
+    this.dispatchEvent(t);
+  }
+  render() {
+    return f`
+      <div class="message-type-link-list">
+        ${this.message.header ? f`<h1>${this.message.header}</h1>` : $}
+        <ul>
+          ${this.message.actions.map(
+      (e) => f`
+              <li>
+                <button @click=${() => this._onItemClick(e)}>
+                  ${e.label}
+                </button>
+              </li>
+            `
+    )}
+        </ul>
+      </div>
+    `;
+  }
+};
+Q.styles = [
+  w`
+      :host {
+        box-sizing: border-box;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      h1 {
+        font-size: 1.1rem;
+        margin: 0 0 var(--spacing-sm);
+        font-weight: normal;
+        line-height: 1.8rem;
+        color: var(--text-color);
+        white-space: normal;
+      }
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      .message-type-link-list button {
+        color: var(--primary-color);
+        background-color: transparent;
+        max-width: 100%;
+        border: none;
+        cursor: pointer;
+        text-transform: none;
+        font-weight: 300;
+        font-size: inherit;
+        text-align: left;
+        display: block;
+        margin: 0;
+        padding: 0;
+      }
+      .message-type-link-list ul {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-sm);
+      }
+    `
+];
+ae([
+  x()
+], Q.prototype, "message", 2);
+Q = ae([
+  L("message-type-link-list")
+], Q);
+var Zs = Object.defineProperty, Vs = Object.getOwnPropertyDescriptor, le = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? Vs(t, s) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (n = (i ? r(t, s, n) : r(n)) || n);
+  return i && n && Zs(t, s, n), n;
+};
+let X = class extends P {
+  render() {
+    return f`<div class="message-type-separator"></div>`;
+  }
+};
+X.styles = [
+  w`
+      :host {
+        box-sizing: border-box;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .message-type-separator {
+        border-bottom: 1px solid var(--gray-color);
+        width: 100%;
+      }
+    `
+];
+le([
+  x({ attribute: !1 })
+], X.prototype, "message", 2);
+X = le([
+  L("message-type-separator")
+], X);
+const ti = (e) => {
+  e.scrollTo ? e.scrollTo({ top: e.scrollHeight, behavior: "smooth" }) : e.scrollTop = e.scrollHeight;
+};
+var ei = Object.defineProperty, si = Object.getOwnPropertyDescriptor, ce = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? si(t, s) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (n = (i ? r(t, s, n) : r(n)) || n);
+  return i && n && ei(t, s, n), n;
+};
+const de = je(P);
+let I = class extends de {
+  constructor() {
+    super(...arguments), this.message = "", this.conversationContentRef = He(), this.chatScrollHeight = 0;
+  }
+  async _onClick(e) {
+    e.preventDefault(), console.log("Todo", this.message);
+  }
+  async _onSendMessage(e) {
+    e.preventDefault(), await this.actions.dispatch("user-submit", { text: this.message }), this.message = "";
+  }
+  _inputHandler(e) {
+    this.message = e.target.value;
+  }
+  _actionHandler(e) {
+    this.actions.dispatch(e.detail.actionKey, e.detail.payload);
+  }
+  updated(e) {
+    const t = this.conversationContentRef.value;
+    t && setTimeout(() => {
+      const s = t.scrollHeight;
+      s > this.chatScrollHeight && (ti(t), this.chatScrollHeight = s);
+    }, 1e3);
+  }
+  render() {
+    return f` <div
+      @action=${this._actionHandler}
+      class=${Nt({
+      conversation: !0,
+      "input-has-text": this.message.length > 0
+    })}
+    >
+      <div class="conversation-content" ${Me(this.conversationContentRef)}>
+        <div class="conversation-content-inner">
+          ${(this.properties.messages || []).map(
+      (e) => f`<div class="conversation-entry" tabindex="-1">
+                <conversation-component-message
+                  .message=${e}
+                  ${_t({
+        keyframeOptions: {},
+        in: mt,
+        out: vt,
+        stabilizeOut: !0,
+        skipInitial: !1
+      })}
+                >
+                </conversation-component-message>
+              </div>`
+    )}
+          ${this.properties.loading ? f`<div
+                class="loader"
+                ${_t({
+      in: mt,
+      out: vt,
+      skipInitial: !1
+    })}
+              >
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>` : $}
+        </div>
+      </div>
+      <form class="conversation-bottom" @submit=${this._onSendMessage}>
+        <div class="conversation-bottom-left">
+          <button class="circle" @click=${this._onClick} type="button">
+            <telia-icon svg=${$e.svg} size="sm"></telia-icon>
+          </button>
+        </div>
+        <input
+          placeholder="Type your message here..."
+          .value=${this.message}
+          @input=${this._inputHandler}
+        />
+        <div class="conversation-actions">
+          <button class="conversation-send-button" type="submit">
+            <telia-icon svg=${ge.svg}></telia-icon>
+          </button>
+        </div>
+      </form>
+    </div>`;
+  }
+};
+I.styles = [
+  de.styles || [],
+  w`
+      :host {
+        font-family: var(--font-family);
+        --send-icon-color: var(--gray-dark-color, #a6a6a6);
+        --conversation-bg: #fafafa;
+        --conversation-agent-bg-color: var(--conversation-bg);
+        --conversation-agent-text-color: var(-text-color);
+        --conversation-user-bg-color: var(--primary-color);
+        --conversation-user-text-color: white;
+
+        scrollbar-width: thin; /* Firefox */
+        scrollbar-color: #7f7f7f transparent; /* Firefox */
+      }
+      ::-webkit-scrollbar {
+        width: 3px !important;
+        background-color: transparent;
+        border-left: none;
+      }
+      ::-webkit-scrollbar-thumb {
+        background-color: #7f7f7f;
+      }
+      ::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent;
+      }
+
+      .conversation {
+        display: grid;
+        grid-template-rows: 1fr auto;
+        height: 100%;
+        background-color: var(--conversation-bg);
+      }
+
+      .conversation.input-has-text {
+        --send-icon-color: var(--primary-color);
+      }
+
+      .conversation-content {
+        flex: 1;
+
+        padding: var(--spacing-md);
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+      .conversation-content-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: end;
+        min-height: 100%;
+      }
+      .conversation-bottom {
+        border-top: 1px solid var(--gray-color);
+        background-color: #fff;
+        min-height: 50px;
+        max-height: 150px;
+        display: flex;
+        align-items: center;
+        padding: 0 var(--spacing-md);
+        margin: 0;
+      }
+      .conversation-bottom-left {
+        border-right: 1px solid var(--gray-color);
+        padding-right: var(--spacing-md);
+      }
+      .circle {
+        background-color: var(--gray-dark-color, #a6a6a6);
+        border-radius: 50%;
+        color: #fff;
+        padding: var(--spacing-sm, 5px);
+        border: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .conversation-send-button {
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        color: var(--send-icon-color);
+      }
+      input {
+        border: none;
+        font-family: inherit;
+        font-size: inherit;
+        flex: 1;
+        padding: 0 var(--spacing-md);
+        height: 2.5rem;
+        outline: none;
+      }
+
+      @keyframes loaderanim {
+        0% {
+          opacity: 0;
+        }
+        75% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+
+      .loader {
+        display: flex;
+        justify-content: center;
+      }
+
+      .loader > div {
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        margin: 5px;
+        background-color: var(--text-color);
+        animation-name: loaderanim;
+        animation-duration: 1s;
+        animation-iteration-count: infinite;
+      }
+
+      .loader > div:nth-of-type(2) {
+        animation-delay: 100ms;
+      }
+
+      .loader > div:nth-of-type(3) {
+        animation-delay: 200ms;
+      }
+    `
+];
+ce([
+  k()
+], I.prototype, "message", 2);
+I = ce([
+  L("ace-conversation")
+], I);
+const hi = I;
+export {
+  I as ConversationComponent,
+  hi as default
+};