@streamlayer/react 1.24.7 → 1.24.8-pre.84ab1b9

package/lib/es/pause-ad.js

@@ -1,232 +1,441 @@
-import { jsx as a, jsxs as B } from "react/jsx-runtime";
-import { h as F } from "./index6.js";
-import { useEffect as i, useState as _, useRef as g, useCallback as R, Component as M } from "react";
-import { s as h, c as w, u as j } from "./feature.js";
-import { e as k } from "./index3.js";
-import { d as K } from "./index15.js";
-import { Y as V, _ as z } from "./hooks-n9ax4LRT.js";
-const G = /* @__PURE__ */ h("div")({
+import { jsx as c, jsxs as N } from "react/jsx-runtime";
+import { h as Q } from "./index7.js";
+import { useEffect as w, useState as j, useRef as _, useMemo as J, useCallback as H, Component as X } from "react";
+import { s as G, u as V, c as K } from "./feature.js";
+import { e as D } from "./index3.js";
+import { d as Y } from "./index15.js";
+import { w as Z, q as $ } from "./hooks-DHRXtbBc.js";
+const ee = /* @__PURE__ */ G("div")({
   name: "PauseAdOverlay",
   class: "pw9gih8",
   propsAsIs: !1
-}), H = /* @__PURE__ */ h("div")({
+}), te = /* @__PURE__ */ G("div")({
   name: "PauseAdContent",
   class: "p8lpomy",
   propsAsIs: !1
-}), O = /* @__PURE__ */ h("div")({
+}), re = /* @__PURE__ */ G("div")({
   name: "PauseAdBottomLeft",
   class: "pv7u167",
   propsAsIs: !1
-}), Y = /* @__PURE__ */ h("button")({
+}), ae = /* @__PURE__ */ G("button")({
   name: "PauseAdPlayButton",
   class: "p1kh2yb0",
   propsAsIs: !1
-}), q = /* @__PURE__ */ h("div")({
+}), se = /* @__PURE__ */ G("div")({
   name: "PauseAdSidebarGradient",
   class: "pl8f94x",
   propsAsIs: !1
-}), J = /* @__PURE__ */ h("div")({
+}), ne = /* @__PURE__ */ G("div")({
   name: "PauseAdSidebar",
   class: "p1m6zmrt",
   propsAsIs: !1
-}), U = /* @__PURE__ */ h("img")({
+}), z = /* @__PURE__ */ G("img")({
   name: "ExternalAdContainer",
   class: "em3vwfa",
   propsAsIs: !1
-}), Q = ({
-  vastUrl: d,
-  isDesktop: n,
-  content: e
-}) => (i(() => {
-  e.imageSrc && e.id && k.emit("exposedPauseAd", {
+}), de = /* @__PURE__ */ G("iframe")({
+  name: "GptAdIframe",
+  class: "g1tibuhw",
+  propsAsIs: !1
+}), oe = ({
+  vastUrl: s,
+  isDesktop: p,
+  content: t
+}) => (w(() => {
+  t.imageSrc && t.id && D.emit("exposedPauseAd", {
     action: "rendered",
     payload: {
-      id: e.id,
-      parentId: e.parentId
+      id: t.id,
+      parentId: t.parentId
     }
   });
-}, [e, d]), e?.imageSrc ? !e.adUrl || !n ? /* @__PURE__ */ a(U, { src: e.imageSrc }) : /* @__PURE__ */ a(
+}, [t, s]), t?.imageSrc ? !t.adUrl || !p ? /* @__PURE__ */ c(z, { src: t.imageSrc }) : /* @__PURE__ */ c(
   "a",
   {
     onClick: () => {
-      k.emit("exposedPauseAd", {
+      D.emit("exposedPauseAd", {
         action: "navigated",
         payload: {
-          id: e.id,
-          parentId: e.parentId
+          id: t.id,
+          parentId: t.parentId
         }
       });
     },
-    href: e.adUrl,
+    href: t.adUrl,
     target: "_blank",
     rel: "noopener noreferrer",
-    children: /* @__PURE__ */ a(U, { src: e.imageSrc })
+    children: /* @__PURE__ */ c(z, { src: t.imageSrc })
   }
-) : null), W = ({ isClosing: d, content: n, externalPauseAdStore: e, onPlay: l, onClose: u, vastUrl: c, options: v, isDesktop: r }) => {
-  const m = v?.showPauseButton ?? !0, { ref: t, focusSelf: y } = K.useFocusable({
+) : null), ie = ({
+  vastUrl: s,
+  sdk: p,
+  onLoaded: t,
+  onReady: u,
+  product: v,
+  platform: m,
+  platformtype: y,
+  pagetype: x,
+  content: A,
+  adWidth: n,
+  adHeight: S,
+  rdid: i,
+  idtype: R,
+  npa: W,
+  isLat: C,
+  targeting: b,
+  containerRef: M
+}) => {
+  const { production: d } = V(p.options), T = V(p.deviceId), [l, h] = j(!1), [r, L] = j({ width: 0, height: 0 }), [f, U] = j({ width: 0, height: 0 }), g = _(null), P = J(() => {
+    const e = new URLSearchParams();
+    return v && e.set("product", v), m && e.set("platform", m), y && e.set("platformtype", y), x && e.set("pagetype", x), A && e.set("content", A), n && e.set("width", n.toString()), S && e.set("height", S.toString()), W != null && e.set("npa", W.toString()), C != null && e.set("is_lat", C.toString()), b && e.set("targeting", new URLSearchParams(b).toString()), T && (e.set("rdid", T), e.set("idtype", "uuid")), i && e.set("rdid", i), R && e.set("idtype", R), s.startsWith("http") ? e.set("url", s) : e.set("slot", s), `https://${d ? "bell-ad.streamlayer.io" : "bell-ad-test.streamlayer.io"}?${e.toString()}`;
+  }, [
+    s,
+    v,
+    m,
+    y,
+    x,
+    A,
+    n,
+    S,
+    W,
+    C,
+    i,
+    R,
+    b,
+    T,
+    d
+  ]);
+  w(() => {
+    const e = M.current;
+    if (!e) return;
+    const a = new ResizeObserver(([k]) => {
+      const { width: I, height: O } = k.contentRect;
+      L({ width: Math.round(I), height: Math.round(O) });
+    });
+    return a.observe(e), () => a.disconnect();
+  }, [M]), w(() => {
+    const e = (a) => {
+      const k = d ? "https://bell-ad.streamlayer.io" : "https://bell-ad-test.streamlayer.io";
+      a.origin === k && a.data.id === "slGptAdCb" && (g.current && a.source !== g.current.contentWindow || (a.data?.type === "slGptAdLoaded" && (h(!0), t?.({
+        id: a.data.creativeId,
+        parentId: a.data.advertiserId,
+        width: a.data.width,
+        height: a.data.height
+      }), U({ width: a.data.width, height: a.data.height })), a.data?.type === "slGptAdReady" && u?.({
+        id: a.data.creativeId,
+        parentId: a.data.advertiserId
+      })));
+    };
+    return window.addEventListener("message", e), () => window.removeEventListener("message", e);
+  }, [t, u, d]);
+  const E = f.width > 0 && f.height > 0 ? Math.min(r.width / f.width, r.height / f.height) : 1;
+  return /* @__PURE__ */ c("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ c(
+    de,
+    {
+      ref: g,
+      src: P,
+      scrolling: "no",
+      allow: "attribution-reporting",
+      allowTransparency: !0,
+      style: {
+        opacity: l ? 1 : 0,
+        width: f.width,
+        height: f.height,
+        transformOrigin: "0 0",
+        transform: `scale(${E})`
+      }
+    }
+  ) });
+}, le = ({
+  sdk: s,
+  isClosing: p,
+  adContent: t,
+  externalPauseAdStore: u,
+  onPlay: v,
+  onClose: m,
+  onGptAdLoaded: y,
+  onGptAdReady: x,
+  vastUrl: A,
+  product: n,
+  platform: S,
+  platformtype: i,
+  pagetype: R,
+  content: W,
+  adWidth: C,
+  adHeight: b,
+  npa: M,
+  isLat: d,
+  targeting: T,
+  options: l,
+  isDesktop: h,
+  isGptAd: r,
+  rdid: L,
+  idtype: f,
+  gptAdLoaded: U
+}) => {
+  const g = l?.showPauseButton ?? !0, P = _(null), { ref: E, focusSelf: e } = Y.useFocusable({
     focusKey: "sl-pause-ad-play",
-    onEnterRelease: l,
+    onEnterRelease: v,
     isFocusBoundary: !0,
     forceFocus: !0
   });
-  return i(() => () => {
-    e.revalidate();
-  }, [e]), i(() => {
-    t.current && y();
-  }, [t, y]), i(() => {
-    if (!u)
+  return w(() => () => {
+    u.revalidate();
+  }, [u]), w(() => {
+    E.current && e();
+  }, [E, e]), w(() => {
+    if (!m)
       return () => {
       };
-    const b = (f) => {
-      const s = f.keyCode;
-      if (s === 461 || s === 10009 || s === 27 || s === 8) {
-        f.preventDefault(), f.stopPropagation(), f.stopImmediatePropagation(), u();
+    const a = (k) => {
+      const I = k.keyCode;
+      if (I === 461 || I === 10009 || I === 27 || I === 8) {
+        k.preventDefault(), k.stopPropagation(), k.stopImmediatePropagation(), m();
         return;
       }
     };
-    return window.addEventListener("keydown", b, { capture: !0 }), () => window.removeEventListener("keydown", b, { capture: !0 });
-  }, [u]), /* @__PURE__ */ a(G, { className: w("SL_PauseAd", d && "pause-ad-closing"), children: /* @__PURE__ */ B(H, { children: [
-    m && /* @__PURE__ */ a(O, { children: /* @__PURE__ */ a(
-      Y,
-      {
-        ref: t,
-        onClick: l,
-        onMouseEnter: () => t.current.focus(),
-        "aria-label": "Resume playback"
+    return window.addEventListener("keydown", a, { capture: !0 }), () => window.removeEventListener("keydown", a, { capture: !0 });
+  }, [m]), /* @__PURE__ */ c(
+    ee,
+    {
+      className: K("SL_PauseAd", p && "pause-ad-closing", r && !U && "pause-ad-preloading"),
+      children: /* @__PURE__ */ N(te, { children: [
+        g && /* @__PURE__ */ c(re, { children: /* @__PURE__ */ c(
+          ae,
+          {
+            ref: E,
+            onClick: v,
+            onMouseEnter: () => E.current.focus(),
+            "aria-label": "Resume playback"
+          }
+        ) }),
+        /* @__PURE__ */ c(se, { className: K("SL_PauseAdSidebar", h && "SL_PauseAdSidebar--desktop"), children: /* @__PURE__ */ N(ne, { ref: P, className: K(h && "SL_PauseAdSidebar__content--desktop"), children: [
+          r && A && /* @__PURE__ */ c(
+            ie,
+            {
+              vastUrl: A,
+              isDesktop: h,
+              product: n,
+              platform: S,
+              platformtype: i,
+              pagetype: R,
+              content: W,
+              adWidth: C,
+              adHeight: b,
+              npa: M,
+              isLat: d,
+              rdid: L,
+              idtype: f,
+              targeting: T,
+              containerRef: P,
+              onLoaded: y,
+              onReady: x,
+              sdk: s
+            }
+          ),
+          !r && A && t && /* @__PURE__ */ c(oe, { content: t, isDesktop: h, vastUrl: A })
+        ] }) })
+      ] })
+    }
+  );
+}, ce = (s) => {
+  if (!s) return !1;
+  try {
+    return s.startsWith("http") ? new URL(s).searchParams.get("output") === "ldjh" : !0;
+  } catch {
+    return !1;
+  }
+}, pe = ({ showPauseAd: s, externalUrls: p, vastUrls: t, sdk: u, onClose: v, onRender: m, options: y, isDesktop: x }) => {
+  const A = p ?? t, n = y?.pauseAdDelay ?? 0, S = y?.pauseAdRefetchInterval ?? 1e3 * 60 * 50, [i, R] = j(!1), [W, C] = j(!1), [b, M] = j(!1), d = _(), T = _(), l = A?.[0], h = l?.url, r = ce(h), L = _(h), f = _(""), U = _(""), g = _(null);
+  L.current = h;
+  const [P, E] = u.advertisement.getExternalPauseAd(r ? "" : h, {
+    refetchInterval: S,
+    $enabled: !r && (n === 0 || !!s),
+    prefetch: !r && n === 0 && S > 0
+  }), e = V(P), a = H((o) => {
+    g.current = { id: o.id, parentId: o.parentId }, M(!0);
+  }, []), k = H((o) => {
+    D.emit("exposedPauseAd", {
+      action: "rendered",
+      payload: {
+        id: o.id,
+        parentId: o.parentId
       }
-    ) }),
-    /* @__PURE__ */ a(q, { className: w("SL_PauseAdSidebar", r && "SL_PauseAdSidebar--desktop"), children: /* @__PURE__ */ a(J, { className: w(r && "SL_PauseAdSidebar__content--desktop"), children: c && /* @__PURE__ */ a(Q, { content: n, isDesktop: r, vastUrl: c }) }) })
-  ] }) });
-}, X = ({ showPauseAd: d, vastUrls: n, sdk: e, onClose: l, onRender: u, options: c, isDesktop: v }) => {
-  const r = c?.pauseAdDelay ?? 0, m = c?.pauseAdRefetchInterval ?? 1e3 * 60 * 50, [t, y] = _(!1), [b, f] = _(!1), s = g(), P = n?.[0].url, A = g(P), S = g(""), I = g("");
-  A.current = P;
-  const [p, L] = e.advertisement.getExternalPauseAd(P, {
-    refetchInterval: m,
-    $enabled: r === 0 || !!d,
-    prefetch: r === 0 && m > 0
-  }), x = j(p), C = R(() => {
-    if (l) {
-      I.current = A.current;
-      const o = p.get().data;
-      k.emit("exposedPauseAd", {
-        action: "closed",
-        payload: o?.url === I.current ? {
-          id: o?.id,
-          parentId: o?.parentId
-        } : {}
-      }), l();
+    });
+  }, []), I = H(() => {
+    if (v) {
+      if (U.current = L.current, r)
+        D.emit("exposedPauseAd", {
+          action: "closed",
+          payload: g.current ? {
+            id: g.current.id,
+            parentId: g.current.parentId
+          } : {}
+        });
+      else {
+        const o = P.get().data;
+        D.emit("exposedPauseAd", {
+          action: "closed",
+          payload: o?.url === U.current ? {
+            id: o?.id,
+            parentId: o?.parentId
+          } : {}
+        });
+      }
+      v();
     }
-  }, [l, p]), N = R(() => {
-    e.controlVideoPlayer({ play: !0 });
-  }, [e]);
-  return i(() => {
-    L === A.current && x.error && (clearTimeout(s.current), C?.());
-  }, [x, C, L]), i(() => {
-    if (d && P) {
-      S.current = A.current, I.current = "";
-      const o = p.get().data;
-      k.emit("exposedPauseAd", {
-        action: "enabled",
-        payload: o?.url === S.current ? {
-          id: o?.id,
-          parentId: o?.parentId
-        } : {}
-      });
-      const T = () => {
-        const E = p.get(), D = E.data;
-        (!D || D?.url === A.current) && (!E.loading && D?.imageSrc ? (clearTimeout(s.current), f(!1), y(!0)) : E.loading && (s.current = setTimeout(() => {
-          T();
+  }, [v, P, r]), O = H(() => {
+    u.controlVideoPlayer({ play: !0 });
+  }, [u]);
+  w(() => {
+    !r && E === L.current && e.error && (clearTimeout(d.current), I?.());
+  }, [e, r, I, E]), w(() => {
+    if (s && h) {
+      if (f.current = L.current, U.current = "", r)
+        g.current = null, M(!1), D.emit("exposedPauseAd", {
+          action: "enabled",
+          payload: {}
+        });
+      else {
+        const B = P.get().data;
+        D.emit("exposedPauseAd", {
+          action: "enabled",
+          payload: B?.url === f.current ? {
+            id: B?.id,
+            parentId: B?.parentId
+          } : {}
+        });
+      }
+      const o = () => {
+        if (r) {
+          clearTimeout(d.current), C(!1), R(!0);
+          return;
+        }
+        const B = P.get(), F = B.data;
+        (!F || F?.url === L.current) && (!B.loading && F?.imageSrc ? (clearTimeout(d.current), C(!1), R(!0)) : B.loading && (d.current = setTimeout(() => {
+          o();
         }, 200)));
       };
-      clearTimeout(s.current), s.current = setTimeout(() => {
-        T();
-      }, r);
+      clearTimeout(d.current), d.current = setTimeout(() => {
+        o();
+      }, n);
     } else {
-      if (I.current !== A.current) {
-        const o = p.get().data;
-        I.current = "", S.current !== "" && (k.emit("exposedPauseAd", {
-          action: "disabled",
-          payload: S.current === o?.url ? {
-            id: o?.id,
-            parentId: o?.parentId
-          } : {}
-        }), S.current = "");
+      if (U.current !== L.current && (U.current = "", f.current !== "")) {
+        if (r)
+          D.emit("exposedPauseAd", {
+            action: "disabled",
+            payload: g.current ? {
+              id: g.current.id,
+              parentId: g.current.parentId
+            } : {}
+          });
+        else {
+          const o = P.get().data;
+          D.emit("exposedPauseAd", {
+            action: "disabled",
+            payload: f.current === o?.url ? {
+              id: o?.id,
+              parentId: o?.parentId
+            } : {}
+          });
+        }
+        f.current = "";
       }
-      f(!0), s.current = setTimeout(() => {
-        y(!1);
+      C(!0), d.current = setTimeout(() => {
+        R(!1);
       }, 400);
     }
     return () => {
-      s.current && clearTimeout(s.current);
+      d.current && clearTimeout(d.current);
     };
-  }, [p, C, r, d, P]), i(() => {
-    u?.({ rendered: t });
-  }, [t, u]), i(() => () => {
-    u?.({ rendered: !1 });
-  }, [u]), !t || !x.data ? null : /* @__PURE__ */ a(
-    W,
+  }, [P, r, I, n, s, h]), w(() => (i && r && !b ? T.current = setTimeout(() => {
+    I?.();
+  }, 1e4) : clearTimeout(T.current), () => clearTimeout(T.current)), [i, r, b, I]);
+  const q = i && (!r || b);
+  return w(() => {
+    m?.({ rendered: q });
+  }, [q, m]), w(() => () => {
+    m?.({ rendered: !1 });
+  }, [m]), !i || !r && !e.data ? null : /* @__PURE__ */ c(
+    le,
     {
-      onClose: C,
-      isClosing: b,
-      onPlay: N,
-      vastUrl: P,
-      options: c,
-      isDesktop: v,
-      externalPauseAdStore: p,
-      content: x.data
+      onClose: I,
+      isClosing: W,
+      onPlay: O,
+      vastUrl: h,
+      product: l?.product,
+      platform: l?.platform,
+      platformtype: l?.platformtype,
+      pagetype: l?.pagetype,
+      content: l?.content,
+      adWidth: l?.adWidth,
+      adHeight: l?.adHeight,
+      npa: l?.npa,
+      isLat: l?.is_lat,
+      targeting: l?.targeting,
+      options: y,
+      isDesktop: x,
+      isGptAd: r,
+      gptAdLoaded: b,
+      onGptAdLoaded: a,
+      onGptAdReady: k,
+      externalPauseAdStore: P,
+      adContent: e.data,
+      sdk: u
     }
   );
-}, Z = ({
-  showPauseAd: d,
-  pauseAdVastUrl: n,
-  videoPlayerController: e,
-  onRenderPauseAd: l,
-  onClosePauseAd: u,
-  children: c,
-  options: v
+}, ue = ({
+  showPauseAd: s,
+  pauseAdExternalUrls: p,
+  pauseAdVastUrl: t,
+  videoPlayerController: u,
+  onRenderPauseAd: v,
+  onClosePauseAd: m,
+  children: y,
+  options: x
 }) => {
-  const r = V(), m = z(), t = g();
-  return i(() => r ? (e && (t.current = e, r.addVideoPlayerController(t.current)), () => {
-    t.current && r.removeVideoPlayerController(t.current);
+  const A = p ?? t, n = Z(), S = $(), i = _();
+  return w(() => n ? (u && (i.current = u, n.addVideoPlayerController(i.current)), () => {
+    i.current && n.removeVideoPlayerController(i.current);
   }) : () => {
-  }, [r, e]), r ? /* @__PURE__ */ a("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ B(
-    F,
+  }, [n, u]), n ? /* @__PURE__ */ c("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ N(
+    Q,
     {
-      style: c ? { position: "relative" } : {},
-      customTheme: m.theme,
-      themeMode: m.themeMode,
+      style: y ? { position: "relative" } : {},
+      customTheme: S.theme,
+      themeMode: S.themeMode,
       children: [
-        c,
-        n && /* @__PURE__ */ a(
-          X,
+        y,
+        A && /* @__PURE__ */ c(
+          pe,
           {
-            sdk: r,
-            showPauseAd: d,
-            vastUrls: n,
-            onClose: u,
-            onRender: l,
-            options: v,
+            sdk: n,
+            showPauseAd: s,
+            externalUrls: A,
+            onClose: m,
+            onRender: v,
+            options: x,
             isDesktop: !0
           }
         )
       ]
     }
-  ) }) : c;
+  ) }) : y;
 };
-class oe extends M {
-  constructor(n) {
-    super(n), this.state = { hasError: !1 };
+class Ie extends X {
+  constructor(p) {
+    super(p), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(n, e) {
-    console.error(n, e.componentStack);
+  componentDidCatch(p, t) {
+    console.error(p, t.componentStack);
   }
   render() {
-    return this.state.hasError ? this.props.children : /* @__PURE__ */ a(Z, { ...this.props });
+    return this.state.hasError ? this.props.children : /* @__PURE__ */ c(ue, { ...this.props });
   }
 }
 export {
-  oe as StreamLayerPauseAd
+  Ie as StreamLayerPauseAd
 };

package/lib/es/points.js

@@ -1,13 +1,13 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { h as c } from "./index6.js";
+import { h as c } from "./index7.js";
 import { useState as u, useEffect as d } from "react";
 import { s as o, u as f, F as m } from "./feature.js";
 import { e as n } from "./index3.js";
 import { p as h } from "./index11.js";
 import { m as y } from "./theme.js";
-import { B as S } from "./index7.js";
+import { M as S } from "./index5.js";
 import { S as v } from "./useStreamLayerApp2.js";
-import { Y as g, _ as A } from "./hooks-n9ax4LRT.js";
+import { w as g, q as A } from "./hooks-DHRXtbBc.js";
 const I = /* @__PURE__ */ o("div")({
   name: "PointsContainer",
   class: "psiob9b",
@@ -24,19 +24,19 @@ const I = /* @__PURE__ */ o("div")({
   name: "PointsBody",
   class: "p12n4f2h",
   propsAsIs: !1
-}), T = /* @__PURE__ */ o("div")({
+}), M = /* @__PURE__ */ o("div")({
   name: "PointsTitle",
   class: "poqmx89",
   propsAsIs: !1
-}), x = /* @__PURE__ */ o("div")({
+}), T = /* @__PURE__ */ o("div")({
   name: "PointsValue",
   class: "prj9b3v",
   propsAsIs: !1
-}), B = ({ points: s, onClick: e }) => /* @__PURE__ */ p(I, { className: y, onClick: e, children: [
+}), x = ({ points: s, onClick: e }) => /* @__PURE__ */ p(I, { className: y, onClick: e, children: [
   /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, { name: "icon-trophy-solid" }) }),
   /* @__PURE__ */ p(F, { children: [
-    /* @__PURE__ */ t(T, { children: "Total points" }),
-    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(h, { value: s }) })
+    /* @__PURE__ */ t(M, { children: "Total points" }),
+    /* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(h, { value: s }) })
   ] })
 ] }), C = ({ gamification: s }) => {
   const e = s.userSummary.$store, [a, l] = u(0);
@@ -47,7 +47,7 @@ const I = /* @__PURE__ */ o("div")({
     return () => {
       r();
     };
-  }, [e]), /* @__PURE__ */ t(B, { points: a, onClick: () => {
+  }, [e]), /* @__PURE__ */ t(x, { points: a, onClick: () => {
     const r = s.status.get();
     r === m.Suspended ? (s.openFeature(), n.emit("app", {
       action: "open",