@myop/vue 0.0.1-security → 0.0.23

package/dist/index.js

@@ -0,0 +1,2231 @@
+import { defineComponent as Ut, useAttrs as qt, useSlots as Wt, ref as K, getCurrentInstance as jt, onMounted as Gt, reactive as Jt, watchEffect as Yt, createElementBlock as Xt, openBlock as Qt, Fragment as Zt, createElementVNode as es, renderSlot as ts, createCommentVNode as ss, mergeProps as ns, unref as is } from "vue";
+var os = Object.defineProperty, rs = (e, t, s) => t in e ? os(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, p = (e, t, s) => rs(e, typeof t != "symbol" ? t + "" : t, s), z = (e, t, s) => new Promise((n, i) => {
+  var o = (l) => {
+    try {
+      c(s.next(l));
+    } catch (d) {
+      i(d);
+    }
+  }, r = (l) => {
+    try {
+      c(s.throw(l));
+    } catch (d) {
+      i(d);
+    }
+  }, c = (l) => l.done ? n(l.value) : Promise.resolve(l.value).then(o, r);
+  c((s = s.apply(e, t)).next());
+}), k = () => "10000000-1000-4000-8000-100000000000".replace(
+  /[018]/g,
+  (e) => (+e ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +e / 4).toString(16)
+), as = class {
+  constructor() {
+    p(this, "id", k()), 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;
+  }
+}, cs = class extends as {
+  constructor(t) {
+    super(), this.handler = t, p(this, "handlerUniqueId", k());
+  }
+}, ls = "ExecuteScriptReplyMessage", ds = /(?:function\s*\w*\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\([^)]*\)\s*=>\s*\{([\s\S]*?)\}))\s*$/, us = /\(\s*[^)]+\s*\)\s*=>\s*(.+)/, hs = (e) => {
+  let t = e.match(ds);
+  if (t)
+    return t[1] || t[3];
+  {
+    let s = e.match(us);
+    if (s)
+      return s[1].trim();
+  }
+}, Ke = class extends cs {
+  constructor(t, s = () => {
+  }, n) {
+    super(s), this.scriptInputs = n, p(this, "replyMessageKey", ls), p(this, "messageType", "ExecuteScriptMessage"), p(this, "script", ""), this.script = t.toString(), this.content = t.toString(), this.content = hs(this.content);
+  }
+};
+p(Ke, "replierKey", "send");
+p(Ke, "completeStreamKey", "completeStream");
+var Ne = class {
+  constructor() {
+    p(this, "_runTimeInstanceId", "runtime-instance-id-" + k()), p(this, "_runTimeId", "runtime-id-" + k()), p(this, "_runTimeName", "runtime-name-" + k()), 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(Ne, "create", () => new Ne());
+var $e = class {
+  constructor() {
+    p(this, "_runTimeInstanceId", "runtime-instance-id-" + k()), p(this, "_runTimeId", "runtime-id-" + k()), p(this, "_runTimeName", "runtime-name-" + k()), 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($e, "create", () => new $e());
+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 z(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 z(this, null, function* () {
+      return this.userFlows[t] || (this.userFlows[t] = new Promise(
+        (s, n) => z(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 z(this, null, function* () {
+      return this.userFlows[t] || (this.userFlows[t] = new Promise(
+        (s, n) => z(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 ps = pe, ze = Object.defineProperty, fs = Object.defineProperties, ms = Object.getOwnPropertyDescriptors, Pe = Object.getOwnPropertySymbols, gs = Object.prototype.hasOwnProperty, ys = Object.prototype.propertyIsEnumerable, fe = (e, t, s) => t in e ? ze(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, g = (e, t) => {
+  for (var s in t || (t = {}))
+    gs.call(t, s) && fe(e, s, t[s]);
+  if (Pe)
+    for (var s of Pe(t))
+      ys.call(t, s) && fe(e, s, t[s]);
+  return e;
+}, G = (e, t) => fs(e, ms(t)), vs = (e, t) => {
+  for (var s in t)
+    ze(e, s, { get: t[s], enumerable: !0 });
+}, a = (e, t, s) => fe(e, typeof t != "symbol" ? t + "" : t, s), y = (e, t, s) => new Promise((n, i) => {
+  var o = (l) => {
+    try {
+      c(s.next(l));
+    } catch (d) {
+      i(d);
+    }
+  }, r = (l) => {
+    try {
+      c(s.throw(l));
+    } catch (d) {
+      i(d);
+    }
+  }, c = (l) => l.done ? n(l.value) : Promise.resolve(l.value).then(o, r);
+  c((s = s.apply(e, t)).next());
+}), J = "__federation__", Le = "onLoad", Ue = (e, t) => {
+  window[J] && window[J][e] && window[J][e][Le] && window[J][e][Le]({ [e]: t });
+}, f = {
+  //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 = {};
+vs(me, {
+  AddEventListenerMessage: () => Ss,
+  BaseMyopMessage: () => v,
+  BindClickMessage: () => _s,
+  ChangeTextMessage: () => Es,
+  CleanupMessage: () => dt,
+  CleanupReplayMessage: () => ut,
+  ClickReplayMessage: () => je,
+  CreateRefComponentMessage: () => it,
+  CustomRefMessage: () => ge,
+  DetectMyopRefsMessage: () => Rs,
+  DetectedMyopRefsMessage: () => at,
+  DisposeMessage: () => ht,
+  ElementValueReplayMessage: () => et,
+  EnvelopedMessage: () => ot,
+  EventListenerCallbackMessage: () => Qe,
+  ExecuteComponentMethod: () => x,
+  ExecuteScriptMessage: () => H,
+  ExecuteScriptReplyMessage: () => Ye,
+  GetAttributeMessage: () => Hs,
+  GetAttributeReplayMessage: () => ks,
+  GetElementValueMessage: () => Ts,
+  InitMessage: () => be,
+  InitRequest: () => st,
+  InitResponse: () => tt,
+  MessageDirection: () => E,
+  MutationObserverMessage: () => Os,
+  MyopBindMessage: () => I,
+  MyopBindReplayMessage: () => S,
+  MyopElementMessage: () => Ms,
+  Ref: () => U,
+  RefComponentCreatedMessage: () => ye,
+  ResizeObserverMessage: () => $s,
+  SetAttributeMessage: () => Is,
+  SetInnerHtml: () => xs,
+  SetMutationObserverMessage: () => Ds,
+  SetResizeObserverMessage: () => Ns,
+  stripFunction: () => Je
+});
+var A = () => "10000000-1000-4000-8000-100000000000".replace(
+  /[018]/g,
+  (e) => (+e ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +e / 4).toString(16)
+), ws = (e) => new Promise((t) => setTimeout(t, e)), E = class {
+};
+a(E, "down", "down");
+a(E, "up", "up");
+var v = class {
+  constructor() {
+    a(this, "id", A()), 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;
+  }
+}, Ms = class extends v {
+  constructor(e) {
+    super(), this.ref = e;
+  }
+}, S = class extends v {
+  constructor(e) {
+    super(), this.replayToHandler = e;
+  }
+}, I = class extends v {
+  constructor(e) {
+    super(), this.handler = e, a(this, "handlerUniqueId", A());
+  }
+}, U = class qe {
+  constructor(t, s) {
+    this.refConfig = t, this.component = s, a(this, "myop", !0), a(this, "__nonProxied"), this.__nonProxied = G(g({}, 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 qe(i, n);
+  }
+}, We = "ClickReplayMessage", _s = class extends I {
+  constructor(e, t) {
+    super(t), this.ref = e, a(this, "replyMessageKey", We), a(this, "messageType", "BindClickMessage"), a(this, "cleanable", !0);
+  }
+}, je = class extends S {
+  constructor() {
+    super(...arguments), a(this, "messageType", We);
+  }
+}, Es = class extends v {
+  constructor(e, t) {
+    super(), this.ref = e, a(this, "messageType", "ChangeTextMessage"), this.content = t;
+  }
+}, Ge = "ExecuteScriptReplyMessage", bs = /(?:function\s*\w*\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\([^)]*\)\s*=>\s*\{([\s\S]*?)\}))\s*$/, Cs = /\(\s*[^)]+\s*\)\s*=>\s*(.+)/, Je = (e) => {
+  let t = e.match(bs);
+  if (t)
+    return t[1] || t[3];
+  {
+    let s = e.match(Cs);
+    if (s)
+      return s[1].trim();
+  }
+}, H = class extends I {
+  constructor(e, t = () => {
+  }, s) {
+    super(t), this.scriptInputs = s, a(this, "replyMessageKey", Ge), a(this, "messageType", "ExecuteScriptMessage"), a(this, "script", ""), this.script = e.toString(), this.content = e.toString(), this.content = Je(this.content);
+  }
+};
+a(H, "replierKey", "send");
+a(H, "completeStreamKey", "completeStream");
+var Ye = class extends S {
+  constructor(e, t) {
+    super(e), this.replayToHandler = e, this.content = t, a(this, "messageType", Ge);
+  }
+}, ge = class extends H {
+  constructor(e, t, s = () => {
+  }) {
+    super(({ rootRef: n, elementId: i, _script: o, __scriptInputs: r }) => {
+      const c = (n.shadowRoot || n.container).querySelectorAll(`[myop-id='${i}']`);
+      return c.length ? (r.ref = c[0], new Function(`return (${o})(...arguments)`)(r)) : null;
+    }, s), this.scriptInputs = t, this.scriptInputs = G(g({}, t), {
+      //_script: stripFunction(script.toString()),
+      _script: e.toString()
+    });
+  }
+}, Xe = "EventListenerCallbackMessage", Ss = class extends I {
+  // {} // empty
+  constructor(e, t, s) {
+    super(s), this.ref = e, this.type = t, this.handler = s, a(this, "replyMessageKey", Xe), a(this, "messageType", "AddEventListenerMessage"), a(this, "cleanable", !0), a(this, "serializableSkeleton", !1);
+  }
+  withSerializableSkeleton(e) {
+    return this.serializableSkeleton = e, this;
+  }
+}, Qe = class extends S {
+  constructor(e, t) {
+    super(e), this.replayToHandler = e, this.e = t, a(this, "messageType", Xe), this.content = {
+      e: t
+    };
+  }
+}, Is = class extends v {
+  constructor(e, t, s) {
+    super(), this.ref = e, this.name = t, this.value = s, a(this, "messageType", "SetAttributeMessage");
+  }
+}, Ze = "ElementValueReplayMessage", Ts = class extends I {
+  constructor(e, t) {
+    super(t), this.ref = e, a(this, "replyMessageKey", Ze), a(this, "messageType", "GetElementValueMessage");
+  }
+}, et = class extends S {
+  constructor(e) {
+    super(), this.content = e, a(this, "messageType", Ze);
+  }
+}, xs = class extends v {
+  constructor(e, t) {
+    super(), this.ref = e, a(this, "messageType", "SetInnerHtml"), this.content = t;
+  }
+}, be = class extends v {
+  constructor(e) {
+    super(), a(this, "messageType", "InitMessage"), this.content = { id: e };
+  }
+  isTypeof(e) {
+    return e.messageType === this.messageType;
+  }
+}, tt = class extends be {
+  constructor() {
+    super(...arguments), a(this, "messageType", "InitResponse");
+  }
+}, st = class extends v {
+  constructor() {
+    super(...arguments), a(this, "messageType", "InitRequest");
+  }
+}, nt = "RefComponentCreatedMessage", it = class extends I {
+  constructor(e, t, s, n) {
+    super(n), this.refConfig = e, this.nestedComponentConfig = t, this.options = s, a(this, "replyMessageKey", nt), a(this, "messageType", "CreateRefComponentMessage");
+  }
+}, ye = class extends S {
+  constructor(e, t, s) {
+    super(e), this.replayToHandler = e, this.nestedRefs = t, this.failed = s, a(this, "messageType", nt);
+  }
+}, ot = class extends v {
+  constructor(e, t) {
+    super(), this.destination = e, this.message = t, a(this, "messageType", "EnvelopedMessage");
+    const s = t;
+    this.route = [e, ...s.route ? s.route : []];
+  }
+}, rt = "DetectedMyopRefsMessage", Rs = class extends I {
+  constructor() {
+    super(...arguments), a(this, "messageType", "DetectMyopRefsMessage"), a(this, "replyMessageKey", rt);
+  }
+}, at = class extends S {
+  constructor(e, t) {
+    super(e), this.replayToHandler = e, a(this, "messageType", rt), this.content = t;
+  }
+  isTypeof(e) {
+    return e.messageType === this.messageType;
+  }
+}, ct = "GetAttributeReplayMessage", Hs = class extends I {
+  constructor(e, t, s) {
+    super(s), this.ref = e, this.name = t, a(this, "replyMessageKey", ct), a(this, "messageType", "GetAttributeMessage");
+  }
+}, ks = class extends S {
+  constructor(e) {
+    super(), this.content = e, a(this, "messageType", ct);
+  }
+}, x = class extends v {
+  constructor(e) {
+    super(), this.method = e, a(this, "messageType", "ExecuteComponentMethod");
+  }
+}, Ds = class extends v {
+  constructor() {
+    super(...arguments), a(this, "messageType", "SetMutationObserverMessage");
+  }
+}, Os = class extends v {
+  constructor() {
+    super(...arguments), a(this, "messageType", "MutationObserverMessage");
+  }
+}, lt = "CleanupReplayMessage", dt = class extends I {
+  constructor(e, t) {
+    super(t), this.cleanupForMessageId = e, a(this, "replyMessageKey", lt), a(this, "messageType", "CleanupMessage");
+  }
+}, ut = class extends S {
+  constructor(e) {
+    super(), this.customCleanup = e, a(this, "messageType", lt);
+  }
+}, ht = class extends v {
+  constructor() {
+    super(...arguments), a(this, "messageType", "DisposeMessage");
+  }
+}, Ns = class extends v {
+  constructor() {
+    super(...arguments), a(this, "cleanable", !0), a(this, "messageType", "SetResizeObserverMessage");
+  }
+}, $s = class extends v {
+  constructor() {
+    super(...arguments), a(this, "messageType", "ResizeObserverMessage");
+  }
+}, Ce = 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 c = this.messageHandlers[i], l = (d) => o(d) ? (r(d), !0) : !1;
+      return c.push(l), () => {
+        const d = c.indexOf(l);
+        d > -1 && c.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) || ie.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();
+    });
+  }
+  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 === f.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 = E.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 = E.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 dt(e.id, (s) => {
+      })), t && t();
+    } : () => {
+    };
+  }
+  dispose() {
+    if (this.markedForDisposed = !0, !this.isInitiated)
+      return;
+    console.log("disposing component", this.id), this.send(new ht());
+    const e = this.messageHandlers.onDispose;
+    e && e.forEach((t) => {
+      t(null);
+    }), this.messageHandlers = {}, this.id += "_disposed", this.isInitiated = !1;
+  }
+}, Ps = 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");
+  }
+}, Ls = (e) => y(void 0, null, function* () {
+  if (typeof e == "function")
+    e();
+  else if (e instanceof Promise) {
+    const t = yield e;
+    typeof t == "function" && t();
+  }
+}), Fs = class {
+  //TODO : add dispose method
+  constructor(e) {
+    this.messageToHost = e;
+  }
+}, As = class extends Fs {
+  constructor(e, t) {
+    super(e), this.messageToHost = e, this.context = t;
+  }
+}, Vs = class {
+  //onMessageReceived: (msg: IMyopMessage) => void;
+  constructor(e, t) {
+    this.id = e, this.context = t, a(this, "send", (s) => {
+    });
+  }
+}, Bs = 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 !== E.down)
+        return;
+      if (s.messageType === f.DisposeMessage) {
+        s.destination && delete this.components[s.destination];
+        return;
+      }
+      if (s.messageType === f.InitMessage) {
+        const n = s.content.id;
+        if (this.components[n])
+          return;
+        this.components[n] = new Vs(n), this.messageToHost(new tt(n));
+        return;
+      }
+      if (s.messageType === f.EnvelopedMessage) {
+        const n = s, i = n.message;
+        if (s = i, this.alwaysPassEnvelopesToHost || this.components[s.destination]) {
+          const o = myop.hostSDK.components.find((c) => c.id === i.destination);
+          if (o) {
+            o.send(i);
+            return;
+          }
+          const r = myop.hostSDK.components.find((c) => c.id === n.destination);
+          if (r) {
+            r.send(i);
+            return;
+          }
+        } else
+          return;
+      }
+      if (s.messageType) {
+        if (s.messageType === f.CleanupMessage) {
+          const n = s, i = this.messageCleanupCache[n.cleanupForMessageId], o = new ut(!!i);
+          o.destination = s.destination, i ? (delete this.messageCleanupCache[n.cleanupForMessageId], Ls(i).then(() => {
+            this.messageToHost(o, n);
+          }).catch(() => {
+          })) : this.messageToHost(o, n);
+          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.`);
+          }
+        });
+      } else
+        console.log("unsupported message type");
+    }
+  }
+}, Se = {
+  IframeLoader: "IframeLoader",
+  WebComponentLoader: "WebComponentLoader",
+  HTMLLoader: "HTMLLoader"
+}, ve = {
+  open: "open",
+  none: "none",
+  localFrame: "localFrame"
+}, Ie = class {
+};
+a(Ie, "code", "code");
+a(Ie, "component", "component");
+var ce = {
+  Segmented: "Segmented",
+  Dedicated: "Dedicated"
+}, Ks = {
+  Segment: "Segment"
+}, zs = 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), Us = (e) => typeof e == "function", pt = (e) => {
+  if (we(e))
+    return !0;
+  if (Us(e) || Object.getPrototypeOf(e))
+    return !1;
+  for (const t in e) {
+    const s = e[t];
+    if (typeof s == "object") {
+      if (!pt(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 {};
+}, qs = {
+  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.
+
+`);
+  }
+}, Fe = class extends Ce {
+  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 ot(this.id, n)), n.handler = i, o;
+    }), a(this, "dispose", () => {
+      this.isInitiated && this.send(new x("dispose")), super.dispose();
+    });
+  }
+  hide() {
+    this.send(new x("hide"));
+  }
+  show() {
+    this.send(new x("show"));
+  }
+  inspect() {
+    return this.send(new x("inspect"));
+  }
+  setHeightBasedOnDocumentElement() {
+    this.send(new x("setHeightBasedOnDocumentElement"));
+  }
+  setHeightBasedOnScrollHeight() {
+    this.send(new x("setHeightBasedOnScrollHeight"));
+  }
+  onMessageReceived(e) {
+    return super.onMessageReceived(e);
+  }
+}, Ws = (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;
+}, ft = (e, t, s, n, i, o) => {
+  const r = Ws(`${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);
+  };
+}, js = (e, t) => {
+  const s = t.reduce((i, o) => G(g({}, i), {
+    [o.name]: g({}, o)
+  }), {}), n = {
+    get: (i, o) => {
+      const r = s[o];
+      return r.mode === "output" ? new Promise((c) => {
+        const l = [];
+        r.behavior.ref && l.push(U.create(r.behavior.ref)), l.push((u) => {
+          c(u);
+        }), r.behavior.params && l.push(...r.behavior.params);
+        const d = me[r.behavior.message];
+        e.send(new d(...l));
+      }) : null;
+    },
+    set: (i, o, r) => {
+      const c = s[o];
+      if (!c)
+        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.`
+        );
+      if (c.mode === "input")
+        if (c.behavior.type === "message") {
+          const l = [];
+          c.behavior.ref && l.push(U.create(c.behavior.ref)), l.push(r), c.behavior.params && l.push(...c.behavior.params);
+          const d = me[c.behavior.message];
+          return e.send(new d(...l)), !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: ${c.behavior.type}
+
+Check the documentation for valid behavior options.`
+          );
+      return !1;
+    }
+  };
+  return e.props = {}, e.props = new Proxy(e.props, n), e;
+}, Gs = (e, t) => new Proxy(e, {
+  get(s, n) {
+    return s[n] ? s[n] : (...o) => new Promise((r) => {
+      o.forEach((c) => {
+        pt(c) || qs.notSerializableRefCall(n, c);
+      }), t.send(new ge(
+        ({ ref: c, propName: l, functionArgs: d, makeSerializable: u }) => {
+          if (c) {
+            const h = c[l];
+            return u(typeof h == "function" ? c[l](...d) : h, !0);
+          }
+          return null;
+        },
+        {
+          //TODO : turn it to config
+          elementId: s.refConfig.selector,
+          propName: n,
+          functionArgs: o
+        },
+        (c) => {
+          r(c.content);
+        }
+      ));
+    });
+  },
+  set(s, n, i) {
+    return t.send(new ge(
+      ({ ref: o, propName: r, propValue: c }) => {
+        o && (o[r] = c);
+      },
+      {
+        //TODO : fix that
+        elementId: s.refConfig.selector,
+        propValue: i,
+        propName: n
+      },
+      (o) => {
+      }
+    )), !0;
+  }
+}), mt = (e, t, s, n) => y(void 0, null, function* () {
+  const i = e.component;
+  if (!i)
+    throw new Error("cant createRefComponent with detached ref");
+  return new Promise((o, r) => y(void 0, null, function* () {
+    const c = new Fe(t.type, i, n);
+    s.push(c), yield i.initiated();
+    const l = setTimeout(() => {
+      r("timeout");
+    }, 5e3);
+    i.send(new it(
+      e.refConfig,
+      t,
+      G(g({}, n || {}), {
+        id: c.id,
+        _hasParent: !0
+      }),
+      (d) => y(void 0, null, function* () {
+        if (clearTimeout(l), d.failed) {
+          r("CreateRefComponentMessage failed");
+          return;
+        }
+        const u = s.find((h) => h.id == c.id);
+        if (u !== c) {
+          i.refs[e.refConfig.name] = u, o(u);
+          return;
+        } else
+          c.setInitiated(), i.refs[e.refConfig.name] = c;
+        d.nestedRefs.forEach((h) => {
+          const m = t.instance.resolvedNestedComponents.find((B) => B.type.id === h.componentDefinitionId).type, w = new Fe(m, c);
+          w.setInitiated(), c.refs[h.refName] = w, s.push(w);
+        });
+        try {
+          yield gt(c, t, s, !0), i.setHeightBasedOnScrollHeight && i.setHeightBasedOnScrollHeight(), o(c);
+        } catch (h) {
+          r(h);
+        }
+      })
+    ));
+  }));
+}), gt = (e, t, s, n = !1) => y(void 0, null, function* () {
+  e.refs || (e.refs = {});
+  const i = Object.values(e.componentDefinition.refs).map((o) => new Promise((r, c) => y(void 0, null, function* () {
+    var l;
+    if (o.behavior.type == Ie.component) {
+      if (n) {
+        r();
+        return;
+      }
+      let d = o.behavior.componentId;
+      d || (d = o.behavior.instance.componentId);
+      const u = (l = t.instance.resolvedNestedComponents) == null ? void 0 : l.find((m) => m.type.id === d);
+      if (!u)
+        throw new Error("componentConfig provided without nestedComponentConfig check the config object");
+      const h = U.create("", o, e);
+      try {
+        const m = yield mt(h, u, s);
+        e.refs[o.name] = m, r();
+      } catch (m) {
+        c(m);
+      }
+    } else
+      try {
+        const d = U.create("", o, e);
+        e.refs[o.name] = Gs(d, e), r();
+      } catch {
+      }
+  })));
+  try {
+    yield Promise.all(i);
+  } catch (o) {
+    throw o;
+  }
+}), yt = class extends Ce {
+  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: c } = document.documentElement.getBoundingClientRect(), l = new ResizeObserver(() => {
+          const { height: d, width: u } = document.documentElement.getBoundingClientRect();
+          o({ height: d, width: u });
+        });
+        return l.observe(document.documentElement), l.observe(document.body), { height: r, width: c };
+      }, (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: c } = document.documentElement.getBoundingClientRect();
+        return { height: r, width: c };
+      }, (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 c = 0;
+        return c++, c--, Math.max(
+          Math.max(
+            window.document.body.clientHeight,
+            window.document.body.scrollHeight
+          ),
+          window.document.body.offsetHeight
+        ) + c + "px";
+      }, (r) => {
+        this.IframeElement.style.height = r.content, o();
+      }));
+    }), a(this, "send", (o) => {
+      var r, c;
+      let l = g({}, o);
+      if (l.messageType === f.ExecuteComponentMethod)
+        return this[l.method](), () => {
+        };
+      l.direction = E.down;
+      const d = super.send(l);
+      return (c = (r = this.IframeElement) == null ? void 0 : r.contentWindow) == null || c.postMessage(l, "*"), 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 = ft(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 === f.In.MutationObserverMessage || e.messageType === f.In.ResizeObserverMessage ? (this.setHeightBasedOnScrollHeight(), !0) : super.onMessageReceived(e);
+  }
+}, Te = 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);
+        }
+      } else
+        return e.appendChild(t);
+    });
+  }
+}, Js = (e, t, s) => {
+  const n = new URL(e);
+  return n.searchParams.append(t, s), n.toString();
+}, Ys = class extends Te {
+  constructor() {
+    super(...arguments), a(this, "type", Se.IframeLoader), a(this, "load", (e, t, s, n) => y(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 = A(), c = `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 l = t.loader.url;
+        n != null && n._hasParent && (l = Js(l, "_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="${c}"
+               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="${l}"
+            ${d}
+            ></iframe>`, i = s.querySelector(`#${c}`);
+      }
+      return new yt(e, t, s, i, n);
+    }));
+  }
+}, vt = {
+  webcomponent_message_key: "myop_webcomponent_message"
+}, wt = class extends Ce {
+  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 = g({}, o);
+      const c = super.send(r), l = new CustomEvent(vt.webcomponent_message_key, {
+        // @ts-ignore
+        detail: r
+        // bubbles: true,
+        // cancelable: false,
+        // composed: true
+      });
+      try {
+        this.customElement.dispatchEvent(l);
+      } catch (d) {
+        console.log("error while trying to dispatchEvent", d);
+      }
+      return c;
+    }), a(this, "dispose", () => {
+      var o;
+      super.dispose(), (o = this.customElement.parentNode) == null || o.removeChild(this.customElement);
+    }), this.element = n;
+  }
+  inspect() {
+    return this.cleanupInspect = ft(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 = "";
+  }
+}, le = {}, Xs = class extends Te {
+  constructor() {
+    super(...arguments), a(this, "type", Se.WebComponentLoader), a(this, "load", (e, t, s, n) => y(this, null, function* () {
+      const i = t.loader;
+      le[i.url] ? console.log("Module alreday loaded or in loading process") : le[i.url] = new Promise((c, l) => {
+        const d = i.url, u = document.createElement("script");
+        u.type = "module", u.src = d, u.onload = () => {
+          c();
+        }, u.onerror = () => {
+          l();
+        }, document.head.appendChild(u);
+      }), yield le[i.url], yield ws(1);
+      let o = `myop-comp-${A()}`;
+      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 wt(e, t, s, r, n);
+    }));
+  }
+}, Qs = "0.1.36", T = class extends As {
+  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(g({}, 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}']`), Zs = class extends T {
+  constructor() {
+    super(...arguments), a(this, "messageType", f.BindClickMessage), a(this, "innerExecutor", (e, t, s) => {
+      const n = V(e.ref, t.shadowRoot), i = [];
+      return n.forEach((o) => {
+        const r = () => {
+          s(new je(e.handlerUniqueId));
+        };
+        o.addEventListener("click", r), i.push(() => {
+          o.removeEventListener("click", r);
+        });
+      }), () => {
+        i.forEach((o) => o());
+      };
+    });
+  }
+}, en = class extends T {
+  constructor() {
+    super(...arguments), a(this, "messageType", f.ChangeTextMessage), a(this, "innerExecutor", (e, t) => {
+      V(e.ref, t.shadowRoot).forEach((n) => {
+        n.textContent = e.content;
+      });
+    });
+  }
+}, tn = class extends zs {
+  constructor(e, t) {
+    super(e, t), this.container = e, this.shadowRoot = t;
+  }
+}, sn = class extends T {
+  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 Ps(o, i.tagName, i.getBoundingClientRect(), i.offsetTop, i.offsetLeft));
+      }), this.messageToHost(new at(e.handlerUniqueId, n));
+    }), a(this, "messageType", f.DetectMyopRefsMessage);
+  }
+}, nn = class extends T {
+  constructor() {
+    super(...arguments), a(this, "messageType", f.SetAttributeMessage), a(this, "innerExecutor", (e, t) => {
+      V(e.ref, t.shadowRoot).forEach((n) => {
+        n.setAttribute(e.name, e.value);
+      });
+    });
+  }
+}, on = class extends T {
+  constructor() {
+    super(...arguments), a(this, "messageType", f.AddEventListenerMessage), a(this, "innerExecutor", (e, t, s) => {
+      const n = V(e.ref, t.shadowRoot), i = [];
+      return n.forEach((o) => {
+        const r = (c) => {
+          s(new Qe(e.handlerUniqueId, L(c, e.serializableSkeleton)));
+        };
+        o.addEventListener(e.type, r), i.push(() => {
+          o.removeEventListener(e.type, r);
+        });
+      }), () => {
+        i.forEach((o) => o());
+      };
+    });
+  }
+}, rn = class extends T {
+  constructor() {
+    super(...arguments), a(this, "messageType", f.CreateRefComponentMessage), a(this, "innerExecutor", (e, t, s) => {
+      y(this, null, function* () {
+        const i = t.shadowRoot.querySelectorAll(`[${q.id}='${e.refConfig.selector}']`);
+        if (i.length === 1) {
+          const o = ie.Instance(), r = o.components.find((u) => u.id === e.options.id);
+          r && r.dispose();
+          const c = o.components.indexOf(r);
+          c !== -1 && o.components.splice(c, 1);
+          const l = yield o.loadComponent(
+            e.nestedComponentConfig,
+            i.item(0),
+            e.options
+          ), d = [];
+          Object.keys(l.refs).forEach((u) => {
+            let h = l.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();
+    });
+  }
+}, an = (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);
+}, cn = class extends T {
+  constructor() {
+    super(...arguments), a(this, "messageType", f.ExecuteScriptMessage), a(this, "innerExecutor", (e, t, s) => {
+      an(e, (i) => {
+        s(new Ye(e.handlerUniqueId, i));
+      }, t);
+    });
+  }
+}, Mt = (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: Mt(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;
+}, ln = class extends T {
+  constructor() {
+    super(...arguments), a(this, "messageType", f.GetElementValueMessage), a(this, "innerExecutor", (e, t, s) => {
+      V(e.ref, t.shadowRoot).forEach((i) => {
+        s(new et(Mt(i)), e);
+      });
+    });
+  }
+}, dn = class extends T {
+  constructor() {
+    super(...arguments), a(this, "messageType", f.SetInnerHtml), a(this, "innerExecutor", (e, t) => {
+      V(e.ref, t.shadowRoot).forEach((n) => {
+        n.innerHTML = e.content;
+      });
+    });
+  }
+}, _t = class extends Bs {
+  constructor() {
+    super(...arguments), a(this, "alwaysPassEnvelopesToHost", !0), a(this, "connectedCallback", (e, t) => {
+      e.addEventListener(vt.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 === f.InitMessage) {
+            const o = i.content.id;
+            this.components[o].context = new tn(e, t);
+          }
+        }
+      }), setTimeout(() => {
+        this.messageToHost(new st());
+      }, 1);
+    }), a(this, "messageToHost", (e, t) => {
+      e.direction = E.up, !e.replayToHandler && (t != null && t.handlerUniqueId) && (e.replayToHandler = t.handlerUniqueId), window.myop.hostSDK.send(e);
+    }), a(this, "supportedHandlers", [
+      new en(this.messageToHost, this.components),
+      new dn(this.messageToHost, this.components),
+      new Zs(this.messageToHost, this.components),
+      new sn(this.messageToHost, this.components),
+      new nn(this.messageToHost, this.components),
+      new on(this.messageToHost, this.components),
+      new cn(this.messageToHost, this.components),
+      new ln(this.messageToHost, this.components),
+      //
+      new rn(this.messageToHost, this.components)
+    ]), a(this, "init", () => {
+    });
+  }
+};
+Ue("WebComponentSDK", _t);
+var Ae = [], Y, Et = () => y(void 0, null, function* () {
+  return Y || (Y = new _t(), Y.init()), Y;
+});
+function un(e, t) {
+  return class extends HTMLElement {
+    connectedCallback() {
+      const s = t === ve.open ? "open" : "closed", n = this.attachShadow({ mode: s });
+      Et().then((i) => {
+        i.connectedCallback(this, n), n.innerHTML = e;
+      });
+    }
+  };
+}
+var hn = (e, t, s) => {
+  customElements.define(e, un(t, s)), console.log(`define('${e}') was called, web component ready to use`);
+}, pn = (e) => e.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/(\d+)/g, "-$1").toLowerCase(), fn = (e) => (e = pn(e), e.replace(/_/g, "-")), mn = class extends Te {
+  constructor() {
+    super(...arguments), a(this, "type", Se.HTMLLoader), a(this, "load", (e, t, s, n) => y(this, null, function* () {
+      const i = t.loader;
+      let o = `myop-comp-${A()}`, r;
+      if (i.shadowRootMode === ve.localFrame) {
+        const l = `myop-comp-${A()}`;
+        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 = l, 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(), u.writeln(i.HTML), 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 h = new yt(e, t, s, d, n);
+        return d.onload = () => {
+          h.observeSizeBasedOnDocumentElement();
+        }, h;
+      }
+      if (i.shadowRootMode === ve.none) {
+        const c = document.createElement("template");
+        c.innerHTML = i.HTML, r = c.content.firstElementChild, Et().then((l) => {
+          l.connectedCallback(r, r);
+        });
+      } else {
+        const c = fn(e.name + t.id);
+        Ae.includes(c) || (hn(c, i.HTML, i.shadowRootMode), Ae.push(c)), r = document.createElement(c);
+      }
+      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 wt(e, t, s, r, n);
+    }));
+  }
+}, bt = "https://cdn.myop.dev/sdk/next/myop_sdk.min.js", ie = class {
+  constructor() {
+    a(this, "components2init", []), a(this, "components", []), a(this, "componentsLoaders", []), a(this, "initiated", !1), a(this, "version", Qs), 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 !== E.up && e.data.messageType !== f.EnvelopedMessage)
+          return;
+        const t = e.data;
+        if (t.messageType === f.InitRequest) {
+          this.components2init.forEach((n) => {
+            n.send(new be(n.id));
+          });
+          return;
+        }
+        if (t.messageType === f.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 === f.EnvelopedMessage) {
+          const n = t, i = this.components.find((o) => o.id === n.destination);
+          if (i) {
+            if (n.direction === E.down) {
+              n.message.messageType === x.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 Ys(),
+        new Xs(),
+        new mn()
+      ];
+      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) => y(this, [e, ...t], function* (s, n = [], i) {
+      var o;
+      function r(c, l) {
+        return y(this, null, function* () {
+          for (const d of c)
+            if (yield l(d))
+              return d;
+        });
+      }
+      switch (s.type) {
+        case "DedicatedSkin":
+        case ce.Dedicated:
+          return ((o = s.skin) == null ? void 0 : o.id) || s.skins[0].id;
+        case ce.Segmented:
+          {
+            const l = yield r(s.segments, (d) => y(this, null, function* () {
+              if (d.segmentId === "Default")
+                return !0;
+              const u = n.find((B) => B.type === Ks.Segment ? B.segment.id === d.segmentId : !1);
+              if (!u)
+                throw new Error("experience not found");
+              const m = u.segment, w = (i || {})[m.function];
+              return w ? yield w() : (console.warn(`segmentId:${d.segmentId}, ${m.function} function not provided !`), !1);
+            }));
+            if (l)
+              return this._getSkinIdBySkinSelector(l.skinSelector, n);
+            debugger;
+          }
+          break;
+        default:
+          debugger;
+      }
+      return "";
+    })), a(this, "runSkinSelector", (e, t) => y(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) => y(this, null, function* () {
+      var n, i, o, r;
+      if (!t) {
+        debugger;
+        throw new Error("no container was found for this component");
+      }
+      const c = t;
+      if (c.myop)
+        if (c.component) {
+          e = g({}, e), e.instance = g({}, e.instance);
+          const h = g(g({}, (n = this.loaderHooks) != null ? n : {}), (i = s == null ? void 0 : s.hooks) != null ? i : {});
+          let m = yield this.runSkinSelector(e, h);
+          if (!m)
+            throw new Error("runSkinSelector failed to choose skin, check the provided config");
+          return (o = s == null ? void 0 : s.hooks) != null && o.afterSkinSelected && (m = yield s.hooks.afterSkinSelected(g({}, m))), e.instance.skinSelector = {
+            type: ce.Dedicated,
+            skin: m
+            //  skins: [selectedSkin]
+          }, s && (s = g({}, s), delete s.hooks), yield mt(c, e, this.components, s);
+        } else
+          throw new Error("load component got a detached ref.");
+      t = t;
+      let l = yield this.runSkinSelector(e, s == null ? void 0 : s.hooks);
+      if (!l)
+        throw new Error("runSkinSelector failed to choose skin, check the provided config");
+      (r = s == null ? void 0 : s.hooks) != null && r.afterSkinSelected && (l = yield s.hooks.afterSkinSelected(g({}, l)));
+      const d = this.componentsLoaders.find((h) => h.type === l.loader.type);
+      if (!d) {
+        debugger;
+        throw new Error(`no loader "${l.loader.type}" was found for component`);
+      }
+      let u = yield d.load(e.type, l, t, s);
+      u.isInitiated || this.components2init.push(u), u.bind("onDispose", () => (this.components = this.components.filter((h) => h !== u), this.components2init = this.components2init.filter((h) => h !== u), !0)), this.components.push(u), s != null && s.connectProps && (u = js(u, e.type.props));
+      try {
+        yield gt(u, e, this.components);
+      } catch (h) {
+        throw h;
+      }
+      return s != null && s.skipInit || (yield u.initiated()), u;
+    })), a(this, "navigate", (e, t, s) => y(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, g({
+          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, g({
+          relative: {
+            direction: "before",
+            child: n
+          }
+        }, s));
+      }
+    }));
+  }
+};
+a(ie, "Instance", () => window.myop.hostSDK);
+window.myop || (window.myop = {
+  __ROOT_SDK_PUBLIC_URL__: bt
+});
+if (!window.myop.hostSDK) {
+  const e = new ie();
+  e.init(), window.myop || (window.myop = {
+    __ROOT_SDK_PUBLIC_URL__: bt
+  }), window.myop.hostSDK = e;
+}
+var Ct = window.myop.hostSDK;
+Ue("hostSDK", Ct);
+/**
+* @vue/shared v3.5.17
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+const gn = process.env.NODE_ENV !== "production" ? Object.freeze({}) : {};
+process.env.NODE_ENV !== "production" && Object.freeze([]);
+const St = () => {
+}, yn = (e) => e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && // uppercase letter
+(e.charCodeAt(2) > 122 || e.charCodeAt(2) < 97), xe = Object.assign, b = Array.isArray, _ = (e) => typeof e == "function", D = (e) => typeof e == "string", vn = (e) => typeof e == "symbol", W = (e) => e !== null && typeof e == "object", wn = (e) => (W(e) || _(e)) && _(e.then) && _(e.catch), It = (e) => {
+  const t = /* @__PURE__ */ Object.create(null);
+  return (s) => t[s] || (t[s] = e(s));
+}, Mn = It((e) => e.charAt(0).toUpperCase() + e.slice(1)), _n = It(
+  (e) => e ? `on${Mn(e)}` : ""
+);
+let Ve;
+const oe = () => Ve || (Ve = typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : typeof window < "u" ? window : typeof global < "u" ? global : {});
+function Re(e) {
+  if (b(e)) {
+    const t = {};
+    for (let s = 0; s < e.length; s++) {
+      const n = e[s], i = D(n) ? Sn(n) : Re(n);
+      if (i)
+        for (const o in i)
+          t[o] = i[o];
+    }
+    return t;
+  } else if (D(e) || W(e))
+    return e;
+}
+const En = /;(?![^(]*\))/g, bn = /:([^]+)/, Cn = /\/\*[^]*?\*\//g;
+function Sn(e) {
+  const t = {};
+  return e.replace(Cn, "").split(En).forEach((s) => {
+    if (s) {
+      const n = s.split(bn);
+      n.length > 1 && (t[n[0].trim()] = n[1].trim());
+    }
+  }), t;
+}
+function He(e) {
+  let t = "";
+  if (D(e))
+    t = e;
+  else if (b(e))
+    for (let s = 0; s < e.length; s++) {
+      const n = He(e[s]);
+      n && (t += n + " ");
+    }
+  else if (W(e))
+    for (const s in e)
+      e[s] && (t += s + " ");
+  return t.trim();
+}
+/**
+* @vue/reactivity v3.5.17
+* (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" : ""
+);
+new Set(
+  /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((e) => e !== "arguments" && e !== "caller").map((e) => Symbol[e]).filter(vn)
+);
+function Me(e) {
+  return e ? !!e.__v_raw : !1;
+}
+function Z(e) {
+  const t = e && e.__v_raw;
+  return t ? Z(t) : e;
+}
+function Tt(e) {
+  return e ? e.__v_isRef === !0 : !1;
+}
+/**
+* @vue/runtime-core v3.5.17
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+const N = [];
+function In(e) {
+  N.push(e);
+}
+function Tn() {
+  N.pop();
+}
+let de = !1;
+function O(e, ...t) {
+  if (de) return;
+  de = !0;
+  const s = N.length ? N[N.length - 1].component : null, n = s && s.appContext.config.warnHandler, i = xn();
+  if (n)
+    re(
+      n,
+      s,
+      11,
+      [
+        // eslint-disable-next-line no-restricted-syntax
+        e + t.map((o) => {
+          var r, c;
+          return (c = (r = o.toString) == null ? void 0 : r.call(o)) != null ? c : JSON.stringify(o);
+        }).join(""),
+        s && s.proxy,
+        i.map(
+          ({ vnode: o }) => `at <${Kt(s, o.type)}>`
+        ).join(`
+`),
+        i
+      ]
+    );
+  else {
+    const o = [`[Vue warn]: ${e}`, ...t];
+    i.length && o.push(`
+`, ...Rn(i)), console.warn(...o);
+  }
+  de = !1;
+}
+function xn() {
+  let e = N[N.length - 1];
+  if (!e)
+    return [];
+  const t = [];
+  for (; e; ) {
+    const s = t[0];
+    s && s.vnode === e ? s.recurseCount++ : t.push({
+      vnode: e,
+      recurseCount: 0
+    });
+    const n = e.component && e.component.parent;
+    e = n && n.vnode;
+  }
+  return t;
+}
+function Rn(e) {
+  const t = [];
+  return e.forEach((s, n) => {
+    t.push(...n === 0 ? [] : [`
+`], ...Hn(s));
+  }), t;
+}
+function Hn({ vnode: e, recurseCount: t }) {
+  const s = t > 0 ? `... (${t} recursive calls)` : "", n = e.component ? e.component.parent == null : !1, i = ` at <${Kt(
+    e.component,
+    e.type,
+    n
+  )}`, o = ">" + s;
+  return e.props ? [i, ...kn(e.props), o] : [i + o];
+}
+function kn(e) {
+  const t = [], s = Object.keys(e);
+  return s.slice(0, 3).forEach((n) => {
+    t.push(...xt(n, e[n]));
+  }), s.length > 3 && t.push(" ..."), t;
+}
+function xt(e, t, s) {
+  return D(t) ? (t = JSON.stringify(t), s ? t : [`${e}=${t}`]) : typeof t == "number" || typeof t == "boolean" || t == null ? s ? t : [`${e}=${t}`] : Tt(t) ? (t = xt(e, Z(t.value), !0), s ? t : [`${e}=Ref<`, t, ">"]) : _(t) ? [`${e}=fn${t.name ? `<${t.name}>` : ""}`] : (t = Z(t), s ? t : [`${e}=`, t]);
+}
+const ke = {
+  sp: "serverPrefetch hook",
+  bc: "beforeCreate hook",
+  c: "created hook",
+  bm: "beforeMount hook",
+  m: "mounted hook",
+  bu: "beforeUpdate hook",
+  u: "updated",
+  bum: "beforeUnmount hook",
+  um: "unmounted hook",
+  a: "activated hook",
+  da: "deactivated hook",
+  ec: "errorCaptured hook",
+  rtc: "renderTracked hook",
+  rtg: "renderTriggered hook",
+  0: "setup function",
+  1: "render function",
+  2: "watcher getter",
+  3: "watcher callback",
+  4: "watcher cleanup function",
+  5: "native event handler",
+  6: "component event handler",
+  7: "vnode hook",
+  8: "directive hook",
+  9: "transition hook",
+  10: "app errorHandler",
+  11: "app warnHandler",
+  12: "ref function",
+  13: "async component loader",
+  14: "scheduler flush",
+  15: "component update",
+  16: "app unmount cleanup function"
+};
+function re(e, t, s, n) {
+  try {
+    return n ? e(...n) : e();
+  } catch (i) {
+    De(i, t, s);
+  }
+}
+function Rt(e, t, s, n) {
+  if (_(e)) {
+    const i = re(e, t, s, n);
+    return i && wn(i) && i.catch((o) => {
+      De(o, t, s);
+    }), i;
+  }
+  if (b(e)) {
+    const i = [];
+    for (let o = 0; o < e.length; o++)
+      i.push(Rt(e[o], t, s, n));
+    return i;
+  } else process.env.NODE_ENV !== "production" && O(
+    `Invalid value type passed to callWithAsyncErrorHandling(): ${typeof e}`
+  );
+}
+function De(e, t, s, n = !0) {
+  const i = t ? t.vnode : null, { errorHandler: o, throwUnhandledErrorInProduction: r } = t && t.appContext.config || gn;
+  if (t) {
+    let c = t.parent;
+    const l = t.proxy, d = process.env.NODE_ENV !== "production" ? ke[s] : `https://vuejs.org/error-reference/#runtime-${s}`;
+    for (; c; ) {
+      const u = c.ec;
+      if (u) {
+        for (let h = 0; h < u.length; h++)
+          if (u[h](e, l, d) === !1)
+            return;
+      }
+      c = c.parent;
+    }
+    if (o) {
+      re(o, null, 10, [
+        e,
+        l,
+        d
+      ]);
+      return;
+    }
+  }
+  Dn(e, s, i, n, r);
+}
+function Dn(e, t, s, n = !0, i = !1) {
+  if (process.env.NODE_ENV !== "production") {
+    const o = ke[t];
+    if (s && In(s), O(`Unhandled error${o ? ` during execution of ${o}` : ""}`), s && Tn(), n)
+      throw e;
+    console.error(e);
+  } else {
+    if (i)
+      throw e;
+    console.error(e);
+  }
+}
+const M = [];
+let C = -1;
+const F = [];
+let R = null, $ = 0;
+const On = /* @__PURE__ */ Promise.resolve();
+let _e = null;
+const Nn = 100;
+function $n(e) {
+  let t = C + 1, s = M.length;
+  for (; t < s; ) {
+    const n = t + s >>> 1, i = M[n], o = j(i);
+    o < e || o === e && i.flags & 2 ? t = n + 1 : s = n;
+  }
+  return t;
+}
+function Pn(e) {
+  if (!(e.flags & 1)) {
+    const t = j(e), s = M[M.length - 1];
+    !s || // fast path when the job id is larger than the tail
+    !(e.flags & 2) && t >= j(s) ? M.push(e) : M.splice($n(t), 0, e), e.flags |= 1, Ht();
+  }
+}
+function Ht() {
+  _e || (_e = On.then(kt));
+}
+function Ln(e) {
+  b(e) ? F.push(...e) : R && e.id === -1 ? R.splice($ + 1, 0, e) : e.flags & 1 || (F.push(e), e.flags |= 1), Ht();
+}
+function Fn(e) {
+  if (F.length) {
+    const t = [...new Set(F)].sort(
+      (s, n) => j(s) - j(n)
+    );
+    if (F.length = 0, R) {
+      R.push(...t);
+      return;
+    }
+    for (R = t, process.env.NODE_ENV !== "production" && (e = e || /* @__PURE__ */ new Map()), $ = 0; $ < R.length; $++) {
+      const s = R[$];
+      process.env.NODE_ENV !== "production" && Dt(e, s) || (s.flags & 4 && (s.flags &= -2), s.flags & 8 || s(), s.flags &= -2);
+    }
+    R = null, $ = 0;
+  }
+}
+const j = (e) => e.id == null ? e.flags & 2 ? -1 : 1 / 0 : e.id;
+function kt(e) {
+  process.env.NODE_ENV !== "production" && (e = e || /* @__PURE__ */ new Map());
+  const t = process.env.NODE_ENV !== "production" ? (s) => Dt(e, s) : St;
+  try {
+    for (C = 0; C < M.length; C++) {
+      const s = M[C];
+      if (s && !(s.flags & 8)) {
+        if (process.env.NODE_ENV !== "production" && t(s))
+          continue;
+        s.flags & 4 && (s.flags &= -2), re(
+          s,
+          s.i,
+          s.i ? 15 : 14
+        ), s.flags & 4 || (s.flags &= -2);
+      }
+    }
+  } finally {
+    for (; C < M.length; C++) {
+      const s = M[C];
+      s && (s.flags &= -2);
+    }
+    C = -1, M.length = 0, Fn(e), _e = null, (M.length || F.length) && kt(e);
+  }
+}
+function Dt(e, t) {
+  const s = e.get(t) || 0;
+  if (s > Nn) {
+    const n = t.i, i = n && Bt(n.type);
+    return De(
+      `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.`,
+      null,
+      10
+    ), !0;
+  }
+  return e.set(t, s + 1), !1;
+}
+const ue = /* @__PURE__ */ new Map();
+process.env.NODE_ENV !== "production" && (oe().__VUE_HMR_RUNTIME__ = {
+  createRecord: he(An),
+  rerender: he(Vn),
+  reload: he(Bn)
+});
+const ee = /* @__PURE__ */ new Map();
+function An(e, t) {
+  return ee.has(e) ? !1 : (ee.set(e, {
+    initialDef: te(t),
+    instances: /* @__PURE__ */ new Set()
+  }), !0);
+}
+function te(e) {
+  return zt(e) ? e.__vccOpts : e;
+}
+function Vn(e, t) {
+  const s = ee.get(e);
+  s && (s.initialDef.render = t, [...s.instances].forEach((n) => {
+    t && (n.render = t, te(n.type).render = t), n.renderCache = [], n.update();
+  }));
+}
+function Bn(e, t) {
+  const s = ee.get(e);
+  if (!s) return;
+  t = te(t), Be(s.initialDef, t);
+  const n = [...s.instances];
+  for (let i = 0; i < n.length; i++) {
+    const o = n[i], r = te(o.type);
+    let c = ue.get(r);
+    c || (r !== s.initialDef && Be(r, t), ue.set(r, c = /* @__PURE__ */ new Set())), c.add(o), o.appContext.propsCache.delete(o.type), o.appContext.emitsCache.delete(o.type), o.appContext.optionsCache.delete(o.type), o.ceReload ? (c.add(o), o.ceReload(t.styles), c.delete(o)) : o.parent ? Pn(() => {
+      o.parent.update(), c.delete(o);
+    }) : o.appContext.reload ? o.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);
+  }
+  Ln(() => {
+    ue.clear();
+  });
+}
+function Be(e, t) {
+  xe(e, t);
+  for (const s in e)
+    s !== "__file" && !(s in t) && delete e[s];
+}
+function he(e) {
+  return (t, s) => {
+    try {
+      return e(t, s);
+    } catch (n) {
+      console.error(n), console.warn(
+        "[HMR] Something went wrong during Vue component hot-reload. Full reload required."
+      );
+    }
+  };
+}
+let P, X = [];
+function Ot(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
+  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) => {
+    Ot(o, t);
+  }), setTimeout(() => {
+    P || (t.__VUE_DEVTOOLS_HOOK_REPLAY__ = null, X = []);
+  }, 3e3)) : X = [];
+}
+let se = null, Kn = null;
+const zn = (e) => e.__isTeleport;
+function Nt(e, t) {
+  e.shapeFlag & 6 && e.component ? (e.transition = t, Nt(e.component.subTree, t)) : e.shapeFlag & 128 ? (e.ssContent.transition = t.clone(e.ssContent), e.ssFallback.transition = t.clone(e.ssFallback)) : e.transition = t;
+}
+oe().requestIdleCallback;
+oe().cancelIdleCallback;
+function Un(e, t, s = ae, n = !1) {
+  if (s) {
+    const i = s[e] || (s[e] = []), o = t.__weh || (t.__weh = (...r) => {
+      const c = ri(s), l = Rt(t, s, e, r);
+      return c(), l;
+    });
+    return n ? i.unshift(o) : i.push(o), o;
+  } else if (process.env.NODE_ENV !== "production") {
+    const i = _n(ke[e].replace(/ hook$/, ""));
+    O(
+      `${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 qn = (e) => (t, s = ae) => {
+  (!Vt || e === "sp") && Un(e, (...n) => t(...n), s);
+}, Wn = qn("u"), jn = Symbol.for("v-ndc"), Gn = {};
+process.env.NODE_ENV !== "production" && (Gn.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 Jn = {}, $t = (e) => Object.getPrototypeOf(e) === Jn, Yn = (e) => e.__isSuspense, Pt = Symbol.for("v-fgt"), Xn = Symbol.for("v-txt"), Qn = Symbol.for("v-cmt");
+function Zn(e) {
+  return e ? e.__v_isVNode === !0 : !1;
+}
+const ei = (...e) => Ft(
+  ...e
+), Lt = ({ key: e }) => e ?? null, Q = ({
+  ref: e,
+  ref_key: t,
+  ref_for: s
+}) => (typeof e == "number" && (e = "" + e), e != null ? D(e) || Tt(e) || _(e) ? { i: se, r: e, k: t, f: !!s } : e : null);
+function ti(e, t = null, s = null, n = 0, i = null, o = e === Pt ? 0 : 1, r = !1, c = !1) {
+  const l = {
+    __v_isVNode: !0,
+    __v_skip: !0,
+    type: e,
+    props: t,
+    key: t && Lt(t),
+    ref: t && Q(t),
+    scopeId: Kn,
+    slotScopeIds: null,
+    children: s,
+    component: null,
+    suspense: null,
+    ssContent: null,
+    ssFallback: null,
+    dirs: null,
+    transition: null,
+    el: null,
+    anchor: null,
+    target: null,
+    targetStart: null,
+    targetAnchor: null,
+    staticCount: 0,
+    shapeFlag: o,
+    patchFlag: n,
+    dynamicProps: i,
+    dynamicChildren: null,
+    appContext: null,
+    ctx: se
+  };
+  return c ? (Oe(l, s), o & 128 && e.normalize(l)) : s && (l.shapeFlag |= D(s) ? 8 : 16), process.env.NODE_ENV !== "production" && l.key !== l.key && O("VNode created with invalid key (NaN). VNode type:", l.type), l;
+}
+const si = process.env.NODE_ENV !== "production" ? ei : Ft;
+function Ft(e, t = null, s = null, n = 0, i = null, o = !1) {
+  if ((!e || e === jn) && (process.env.NODE_ENV !== "production" && !e && O(`Invalid vnode type when creating vnode: ${e}.`), e = Qn), Zn(e)) {
+    const c = ne(
+      e,
+      t,
+      !0
+      /* mergeRef: true */
+    );
+    return s && Oe(c, s), c.patchFlag = -2, c;
+  }
+  if (zt(e) && (e = e.__vccOpts), t) {
+    t = ni(t);
+    let { class: c, style: l } = t;
+    c && !D(c) && (t.class = He(c)), W(l) && (Me(l) && !b(l) && (l = xe({}, l)), t.style = Re(l));
+  }
+  const r = D(e) ? 1 : Yn(e) ? 128 : zn(e) ? 64 : W(e) ? 4 : _(e) ? 2 : 0;
+  return process.env.NODE_ENV !== "production" && r & 4 && Me(e) && (e = Z(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
+  )), ti(
+    e,
+    t,
+    s,
+    n,
+    i,
+    r,
+    o,
+    !0
+  );
+}
+function ni(e) {
+  return e ? Me(e) || $t(e) ? xe({}, e) : e : null;
+}
+function ne(e, t, s = !1, n = !1) {
+  const { props: i, ref: o, patchFlag: r, children: c, transition: l } = e, d = t ? oi(i || {}, t) : i, u = {
+    __v_isVNode: !0,
+    __v_skip: !0,
+    type: e.type,
+    props: d,
+    key: d && Lt(d),
+    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 ? b(o) ? o.concat(Q(t)) : [o, Q(t)] : Q(t)
+    ) : o,
+    scopeId: e.scopeId,
+    slotScopeIds: e.slotScopeIds,
+    children: process.env.NODE_ENV !== "production" && r === -1 && b(c) ? c.map(At) : c,
+    target: e.target,
+    targetStart: e.targetStart,
+    targetAnchor: e.targetAnchor,
+    staticCount: e.staticCount,
+    shapeFlag: e.shapeFlag,
+    // if the vnode is cloned with extra props, we can no longer assume its
+    // 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 !== Pt ? r === -1 ? 16 : r | 16 : r,
+    dynamicProps: e.dynamicProps,
+    dynamicChildren: e.dynamicChildren,
+    appContext: e.appContext,
+    dirs: e.dirs,
+    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 && ne(e.ssContent),
+    ssFallback: e.ssFallback && ne(e.ssFallback),
+    el: e.el,
+    anchor: e.anchor,
+    ctx: e.ctx,
+    ce: e.ce
+  };
+  return l && n && Nt(
+    u,
+    l.clone(u)
+  ), u;
+}
+function At(e) {
+  const t = ne(e);
+  return b(e.children) && (t.children = e.children.map(At)), t;
+}
+function ii(e = " ", t = 0) {
+  return si(Xn, null, e, t);
+}
+function Oe(e, t) {
+  let s = 0;
+  const { shapeFlag: n } = e;
+  if (t == null)
+    t = null;
+  else if (b(t))
+    s = 16;
+  else if (typeof t == "object")
+    if (n & 65) {
+      const i = t.default;
+      i && (i._c && (i._d = !1), Oe(e, i()), i._c && (i._d = !0));
+      return;
+    } else
+      s = 32, !t._ && !$t(t) && (t._ctx = se);
+  else _(t) ? (t = { default: t, _ctx: se }, s = 32) : (t = String(t), n & 64 ? (s = 16, t = [ii(t)]) : s = 8);
+  e.children = t, e.shapeFlag |= s;
+}
+function oi(...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 = Re([t.style, n.style]);
+      else if (yn(i)) {
+        const o = t[i], r = n[i];
+        r && o !== r && !(b(o) && o.includes(r)) && (t[i] = o ? [].concat(o, r) : r);
+      } else i !== "" && (t[i] = n[i]);
+  }
+  return t;
+}
+let ae = null, Ee;
+{
+  const e = oe(), 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);
+    };
+  };
+  Ee = t(
+    "__VUE_INSTANCE_SETTERS__",
+    (s) => ae = s
+  ), t(
+    "__VUE_SSR_SETTERS__",
+    (s) => Vt = s
+  );
+}
+const ri = (e) => {
+  const t = ae;
+  return Ee(e), e.scope.on(), () => {
+    e.scope.off(), Ee(t);
+  };
+};
+let Vt = !1;
+process.env.NODE_ENV;
+const ai = /(?:^|[-_])(\w)/g, ci = (e) => e.replace(ai, (t) => t.toUpperCase()).replace(/[-_]/g, "");
+function Bt(e, t = !0) {
+  return _(e) ? e.displayName || e.name : e.name || t && e.__name;
+}
+function Kt(e, t, s = !1) {
+  let n = Bt(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;
+    };
+    n = i(
+      e.components || e.parent.type.components
+    ) || i(e.appContext.components);
+  }
+  return n ? ci(n) : s ? "App" : "Anonymous";
+}
+function zt(e) {
+  return _(e) && "__vccOpts" in e;
+}
+process.env.NODE_ENV;
+process.env.NODE_ENV;
+process.env.NODE_ENV;
+const gi = /* @__PURE__ */ Ut({
+  inheritAttrs: !0,
+  __name: "MyopVueComponent",
+  props: {
+    flowId: {},
+    componentId: {},
+    onReady: { type: Function }
+  },
+  setup(e, { expose: t }) {
+    const s = e, n = qt(), i = Wt(), o = K(null), r = K(!0), c = K(null), l = K(null), d = jt(), u = K(null);
+    Wn(() => {
+      l && l.value && l.value(n);
+    }), Gt(async () => {
+      if (o.value) {
+        const m = await ps.Main.fetchComponent(s.componentId, s.flowId);
+        c.value = await Ct.loadComponent(
+          m,
+          o == null ? void 0 : o.value,
+          {
+            _environment: {
+              // inputs: { ...attrs, ...props },
+              props: n,
+              slots: i,
+              context: d == null ? void 0 : d.appContext,
+              vueContainerRef: o,
+              //@ts-ignore
+              defineUpdater: (w) => {
+                l.value = w;
+              },
+              //@ts-ignore
+              defineInnerVueComponentRef: (w) => {
+                u.value = w.value;
+              }
+            }
+          }
+        ), r.value = !1, s.onReady && s.onReady(c.value, u.value);
+      }
+    });
+    const h = Jt({});
+    return t(h), Yt(() => {
+      Object.assign(h, u.value);
+    }), (m, w) => (Qt(), Xt(Zt, null, [
+      es("div", ns(is(n), {
+        ref_key: "myopContainer",
+        ref: o
+      }), null, 16),
+      r.value ? ts(m.$slots, "loading", { key: 0 }) : ss("", !0)
+    ], 64));
+  }
+});
+export {
+  gi as MyopContainer
+};