@myop/vue 0.0.25 → 0.0.26

package/dist/index.js

@@ -1,1801 +1,420 @@
-import { defineComponent as Gt, useAttrs as Jt, useSlots as Yt, ref as K, getCurrentInstance as Xt, onMounted as Qt, reactive as Zt, watchEffect as es, createElementBlock as ts, openBlock as ss, Fragment as ns, createElementVNode as is, renderSlot as os, createCommentVNode as rs, mergeProps as as, unref as ls } from "vue";
-var cs = Object.defineProperty, ds = (e, t, s) => t in e ? cs(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, p = (e, t, s) => ds(e, typeof t != "symbol" ? t + "" : t, s), U = (e, t, s) => new Promise((n, i) => {
-  var o = (c) => {
-    try {
-      l(s.next(c));
-    } catch (d) {
-      i(d);
-    }
-  }, r = (c) => {
-    try {
-      l(s.throw(c));
-    } catch (d) {
-      i(d);
-    }
-  }, l = (c) => c.done ? n(c.value) : Promise.resolve(c.value).then(o, r);
-  l((s = s.apply(e, t)).next());
-}), D = () => "10000000-1000-4000-8000-100000000000".replace(
-  /[018]/g,
-  (e) => (+e ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +e / 4).toString(16)
-), us = class {
-  constructor() {
-    p(this, "id", D()), p(this, "myop", !0), p(this, "content"), p(this, "source"), p(this, "destination"), p(this, "route"), p(this, "ref"), p(this, "direction"), p(this, "cleanable", !1);
-  }
-  static create(...t) {
-    return new this(...t);
-  }
-  isTypeof(t) {
-    return t.messageType === this.messageType;
-  }
-}, hs = class extends us {
-  constructor(t) {
-    super(), this.handler = t, p(this, "handlerUniqueId", D());
-  }
-}, ps = "ExecuteScriptReplyMessage", fs = /(?:function\s*\w*\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\([^)]*\)\s*=>\s*\{([\s\S]*?)\}))\s*$/, ms = /\(\s*[^)]+\s*\)\s*=>\s*(.+)/, gs = (e) => {
-  let t = e.match(fs);
-  if (t)
-    return t[1] || t[3];
-  {
-    let s = e.match(ms);
-    if (s)
-      return s[1].trim();
-  }
-}, qe = class extends hs {
-  constructor(t, s = () => {
-  }, n) {
-    super(s), this.scriptInputs = n, p(this, "replyMessageKey", ps), p(this, "messageType", "ExecuteScriptMessage"), p(this, "script", ""), this.script = t.toString(), this.content = t.toString(), this.content = gs(this.content);
-  }
-};
-p(qe, "replierKey", "send");
-p(qe, "completeStreamKey", "completeStream");
-var Pe = class {
-  constructor() {
-    p(this, "_runTimeInstanceId", "runtime-instance-id-" + D()), p(this, "_runTimeId", "runtime-id-" + D()), p(this, "_runTimeName", "runtime-name-" + D()), p(this, "id", this._runTimeId), p(this, "name", this._runTimeName), p(this, "description", ""), p(this, "loader", null), p(this, "withLoader", (t) => (this.loader = t, this)), p(this, "withHTMLLoader", (t) => (t.type = "HTMLLoader", this.loader = t, this)), p(this, "build", () => this);
-  }
-};
-p(Pe, "create", () => new Pe());
-var Le = class {
-  constructor() {
-    p(this, "_runTimeInstanceId", "runtime-instance-id-" + D()), p(this, "_runTimeId", "runtime-id-" + D()), p(this, "_runTimeName", "runtime-name-" + D()), p(this, "instance", {
-      id: this._runTimeInstanceId,
-      componentId: this._runTimeId,
-      componentName: this._runTimeName,
-      skinSelector: null
-    }), p(this, "name", this._runTimeName), p(this, "type", {
-      id: this._runTimeId,
-      name: this._runTimeName,
-      description: "",
-      props: [],
-      refs: [],
-      skins: [],
-      defaultSkin: 0
-    }), p(this, "withInstance", (t) => (this.instance = t, this)), p(this, "withType", (t) => (this.type = t, this)), p(this, "withName", (t) => (this.name = t, this)), p(this, "withDefaultSkin", (t) => (this.type.skins.push(t), this.type.defaultSkin = this.type.skins.length - 1, this.instance.skinSelector = {
-      type: "Dedicated",
-      skin: {
-        id: t.id
-      }
-    }, this)), p(this, "withRef", (t) => (this.type.refs.push(t), this)), p(this, "withBasicRef", (t) => {
-      const s = {
-        id: "",
-        name: t,
-        description: "",
-        selectorType: "id-attribute",
-        selector: t,
-        behavior: {
-          type: "code"
-        }
-      };
-      return this.type.refs.push(s), this;
-    }), p(this, "build", () => JSON.parse(JSON.stringify(this)));
-  }
-};
-p(Le, "create", () => new Le());
-var pe = class {
-  // private components: Record<string, Promise<IUserFlow>> = {};
-  constructor(t = "https://cloud.myop.dev") {
-    this._baseUrl = t, p(this, "userFlows", {});
-  }
-  fetchComponent(t, s) {
-    return U(this, null, function* () {
-      return s ? (yield this.fetchFlow(s)).components.find((i) => i.type.id === t) : (yield this.fetchAutoFlow(t)).components[0];
-    });
-  }
-  fetchAutoFlow(t) {
-    return U(this, null, function* () {
-      return this.userFlows[t] || (this.userFlows[t] = new Promise(
-        (s, n) => U(this, null, function* () {
-          try {
-            const o = yield (yield fetch(
-              `${this._baseUrl}/flow?id=${t}&auto=true`
-            )).json();
-            s(o.item);
-          } catch (i) {
-            n(i);
-          }
-        })
-      )), yield this.userFlows[t];
-    });
-  }
-  fetchFlow(t) {
-    return U(this, null, function* () {
-      return this.userFlows[t] || (this.userFlows[t] = new Promise(
-        (s, n) => U(this, null, function* () {
-          try {
-            const o = yield (yield fetch(
-              `${this._baseUrl}/flow?id=${t}&resolve=components`
-            )).json();
-            s(o.item);
-          } catch (i) {
-            n(i);
-          }
-        })
-      )), yield this.userFlows[t];
-    });
-  }
-};
-p(pe, "Main", new pe());
-var ys = pe, je = Object.defineProperty, vs = Object.defineProperties, ws = Object.getOwnPropertyDescriptors, Ae = Object.getOwnPropertySymbols, Ms = Object.prototype.hasOwnProperty, _s = Object.prototype.propertyIsEnumerable, fe = (e, t, s) => t in e ? je(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, v = (e, t) => {
-  for (var s in t || (t = {}))
-    Ms.call(t, s) && fe(e, s, t[s]);
-  if (Ae)
-    for (var s of Ae(t))
-      _s.call(t, s) && fe(e, s, t[s]);
-  return e;
-}, G = (e, t) => vs(e, ws(t)), Es = (e, t) => {
-  for (var s in t)
-    je(e, s, { get: t[s], enumerable: !0 });
-}, a = (e, t, s) => fe(e, typeof t != "symbol" ? t + "" : t, s), m = (e, t, s) => new Promise((n, i) => {
-  var o = (c) => {
-    try {
-      l(s.next(c));
-    } catch (d) {
-      i(d);
-    }
-  }, r = (c) => {
-    try {
-      l(s.throw(c));
-    } catch (d) {
-      i(d);
-    }
-  }, l = (c) => c.done ? n(c.value) : Promise.resolve(c.value).then(o, r);
-  l((s = s.apply(e, t)).next());
-}), J = "__federation__", Be = "onLoad", We = (e, t) => {
-  window[J] && window[J][e] && window[J][e][Be] && window[J][e][Be]({ [e]: t });
-}, g = {
-  //host to component
-  InitRequest: "InitRequest",
-  InitResponse: "InitResponse",
-  InitMessage: "InitMessage",
-  DisposeMessage: "DisposeMessage",
-  ChangeTextMessage: "ChangeTextMessage",
-  BindClickMessage: "BindClickMessage",
-  DetectMyopRefsMessage: "DetectMyopRefsMessage",
-  ExecuteScriptMessage: "ExecuteScriptMessage",
-  AddEventListenerMessage: "AddEventListenerMessage",
-  SetAttributeMessage: "SetAttributeMessage",
-  CreateRefComponentMessage: "CreateRefComponentMessage",
-  EnvelopedMessage: "EnvelopedMessage",
-  GetElementValueMessage: "GetElementValueMessage",
-  SetInnerHtml: "SetInnerHtml",
-  //component messages
-  ExecuteComponentMethod: "ExecuteComponentMethod",
-  CleanupMessage: "CleanupMessage",
-  // external to host :
-  In: {
-    MutationObserverMessage: "MutationObserverMessage",
-    ResizeObserverMessage: "ResizeObserverMessage"
-  }
-}, me = {};
-Es(me, {
-  AddEventListenerMessage: () => Ds,
-  BaseMyopMessage: () => w,
-  BindClickMessage: () => xs,
-  ChangeTextMessage: () => Rs,
-  CleanupMessage: () => pt,
-  CleanupReplayMessage: () => ft,
-  ClickReplayMessage: () => Ye,
-  CreateRefComponentMessage: () => at,
-  CustomRefMessage: () => ge,
-  DetectMyopRefsMessage: () => Fs,
-  DetectedMyopRefsMessage: () => dt,
-  DisposeMessage: () => mt,
-  ElementValueReplayMessage: () => nt,
-  EnvelopedMessage: () => lt,
-  EventListenerCallbackMessage: () => tt,
-  ExecuteComponentMethod: () => R,
-  ExecuteScriptMessage: () => H,
-  ExecuteScriptReplyMessage: () => Ze,
-  GetAttributeMessage: () => Ps,
-  GetAttributeReplayMessage: () => Ls,
-  GetElementValueMessage: () => $s,
-  InitMessage: () => Ce,
-  InitRequest: () => ot,
-  InitResponse: () => it,
-  MessageDirection: () => b,
-  MutationObserverMessage: () => Bs,
-  MyopBindMessage: () => T,
-  MyopBindReplayMessage: () => I,
-  MyopElementMessage: () => Ts,
-  Ref: () => z,
-  RefComponentCreatedMessage: () => ye,
-  ResizeObserverMessage: () => Ks,
-  SetAttributeMessage: () => Os,
-  SetInnerHtml: () => Ns,
-  SetMutationObserverMessage: () => As,
-  SetResizeObserverMessage: () => Vs,
-  stripFunction: () => Qe
-});
-var B = () => "10000000-1000-4000-8000-100000000000".replace(
-  /[018]/g,
-  (e) => (+e ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +e / 4).toString(16)
-), bs = (e) => {
-  const t = [...e].map((s) => s.toString(16).padStart(2, "0")).join("");
-  return [
-    t.slice(0, 8),
-    t.slice(8, 12),
-    t.slice(12, 16),
-    t.slice(16, 20),
-    t.slice(20)
-  ].join("-");
-}, Cs = (e) => {
-  let t = e.replace(/-/g, "+").replace(/_/g, "/");
-  for (; t.length % 4; ) t += "=";
-  const s = atob(t);
-  return Uint8Array.from(s, (n) => n.charCodeAt(0));
-}, Ss = (e) => {
-  const t = Cs(e);
-  if (t.length % 16 !== 0) throw new Error("Invalid input length");
-  const s = [];
-  for (let n = 0; n < t.length; n += 16)
-    s.push(bs(t.slice(n, n + 16)));
-  return s;
-}, Is = (e) => new Promise((t) => setTimeout(t, e)), b = class {
-};
-a(b, "down", "down");
-a(b, "up", "up");
-var w = class {
-  constructor() {
-    a(this, "id", B()), a(this, "myop", !0), a(this, "content"), a(this, "source"), a(this, "destination"), a(this, "route"), a(this, "ref"), a(this, "direction"), a(this, "cleanable", !1);
-  }
-  static create(...e) {
-    return new this(...e);
-  }
-  isTypeof(e) {
-    return e.messageType === this.messageType;
-  }
-}, Ts = class extends w {
-  constructor(e) {
-    super(), this.ref = e;
-  }
-}, I = class extends w {
-  constructor(e) {
-    super(), this.replayToHandler = e;
-  }
-}, T = class extends w {
-  constructor(e) {
-    super(), this.handler = e, a(this, "handlerUniqueId", B());
-  }
-}, z = class Ge {
-  constructor(t, s) {
-    this.refConfig = t, this.component = s, a(this, "myop", !0), a(this, "__nonProxied"), this.__nonProxied = G(v({}, this), {
-      component: null
-      // in order to be serializable
-    });
-  }
-  static create(t, s, n) {
-    let i = s;
-    return i || (i = {
-      id: "",
-      name: "",
-      description: "",
-      selectorType: "id-attribute",
-      selector: t,
-      behavior: {
-        type: "code"
-      }
-    }), new Ge(i, n);
-  }
-}, Je = "ClickReplayMessage", xs = class extends T {
-  constructor(e, t) {
-    super(t), this.ref = e, a(this, "replyMessageKey", Je), a(this, "messageType", "BindClickMessage"), a(this, "cleanable", !0);
-  }
-}, Ye = class extends I {
-  constructor() {
-    super(...arguments), a(this, "messageType", Je);
-  }
-}, Rs = class extends w {
-  constructor(e, t) {
-    super(), this.ref = e, a(this, "messageType", "ChangeTextMessage"), this.content = t;
-  }
-}, Xe = "ExecuteScriptReplyMessage", ks = /(?:function\s*\w*\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\([^)]*\)\s*=>\s*\{([\s\S]*?)\}))\s*$/, Hs = /\(\s*[^)]+\s*\)\s*=>\s*(.+)/, Qe = (e) => {
-  let t = e.match(ks);
-  if (t)
-    return t[1] || t[3];
-  {
-    let s = e.match(Hs);
-    if (s)
-      return s[1].trim();
-  }
-}, H = class extends T {
-  constructor(e, t = () => {
-  }, s) {
-    super(t), this.scriptInputs = s, a(this, "replyMessageKey", Xe), a(this, "messageType", "ExecuteScriptMessage"), a(this, "script", ""), this.script = e.toString(), this.content = e.toString(), this.content = Qe(this.content);
-  }
-};
-a(H, "replierKey", "send");
-a(H, "completeStreamKey", "completeStream");
-var Ze = class extends I {
-  constructor(e, t) {
-    super(e), this.replayToHandler = e, this.content = t, a(this, "messageType", Xe);
-  }
-}, ge = class extends H {
-  constructor(e, t, s = () => {
-  }) {
-    super(({ rootRef: n, elementId: i, _script: o, __scriptInputs: r }) => {
-      const l = (n.shadowRoot || n.container).querySelectorAll(`[myop-id='${i}']`);
-      return l.length ? (r.ref = l[0], new Function(`return (${o})(...arguments)`)(r)) : null;
-    }, s), this.scriptInputs = t, this.scriptInputs = G(v({}, t), {
-      //_script: stripFunction(script.toString()),
-      _script: e.toString()
-    });
-  }
-}, et = "EventListenerCallbackMessage", Ds = class extends T {
-  // {} // empty
-  constructor(e, t, s) {
-    super(s), this.ref = e, this.type = t, this.handler = s, a(this, "replyMessageKey", et), a(this, "messageType", "AddEventListenerMessage"), a(this, "cleanable", !0), a(this, "serializableSkeleton", !1);
-  }
-  withSerializableSkeleton(e) {
-    return this.serializableSkeleton = e, this;
-  }
-}, tt = class extends I {
-  constructor(e, t) {
-    super(e), this.replayToHandler = e, this.e = t, a(this, "messageType", et), this.content = {
-      e: t
-    };
-  }
-}, Os = class extends w {
-  constructor(e, t, s) {
-    super(), this.ref = e, this.name = t, this.value = s, a(this, "messageType", "SetAttributeMessage");
-  }
-}, st = "ElementValueReplayMessage", $s = class extends T {
-  constructor(e, t) {
-    super(t), this.ref = e, a(this, "replyMessageKey", st), a(this, "messageType", "GetElementValueMessage");
-  }
-}, nt = class extends I {
-  constructor(e) {
-    super(), this.content = e, a(this, "messageType", st);
-  }
-}, Ns = class extends w {
-  constructor(e, t) {
-    super(), this.ref = e, a(this, "messageType", "SetInnerHtml"), this.content = t;
-  }
-}, Ce = class extends w {
-  constructor(e) {
-    super(), a(this, "messageType", "InitMessage"), this.content = { id: e };
-  }
-  isTypeof(e) {
-    return e.messageType === this.messageType;
-  }
-}, it = class extends Ce {
-  constructor() {
-    super(...arguments), a(this, "messageType", "InitResponse");
-  }
-}, ot = class extends w {
-  constructor() {
-    super(...arguments), a(this, "messageType", "InitRequest");
-  }
-}, rt = "RefComponentCreatedMessage", at = class extends T {
-  constructor(e, t, s, n) {
-    super(n), this.refConfig = e, this.nestedComponentConfig = t, this.options = s, a(this, "replyMessageKey", rt), a(this, "messageType", "CreateRefComponentMessage");
-  }
-}, ye = class extends I {
-  constructor(e, t, s) {
-    super(e), this.replayToHandler = e, this.nestedRefs = t, this.failed = s, a(this, "messageType", rt);
-  }
-}, lt = class extends w {
-  constructor(e, t) {
-    super(), this.destination = e, this.message = t, a(this, "messageType", "EnvelopedMessage");
-    const s = t;
-    this.route = [e, ...s.route ? s.route : []];
-  }
-}, ct = "DetectedMyopRefsMessage", Fs = class extends T {
-  constructor() {
-    super(...arguments), a(this, "messageType", "DetectMyopRefsMessage"), a(this, "replyMessageKey", ct);
-  }
-}, dt = class extends I {
-  constructor(e, t) {
-    super(e), this.replayToHandler = e, a(this, "messageType", ct), this.content = t;
-  }
-  isTypeof(e) {
-    return e.messageType === this.messageType;
-  }
-}, ut = "GetAttributeReplayMessage", Ps = class extends T {
-  constructor(e, t, s) {
-    super(s), this.ref = e, this.name = t, a(this, "replyMessageKey", ut), a(this, "messageType", "GetAttributeMessage");
-  }
-}, Ls = class extends I {
-  constructor(e) {
-    super(), this.content = e, a(this, "messageType", ut);
-  }
-}, R = class extends w {
-  constructor(e) {
-    super(), this.method = e, a(this, "messageType", "ExecuteComponentMethod");
-  }
-}, As = class extends w {
-  constructor() {
-    super(...arguments), a(this, "messageType", "SetMutationObserverMessage");
-  }
-}, Bs = class extends w {
-  constructor() {
-    super(...arguments), a(this, "messageType", "MutationObserverMessage");
-  }
-}, ht = "CleanupReplayMessage", pt = class extends T {
-  constructor(e, t) {
-    super(t), this.cleanupForMessageId = e, a(this, "replyMessageKey", ht), a(this, "messageType", "CleanupMessage");
-  }
-}, ft = class extends I {
-  constructor(e) {
-    super(), this.customCleanup = e, a(this, "messageType", ht);
-  }
-}, mt = class extends w {
-  constructor() {
-    super(...arguments), a(this, "messageType", "DisposeMessage");
-  }
-}, Vs = class extends w {
-  constructor() {
-    super(...arguments), a(this, "cleanable", !0), a(this, "messageType", "SetResizeObserverMessage");
-  }
-}, Ks = class extends w {
-  constructor() {
-    super(...arguments), a(this, "messageType", "ResizeObserverMessage");
-  }
-}, Se = class {
-  constructor(e, t, s) {
-    this.componentDefinition = e, this.container = t, a(this, "id", ""), a(this, "messageHandlers", {}), a(this, "element"), a(this, "_markedForDisposed", !1), a(this, "bind", (i, o) => {
-      this.messageHandlers[i] || (this.messageHandlers[i] = []), this.messageHandlers[i].includes(o) || this.messageHandlers[i].push(o);
-    }), a(this, "bindWhen", (i, o, r) => {
-      if (!r)
-        throw new Error("can't use component.bindWhen without an handler");
-      this.messageHandlers[i] || (this.messageHandlers[i] = []);
-      const l = this.messageHandlers[i], c = (d) => o(d) ? (r(d), !0) : !1;
-      return l.push(c), () => {
-        const d = l.indexOf(c);
-        d > -1 && l.splice(d, 1);
-      };
-    }), a(this, "setInitiated", () => {
-      this.isInitiated = !0, this._whenInitiatedResolve && this._whenInitiatedResolve();
-    }), a(this, "isInitiated", !1), a(this, "_whenInitiatedResolve"), a(this, "_whenInitiatedReject"), a(this, "_whenInitiated", new Promise((i, o) => {
-      this._whenInitiatedResolve = i, this._whenInitiatedReject = o;
-    })), a(this, "initiated", () => this._whenInitiated), a(this, "props", {}), a(this, "refs", {}), this.id = (s == null ? void 0 : s.id) || oe.Instance().assignId(e);
-    const n = s != null && s.timeout ? s == null ? void 0 : s.timeout : 5 * 1e3;
-    setTimeout(() => {
-      !this.isInitiated && this._whenInitiatedReject && !this._markedForDisposed && this._whenInitiatedReject(`timeout_${n} ${this.id}`);
-    }, n), this.initiated().then(() => {
-      window.myop.hostSDK.inspected && this.inspect();
+import { defineComponent as Q, useSlots as X, computed as y, createElementBlock as A, openBlock as b, normalizeStyle as W, renderSlot as M, unref as ge, ref as p, shallowRef as lt, watch as ae, onMounted as Re, onUnmounted as at, createElementVNode as $e, createBlock as ke, createCommentVNode as pe, withCtx as Ve, markRaw as Ie, useAttrs as ct, getCurrentInstance as ut, reactive as ft, watchEffect as pt, Fragment as dt, mergeProps as mt } from "vue";
+import { containerStyleObject as ht, loaderStyleObject as gt, getMyopLogoHtml as xe, fallbackStyleObject as yt, hostSDK as Te } from "@myop/sdk/host";
+import { CloudRepository as Z } from "@myop/sdk/helpers";
+const _t = ["innerHTML"], Ct = /* @__PURE__ */ Q({
+  __name: "MyopLoader",
+  props: {
+    opacity: { default: 1 },
+    fadeDuration: { default: 200 }
+  },
+  setup(e) {
+    const t = e, n = X(), o = (l) => !l || l.length === 0 ? !1 : l.some((c) => typeof c.children == "string" ? c.children.trim() !== "" : Array.isArray(c.children) ? o(c.children) : !!(c.type && typeof c.type != "symbol" || c.children)), s = y(() => {
+      const l = n.default;
+      if (!l) return !1;
+      const c = l();
+      return o(c);
+    }), r = y(() => ({
+      ...ht,
+      opacity: t.opacity,
+      transition: `opacity ${t.fadeDuration}ms ease-out`
+    })), i = y(() => ({
+      ...gt,
+      opacity: t.opacity,
+      transition: `opacity ${t.fadeDuration}ms ease-out`
+    })), a = xe();
+    return (l, c) => s.value ? (b(), A("div", {
+      key: 0,
+      style: W(r.value)
+    }, [
+      M(l.$slots, "default")
+    ], 4)) : (b(), A("div", {
+      key: 1,
+      style: W(i.value),
+      innerHTML: ge(a)
+    }, null, 12, _t));
+  }
+}), vt = ["innerHTML"], Et = /* @__PURE__ */ Q({
+  __name: "MyopFallback",
+  setup(e) {
+    const t = X(), n = (a) => !a || a.length === 0 ? !1 : a.some((l) => typeof l.children == "string" ? l.children.trim() !== "" : Array.isArray(l.children) ? n(l.children) : !!(l.type && typeof l.type != "symbol" || l.children)), o = y(() => {
+      const a = t.default;
+      if (!a) return !1;
+      const l = a();
+      return n(l);
+    }), s = {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0"
+    }, r = {
+      ...yt
+    }, i = xe();
+    return (a, l) => o.value ? (b(), A("div", {
+      key: 0,
+      style: s
+    }, [
+      M(a.$slots, "default")
+    ])) : (b(), A("div", {
+      key: 1,
+      style: r,
+      innerHTML: ge(i)
+    }, null, 8, vt));
+  }
+}), En = /* @__PURE__ */ Q({
+  name: "MyopComponent",
+  __name: "MyopComponent",
+  props: {
+    componentId: {},
+    componentConfig: {},
+    data: {},
+    fadeDuration: { default: 200 },
+    autoSize: { type: Boolean, default: !1 },
+    environment: {},
+    preview: { type: Boolean },
+    on: {}
+  },
+  emits: ["load", "error", "sizeChange", "cta"],
+  setup(e, { expose: t, emit: n }) {
+    const o = X(), s = (u) => !u || u.length === 0 ? !1 : u.some((f) => typeof f.children == "string" ? f.children.trim() !== "" : Array.isArray(f.children) ? s(f.children) : !!(f.type && typeof f.type != "symbol" || f.children)), r = y(() => {
+      const u = o.loader;
+      if (!u) return !1;
+      const f = u();
+      return s(f);
     });
-  }
-  get markedForDisposed() {
-    return this._markedForDisposed;
-  }
-  set markedForDisposed(e) {
-    if (this._markedForDisposed)
-      throw new Error("InvalidOperationException: The component is already in the process of being disposed. Dispose operation cannot be performed again until the current disposal process is complete.");
-    this._markedForDisposed = e;
-  }
-  onMessageReceived(e) {
-    if (e.messageType === g.ExecuteComponentMethod) {
-      const s = e;
-      return this[s.method] ? this[s.method](s.content) : console.log(`method not found ${s.method} on component`, this), !0;
-    }
-    const t = this.messageHandlers[e.messageType];
-    if (t && t.length) {
-      let s = !1;
-      return t.forEach((n) => {
-        s = s || n(e);
-      }), s;
-    }
-    return !1;
-  }
-  sendCleanupMessage(e) {
-    e.source = this.id, e.destination = this.id, e.direction = b.down;
-    const t = this.bindWhen(e.replyMessageKey, (n) => n.replayToHandler === e.handlerUniqueId, (n) => {
-      e.handler(n), t();
-    }), s = e.handler;
-    delete e.handler, this.send(e), e.handler = s;
-  }
-  send(e) {
-    e.source || (e.source = this.id), e.destination || (e.destination = this.id), e.direction = b.down;
-    let t;
-    if (e.handler) {
-      const s = e;
-      t = this.bindWhen(s.replyMessageKey, (n) => n.replayToHandler === s.handlerUniqueId, s.handler), delete e.handler;
-    }
-    return e.ref && (e.ref = e.ref.__nonProxied || e.ref), e.cleanable ? () => {
-      this.sendCleanupMessage(new pt(e.id, (s) => {
-      })), t && t();
-    } : () => {
-    };
-  }
-  dispose() {
-    if (this.markedForDisposed = !0, !this.isInitiated)
-      return;
-    console.log("disposing component", this.id), this.send(new mt());
-    const e = this.messageHandlers.onDispose;
-    e && e.forEach((t) => {
-      t(null);
-    }), this.messageHandlers = {}, this.id += "_disposed", this.isInitiated = !1;
-  }
-}, Us = class {
-  constructor(e, t, s, n, i) {
-    this.myopId = e, this.htmlTagName = t, this.BoundingRect = s, this.offsetTop = n, this.offsetLeft = i, a(this, "type", "MyopElementRef");
-  }
-}, zs = (e) => m(void 0, null, function* () {
-  if (typeof e == "function")
-    e();
-  else if (e instanceof Promise) {
-    const t = yield e;
-    typeof t == "function" && t();
-  }
-}), qs = class {
-  //TODO : add dispose method
-  constructor(e) {
-    this.messageToHost = e;
-  }
-}, js = class extends qs {
-  constructor(e, t) {
-    super(e), this.messageToHost = e, this.context = t;
-  }
-}, Ws = class {
-  //onMessageReceived: (msg: IMyopMessage) => void;
-  constructor(e, t) {
-    this.id = e, this.context = t, a(this, "send", (s) => {
+    y(() => {
+      const u = o.fallback;
+      if (!u) return !1;
+      const f = u();
+      return s(f);
     });
-  }
-}, Gs = class {
-  constructor() {
-    a(this, "messageToHandleAfterInit", []), a(this, "components", {}), a(this, "alwaysPassEnvelopesToHost", !1), a(this, "messageCleanupCache", {});
-  }
-  handleIncomeMessages(e) {
-    const t = e.data ? e.data : e.detail;
-    if (!(!t || !t.myop)) {
-      let s = t;
-      if (s.direction !== b.down)
-        return;
-      if (s.messageType === g.DisposeMessage) {
-        s.destination && delete this.components[s.destination];
-        return;
-      }
-      if (s.messageType === g.InitMessage) {
-        const n = s.content.id;
-        if (this.components[n])
-          return;
-        this.components[n] = new Ws(n), this.messageToHost(new it(n));
-        return;
-      }
-      if (s.messageType === g.EnvelopedMessage) {
-        const n = s, i = n.message;
-        if (s = i, this.alwaysPassEnvelopesToHost || this.components[s.destination]) {
-          const o = myop.hostSDK.components.find((l) => l.id === i.destination);
-          if (o) {
-            o.send(i);
-            return;
-          }
-          const r = myop.hostSDK.components.find((l) => l.id === n.destination);
-          if (r) {
-            r.send(i);
-            return;
-          }
-        } else
+    const i = e, a = n, l = p(null), c = lt(null), d = i.componentId ? yn(i.componentId) : !1, g = p(!d), V = p(1), E = p(!1), F = p(!1), I = p(void 0), oe = p(!1), P = p(null), re = p(!1);
+    let R = null;
+    const se = () => {
+      V.value = 0, setTimeout(() => {
+        g.value = !1;
+      }, i.fadeDuration);
+    }, ie = (u) => {
+      console.error("[MyopComponent] Error:", u), se(), E.value = !0, a("error", u);
+    }, le = async (u) => {
+      var N, L;
+      oe.value = !0;
+      let f = !1;
+      try {
+        const m = JSON.parse(JSON.stringify({
+          componentId: u.componentId,
+          data: u.data,
+          environment: u.environment,
+          preview: u.preview,
+          autoSize: u.autoSize
+        }));
+        if (!m.componentId && !u.componentConfig) {
+          ie("No component configuration provided");
           return;
-      }
-      if (s.messageType) {
-        if (s.messageType === g.CleanupMessage) {
-          const n = s, i = this.messageCleanupCache[n.cleanupForMessageId], o = new ft(!!i);
-          o.destination = s.destination, i ? (delete this.messageCleanupCache[n.cleanupForMessageId], zs(i).then(() => {
-            this.messageToHost(o, n);
-          }).catch(() => {
-          })) : this.messageToHost(o, n);
+        }
+        const rt = m.preview === !0 ? !0 : void 0, st = u.componentConfig ? JSON.parse(JSON.stringify(u.componentConfig)) : await gn().fetchComponentV2(
+          m.componentId,
+          m.environment,
+          rt
+        );
+        if (!l.value) {
+          ie("Container element not found");
           return;
         }
-        this.supportedHandlers.forEach((n) => {
-          if (n.messageType === s.messageType) {
-            const i = n.executor(s);
-            if (s.cleanable && i && (this.messageCleanupCache[s.id] = i), i && !s.cleanable)
-              throw new Error(`Cleanup handler generated for non-cleanable message. 
-messageType - ${s.messageType}, handler executor was - ${n.executor}
-
-Please review the message definition object & message handler.
-To ensure cleanup properly set 'cleanable' true at message definition and return IMessageExecutorCleanup from your handlers.`);
-            if (!i && s.cleanable)
-              throw new Error(`No cleanup handler generated for a cleanable message. 
-messageType - ${s.messageType}, handler executor was - ${n.executor}
-
-Please review the message definition object & message handler.
-To ensure cleanup properly set 'cleanable' true at message definition and return IMessageExecutorCleanup from your handlers.`);
+        const it = Ie({
+          data: m.data,
+          _environment: {
+            props: m
           }
-        });
-      } else
-        console.log("unsupported message type");
-    }
-  }
-}, Ie = {
-  IframeLoader: "IframeLoader",
-  WebComponentLoader: "WebComponentLoader",
-  HTMLLoader: "HTMLLoader"
-}, ve = {
-  open: "open",
-  none: "none",
-  localFrame: "localFrame"
-}, Te = class {
-};
-a(Te, "code", "code");
-a(Te, "component", "component");
-var Q = {
-  Segmented: "Segmented",
-  Dedicated: "Dedicated",
-  /**
-   * This Selector Type is not yet supported but will be added in a future release.
-   * Please check the documentation for updates.
-   *
-   * @type {string}
-   */
-  Default: "Default"
-}, gt = {
-  Segment: "Segment",
-  Promo: "Promo",
-  AB: "AB"
-}, Js = class {
-  constructor(e, t) {
-    this.container = e, this.shadowRoot = t, a(this, "getRootDiv", () => (this.shadowRoot || this.container).querySelector("div")), a(this, "getRoot", () => this.shadowRoot || this.container);
-  }
-}, we = (e) => e !== Object(e), Ys = (e) => typeof e == "function", yt = (e) => {
-  if (we(e))
-    return !0;
-  if (Ys(e) || Object.getPrototypeOf(e))
-    return !1;
-  for (const t in e) {
-    const s = e[t];
-    if (typeof s == "object") {
-      if (!yt(s))
-        return !1;
-    } else {
-      if (we(s))
-        continue;
-      return !1;
-    }
-  }
-  return !0;
-}, L = (e, t = {}, s = !0, n = /* @__PURE__ */ new WeakMap()) => {
-  if (we(e))
-    return e;
-  if (Array.isArray(e)) {
-    if (n.has(e))
-      return n.get(e);
-    const i = [];
-    n.set(e, i);
-    for (let o = 0; o < e.length; o++) {
-      const r = e[o];
-      i[o] = L(r, t, s, n);
-    }
-    return i;
-  }
-  if (e !== null && typeof e == "object") {
-    if (n.has(e))
-      return n.get(e);
-    const i = {};
-    n.set(e, i);
-    for (const o in e) {
-      const r = typeof t == "boolean" ? t : t[o];
-      r && (r === !0 ? (s ? e[o] !== void 0 : e[o]) && (i[o] = L(e[o], !0, s, n)) : typeof r == "object" && (i[o] = L(e[o], r, s, n)));
-    }
-    return i;
-  }
-  return {};
-}, Xs = {
-  notSerializableRefCall: (e, t) => {
-    throw new Error(`
-The input provided to '${e.toString()}' is not serializable. Serialization is required to ensure that the data can be safely transferred to the skin implementation. 
-The following types of data are considered non-serializable and cannot be processed:
-
-- Functions
-- DOM elements
-- Class instances
-- Circular references
-- Symbols
-- BigInt values
-
-In the following execution we detected :
-~~~~~~~~
-${t} 
-~~~~~~~~
-as not serializable.
-
-To resolve this issue, please ensure that all inputs passed to '${e.toString()}' are in a serializable format.
-This typically includes primitive types (strings, numbers, booleans), arrays, and plain objects. 
-If you need to include complex data types, consider converting them to a serializable structure before passing them to the function.
-Or use Myop message that support it: CustomRefMessage, AddEventListenerMessage or ExecuteScriptMessage.
-
-Suggested Fix:
-1. Remove or replace non-serializable values from your input.
-2. If using objects, ensure they do not contain any functions or circular references.
-3. Convert any class instances to plain objects or JSON-compatible formats.
-4. Use dedicated Myop message.
-
-For more details on serialization and Myop message examples, refer to https://docs.myop.dev.
-
-`);
-  }
-}, Ve = class extends Se {
-  constructor(e, t, s) {
-    super(e, t.container, s), this.componentDefinition = e, this.parent = t, a(this, "send", (n) => {
-      const i = n.handler, o = super.send(n);
-      return this.parent.send(new lt(this.id, n)), n.handler = i, o;
-    }), a(this, "dispose", () => {
-      this.isInitiated && this.send(new R("dispose")), super.dispose();
-    });
-  }
-  hide() {
-    this.send(new R("hide"));
-  }
-  show() {
-    this.send(new R("show"));
-  }
-  inspect() {
-    return this.send(new R("inspect"));
-  }
-  setHeightBasedOnDocumentElement() {
-    this.send(new R("setHeightBasedOnDocumentElement"));
-  }
-  setHeightBasedOnScrollHeight() {
-    this.send(new R("setHeightBasedOnScrollHeight"));
-  }
-  onMessageReceived(e) {
-    return super.onMessageReceived(e);
-  }
-}, Qs = (e, t, s) => {
-  const n = document.createElement("a");
-  return n.textContent = e, n.style.position = "relative", n.style.padding = "0 5px", n.style.fontSize = "14px", n.style.top = "0", n.style.top = `${t}px`, n.style.transform = "translateX(-50%)", n.target = "_blank", n.href = `https://dashboard.myop.dev/dashboard/component/${s.id}`, n;
-}, vt = (e, t, s, n, i, o) => {
-  const r = Qs(`${o.name} : ${t}`, s, o);
-  return n.insertBefore(r, i), i.style.border = "1px solid #007BFF", i.style.display = "block", () => {
-    i.style.border = "unset", n.removeChild(r);
-  };
-}, Zs = (e, t) => {
-  const s = t.reduce((i, o) => G(v({}, i), {
-    [o.name]: v({}, o)
-  }), {}), n = {
-    get: (i, o) => {
-      const r = s[o];
-      return r.mode === "output" ? new Promise((l) => {
-        const c = [];
-        r.behavior.ref && c.push(z.create(r.behavior.ref)), c.push((u) => {
-          l(u);
-        }), r.behavior.params && c.push(...r.behavior.params);
-        const d = me[r.behavior.message];
-        e.send(new d(...c));
-      }) : null;
-    },
-    set: (i, o, r) => {
-      const l = s[o];
-      if (!l)
-        throw new Error(
-          `Error: Undefined Prop
-
-It looks like you've tried to use a prop that hasn't been defined.
-Please check the prop name for any typos or ensure that it is properly defined in the component's prop list.
-
-Prop Name: ${o}
-Component: ${e.componentDefinition.name}, ID: ${e.componentDefinition.id}
-
-For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/${e.componentDefinition.id} or consult the developer guide.`
+        }), we = await Te.loadComponent(
+          st,
+          l.value,
+          it
         );
-      if (l.mode === "input")
-        if (l.behavior.type === "message") {
-          const c = [];
-          l.behavior.ref && c.push(z.create(l.behavior.ref)), c.push(r), l.behavior.params && c.push(...l.behavior.params);
-          const d = me[l.behavior.message];
-          return e.send(new d(...c)), !0;
-        } else
-          throw new Error(
-            `Error: Unsupported Behavior
-
-The 'behavior' field provided is not supported.
-Component: ${e.componentDefinition.name}, ID: ${e.componentDefinition.id}
-
-Prop Name: ${o}
-Behavior Field: ${l.behavior.type}
-
-Check the documentation for valid behavior options.`
-          );
-      return !1;
-    }
-  };
-  return e.props = {}, e.props = new Proxy(e.props, n), e;
-}, en = (e, t) => new Proxy(e, {
-  get(s, n) {
-    return s[n] ? s[n] : (...o) => new Promise((r) => {
-      o.forEach((l) => {
-        yt(l) || Xs.notSerializableRefCall(n, l);
-      }), t.send(new ge(
-        ({ ref: l, propName: c, functionArgs: d, makeSerializable: u }) => {
-          if (l) {
-            const h = l[c];
-            return u(typeof h == "function" ? l[c](...d) : h, !0);
-          }
-          return null;
-        },
-        {
-          //TODO : turn it to config
-          elementId: s.refConfig.selector,
-          propName: n,
-          functionArgs: o
-        },
-        (l) => {
-          r(l.content);
+        if (f) {
+          we.dispose();
+          return;
         }
-      ));
-    });
-  },
-  set(s, n, i) {
-    return t.send(new ge(
-      ({ ref: o, propName: r, propValue: l }) => {
-        o && (o[r] = l);
-      },
-      {
-        //TODO : fix that
-        elementId: s.refConfig.selector,
-        propValue: i,
-        propName: n
-      },
-      (o) => {
-      }
-    )), !0;
-  }
-}), wt = (e, t, s, n) => m(void 0, null, function* () {
-  const i = e.component;
-  if (!i)
-    throw new Error("cant createRefComponent with detached ref");
-  return new Promise((o, r) => m(void 0, null, function* () {
-    const l = new Ve(t.type, i, n);
-    s.push(l), yield i.initiated();
-    const c = setTimeout(() => {
-      r("timeout");
-    }, 5e3);
-    i.send(new at(
-      e.refConfig,
-      t,
-      G(v({}, n || {}), {
-        id: l.id,
-        _hasParent: !0
-      }),
-      (d) => m(void 0, null, function* () {
-        if (clearTimeout(c), d.failed) {
-          r("CreateRefComponentMessage failed");
+        if (c.value = Ie(we), await c.value.initiated(), f) {
+          (N = c.value) == null || N.dispose();
           return;
         }
-        const u = s.find((h) => h.id == l.id);
-        if (u !== l) {
-          i.refs[e.refConfig.name] = u, o(u);
+        if (await new Promise((j) => requestAnimationFrame(j)), f || !c.value || c.value.markedForDisposed) {
+          c.value && !c.value.markedForDisposed && c.value.dispose();
           return;
-        } else
-          l.setInitiated(), i.refs[e.refConfig.name] = l;
-        d.nestedRefs.forEach((h) => {
-          const f = t.instance.resolvedNestedComponents.find((M) => M.type.id === h.componentDefinitionId).type, y = new Ve(f, l);
-          y.setInitiated(), l.refs[h.refName] = y, s.push(y);
-        });
-        try {
-          yield Mt(l, t, s, !0), i.setHeightBasedOnScrollHeight && i.setHeightBasedOnScrollHeight(), o(l);
-        } catch (h) {
-          r(h);
         }
-      })
-    ));
-  }));
-}), Mt = (e, t, s, n = !1) => m(void 0, null, function* () {
-  e.refs || (e.refs = {});
-  const i = Object.values(e.componentDefinition.refs).map((o) => new Promise((r, l) => m(void 0, null, function* () {
-    var c;
-    if (o.behavior.type == Te.component) {
-      if (n) {
-        r();
-        return;
-      }
-      let d = o.behavior.componentId;
-      d || (d = o.behavior.instance.componentId);
-      const u = (c = t.instance.resolvedNestedComponents) == null ? void 0 : c.find((f) => f.type.id === d);
-      if (!u)
-        throw new Error("componentConfig provided without nestedComponentConfig check the config object");
-      const h = z.create("", o, e);
-      try {
-        const f = yield wt(h, u, s);
-        e.refs[o.name] = f, r();
-      } catch (f) {
-        l(f);
-      }
-    } else
-      try {
-        const d = z.create("", o, e);
-        e.refs[o.name] = en(d, e), r();
-      } catch {
-      }
-  })));
-  try {
-    yield Promise.all(i);
-  } catch (o) {
-    throw o;
-  }
-}), _t = class extends Se {
-  constructor(e, t, s, n, i) {
-    super(e, s, i), this.componentConfig = e, this.container = s, this.IframeElement = n, a(this, "cleanupInspect"), a(this, "setHeightBasedOnDocumentElement", () => {
-      const o = this.send(new H(() => window.document.documentElement.scrollHeight, (r) => {
-        this.IframeElement.style.height = `${r.content}px`, o();
-      }));
-    }), a(this, "observeSizeBasedOnDocumentElement", () => {
-      this.send(new H(({ send: o }) => {
-        const { height: r, width: l } = document.documentElement.getBoundingClientRect(), c = new ResizeObserver(() => {
-          const { height: d, width: u } = document.documentElement.getBoundingClientRect();
-          o({ height: d, width: u });
-        });
-        return c.observe(document.documentElement), c.observe(document.body), { height: r, width: l };
-      }, (o) => {
-        this.IframeElement.style.width = `${o.content.width}px`, this.IframeElement.style.height = `${o.content.height}px`;
-      }));
-    }), a(this, "setSizeBasedOnDocumentElement", () => {
-      const o = this.send(new H(() => {
-        const { height: r, width: l } = document.documentElement.getBoundingClientRect();
-        return { height: r, width: l };
-      }, (r) => {
-        this.IframeElement.style.width = `${r.content.width}px`, this.IframeElement.style.height = `${r.content.height}px`, o();
-      }));
-    }), a(this, "setHeightBasedOnScrollHeight", () => {
-      const o = this.send(new H(() => {
-        let l = 0;
-        return l++, l--, Math.max(
-          Math.max(
-            window.document.body.clientHeight,
-            window.document.body.scrollHeight
-          ),
-          window.document.body.offsetHeight
-        ) + l + "px";
-      }, (r) => {
-        this.IframeElement.style.height = r.content, o();
-      }));
-    }), a(this, "send", (o) => {
-      var r, l;
-      let c = v({}, o);
-      if (c.messageType === g.ExecuteComponentMethod)
-        return this[c.method](), () => {
-        };
-      c.direction = b.down;
-      const d = super.send(c);
-      return (l = (r = this.IframeElement) == null ? void 0 : r.contentWindow) == null || l.postMessage(c, "*"), d;
-    }), a(this, "dispose", () => {
-      this.cleanupInspect && this.cleanupInspect(), super.dispose(), this.IframeElement.parentNode.removeChild(this.IframeElement);
-    }), t.loader.autoHeight && this.initiated().then(() => {
-      this.setHeightBasedOnScrollHeight();
-    }), this.element = this.IframeElement;
-  }
-  inspect() {
-    return this.cleanupInspect ? this.cleanupInspect : (this.cleanupInspect = vt(this.id, "MyopIframeComponent", 10, this.container, this.IframeElement, this.componentDefinition), () => {
-      this.cleanupInspect(), this.cleanupInspect = void 0;
-    });
-  }
-  hide() {
-    this.IframeElement.style.opacity = "0", this.IframeElement.style.position = "absolute", this.IframeElement.style.pointerEvents = "none", this.IframeElement.style.visibility = "hidden";
-  }
-  show() {
-    this.IframeElement.style.opacity = "1", this.IframeElement.style.position = "unset", this.IframeElement.style.pointerEvents = "all", this.IframeElement.style.visibility = "visible";
-  }
-  onMessageReceived(e) {
-    return e.messageType === g.In.MutationObserverMessage || e.messageType === g.In.ResizeObserverMessage ? (this.setHeightBasedOnScrollHeight(), !0) : super.onMessageReceived(e);
-  }
-}, xe = class {
-  constructor() {
-    a(this, "appendChild", (e, t, s) => {
-      var n;
-      if (s != null && s.relative) {
-        if (s.relative.direction === "before")
-          return e.insertBefore(t, s.relative.child);
-        if (s.relative.direction === "after") {
-          const i = (n = s.relative.child) == null ? void 0 : n.nextSibling;
-          return e.insertBefore(t, i || null);
+        F.value = !0, i.autoSize || se(), (L = c.value) != null && L.props && (c.value.props.myop_cta_handler = (j, Oe) => {
+          i.on && i.on(j, Oe), a("cta", j, Oe);
+        }), a("load", c.value);
+      } catch (m) {
+        f || ie((m == null ? void 0 : m.message) || "Unknown error");
+      } finally {
+        if (oe.value = !1, P.value !== null && !f) {
+          const m = P.value;
+          P.value = null, await le(m);
         }
-      } else
-        return e.appendChild(t);
-    });
-  }
-}, tn = (e, t, s) => {
-  const n = new URL(e);
-  return n.searchParams.append(t, s), n.toString();
-}, sn = class extends xe {
-  constructor() {
-    super(...arguments), a(this, "type", Ie.IframeLoader), a(this, "load", (e, t, s, n) => m(this, null, function* () {
-      let i;
-      const o = t.loader;
-      if ((s == null ? void 0 : s.nodeName) === "IFRAME")
-        console.log("needs to load into an exsisting Iframe...", o.url, s), i = s, i.src = o.url;
-      else {
-        const r = B(), l = `myop-comp-${r}`;
-        i = document.createElement("iframe"), s.querySelector('[id^="myop-comp-"]') || (s.innerHTML = ""), n != null && n.hidden && (i.style.visibility = "hidden"), i = this.appendChild(s, i, n);
-        let c = t.loader.url;
-        n != null && n._hasParent && (c = tn(c, "_myop-comp", r));
-        let d = "";
-        n != null && n.elementAttributes && (d = Object.entries(n == null ? void 0 : n.elementAttributes).map(([u, h]) => h === "" || h === null || h === void 0 ? u : `${u}="${String(h)}"`).join(" ")), i.outerHTML = `<iframe 
-               id="${l}"
-               style="
-                   padding: 0;
-                   margin: 0;
-                   height: ${o.autoHeight || !o.height ? "" : o.height};    
-                   width : 100%;
-                   overflow: hidden;
-                   border: none;
-                   opacity: ${n != null && n.hidden ? "0" : "1"};
-                   position: ${n != null && n.hidden ? "absolute" : "static"};
-                   pointer-events: ${n != null && n.hidden ? "none" : "all"};
-               "
-            src="${c}"
-            ${d}
-            ></iframe>`, i = s.querySelector(`#${l}`);
-      }
-      return new _t(e, t, s, i, n);
-    }));
-  }
-}, Et = {
-  webcomponent_message_key: "myop_webcomponent_message"
-}, bt = class extends Se {
-  constructor(e, t, s, n, i) {
-    super(e, s, i), this.container = s, this.customElement = n, a(this, "cleanupInspect", () => {
-    }), a(this, "send", (o) => {
-      let r = v({}, o);
-      const l = super.send(r), c = new CustomEvent(Et.webcomponent_message_key, {
-        // @ts-ignore
-        detail: r
-        // bubbles: true,
-        // cancelable: false,
-        // composed: true
-      });
-      try {
-        this.customElement.dispatchEvent(c);
-      } catch (d) {
-        console.log("error while trying to dispatchEvent", d);
       }
-      return l;
-    }), a(this, "dispose", () => {
-      var o;
-      super.dispose(), (o = this.customElement.parentNode) == null || o.removeChild(this.customElement);
-    }), this.element = n;
-  }
-  inspect() {
-    return this.cleanupInspect = vt(this.id, "MyopWebComponent", 0, this.container, this.customElement, this.componentDefinition), this.cleanupInspect;
-  }
-  hide() {
-    this.customElement.style.opacity = "0", this.customElement.style.position = "absolute", this.customElement.style.pointerEvents = "none", this.customElement.style.visibility = "hidden", this.customElement.style.height = "0", this.customElement.style.width = "0";
-  }
-  show() {
-    this.customElement.style.opacity = "1", this.customElement.style.position = "unset", this.customElement.style.pointerEvents = "all", this.customElement.style.visibility = "visible", this.customElement.style.height = "", this.customElement.style.width = "";
-  }
-}, ce = {}, nn = class extends xe {
-  constructor() {
-    super(...arguments), a(this, "type", Ie.WebComponentLoader), a(this, "load", (e, t, s, n) => m(this, null, function* () {
-      const i = t.loader;
-      ce[i.url] ? console.log("Module alreday loaded or in loading process") : ce[i.url] = new Promise((l, c) => {
-        const d = i.url, u = document.createElement("script");
-        u.type = "module", u.src = d, u.onload = () => {
-          l();
-        }, u.onerror = () => {
-          c();
-        }, document.head.appendChild(u);
-      }), yield ce[i.url], yield Is(1);
-      let o = `myop-comp-${B()}`;
-      const r = document.createElement(i.tag);
-      return s.querySelector('[id^="myop-comp-"]') || (s.innerHTML = ""), r.id = o, n != null && n.hidden && (r.style.opacity = "0", r.style.position = "absolute", r.style.height = "0", r.style.width = "0", r.style.pointerEvents = "none", r.style.visibility = "hidden"), n != null && n._environment && (r._myopEnvironment = n == null ? void 0 : n._environment), this.appendChild(s, r, n), new bt(e, t, s, r, n);
-    }));
-  }
-}, on = "0.1.42", x = class extends js {
-  constructor(e, t) {
-    super(e), this.context = t, a(this, "executor", (s) => {
-      if (s.destination) {
-        const n = s.destination;
-        if (this.context[n].context) {
-          const i = (o, r) => {
-            this.messageToHost(G(v({}, o), {
-              source: s.destination ? s.destination : s.source,
-              destination: s.source ? s.source : s.destination
-            }), r);
-          };
-          return this.innerExecutor(s, this.context[n].context, i);
-        } else
-          debugger;
-      } else
-        debugger;
-    });
-  }
-}, q = {
-  id: "myop-id"
-}, V = (e, t) => t.querySelectorAll(`[${q.id}='${e.refConfig.selector}']`), rn = class extends x {
-  constructor() {
-    super(...arguments), a(this, "messageType", g.BindClickMessage), a(this, "innerExecutor", (e, t, s) => {
-      const n = V(e.ref, t.shadowRoot), i = [];
-      return n.forEach((o) => {
-        const r = () => {
-          s(new Ye(e.handlerUniqueId));
-        };
-        o.addEventListener("click", r), i.push(() => {
-          o.removeEventListener("click", r);
-        });
-      }), () => {
-        i.forEach((o) => o());
+      return () => {
+        f = !0;
       };
-    });
-  }
-}, an = class extends x {
-  constructor() {
-    super(...arguments), a(this, "messageType", g.ChangeTextMessage), a(this, "innerExecutor", (e, t) => {
-      V(e.ref, t.shadowRoot).forEach((n) => {
-        n.textContent = e.content;
-      });
-    });
-  }
-}, ln = class extends Js {
-  constructor(e, t) {
-    super(e, t), this.container = e, this.shadowRoot = t;
-  }
-}, cn = class extends x {
-  constructor() {
-    super(...arguments), a(this, "innerExecutor", (e, t) => {
-      const s = t.shadowRoot.querySelectorAll(`[${q.id}]`);
-      let n = [];
-      s.forEach((i) => {
-        const o = i.getAttribute(q.id);
-        o && n.push(new Us(o, i.tagName, i.getBoundingClientRect(), i.offsetTop, i.offsetLeft));
-      }), this.messageToHost(new dt(e.handlerUniqueId, n));
-    }), a(this, "messageType", g.DetectMyopRefsMessage);
-  }
-}, dn = class extends x {
-  constructor() {
-    super(...arguments), a(this, "messageType", g.SetAttributeMessage), a(this, "innerExecutor", (e, t) => {
-      V(e.ref, t.shadowRoot).forEach((n) => {
-        n.setAttribute(e.name, e.value);
-      });
-    });
-  }
-}, un = class extends x {
-  constructor() {
-    super(...arguments), a(this, "messageType", g.AddEventListenerMessage), a(this, "innerExecutor", (e, t, s) => {
-      const n = V(e.ref, t.shadowRoot), i = [];
-      return n.forEach((o) => {
-        const r = (l) => {
-          s(new tt(e.handlerUniqueId, L(l, e.serializableSkeleton)));
-        };
-        o.addEventListener(e.type, r), i.push(() => {
-          o.removeEventListener(e.type, r);
-        });
-      }), () => {
-        i.forEach((o) => o());
-      };
-    });
-  }
-}, hn = class extends x {
-  constructor() {
-    super(...arguments), a(this, "messageType", g.CreateRefComponentMessage), a(this, "innerExecutor", (e, t, s) => {
-      m(this, null, function* () {
-        const i = t.shadowRoot.querySelectorAll(`[${q.id}='${e.refConfig.selector}']`);
-        if (i.length === 1) {
-          const o = oe.Instance(), r = o.components.find((u) => u.id === e.options.id);
-          r && r.dispose();
-          const l = o.components.indexOf(r);
-          l !== -1 && o.components.splice(l, 1);
-          const c = yield o.loadComponent(
-            e.nestedComponentConfig,
-            i.item(0),
-            e.options
-          ), d = [];
-          Object.keys(c.refs).forEach((u) => {
-            let h = c.refs[u];
-            h = h.__nonProxied || h, h.componentDefinition && d.push({
-              refName: u,
-              componentDefinitionId: h.componentDefinition.id
-            });
-          }), s(new ye(e.handlerUniqueId, d));
-        } else {
-          console.error("CreateRefComponentMessageHandler - DOM element not found"), this.messageToHost(new ye(e.handlerUniqueId, [], !0));
-          debugger;
-        }
-      }).then();
-    });
-  }
-}, pn = (e, t, s) => {
-  const n = e.scriptInputs ? e.scriptInputs : {};
-  n.makeSerializable = L, n.send = t, n.rootRef = s, n.__scriptInputs = n;
-  const o = new Function(`return (${e.script})(...arguments)`)(n);
-  t(o);
-}, fn = class extends x {
-  constructor() {
-    super(...arguments), a(this, "messageType", g.ExecuteScriptMessage), a(this, "innerExecutor", (e, t, s) => {
-      pn(e, (i) => {
-        s(new Ze(e.handlerUniqueId, i));
-      }, t);
-    });
-  }
-}, Ct = (e) => {
-  if (!e) return null;
-  if (e.tagName === "FORM") {
-    new FormData(e);
-    const t = {
-      formData: {},
-      unmappedData: []
-    };
-    return e.querySelectorAll("input, select, textarea").forEach((n) => {
-      if (typeof n.value == "string") {
-        const i = n.getAttribute(q.id);
-        let o = n.getAttribute("name");
-        const r = {
-          id: n.id,
-          name: o,
-          value: Ct(n),
-          required: n.required,
-          validity: L(n.validity, !0),
-          myopId: i
-        };
-        o ? t.formData[o] ? t.formData[o].value ? t.unmappedData.push(r) : (t.unmappedData.push(t.formData[o]), t.formData[o] = r) : t.formData[o] = r : t.unmappedData.push(r);
-      }
-    }), t;
-  }
-  return e.type === "checkbox" || e.type === "radio" ? e.checked ? e.value : null : e.tagName === "INPUT" || e.tagName === "TEXTAREA" || e.tagName === "SELECT" ? e.value : e.isContentEditable ? e.innerText || e.textContent : null;
-}, mn = class extends x {
-  constructor() {
-    super(...arguments), a(this, "messageType", g.GetElementValueMessage), a(this, "innerExecutor", (e, t, s) => {
-      V(e.ref, t.shadowRoot).forEach((i) => {
-        s(new nt(Ct(i)), e);
-      });
-    });
-  }
-}, gn = class extends x {
-  constructor() {
-    super(...arguments), a(this, "messageType", g.SetInnerHtml), a(this, "innerExecutor", (e, t) => {
-      V(e.ref, t.shadowRoot).forEach((n) => {
-        n.innerHTML = e.content;
-      });
-    });
-  }
-}, St = class extends Gs {
-  constructor() {
-    super(...arguments), a(this, "alwaysPassEnvelopesToHost", !0), a(this, "connectedCallback", (e, t) => {
-      e.addEventListener(Et.webcomponent_message_key, (s) => {
-        const n = s.data ? s.data : s.detail;
-        if (!n || !n.myop) {
-          debugger;
-          throw new Error("recvied webcomponent_message with wrong type");
-        } else {
-          const i = n;
-          if (this.handleIncomeMessages(s), i.messageType === g.InitMessage) {
-            const o = i.content.id;
-            this.components[o].context = new ln(e, t);
-          }
+    }, tt = () => {
+      var f;
+      if (!F.value || !((f = c.value) != null && f.observeAutoSize))
+        return;
+      let u = !0;
+      R = c.value.observeAutoSize({
+        explicitWidth: void 0,
+        explicitHeight: void 0,
+        forceAutoSize: i.autoSize,
+        loaderMinHeight: 50,
+        onSizeChange: (N) => {
+          a("sizeChange", N), I.value = N, u && (u = !1, se());
         }
-      }), setTimeout(() => {
-        this.messageToHost(new ot());
-      }, 1);
-    }), a(this, "messageToHost", (e, t) => {
-      e.direction = b.up, !e.replayToHandler && (t != null && t.handlerUniqueId) && (e.replayToHandler = t.handlerUniqueId), window.myop.hostSDK.send(e);
-    }), a(this, "supportedHandlers", [
-      new an(this.messageToHost, this.components),
-      new gn(this.messageToHost, this.components),
-      new rn(this.messageToHost, this.components),
-      new cn(this.messageToHost, this.components),
-      new dn(this.messageToHost, this.components),
-      new un(this.messageToHost, this.components),
-      new fn(this.messageToHost, this.components),
-      new mn(this.messageToHost, this.components),
-      //
-      new hn(this.messageToHost, this.components)
-    ]), a(this, "init", () => {
-    });
-  }
-};
-We("WebComponentSDK", St);
-var Ke = [], Y, It = () => m(void 0, null, function* () {
-  return Y || (Y = new St(), Y.init()), Y;
-});
-function yn(e, t) {
-  return class extends HTMLElement {
-    connectedCallback() {
-      const s = t === ve.open ? "open" : "closed", n = this.attachShadow({ mode: s });
-      It().then((i) => {
-        i.connectedCallback(this, n), n.innerHTML = e;
       });
-    }
-  };
-}
-var vn = (e, t, s) => {
-  customElements.define(e, yn(t, s)), console.log(`define('${e}') was called, web component ready to use`);
-}, wn = (e) => e.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/(\d+)/g, "-$1").toLowerCase(), Mn = (e) => (e = wn(e), e.replace(/_/g, "-")), _n = class extends xe {
-  constructor() {
-    super(...arguments), a(this, "type", Ie.HTMLLoader), a(this, "load", (e, t, s, n) => m(this, null, function* () {
-      const i = t.loader;
-      let o = `myop-comp-${B()}`, r;
-      if (i.shadowRootMode === ve.localFrame) {
-        const c = `myop-comp-${B()}`;
-        let d = document.createElement("iframe");
-        s.querySelector('[id^="myop-comp-"]') || (s.innerHTML = ""), n != null && n.hidden && (d.style.visibility = "hidden"), d = this.appendChild(s, d, n), d.id = c, d.setAttribute("style", `
-                   padding: 0;
-                   margin: 0;
-                   overflow: hidden;
-                   border: none;
-                   opacity: ${n != null && n.hidden ? "0" : "1"};
-                   width: 100%;
-                   height: 100%;
-                   position: ${n != null && n.hidden ? "absolute" : "static"};
-                   pointer-events: ${n != null && n.hidden ? "none" : "all"};
-               `), s.appendChild(d);
-        const u = d.contentDocument || d.contentWindow.document;
-        u.open();
-        let h = i.HTML;
-        if (n != null && n._inspection) {
-          const M = new DOMParser().parseFromString(i.HTML, "text/html"), Ne = M.implementation.createHTMLDocument();
-          Ne.body.innerHTML = `<script>
-                        const beforeKeysWindow = new Set(Object.keys(window));
-                        window.myopState = {
-                            beforeKeysWindow,
-                        };
-                <\/script>`;
-          const Fe = Ne.body.firstChild;
-          Fe && M.head && M.head.insertBefore(M.importNode(Fe, !0), M.head.firstChild), h = M.documentElement.outerHTML;
-        }
-        u.writeln(h), u.writeln(`<script src="${window.myop.__ROOT_SDK_PUBLIC_URL__}"><\/script>
-                    <script>
-                    window.__federation__ = 
-                    { ...window.__federation__,
-                    //TODO : get from ENV at build time, 
-                    // inject value to module at build time 
-                    // today we doing so just for the CJS version 
-                    __public_path__ :'https://cdn.myop.dev/sdk/next',
-                     ...${JSON.stringify(
-          // @ts-ignore
-          window.__federation__
-        )}};
-                        const init = async () => {
-                            const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());
-                            const sdk = new IframeSDK()
-                            sdk.init();
-                        }
-                        init().then();
-              <\/script>`), u.close();
-        const f = new _t(e, t, s, d, n);
-        return d.onload = () => {
-          f.observeSizeBasedOnDocumentElement();
-        }, f;
-      }
-      if (i.shadowRootMode === ve.none) {
-        const l = document.createElement("template");
-        l.innerHTML = i.HTML, r = l.content.firstElementChild, It().then((c) => {
-          c.connectedCallback(r, r);
-        });
-      } else {
-        const l = Mn(e.name + t.id);
-        Ke.includes(l) || (vn(l, i.HTML, i.shadowRootMode), Ke.push(l)), r = document.createElement(l);
+    };
+    ae(
+      () => i.componentId,
+      async (u, f) => {
+        u !== f && (re.value = !1, F.value = !1, E.value = !1, g.value = !0, V.value = 1, c.value && (c.value.dispose(), c.value = null), R && (R(), R = null), oe.value ? P.value = { ...i } : await le(i));
       }
-      return s.querySelector('[id^="myop-comp-"]') || (s.innerHTML = ""), r.id = o, n != null && n.hidden && (r.style.opacity = "0", r.style.position = "absolute", r.style.height = "0", r.style.width = "0", r.style.pointerEvents = "none", r.style.visibility = "hidden"), this.appendChild(s, r, n), new bt(e, t, s, r, n);
-    }));
-  }
-}, Me = class {
-  // private components: Record<string, Promise<IUserFlow>> = {};
-  constructor(t = "https://cloud.myop.dev") {
-    this._baseUrl = t, a(this, "userFlows", {});
-  }
-  fetchComponent(t, s) {
-    return m(this, null, function* () {
-      return s ? (yield this.fetchFlow(s)).components.find((i) => i.type.id === t) : (yield this.fetchAutoFlow(t)).components[0];
-    });
-  }
-  fetchAutoFlow(t) {
-    return m(this, null, function* () {
-      return this.userFlows[t] || (this.userFlows[t] = new Promise(
-        (s, n) => m(this, null, function* () {
-          try {
-            const o = yield (yield fetch(
-              `${this._baseUrl}/flow?id=${t}&auto=true`
-            )).json();
-            s(o.item);
-          } catch (i) {
-            n(i);
+    ), ae(
+      () => i.data,
+      (u) => {
+        var f;
+        if (F.value && u !== void 0 && c.value) {
+          if (!re.value) {
+            re.value = !0;
+            return;
           }
-        })
-      )), yield this.userFlows[t];
-    });
-  }
-  fetchFlow(t) {
-    return m(this, null, function* () {
-      return this.userFlows[t] || (this.userFlows[t] = new Promise(
-        (s, n) => m(this, null, function* () {
-          try {
-            const o = yield (yield fetch(
-              `${this._baseUrl}/flow?id=${t}&resolve=components`
-            )).json();
-            s(o.item);
-          } catch (i) {
-            n(i);
+          const N = (f = c.value.props) == null ? void 0 : f.myop_init_interface;
+          if (N) {
+            const L = JSON.parse(JSON.stringify(u));
+            N(L);
           }
-        })
-      )), yield this.userFlows[t];
-    });
-  }
-};
-a(Me, "Main", new Me());
-var En = Me, bn = (e) => m(void 0, null, function* () {
-  try {
-    const t = new URL(window.location.href), n = new URLSearchParams(t.search).get("myopOverride");
-    if (n) {
-      const [i, o] = Ss(n), l = (yield En.Main.fetchFlow(i)).components.find((c) => c.type.id === e.type.id);
-      if (l && l.instance.skinSelector.type === Q.Segmented && l.instance.resolvedExperiences) {
-        const c = l.instance.resolvedExperiences.find((d) => d.id === o);
-        if ((c == null ? void 0 : c.type) === gt.Segment) {
-          const d = c, h = l.instance.skinSelector.segments.find((f) => f.segmentId === d.segment.id);
-          if (h)
-            return l.instance.skinSelector = h == null ? void 0 : h.skinSelector, l;
         }
+      },
+      { deep: !0 }
+    ), ae(
+      () => F.value,
+      (u) => {
+        u && i.autoSize && tt();
       }
-    }
-  } catch {
-    return null;
-  }
-}), Tt = "https://cdn.myop.dev/sdk/next/myop_sdk.min.js", oe = class {
-  constructor() {
-    a(this, "components2init", []), a(this, "components", []), a(this, "componentsLoaders", []), a(this, "initiated", !1), a(this, "version", on), a(this, "type2InstanceCount", {}), a(this, "assignId", (e) => (this.type2InstanceCount[e.id] || (this.type2InstanceCount[e.id] = 0), `${e.id}_${++this.type2InstanceCount[e.id]}`)), a(this, "inspected", !1), a(this, "inspect", () => {
-      this.inspected || (this.inspected = !0, this.components.forEach((e) => {
-        e.inspect && e.inspect();
-      }));
-    }), a(this, "incomingMessageHandler", (e) => {
-      if (e.origin, document.location.origin, e.data.myop) {
-        if (e.data.direction !== b.up && e.data.messageType !== g.EnvelopedMessage)
-          return;
-        const t = e.data;
-        if (t.messageType === g.InitRequest) {
-          this.components2init.forEach((n) => {
-            n.send(new Ce(n.id));
-          });
-          return;
-        }
-        if (t.messageType === g.InitResponse) {
-          this.components2init = this.components2init.filter((i) => i.id !== t.content.id);
-          const n = this.components.find((i) => {
-            var o;
-            return i.id === ((o = t.content) == null ? void 0 : o.id);
-          });
-          n == null || n.setInitiated();
-          return;
-        }
-        if (t.messageType === g.EnvelopedMessage) {
-          const n = t, i = this.components.find((o) => o.id === n.destination);
-          if (i) {
-            if (n.direction === b.down) {
-              n.message.messageType === R.name ? i.onMessageReceived(n.message) : (n.message.route = n.route, i.send(n.message));
-              return;
-            }
-          } else {
-            const o = this.components.find((r) => r.id === n.message.destination);
-            o && o.send(n.message);
-          }
-          return;
-        }
-        const s = this.components.find((n) => n.id === t.destination);
-        if (!s) {
-          window.myop.IframeSDK && window.myop.IframeSDK.messageToHost(t);
-          return;
-        }
-        if (s) {
-          if (s.onMessageReceived(t))
-            return;
-          window.myop.IframeSDK && window.myop.IframeSDK.messageToHost(t);
-        }
-      }
-    }), a(this, "send", (e) => {
-      const t = new MessageEvent(
-        "",
-        { data: e }
-      );
-      this.incomingMessageHandler(t);
-    }), a(this, "init", (e) => {
-      if (this.initiated)
-        throw new Error("hostSDK already initiated");
-      const t = [
-        new sn(),
-        new nn(),
-        new _n()
-      ];
-      if (this.componentsLoaders = [
-        ...t
-      ], e) {
-        const s = {};
-        e.forEach((n) => {
-          const i = new n(this.componentsLoaders);
-          s[i.type] = i;
-        }), this.componentsLoaders.forEach((n) => {
-          s[n.type] || (s[n.type] = n);
-        }), this.componentsLoaders = Object.values(s);
-      }
-      window.addEventListener(
-        "message",
-        this.incomingMessageHandler,
-        !1
-      ), console.log("myop hostSDK initiated", document.location.href), this.initiated = !0;
-    }), a(this, "_getSkinIdBySkinSelector", (e, ...t) => m(this, [e, ...t], function* (s, n = [], i) {
-      var o;
-      function r(l, c) {
-        return m(this, null, function* () {
-          for (const d of l)
-            if (yield c(d))
-              return d;
-        });
-      }
-      switch (s.type) {
-        // @ts-ignore
-        case "DedicatedSkin":
-        //backward compatibility
-        case Q.Dedicated:
-          return ((o = s.skin) == null ? void 0 : o.id) || s.skins[0].id;
-        case Q.Segmented:
-          {
-            const c = yield r(s.segments, (d) => m(this, null, function* () {
-              if (d.segmentId === "Default")
-                return !0;
-              const u = n.find((M) => M.type === gt.Segment ? M.segment.id === d.segmentId : !1);
-              if (!u)
-                throw new Error("experience not found");
-              const f = u.segment, y = (i || {})[f.function];
-              return y ? yield y() : (console.warn(`segmentId:${d.segmentId}, ${f.function} function not provided !`), !1);
-            }));
-            if (c)
-              return this._getSkinIdBySkinSelector(c.skinSelector, n);
-            debugger;
-          }
-          break;
-        default:
-          debugger;
-      }
-      return "";
-    })), a(this, "runSkinSelector", (e, t) => m(this, null, function* () {
-      const s = yield this._getSkinIdBySkinSelector(e.instance.skinSelector, e.instance.resolvedExperiences, t);
-      return e.type.skins.find((n) => n.id === s);
-    })), a(this, "loaderHooks"), a(this, "loadComponent", (e, t, s) => m(this, null, function* () {
-      var n, i, o, r;
-      if (!t) {
-        debugger;
-        throw new Error("no container was found for this component");
-      }
-      const l = yield bn(e);
-      l && (e = l);
-      const c = t;
-      if (c.myop)
-        if (c.component) {
-          e = v({}, e), e.instance = v({}, e.instance);
-          const f = v(v({}, (n = this.loaderHooks) != null ? n : {}), (i = s == null ? void 0 : s.hooks) != null ? i : {});
-          let y = yield this.runSkinSelector(e, f);
-          if (!y)
-            throw new Error("runSkinSelector failed to choose skin, check the provided config");
-          return (o = s == null ? void 0 : s.hooks) != null && o.afterSkinSelected && (y = yield s.hooks.afterSkinSelected(v({}, y))), e.instance.skinSelector = {
-            type: Q.Dedicated,
-            skin: y
-            //  skins: [selectedSkin]
-          }, s && (s = v({}, s), delete s.hooks), yield wt(c, e, this.components, s);
-        } else
-          throw new Error("load component got a detached ref.");
-      t = t;
-      let d = yield this.runSkinSelector(e, s == null ? void 0 : s.hooks);
-      if (!d)
-        throw new Error("runSkinSelector failed to choose skin, check the provided config");
-      (r = s == null ? void 0 : s.hooks) != null && r.afterSkinSelected && (d = yield s.hooks.afterSkinSelected(v({}, d)));
-      const u = this.componentsLoaders.find((f) => f.type === d.loader.type);
-      if (!u) {
-        debugger;
-        throw new Error(`no loader "${d.loader.type}" was found for component`);
-      }
-      let h = yield u.load(e.type, d, t, s);
-      h.isInitiated || this.components2init.push(h), h.bind("onDispose", () => (this.components = this.components.filter((f) => f !== h), this.components2init = this.components2init.filter((f) => f !== h), !0)), this.components.push(h), s != null && s.connectProps && (h = Zs(h, e.type.props));
-      try {
-        yield Mt(h, e, this.components);
-      } catch (f) {
-        throw f;
-      }
-      return s != null && s.skipInit || (yield h.initiated()), h;
-    })), a(this, "navigate", (e, t, s) => m(this, null, function* () {
-      if (e.parent)
-        throw new Error("Navigating on remote ref components is not implemented yet");
-      if (s != null && s.staged) {
-        let n = yield this.loadComponent(t, e.container, v({
-          hidden: !0,
-          relative: { direction: "after", child: e.element }
-        }, s));
-        return s.init && (yield s.init(n)), n.show(), e.dispose(), n;
-      } else {
-        const n = e.element.nextSibling;
-        return e.dispose(), this.loadComponent(t, e.container, v({
-          relative: {
-            direction: "before",
-            child: n
-          }
-        }, s));
+    ), Re(async () => {
+      (i.componentId || i.componentConfig) && await le(i);
+    }), at(() => {
+      R && R(), c.value && c.value.dispose();
+    });
+    const Se = y(
+      () => {
+        var u, f;
+        return ((u = I.value) == null ? void 0 : u.autoSizingWidth) || ((f = I.value) == null ? void 0 : f.autoSizingHeight);
       }
+    ), be = y(() => g.value ? 50 : void 0), nt = y(() => {
+      var u, f;
+      return {
+        position: "relative",
+        width: (u = I.value) != null && u.autoSizingWidth ? `${I.value.width}px` : "100%",
+        height: (f = I.value) != null && f.autoSizingHeight ? `${I.value.height}px` : "100%",
+        minHeight: be.value ? `${be.value}px` : void 0,
+        overflow: Se.value ? "hidden" : "inherit"
+      };
+    }), ot = y(() => ({
+      position: "absolute",
+      inset: "0",
+      overflow: Se.value ? "hidden" : void 0
     }));
+    return t({
+      myopComponent: c,
+      isLoaded: F
+    }), (u, f) => (b(), A("div", {
+      style: W(nt.value)
+    }, [
+      $e("div", {
+        ref_key: "myopContainer",
+        ref: l,
+        style: W(ot.value)
+      }, null, 4),
+      g.value && r.value ? (b(), ke(Ct, {
+        key: 0,
+        opacity: V.value,
+        "fade-duration": e.fadeDuration
+      }, {
+        default: Ve(() => [
+          M(u.$slots, "loader")
+        ]),
+        _: 3
+      }, 8, ["opacity", "fade-duration"])) : pe("", !0),
+      E.value ? (b(), ke(Et, { key: 1 }, {
+        default: Ve(() => [
+          M(u.$slots, "fallback")
+        ]),
+        _: 3
+      })) : pe("", !0)
+    ], 4));
   }
-};
-a(oe, "Instance", () => window.myop.hostSDK);
-window.myop || (window.myop = {
-  __ROOT_SDK_PUBLIC_URL__: Tt
 });
-if (!window.myop.hostSDK) {
-  const e = new oe();
-  e.init(), window.myop || (window.myop = {
-    __ROOT_SDK_PUBLIC_URL__: Tt
-  }), window.myop.hostSDK = e;
-}
-var xt = window.myop.hostSDK;
-We("hostSDK", xt);
 /**
-* @vue/shared v3.5.17
+* @vue/shared v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-const Cn = process.env.NODE_ENV !== "production" ? Object.freeze({}) : {};
+const Nt = process.env.NODE_ENV !== "production" ? Object.freeze({}) : {};
 process.env.NODE_ENV !== "production" && Object.freeze([]);
-const Rt = () => {
-}, Sn = (e) => e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && // uppercase letter
-(e.charCodeAt(2) > 122 || e.charCodeAt(2) < 97), Re = Object.assign, C = Array.isArray, E = (e) => typeof e == "function", O = (e) => typeof e == "string", In = (e) => typeof e == "symbol", j = (e) => e !== null && typeof e == "object", Tn = (e) => (j(e) || E(e)) && E(e.then) && E(e.catch), kt = (e) => {
+const Ae = () => {
+}, St = (e) => e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && // uppercase letter
+(e.charCodeAt(2) > 122 || e.charCodeAt(2) < 97), ye = Object.assign, C = Array.isArray, _ = (e) => typeof e == "function", w = (e) => typeof e == "string", bt = (e) => typeof e == "symbol", H = (e) => e !== null && typeof e == "object", wt = (e) => (H(e) || _(e)) && _(e.then) && _(e.catch), Me = (e) => {
   const t = /* @__PURE__ */ Object.create(null);
-  return (s) => t[s] || (t[s] = e(s));
-}, xn = kt((e) => e.charAt(0).toUpperCase() + e.slice(1)), Rn = kt(
-  (e) => e ? `on${xn(e)}` : ""
+  return ((n) => t[n] || (t[n] = e(n)));
+}, Ot = Me((e) => e.charAt(0).toUpperCase() + e.slice(1)), kt = Me(
+  (e) => e ? `on${Ot(e)}` : ""
 );
-let Ue;
-const re = () => Ue || (Ue = typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : typeof window < "u" ? window : typeof global < "u" ? global : {});
-function ke(e) {
+let De;
+const ee = () => De || (De = typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : typeof window < "u" ? window : typeof global < "u" ? global : {});
+function _e(e) {
   if (C(e)) {
     const t = {};
-    for (let s = 0; s < e.length; s++) {
-      const n = e[s], i = O(n) ? On(n) : ke(n);
-      if (i)
-        for (const o in i)
-          t[o] = i[o];
+    for (let n = 0; n < e.length; n++) {
+      const o = e[n], s = w(o) ? Ft(o) : _e(o);
+      if (s)
+        for (const r in s)
+          t[r] = s[r];
     }
     return t;
-  } else if (O(e) || j(e))
+  } else if (w(e) || H(e))
     return e;
 }
-const kn = /;(?![^(]*\))/g, Hn = /:([^]+)/, Dn = /\/\*[^]*?\*\//g;
-function On(e) {
+const Vt = /;(?![^(]*\))/g, It = /:([^]+)/, Dt = /\/\*[^]*?\*\//g;
+function Ft(e) {
   const t = {};
-  return e.replace(Dn, "").split(kn).forEach((s) => {
-    if (s) {
-      const n = s.split(Hn);
-      n.length > 1 && (t[n[0].trim()] = n[1].trim());
+  return e.replace(Dt, "").split(Vt).forEach((n) => {
+    if (n) {
+      const o = n.split(It);
+      o.length > 1 && (t[o[0].trim()] = o[1].trim());
     }
   }), t;
 }
-function He(e) {
+function Ce(e) {
   let t = "";
-  if (O(e))
+  if (w(e))
     t = e;
   else if (C(e))
-    for (let s = 0; s < e.length; s++) {
-      const n = He(e[s]);
-      n && (t += n + " ");
+    for (let n = 0; n < e.length; n++) {
+      const o = Ce(e[n]);
+      o && (t += o + " ");
     }
-  else if (j(e))
-    for (const s in e)
-      e[s] && (t += s + " ");
+  else if (H(e))
+    for (const n in e)
+      e[n] && (t += n + " ");
   return t.trim();
 }
 /**
-* @vue/reactivity v3.5.17
+* @vue/reactivity v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-Symbol(
-  process.env.NODE_ENV !== "production" ? "Object iterate" : ""
-);
-Symbol(
-  process.env.NODE_ENV !== "production" ? "Map keys iterate" : ""
-);
-Symbol(
-  process.env.NODE_ENV !== "production" ? "Array iterate" : ""
-);
+process.env.NODE_ENV;
+process.env.NODE_ENV;
+process.env.NODE_ENV;
 new Set(
-  /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((e) => e !== "arguments" && e !== "caller").map((e) => Symbol[e]).filter(In)
+  /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((e) => e !== "arguments" && e !== "caller").map((e) => Symbol[e]).filter(bt)
 );
-function _e(e) {
+// @__NO_SIDE_EFFECTS__
+function de(e) {
   return e ? !!e.__v_raw : !1;
 }
-function ee(e) {
+// @__NO_SIDE_EFFECTS__
+function q(e) {
   const t = e && e.__v_raw;
-  return t ? ee(t) : e;
+  return t ? /* @__PURE__ */ q(t) : e;
 }
-function Ht(e) {
+// @__NO_SIDE_EFFECTS__
+function He(e) {
   return e ? e.__v_isRef === !0 : !1;
 }
 /**
-* @vue/runtime-core v3.5.17
+* @vue/runtime-core v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-const N = [];
-function $n(e) {
-  N.push(e);
-}
-function Nn() {
-  N.pop();
+const D = [];
+function Rt(e) {
+  D.push(e);
 }
-let de = !1;
-function $(e, ...t) {
-  if (de) return;
-  de = !0;
-  const s = N.length ? N[N.length - 1].component : null, n = s && s.appContext.config.warnHandler, i = Fn();
-  if (n)
-    ae(
+function $t() {
+  D.pop();
+}
+let ce = !1;
+function O(e, ...t) {
+  if (ce) return;
+  ce = !0;
+  const n = D.length ? D[D.length - 1].component : null, o = n && n.appContext.config.warnHandler, s = xt();
+  if (o)
+    te(
+      o,
       n,
-      s,
       11,
       [
         // eslint-disable-next-line no-restricted-syntax
-        e + t.map((o) => {
-          var r, l;
-          return (l = (r = o.toString) == null ? void 0 : r.call(o)) != null ? l : JSON.stringify(o);
+        e + t.map((r) => {
+          var i, a;
+          return (a = (i = r.toString) == null ? void 0 : i.call(r)) != null ? a : JSON.stringify(r);
         }).join(""),
-        s && s.proxy,
-        i.map(
-          ({ vnode: o }) => `at <${jt(s, o.type)}>`
+        n && n.proxy,
+        s.map(
+          ({ vnode: r }) => `at <${Ze(n, r.type)}>`
         ).join(`
 `),
-        i
+        s
       ]
     );
   else {
-    const o = [`[Vue warn]: ${e}`, ...t];
-    i.length && o.push(`
-`, ...Pn(i)), console.warn(...o);
+    const r = [`[Vue warn]: ${e}`, ...t];
+    s.length && r.push(`
+`, ...Tt(s)), console.warn(...r);
   }
-  de = !1;
+  ce = !1;
 }
-function Fn() {
-  let e = N[N.length - 1];
+function xt() {
+  let e = D[D.length - 1];
   if (!e)
     return [];
   const t = [];
   for (; e; ) {
-    const s = t[0];
-    s && s.vnode === e ? s.recurseCount++ : t.push({
+    const n = t[0];
+    n && n.vnode === e ? n.recurseCount++ : t.push({
       vnode: e,
       recurseCount: 0
     });
-    const n = e.component && e.component.parent;
-    e = n && n.vnode;
+    const o = e.component && e.component.parent;
+    e = o && o.vnode;
   }
   return t;
 }
-function Pn(e) {
+function Tt(e) {
   const t = [];
-  return e.forEach((s, n) => {
-    t.push(...n === 0 ? [] : [`
-`], ...Ln(s));
+  return e.forEach((n, o) => {
+    t.push(...o === 0 ? [] : [`
+`], ...At(n));
   }), t;
 }
-function Ln({ vnode: e, recurseCount: t }) {
-  const s = t > 0 ? `... (${t} recursive calls)` : "", n = e.component ? e.component.parent == null : !1, i = ` at <${jt(
+function At({ vnode: e, recurseCount: t }) {
+  const n = t > 0 ? `... (${t} recursive calls)` : "", o = e.component ? e.component.parent == null : !1, s = ` at <${Ze(
     e.component,
     e.type,
-    n
-  )}`, o = ">" + s;
-  return e.props ? [i, ...An(e.props), o] : [i + o];
+    o
+  )}`, r = ">" + n;
+  return e.props ? [s, ...Mt(e.props), r] : [s + r];
 }
-function An(e) {
-  const t = [], s = Object.keys(e);
-  return s.slice(0, 3).forEach((n) => {
-    t.push(...Dt(n, e[n]));
-  }), s.length > 3 && t.push(" ..."), t;
+function Mt(e) {
+  const t = [], n = Object.keys(e);
+  return n.slice(0, 3).forEach((o) => {
+    t.push(...ze(o, e[o]));
+  }), n.length > 3 && t.push(" ..."), t;
 }
-function Dt(e, t, s) {
-  return O(t) ? (t = JSON.stringify(t), s ? t : [`${e}=${t}`]) : typeof t == "number" || typeof t == "boolean" || t == null ? s ? t : [`${e}=${t}`] : Ht(t) ? (t = Dt(e, ee(t.value), !0), s ? t : [`${e}=Ref<`, t, ">"]) : E(t) ? [`${e}=fn${t.name ? `<${t.name}>` : ""}`] : (t = ee(t), s ? t : [`${e}=`, t]);
+function ze(e, t, n) {
+  return w(t) ? (t = JSON.stringify(t), n ? t : [`${e}=${t}`]) : typeof t == "number" || typeof t == "boolean" || t == null ? n ? t : [`${e}=${t}`] : /* @__PURE__ */ He(t) ? (t = ze(e, /* @__PURE__ */ q(t.value), !0), n ? t : [`${e}=Ref<`, t, ">"]) : _(t) ? [`${e}=fn${t.name ? `<${t.name}>` : ""}`] : (t = /* @__PURE__ */ q(t), n ? t : [`${e}=`, t]);
 }
-const De = {
+const ve = {
   sp: "serverPrefetch hook",
   bc: "beforeCreate hook",
   c: "created hook",
@@ -1828,264 +447,264 @@ const De = {
   15: "component update",
   16: "app unmount cleanup function"
 };
-function ae(e, t, s, n) {
+function te(e, t, n, o) {
   try {
-    return n ? e(...n) : e();
-  } catch (i) {
-    Oe(i, t, s);
+    return o ? e(...o) : e();
+  } catch (s) {
+    Ee(s, t, n);
   }
 }
-function Ot(e, t, s, n) {
-  if (E(e)) {
-    const i = ae(e, t, s, n);
-    return i && Tn(i) && i.catch((o) => {
-      Oe(o, t, s);
-    }), i;
+function Pe(e, t, n, o) {
+  if (_(e)) {
+    const s = te(e, t, n, o);
+    return s && wt(s) && s.catch((r) => {
+      Ee(r, t, n);
+    }), s;
   }
   if (C(e)) {
-    const i = [];
-    for (let o = 0; o < e.length; o++)
-      i.push(Ot(e[o], t, s, n));
-    return i;
-  } else process.env.NODE_ENV !== "production" && $(
+    const s = [];
+    for (let r = 0; r < e.length; r++)
+      s.push(Pe(e[r], t, n, o));
+    return s;
+  } else process.env.NODE_ENV !== "production" && O(
     `Invalid value type passed to callWithAsyncErrorHandling(): ${typeof e}`
   );
 }
-function Oe(e, t, s, n = !0) {
-  const i = t ? t.vnode : null, { errorHandler: o, throwUnhandledErrorInProduction: r } = t && t.appContext.config || Cn;
+function Ee(e, t, n, o = !0) {
+  const s = t ? t.vnode : null, { errorHandler: r, throwUnhandledErrorInProduction: i } = t && t.appContext.config || Nt;
   if (t) {
-    let l = t.parent;
-    const c = t.proxy, d = process.env.NODE_ENV !== "production" ? De[s] : `https://vuejs.org/error-reference/#runtime-${s}`;
-    for (; l; ) {
-      const u = l.ec;
-      if (u) {
-        for (let h = 0; h < u.length; h++)
-          if (u[h](e, c, d) === !1)
+    let a = t.parent;
+    const l = t.proxy, c = process.env.NODE_ENV !== "production" ? ve[n] : `https://vuejs.org/error-reference/#runtime-${n}`;
+    for (; a; ) {
+      const d = a.ec;
+      if (d) {
+        for (let g = 0; g < d.length; g++)
+          if (d[g](e, l, c) === !1)
             return;
       }
-      l = l.parent;
+      a = a.parent;
     }
-    if (o) {
-      ae(o, null, 10, [
+    if (r) {
+      te(r, null, 10, [
         e,
-        c,
-        d
+        l,
+        c
       ]);
       return;
     }
   }
-  Bn(e, s, i, n, r);
+  Ht(e, n, s, o, i);
 }
-function Bn(e, t, s, n = !0, i = !1) {
+function Ht(e, t, n, o = !0, s = !1) {
   if (process.env.NODE_ENV !== "production") {
-    const o = De[t];
-    if (s && $n(s), $(`Unhandled error${o ? ` during execution of ${o}` : ""}`), s && Nn(), n)
+    const r = ve[t];
+    if (n && Rt(n), O(`Unhandled error${r ? ` during execution of ${r}` : ""}`), n && $t(), o)
       throw e;
     console.error(e);
   } else {
-    if (i)
+    if (s)
       throw e;
     console.error(e);
   }
 }
-const _ = [];
-let S = -1;
-const A = [];
-let k = null, F = 0;
-const Vn = /* @__PURE__ */ Promise.resolve();
-let Ee = null;
-const Kn = 100;
-function Un(e) {
-  let t = S + 1, s = _.length;
-  for (; t < s; ) {
-    const n = t + s >>> 1, i = _[n], o = W(i);
-    o < e || o === e && i.flags & 2 ? t = n + 1 : s = n;
+const h = [];
+let v = -1;
+const T = [];
+let S = null, $ = 0;
+const zt = /* @__PURE__ */ Promise.resolve();
+let me = null;
+const Pt = 100;
+function Lt(e) {
+  let t = v + 1, n = h.length;
+  for (; t < n; ) {
+    const o = t + n >>> 1, s = h[o], r = z(s);
+    r < e || r === e && s.flags & 2 ? t = o + 1 : n = o;
   }
   return t;
 }
-function zn(e) {
+function jt(e) {
   if (!(e.flags & 1)) {
-    const t = W(e), s = _[_.length - 1];
-    !s || // fast path when the job id is larger than the tail
-    !(e.flags & 2) && t >= W(s) ? _.push(e) : _.splice(Un(t), 0, e), e.flags |= 1, $t();
+    const t = z(e), n = h[h.length - 1];
+    !n || // fast path when the job id is larger than the tail
+    !(e.flags & 2) && t >= z(n) ? h.push(e) : h.splice(Lt(t), 0, e), e.flags |= 1, Le();
   }
 }
-function $t() {
-  Ee || (Ee = Vn.then(Nt));
+function Le() {
+  me || (me = zt.then(je));
 }
-function qn(e) {
-  C(e) ? A.push(...e) : k && e.id === -1 ? k.splice(F + 1, 0, e) : e.flags & 1 || (A.push(e), e.flags |= 1), $t();
+function Ut(e) {
+  C(e) ? T.push(...e) : S && e.id === -1 ? S.splice($ + 1, 0, e) : e.flags & 1 || (T.push(e), e.flags |= 1), Le();
 }
-function jn(e) {
-  if (A.length) {
-    const t = [...new Set(A)].sort(
-      (s, n) => W(s) - W(n)
+function Jt(e) {
+  if (T.length) {
+    const t = [...new Set(T)].sort(
+      (n, o) => z(n) - z(o)
     );
-    if (A.length = 0, k) {
-      k.push(...t);
+    if (T.length = 0, S) {
+      S.push(...t);
       return;
     }
-    for (k = t, process.env.NODE_ENV !== "production" && (e = e || /* @__PURE__ */ new Map()), F = 0; F < k.length; F++) {
-      const s = k[F];
-      process.env.NODE_ENV !== "production" && Ft(e, s) || (s.flags & 4 && (s.flags &= -2), s.flags & 8 || s(), s.flags &= -2);
+    for (S = t, process.env.NODE_ENV !== "production" && (e = e || /* @__PURE__ */ new Map()), $ = 0; $ < S.length; $++) {
+      const n = S[$];
+      process.env.NODE_ENV !== "production" && Ue(e, n) || (n.flags & 4 && (n.flags &= -2), n.flags & 8 || n(), n.flags &= -2);
     }
-    k = null, F = 0;
+    S = null, $ = 0;
   }
 }
-const W = (e) => e.id == null ? e.flags & 2 ? -1 : 1 / 0 : e.id;
-function Nt(e) {
+const z = (e) => e.id == null ? e.flags & 2 ? -1 : 1 / 0 : e.id;
+function je(e) {
   process.env.NODE_ENV !== "production" && (e = e || /* @__PURE__ */ new Map());
-  const t = process.env.NODE_ENV !== "production" ? (s) => Ft(e, s) : Rt;
+  const t = process.env.NODE_ENV !== "production" ? (n) => Ue(e, n) : Ae;
   try {
-    for (S = 0; S < _.length; S++) {
-      const s = _[S];
-      if (s && !(s.flags & 8)) {
-        if (process.env.NODE_ENV !== "production" && t(s))
+    for (v = 0; v < h.length; v++) {
+      const n = h[v];
+      if (n && !(n.flags & 8)) {
+        if (process.env.NODE_ENV !== "production" && t(n))
           continue;
-        s.flags & 4 && (s.flags &= -2), ae(
-          s,
-          s.i,
-          s.i ? 15 : 14
-        ), s.flags & 4 || (s.flags &= -2);
+        n.flags & 4 && (n.flags &= -2), te(
+          n,
+          n.i,
+          n.i ? 15 : 14
+        ), n.flags & 4 || (n.flags &= -2);
       }
     }
   } finally {
-    for (; S < _.length; S++) {
-      const s = _[S];
-      s && (s.flags &= -2);
+    for (; v < h.length; v++) {
+      const n = h[v];
+      n && (n.flags &= -2);
     }
-    S = -1, _.length = 0, jn(e), Ee = null, (_.length || A.length) && Nt(e);
+    v = -1, h.length = 0, Jt(e), me = null, (h.length || T.length) && je(e);
   }
 }
-function Ft(e, t) {
-  const s = e.get(t) || 0;
-  if (s > Kn) {
-    const n = t.i, i = n && qt(n.type);
-    return Oe(
-      `Maximum recursive updates exceeded${i ? ` in component <${i}>` : ""}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
+function Ue(e, t) {
+  const n = e.get(t) || 0;
+  if (n > Pt) {
+    const o = t.i, s = o && Xe(o.type);
+    return Ee(
+      `Maximum recursive updates exceeded${s ? ` in component <${s}>` : ""}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
       null,
       10
     ), !0;
   }
-  return e.set(t, s + 1), !1;
+  return e.set(t, n + 1), !1;
 }
 const ue = /* @__PURE__ */ new Map();
-process.env.NODE_ENV !== "production" && (re().__VUE_HMR_RUNTIME__ = {
-  createRecord: he(Wn),
-  rerender: he(Gn),
-  reload: he(Jn)
+process.env.NODE_ENV !== "production" && (ee().__VUE_HMR_RUNTIME__ = {
+  createRecord: fe(Wt),
+  rerender: fe(qt),
+  reload: fe(Bt)
 });
-const te = /* @__PURE__ */ new Map();
-function Wn(e, t) {
-  return te.has(e) ? !1 : (te.set(e, {
-    initialDef: se(t),
+const B = /* @__PURE__ */ new Map();
+function Wt(e, t) {
+  return B.has(e) ? !1 : (B.set(e, {
+    initialDef: K(t),
     instances: /* @__PURE__ */ new Set()
   }), !0);
 }
-function se(e) {
-  return Wt(e) ? e.__vccOpts : e;
+function K(e) {
+  return et(e) ? e.__vccOpts : e;
 }
-function Gn(e, t) {
-  const s = te.get(e);
-  s && (s.initialDef.render = t, [...s.instances].forEach((n) => {
-    t && (n.render = t, se(n.type).render = t), n.renderCache = [], n.update();
+function qt(e, t) {
+  const n = B.get(e);
+  n && (n.initialDef.render = t, [...n.instances].forEach((o) => {
+    t && (o.render = t, K(o.type).render = t), o.renderCache = [], o.job.flags & 8 || o.update();
   }));
 }
-function Jn(e, t) {
-  const s = te.get(e);
-  if (!s) return;
-  t = se(t), ze(s.initialDef, t);
-  const n = [...s.instances];
-  for (let i = 0; i < n.length; i++) {
-    const o = n[i], r = se(o.type);
-    let l = ue.get(r);
-    l || (r !== s.initialDef && ze(r, t), ue.set(r, l = /* @__PURE__ */ new Set())), l.add(o), o.appContext.propsCache.delete(o.type), o.appContext.emitsCache.delete(o.type), o.appContext.optionsCache.delete(o.type), o.ceReload ? (l.add(o), o.ceReload(t.styles), l.delete(o)) : o.parent ? zn(() => {
-      o.parent.update(), l.delete(o);
-    }) : o.appContext.reload ? o.appContext.reload() : typeof window < "u" ? window.location.reload() : console.warn(
+function Bt(e, t) {
+  const n = B.get(e);
+  if (!n) return;
+  t = K(t), Fe(n.initialDef, t);
+  const o = [...n.instances];
+  for (let s = 0; s < o.length; s++) {
+    const r = o[s], i = K(r.type);
+    let a = ue.get(i);
+    a || (i !== n.initialDef && Fe(i, t), ue.set(i, a = /* @__PURE__ */ new Set())), a.add(r), r.appContext.propsCache.delete(r.type), r.appContext.emitsCache.delete(r.type), r.appContext.optionsCache.delete(r.type), r.ceReload ? (a.add(r), r.ceReload(t.styles), a.delete(r)) : r.parent ? jt(() => {
+      r.job.flags & 8 || (r.parent.update(), a.delete(r));
+    }) : r.appContext.reload ? r.appContext.reload() : typeof window < "u" ? window.location.reload() : console.warn(
       "[HMR] Root or manually mounted instance modified. Full reload required."
-    ), o.root.ce && o !== o.root && o.root.ce._removeChildStyle(r);
+    ), r.root.ce && r !== r.root && r.root.ce._removeChildStyle(i);
   }
-  qn(() => {
+  Ut(() => {
     ue.clear();
   });
 }
-function ze(e, t) {
-  Re(e, t);
-  for (const s in e)
-    s !== "__file" && !(s in t) && delete e[s];
+function Fe(e, t) {
+  ye(e, t);
+  for (const n in e)
+    n !== "__file" && !(n in t) && delete e[n];
 }
-function he(e) {
-  return (t, s) => {
+function fe(e) {
+  return (t, n) => {
     try {
-      return e(t, s);
-    } catch (n) {
-      console.error(n), console.warn(
+      return e(t, n);
+    } catch (o) {
+      console.error(o), console.warn(
         "[HMR] Something went wrong during Vue component hot-reload. Full reload required."
       );
     }
   };
 }
-let P, X = [];
-function Pt(e, t) {
-  var s, n;
-  P = e, P ? (P.enabled = !0, X.forEach(({ event: i, args: o }) => P.emit(i, ...o)), X = []) : /* handle late devtools injection - only do this if we are in an actual */ /* browser environment to avoid the timer handle stalling test runner exit */ /* (#4815) */ typeof window < "u" && // some envs mock window but not fully
+let x, U = [];
+function Je(e, t) {
+  var n, o;
+  x = e, x ? (x.enabled = !0, U.forEach(({ event: s, args: r }) => x.emit(s, ...r)), U = []) : /* handle late devtools injection - only do this if we are in an actual */ /* browser environment to avoid the timer handle stalling test runner exit */ /* (#4815) */ typeof window < "u" && // some envs mock window but not fully
   window.HTMLElement && // also exclude jsdom
   // eslint-disable-next-line no-restricted-syntax
-  !((n = (s = window.navigator) == null ? void 0 : s.userAgent) != null && n.includes("jsdom")) ? ((t.__VUE_DEVTOOLS_HOOK_REPLAY__ = t.__VUE_DEVTOOLS_HOOK_REPLAY__ || []).push((o) => {
-    Pt(o, t);
+  !((o = (n = window.navigator) == null ? void 0 : n.userAgent) != null && o.includes("jsdom")) ? ((t.__VUE_DEVTOOLS_HOOK_REPLAY__ = t.__VUE_DEVTOOLS_HOOK_REPLAY__ || []).push((r) => {
+    Je(r, t);
   }), setTimeout(() => {
-    P || (t.__VUE_DEVTOOLS_HOOK_REPLAY__ = null, X = []);
-  }, 3e3)) : X = [];
-}
-let ne = null, Yn = null;
-const Xn = (e) => e.__isTeleport;
-function Lt(e, t) {
-  e.shapeFlag & 6 && e.component ? (e.transition = t, Lt(e.component.subTree, t)) : e.shapeFlag & 128 ? (e.ssContent.transition = t.clone(e.ssContent), e.ssFallback.transition = t.clone(e.ssFallback)) : e.transition = t;
-}
-re().requestIdleCallback;
-re().cancelIdleCallback;
-function Qn(e, t, s = le, n = !1) {
-  if (s) {
-    const i = s[e] || (s[e] = []), o = t.__weh || (t.__weh = (...r) => {
-      const l = fi(s), c = Ot(t, s, e, r);
-      return l(), c;
+    x || (t.__VUE_DEVTOOLS_HOOK_REPLAY__ = null, U = []);
+  }, 3e3)) : U = [];
+}
+let Y = null, Kt = null;
+const Yt = (e) => e.__isTeleport;
+function We(e, t) {
+  e.shapeFlag & 6 && e.component ? (e.transition = t, We(e.component.subTree, t)) : e.shapeFlag & 128 ? (e.ssContent.transition = t.clone(e.ssContent), e.ssFallback.transition = t.clone(e.ssFallback)) : e.transition = t;
+}
+ee().requestIdleCallback;
+ee().cancelIdleCallback;
+function Gt(e, t, n = ne, o = !1) {
+  if (n) {
+    const s = n[e] || (n[e] = []), r = t.__weh || (t.__weh = (...i) => {
+      const a = dn(n), l = Pe(t, n, e, i);
+      return a(), l;
     });
-    return n ? i.unshift(o) : i.push(o), o;
+    return o ? s.unshift(r) : s.push(r), r;
   } else if (process.env.NODE_ENV !== "production") {
-    const i = Rn(De[e].replace(/ hook$/, ""));
-    $(
-      `${i} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.`
+    const s = kt(ve[e].replace(/ hook$/, ""));
+    O(
+      `${s} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.`
     );
   }
 }
-const Zn = (e) => (t, s = le) => {
-  (!zt || e === "sp") && Qn(e, (...n) => t(...n), s);
-}, ei = Zn("u"), ti = Symbol.for("v-ndc"), si = {};
-process.env.NODE_ENV !== "production" && (si.ownKeys = (e) => ($(
+const Qt = (e) => (t, n = ne) => {
+  (!Qe || e === "sp") && Gt(e, (...o) => t(...o), n);
+}, Xt = Qt("u"), Zt = /* @__PURE__ */ Symbol.for("v-ndc"), en = {};
+process.env.NODE_ENV !== "production" && (en.ownKeys = (e) => (O(
   "Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead."
 ), Reflect.ownKeys(e)));
-const ni = {}, At = (e) => Object.getPrototypeOf(e) === ni, ii = (e) => e.__isSuspense, Bt = Symbol.for("v-fgt"), oi = Symbol.for("v-txt"), ri = Symbol.for("v-cmt");
-function ai(e) {
+const tn = {}, qe = (e) => Object.getPrototypeOf(e) === tn, nn = (e) => e.__isSuspense, Be = /* @__PURE__ */ Symbol.for("v-fgt"), on = /* @__PURE__ */ Symbol.for("v-txt"), rn = /* @__PURE__ */ Symbol.for("v-cmt");
+function sn(e) {
   return e ? e.__v_isVNode === !0 : !1;
 }
-const li = (...e) => Kt(
+const ln = (...e) => Ye(
   ...e
-), Vt = ({ key: e }) => e ?? null, Z = ({
+), Ke = ({ key: e }) => e ?? null, J = ({
   ref: e,
   ref_key: t,
-  ref_for: s
-}) => (typeof e == "number" && (e = "" + e), e != null ? O(e) || Ht(e) || E(e) ? { i: ne, r: e, k: t, f: !!s } : e : null);
-function ci(e, t = null, s = null, n = 0, i = null, o = e === Bt ? 0 : 1, r = !1, l = !1) {
-  const c = {
+  ref_for: n
+}) => (typeof e == "number" && (e = "" + e), e != null ? w(e) || /* @__PURE__ */ He(e) || _(e) ? { i: Y, r: e, k: t, f: !!n } : e : null);
+function an(e, t = null, n = null, o = 0, s = null, r = e === Be ? 0 : 1, i = !1, a = !1) {
+  const l = {
     __v_isVNode: !0,
     __v_skip: !0,
     type: e,
     props: t,
-    key: t && Vt(t),
-    ref: t && Z(t),
-    scopeId: Yn,
+    key: t && Ke(t),
+    ref: t && J(t),
+    scopeId: Kt,
     slotScopeIds: null,
-    children: s,
+    children: n,
     component: null,
     suspense: null,
     ssContent: null,
@@ -2098,67 +717,67 @@ function ci(e, t = null, s = null, n = 0, i = null, o = e === Bt ? 0 : 1, r = !1
     targetStart: null,
     targetAnchor: null,
     staticCount: 0,
-    shapeFlag: o,
-    patchFlag: n,
-    dynamicProps: i,
+    shapeFlag: r,
+    patchFlag: o,
+    dynamicProps: s,
     dynamicChildren: null,
     appContext: null,
-    ctx: ne
+    ctx: Y
   };
-  return l ? ($e(c, s), o & 128 && e.normalize(c)) : s && (c.shapeFlag |= O(s) ? 8 : 16), process.env.NODE_ENV !== "production" && c.key !== c.key && $("VNode created with invalid key (NaN). VNode type:", c.type), c;
+  return a ? (Ne(l, n), r & 128 && e.normalize(l)) : n && (l.shapeFlag |= w(n) ? 8 : 16), process.env.NODE_ENV !== "production" && l.key !== l.key && O("VNode created with invalid key (NaN). VNode type:", l.type), l;
 }
-const di = process.env.NODE_ENV !== "production" ? li : Kt;
-function Kt(e, t = null, s = null, n = 0, i = null, o = !1) {
-  if ((!e || e === ti) && (process.env.NODE_ENV !== "production" && !e && $(`Invalid vnode type when creating vnode: ${e}.`), e = ri), ai(e)) {
-    const l = ie(
+const cn = process.env.NODE_ENV !== "production" ? ln : Ye;
+function Ye(e, t = null, n = null, o = 0, s = null, r = !1) {
+  if ((!e || e === Zt) && (process.env.NODE_ENV !== "production" && !e && O(`Invalid vnode type when creating vnode: ${e}.`), e = rn), sn(e)) {
+    const a = G(
       e,
       t,
       !0
       /* mergeRef: true */
     );
-    return s && $e(l, s), l.patchFlag = -2, l;
+    return n && Ne(a, n), a.patchFlag = -2, a;
   }
-  if (Wt(e) && (e = e.__vccOpts), t) {
-    t = ui(t);
-    let { class: l, style: c } = t;
-    l && !O(l) && (t.class = He(l)), j(c) && (_e(c) && !C(c) && (c = Re({}, c)), t.style = ke(c));
+  if (et(e) && (e = e.__vccOpts), t) {
+    t = un(t);
+    let { class: a, style: l } = t;
+    a && !w(a) && (t.class = Ce(a)), H(l) && (/* @__PURE__ */ de(l) && !C(l) && (l = ye({}, l)), t.style = _e(l));
   }
-  const r = O(e) ? 1 : ii(e) ? 128 : Xn(e) ? 64 : j(e) ? 4 : E(e) ? 2 : 0;
-  return process.env.NODE_ENV !== "production" && r & 4 && _e(e) && (e = ee(e), $(
+  const i = w(e) ? 1 : nn(e) ? 128 : Yt(e) ? 64 : H(e) ? 4 : _(e) ? 2 : 0;
+  return process.env.NODE_ENV !== "production" && i & 4 && /* @__PURE__ */ de(e) && (e = /* @__PURE__ */ q(e), O(
     "Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.",
     `
 Component that was made reactive: `,
     e
-  )), ci(
+  )), an(
     e,
     t,
-    s,
     n,
+    o,
+    s,
     i,
     r,
-    o,
     !0
   );
 }
-function ui(e) {
-  return e ? _e(e) || At(e) ? Re({}, e) : e : null;
+function un(e) {
+  return e ? /* @__PURE__ */ de(e) || qe(e) ? ye({}, e) : e : null;
 }
-function ie(e, t, s = !1, n = !1) {
-  const { props: i, ref: o, patchFlag: r, children: l, transition: c } = e, d = t ? pi(i || {}, t) : i, u = {
+function G(e, t, n = !1, o = !1) {
+  const { props: s, ref: r, patchFlag: i, children: a, transition: l } = e, c = t ? pn(s || {}, t) : s, d = {
     __v_isVNode: !0,
     __v_skip: !0,
     type: e.type,
-    props: d,
-    key: d && Vt(d),
+    props: c,
+    key: c && Ke(c),
     ref: t && t.ref ? (
       // #2078 in the case of <component :is="vnode" ref="extra"/>
       // if the vnode itself already has a ref, cloneVNode will need to merge
       // the refs so the single vnode can be set on multiple refs
-      s && o ? C(o) ? o.concat(Z(t)) : [o, Z(t)] : Z(t)
-    ) : o,
+      n && r ? C(r) ? r.concat(J(t)) : [r, J(t)] : J(t)
+    ) : r,
     scopeId: e.scopeId,
     slotScopeIds: e.slotScopeIds,
-    children: process.env.NODE_ENV !== "production" && r === -1 && C(l) ? l.map(Ut) : l,
+    children: process.env.NODE_ENV !== "production" && i === -1 && C(a) ? a.map(Ge) : a,
     target: e.target,
     targetStart: e.targetStart,
     targetAnchor: e.targetAnchor,
@@ -2168,123 +787,124 @@ function ie(e, t, s = !1, n = !1) {
     // existing patch flag to be reliable and need to add the FULL_PROPS flag.
     // note: preserve flag for fragments since they use the flag for children
     // fast paths only.
-    patchFlag: t && e.type !== Bt ? r === -1 ? 16 : r | 16 : r,
+    patchFlag: t && e.type !== Be ? i === -1 ? 16 : i | 16 : i,
     dynamicProps: e.dynamicProps,
     dynamicChildren: e.dynamicChildren,
     appContext: e.appContext,
     dirs: e.dirs,
-    transition: c,
+    transition: l,
     // These should technically only be non-null on mounted VNodes. However,
     // they *should* be copied for kept-alive vnodes. So we just always copy
     // them since them being non-null during a mount doesn't affect the logic as
     // they will simply be overwritten.
     component: e.component,
     suspense: e.suspense,
-    ssContent: e.ssContent && ie(e.ssContent),
-    ssFallback: e.ssFallback && ie(e.ssFallback),
+    ssContent: e.ssContent && G(e.ssContent),
+    ssFallback: e.ssFallback && G(e.ssFallback),
+    placeholder: e.placeholder,
     el: e.el,
     anchor: e.anchor,
     ctx: e.ctx,
     ce: e.ce
   };
-  return c && n && Lt(
-    u,
-    c.clone(u)
-  ), u;
+  return l && o && We(
+    d,
+    l.clone(d)
+  ), d;
 }
-function Ut(e) {
-  const t = ie(e);
-  return C(e.children) && (t.children = e.children.map(Ut)), t;
+function Ge(e) {
+  const t = G(e);
+  return C(e.children) && (t.children = e.children.map(Ge)), t;
 }
-function hi(e = " ", t = 0) {
-  return di(oi, null, e, t);
+function fn(e = " ", t = 0) {
+  return cn(on, null, e, t);
 }
-function $e(e, t) {
-  let s = 0;
-  const { shapeFlag: n } = e;
+function Ne(e, t) {
+  let n = 0;
+  const { shapeFlag: o } = e;
   if (t == null)
     t = null;
   else if (C(t))
-    s = 16;
+    n = 16;
   else if (typeof t == "object")
-    if (n & 65) {
-      const i = t.default;
-      i && (i._c && (i._d = !1), $e(e, i()), i._c && (i._d = !0));
+    if (o & 65) {
+      const s = t.default;
+      s && (s._c && (s._d = !1), Ne(e, s()), s._c && (s._d = !0));
       return;
     } else
-      s = 32, !t._ && !At(t) && (t._ctx = ne);
-  else E(t) ? (t = { default: t, _ctx: ne }, s = 32) : (t = String(t), n & 64 ? (s = 16, t = [hi(t)]) : s = 8);
-  e.children = t, e.shapeFlag |= s;
+      n = 32, !t._ && !qe(t) && (t._ctx = Y);
+  else _(t) ? (t = { default: t, _ctx: Y }, n = 32) : (t = String(t), o & 64 ? (n = 16, t = [fn(t)]) : n = 8);
+  e.children = t, e.shapeFlag |= n;
 }
-function pi(...e) {
+function pn(...e) {
   const t = {};
-  for (let s = 0; s < e.length; s++) {
-    const n = e[s];
-    for (const i in n)
-      if (i === "class")
-        t.class !== n.class && (t.class = He([t.class, n.class]));
-      else if (i === "style")
-        t.style = ke([t.style, n.style]);
-      else if (Sn(i)) {
-        const o = t[i], r = n[i];
-        r && o !== r && !(C(o) && o.includes(r)) && (t[i] = o ? [].concat(o, r) : r);
-      } else i !== "" && (t[i] = n[i]);
+  for (let n = 0; n < e.length; n++) {
+    const o = e[n];
+    for (const s in o)
+      if (s === "class")
+        t.class !== o.class && (t.class = Ce([t.class, o.class]));
+      else if (s === "style")
+        t.style = _e([t.style, o.style]);
+      else if (St(s)) {
+        const r = t[s], i = o[s];
+        i && r !== i && !(C(r) && r.includes(i)) && (t[s] = r ? [].concat(r, i) : i);
+      } else s !== "" && (t[s] = o[s]);
   }
   return t;
 }
-let le = null, be;
+let ne = null, he;
 {
-  const e = re(), t = (s, n) => {
-    let i;
-    return (i = e[s]) || (i = e[s] = []), i.push(n), (o) => {
-      i.length > 1 ? i.forEach((r) => r(o)) : i[0](o);
+  const e = ee(), t = (n, o) => {
+    let s;
+    return (s = e[n]) || (s = e[n] = []), s.push(o), (r) => {
+      s.length > 1 ? s.forEach((i) => i(r)) : s[0](r);
     };
   };
-  be = t(
+  he = t(
     "__VUE_INSTANCE_SETTERS__",
-    (s) => le = s
+    (n) => ne = n
   ), t(
     "__VUE_SSR_SETTERS__",
-    (s) => zt = s
+    (n) => Qe = n
   );
 }
-const fi = (e) => {
-  const t = le;
-  return be(e), e.scope.on(), () => {
-    e.scope.off(), be(t);
+const dn = (e) => {
+  const t = ne;
+  return he(e), e.scope.on(), () => {
+    e.scope.off(), he(t);
   };
 };
-let zt = !1;
+let Qe = !1;
 process.env.NODE_ENV;
-const mi = /(?:^|[-_])(\w)/g, gi = (e) => e.replace(mi, (t) => t.toUpperCase()).replace(/[-_]/g, "");
-function qt(e, t = !0) {
-  return E(e) ? e.displayName || e.name : e.name || t && e.__name;
-}
-function jt(e, t, s = !1) {
-  let n = qt(t);
-  if (!n && t.__file) {
-    const i = t.__file.match(/([^/\\]+)\.\w+$/);
-    i && (n = i[1]);
-  }
-  if (!n && e && e.parent) {
-    const i = (o) => {
-      for (const r in o)
-        if (o[r] === t)
-          return r;
+const mn = /(?:^|[-_])\w/g, hn = (e) => e.replace(mn, (t) => t.toUpperCase()).replace(/[-_]/g, "");
+function Xe(e, t = !0) {
+  return _(e) ? e.displayName || e.name : e.name || t && e.__name;
+}
+function Ze(e, t, n = !1) {
+  let o = Xe(t);
+  if (!o && t.__file) {
+    const s = t.__file.match(/([^/\\]+)\.\w+$/);
+    s && (o = s[1]);
+  }
+  if (!o && e) {
+    const s = (r) => {
+      for (const i in r)
+        if (r[i] === t)
+          return i;
     };
-    n = i(
-      e.components || e.parent.type.components
-    ) || i(e.appContext.components);
+    o = s(e.components) || e.parent && s(
+      e.parent.type.components
+    ) || s(e.appContext.components);
   }
-  return n ? gi(n) : s ? "App" : "Anonymous";
+  return o ? hn(o) : n ? "App" : "Anonymous";
 }
-function Wt(e) {
-  return E(e) && "__vccOpts" in e;
+function et(e) {
+  return _(e) && "__vccOpts" in e;
 }
 process.env.NODE_ENV;
 process.env.NODE_ENV;
 process.env.NODE_ENV;
-const Si = /* @__PURE__ */ Gt({
+const Nn = /* @__PURE__ */ Q({
   inheritAttrs: !0,
   __name: "MyopVueComponent",
   props: {
@@ -2293,47 +913,70 @@ const Si = /* @__PURE__ */ Gt({
     onReady: { type: Function }
   },
   setup(e, { expose: t }) {
-    const s = e, n = Jt(), i = Yt(), o = K(null), r = K(!0), l = K(null), c = K(null), d = Xt(), u = K(null);
-    ei(() => {
-      c && c.value && c.value(n);
-    }), Qt(async () => {
-      if (o.value) {
-        const f = await ys.Main.fetchComponent(s.componentId, s.flowId);
-        l.value = await xt.loadComponent(
-          f,
-          o == null ? void 0 : o.value,
+    const n = e, o = ct(), s = X(), r = p(null), i = p(!0), a = p(null), l = p(null), c = ut(), d = p(null);
+    Xt(() => {
+      l && l.value && l.value(o);
+    }), Re(async () => {
+      if (r.value) {
+        const V = await Z.Main.fetchComponent(n.componentId, n.flowId);
+        a.value = await Te.loadComponent(
+          V,
+          r == null ? void 0 : r.value,
           {
             _environment: {
               // inputs: { ...attrs, ...props },
-              props: n,
-              slots: i,
-              context: d == null ? void 0 : d.appContext,
-              vueContainerRef: o,
+              props: o,
+              slots: s,
+              context: c == null ? void 0 : c.appContext,
+              vueContainerRef: r,
               //@ts-ignore
-              defineUpdater: (y) => {
-                c.value = y;
+              defineUpdater: (E) => {
+                l.value = E;
               },
               //@ts-ignore
-              defineInnerVueComponentRef: (y) => {
-                u.value = y.value;
+              defineInnerVueComponentRef: (E) => {
+                d.value = E.value;
               }
             }
           }
-        ), r.value = !1, s.onReady && s.onReady(l.value, u.value);
+        ), i.value = !1, n.onReady && n.onReady(a.value, d.value);
       }
     });
-    const h = Zt({});
-    return t(h), es(() => {
-      Object.assign(h, u.value);
-    }), (f, y) => (ss(), ts(ns, null, [
-      is("div", as(ls(n), {
+    const g = ft({});
+    return t(g), pt(() => {
+      Object.assign(g, d.value);
+    }), (V, E) => (b(), A(dt, null, [
+      $e("div", mt(ge(o), {
         ref_key: "myopContainer",
-        ref: o
+        ref: r
       }), null, 16),
-      r.value ? os(f.$slots, "loading", { key: 0 }) : rs("", !0)
+      i.value ? M(V.$slots, "loading", { key: 0 }) : pe("", !0)
     ], 64));
   }
 });
+let k = Z.Main;
+const gn = () => k, yn = (e, t, n) => k.isPreloaded(e, t, n), Sn = (e) => k.getPreloadedParams(e), bn = () => {
+  k = new Z("http://localhost:9292");
+}, wn = (e) => {
+  k = new Z(e);
+}, On = (e) => {
+  k = e;
+}, kn = (e) => {
+  k.setEnvironment(e);
+}, Vn = async (e, t, n) => Promise.allSettled(
+  e.map((o) => k.fetchComponentV2(o, t, n))
+);
 export {
-  Si as MyopContainer
+  En as MyopComponent,
+  Nn as MyopContainer,
+  Et as MyopFallback,
+  Ct as MyopLoader,
+  bn as enableLocalDev,
+  gn as getCloudRepository,
+  Sn as getPreloadedParams,
+  yn as isPreloaded,
+  Vn as preloadComponents,
+  On as setCloudRepository,
+  wn as setCloudRepositoryUrl,
+  kn as setEnvironment
 };