@streamlayer/react 0.41.10 → 1.0.0

package/lib/es/app.js

@@ -1,16 +1,921 @@
-import { jsx as r } from "react/jsx-runtime";
-import { a as s, b as t, i as n } from "./index2.js";
-import { useContext as i } from "react";
-const o = () => null, d = () => {
-  const { sdk: e } = i(s);
+var he = Object.defineProperty;
+var ve = (e, s, n) => s in e ? he(e, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[s] = n;
+var g = (e, s, n) => (ve(e, typeof s != "symbol" ? s + "" : s, n), n);
+import { jsx as t, jsxs as y, Fragment as D } from "react/jsx-runtime";
+import { a3 as V, u, F as ge, s as h, T as ie, c as me, x as ye, a as ke, N as fe, k as Ne, M as be, b as Se, e as Ie, g as $e, f as Ce, O as re, m as q, h as Ee, C as we, i as Ae, n as ae, j as Le, l as De, o as Te, q as U, t as xe, v as le, w as F, I as Oe, y as Re, r as Ve, A as qe, B as Pe, D as Qe, E as _e, G as Ue, H as O, J as B, $ as Fe, P as Ke, K as Me, L as ze, R as Be, U as We, V as P, Z as je, _ as Ge, p as W, a0 as He, W as Xe, X as Ye, Y as Ze, a4 as Je, a1 as de, a2 as j } from "./index2.js";
+import { createContext as es, useContext as K, useRef as L, useState as $, useEffect as k, useTransition as ss, lazy as ns, useMemo as w, Suspense as ts, useLayoutEffect as os, useCallback as G } from "react";
+import { C as E, c as H, Q as R, S as x } from "./useStreamLayerApp2.js";
+window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
+function is(e) {
+  return e instanceof DOMException && // everything except Firefox
+  (e.code === 22 || // Firefox
+  e.code === 1014 || // test name field too, because code might not be present
+  // everything except Firefox
+  e.name === "QuotaExceededError" || // Firefox
+  e.name === "NS_ERROR_DOM_QUOTA_REACHED");
+}
+class rs {
+  constructor(s = "main", n = window.localStorage) {
+    g(this, "delimiter", ":");
+    g(this, "prefix");
+    g(this, "storage");
+    g(this, "clear", () => {
+      for (const s in window.localStorage)
+        s.startsWith(this.prefix) && this.storage.removeItem(s);
+    });
+    g(this, "generateKey", (s) => `${this.prefix}${this.delimiter}${s.join(this.delimiter)}`);
+    g(this, "write", (...s) => {
+      const n = s.pop() || "", o = this.generateKey(s);
+      try {
+        this.storage.setItem(o, n);
+      } catch (r) {
+        is(r) && this.storage === window.sessionStorage && (window.sessionStorage.removeItem("slstreamlogs"), this.storage.setItem(o, n));
+      }
+    });
+    g(this, "read", (...s) => {
+      const n = this.storage.getItem(this.generateKey(s));
+      return n === null ? void 0 : n;
+    });
+    g(this, "remove", (...s) => {
+      this.storage.removeItem(this.generateKey(s));
+    });
+    this.prefix = `sl-sdk${this.delimiter}${s}`, this.storage = n;
+  }
+}
+var X;
+(function(e) {
+  e.Init = "init", e.Ready = "ready", e.Connecting = "connecting", e.Connected = "connected", e.Disconnected = "disconnected", e.Failed = "failed", e.Reconnect = "reconnect", e.Reconnecting = "reconnecting";
+})(X || (X = {}));
+E.Unknown, E.Internal, E.DeadlineExceeded, E.ResourceExhausted, E.FailedPrecondition, E.Unavailable, E.DataLoss;
+V("grpc:retry");
+H(10, { description: "Number of attempts to retry" }), H(3e4, { description: "Max delay between retries in milliseconds" });
+var I;
+(function(e) {
+  e.SCHEMA = "schema", e.EXTERNAL_TOKEN = "eToken", e.TOKEN = "token";
+})(I || (I = {}));
+class as extends rs {
+  constructor() {
+    super("user");
+    // Schema
+    g(this, "setSchema", (n) => {
+      this.write(I.SCHEMA, n);
+    });
+    g(this, "getSchema", () => this.read(I.SCHEMA));
+    // Token
+    g(this, "setToken", (n) => {
+      this.write(I.TOKEN, n);
+    });
+    g(this, "getToken", () => this.read(I.TOKEN));
+    // External Token
+    g(this, "setExternalToken", (n) => {
+      this.write(I.EXTERNAL_TOKEN, n);
+    });
+    g(this, "getExternalToken", () => this.read(I.EXTERNAL_TOKEN));
+    g(this, "removeToken", () => {
+      this.remove(I.TOKEN);
+    });
+  }
+}
+var Y;
+(function(e) {
+  e.DISABLED = "disabled", e.INITIALIZATION = "initialization", e.READY = "ready", e.FAILED = "failed", e.SUSPENDED = "suspended";
+})(Y || (Y = {}));
+V("deep_link");
+V("bypass");
+new as();
+V("video_player");
+var Z;
+(function(e) {
+  e.ALLOWED = "allowed", e.DISALLOWED = "disallowed";
+})(Z || (Z = {}));
+var J;
+(function(e) {
+  e.UNKNOWN = "unknown", e.ALREADY_VOTED = "already_voted";
+})(J || (J = {}));
+var ee;
+(function(e) {
+  e.ONBOARDING = "onboarding", e.ONBOARDING_IO = "onboarding_io";
+})(ee || (ee = {}));
+var se;
+(function(e) {
+  e.Unset = "unset", e.Required = "required", e.Optional = "optional", e.Completed = "completed", e.Disabled = "disabled", e.Unavailable = "unavailable";
+})(se || (se = {}));
+R.POLL, R.PREDICTION, R.TRIVIA;
+const ls = {
+  [x.GAMES]: !0
+}, Q = /* @__PURE__ */ h("div")({
+  name: "LoadingContainer",
+  class: "l1a1b29x",
+  propsAsIs: !1
+}), ds = ({
+  feature: e,
+  sdk: s,
+  children: n,
+  className: o,
+  noWait: r
+}) => {
+  const a = u(e.status), i = u(s.sdkStore.slStreamId);
+  if (!r) {
+    if (i != null && i.loading && !i.data)
+      return /* @__PURE__ */ t(Q, {
+        className: o,
+        children: "Event is loading..."
+      });
+    if (!(i != null && i.data))
+      return /* @__PURE__ */ t(Q, {
+        className: o,
+        children: "Event is forbidden..."
+      });
+    if (a !== ge.Ready)
+      return /* @__PURE__ */ t(Q, {
+        className: o,
+        children: "Wait feature..."
+      });
+  }
+  return n;
+}, ce = es({
+  sdk: null
+}), M = () => K(ce), cs = /* @__PURE__ */ h("div")({
+  name: "QuestionContainer",
+  class: "qfnqmpg",
+  propsAsIs: !1
+}), ps = ({
+  openedQuestion: e
+}) => {
+  var s, n;
+  const {
+    sdk: o
+  } = M();
+  return ((s = e == null ? void 0 : e.attributes) == null ? void 0 : s.attributes.case) === "insight" ? /* @__PURE__ */ t(ye, {
+    ...e.attributes.attributes.value,
+    controlVideo: o == null ? void 0 : o.controlVideoPlayer
+  }) : ((n = e == null ? void 0 : e.attributes) == null ? void 0 : n.attributes.case) === "tweet" ? /* @__PURE__ */ t(ke, {
+    ...e.attributes.attributes.value,
+    controlVideo: o == null ? void 0 : o.controlVideoPlayer
+  }) : null;
+}, us = ({
+  extendedQuestion: e,
+  vote: s,
+  close: n
+}) => {
+  const {
+    loading: o,
+    data: r
+  } = e;
+  return r ? /* @__PURE__ */ t(fe, {
+    vote: s,
+    close: n,
+    openedQuestion: r,
+    isLoading: !!o
+  }) : /* @__PURE__ */ t(Ne, {});
+}, hs = ({
+  gamification: e
+}) => {
+  var s;
+  const n = u(e.openedQuestion.$store), o = u(e.openedQuestion.$extendedStore);
+  if (!n)
+    return null;
+  const r = n.type;
+  return /* @__PURE__ */ y(cs, {
+    children: [/* @__PURE__ */ t(ie, {
+      close: e.closeQuestion,
+      type: ((s = n.attributes) == null ? void 0 : s.type) || R.UNSET
+    }), r === "question" && /* @__PURE__ */ t(us, {
+      vote: e.submitAnswer,
+      close: e.closeQuestion,
+      extendedQuestion: o
+    }), r !== "question" && /* @__PURE__ */ t(ps, {
+      openedQuestion: n
+    }), /* @__PURE__ */ t(me, {
+      sponsorLogo: ""
+    })]
+  });
+}, vs = /* @__PURE__ */ h("div")({
+  name: "InviteFriendsContainer",
+  class: "i1d1hf8u",
+  propsAsIs: !1
+}), gs = ({
+  deepLink: e
+}) => /* @__PURE__ */ t(vs, {
+  children: /* @__PURE__ */ t(be, {
+    inviteLink: e,
+    inviteCardTitle: "It’s More Fun With Friends",
+    inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
+  })
+}), ms = /* @__PURE__ */ h("div")({
+  name: "InviteLinkContainer",
+  class: "i9tvant",
+  propsAsIs: !1
+}), ys = ({
+  gamification: e,
+  scrollNode: s,
+  scrollStore: n
+}) => {
+  const o = L(null), {
+    data: r,
+    hasMore: a,
+    loading: i,
+    key: l
+  } = u(e.leaderboardList.$store), {
+    data: c
+  } = u(e.deepLink.$store), [d, p] = Se(o);
+  return !r.length && !i ? /* @__PURE__ */ t(gs, {
+    deepLink: c
+  }) : /* @__PURE__ */ y(D, {
+    children: [/* @__PURE__ */ t(Ie, {
+      items: r,
+      scrollNode: s,
+      scrollStore: n,
+      fetchMore: e.leaderboardList.fetchMore,
+      hasMore: a,
+      openItemDetail: e.openUser,
+      currentUserId: e.currentUserId.get()
+    }, l), c && /* @__PURE__ */ t(ms, {
+      ref: o,
+      children: /* @__PURE__ */ t($e, {
+        onClick: () => d(c),
+        title: "Invite Friends",
+        description: "Challenge them now!"
+      })
+    }), p]
+  });
+}, ks = ({ store: e, openQuestion: s }) => {
+  const { sdk: n } = M(), o = u(e);
+  return /* @__PURE__ */ t(Ce, { openQuestion: s, questions: o.data, controlVideo: n == null ? void 0 : n.controlVideoPlayer });
+}, fs = ({ userSummary: e }) => {
+  var s;
+  const [n, o] = $(void 0);
+  return k(() => {
+    const r = e.$store.subscribe((a) => {
+      a && o(a);
+    });
+    return () => {
+      r();
+    };
+  }, [e]), /* @__PURE__ */ t(re, { loading: !(n != null && n.summary), ...n == null ? void 0 : n.summary, successRate: (s = n == null ? void 0 : n.percentage) == null ? void 0 : s.correct });
+}, Ns = ({ gamification: e, className: s, scrollStore: n, scrollNode: o, appNode: r, style: a, responsiveStore: i }) => {
+  const { tabsShown: l } = u(n, { keys: ["tabsShown"] }), [c, d] = $(q.HOME), [, p] = ss(), { sdkInDesktopView: v, screen: m } = u(i, { keys: ["sdkInDesktopView"] }), f = (b) => {
+    p(() => {
+      var A;
+      d(b), v === !1 && (((A = r.current) == null ? void 0 : A.getBoundingClientRect().y) || 0) < 0 && U(r, m.size, { behavior: "instant" });
+    });
+  };
+  k(() => n.subscribe((b) => {
+    if (b.scrollPosition === 0) {
+      n.setKey("tabsShown", !0);
+      return;
+    }
+    i.get().sdkInDesktopView ? n.setKey("tabsShown", b.scrollDirection === "backward") : n.setKey("tabsShown", b.scrollDirection === "forward");
+  }), [n, i]);
+  let N = "0px";
+  return v ? N = l ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : N = l ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ y(Ee, { className: s, style: a, children: [
+    /* @__PURE__ */ t(
+      we,
+      {
+        style: {
+          top: N
+        },
+        children: /* @__PURE__ */ t(Ae, { activePage: c, toggleActivePage: f })
+      }
+    ),
+    c === q.HOME && /* @__PURE__ */ y(D, { children: [
+      /* @__PURE__ */ t(ae, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(Le, { children: /* @__PURE__ */ t(fs, { userSummary: e.userSummary }) }) }),
+      /* @__PURE__ */ t(De, { style: { flex: 1 }, children: /* @__PURE__ */ t(ks, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
+    ] }),
+    c === q.LEADERBOARD && /* @__PURE__ */ t(Te, { children: /* @__PURE__ */ t(ys, { scrollStore: n, scrollNode: o, gamification: e }) })
+  ] });
+}, bs = () => F, ne = /* @__PURE__ */ h(bs())({
+  name: "OpenedContainer",
+  class: "o1o2cpiy",
+  propsAsIs: !0
+}), Ss = /* @__PURE__ */ h("div")({
+  name: "UserContainer",
+  class: "u1ob6f8q",
+  propsAsIs: !1
+}), Is = ({
+  correct: e,
+  incorrect: s
+}) => {
+  const n = e + s;
+  return n === 0 ? 0 : Math.round(e / n * 100);
+}, gn = ({
+  gamification: e,
+  scrollStore: s,
+  className: n,
+  appNode: o,
+  scrollNode: r,
+  responsiveStore: a
+}) => /* @__PURE__ */ t(Ns, {
+  appNode: o,
+  scrollStore: s,
+  scrollNode: r,
+  className: n,
+  gamification: e,
+  responsiveStore: a
+}), $s = ({
+  gamification: e,
+  className: s,
+  appNode: n,
+  responsiveStore: o
+}) => {
+  const r = u(e.openedQuestion.$store), a = u(e.openedUser), {
+    sdkInDesktopView: i
+  } = u(o, {
+    keys: ["sdkInDesktopView"]
+  }), {
+    hiding: l,
+    onAnimationEnd: c
+  } = xe();
+  if (!n.current || !r && !a)
+    return null;
+  const d = r ? /* @__PURE__ */ t(ne, {
+    className: s,
+    hiding: l,
+    onAnimationEnd: c,
+    children: /* @__PURE__ */ t(hs, {
+      gamification: e
+    })
+  }) : a ? /* @__PURE__ */ t(ne, {
+    className: s,
+    hiding: l,
+    onAnimationEnd: c,
+    children: /* @__PURE__ */ y(Ss, {
+      children: [/* @__PURE__ */ t(ie, {
+        label: "Friend's Rank",
+        close: e.closeUser
+      }), /* @__PURE__ */ t(ae, {
+        children: /* @__PURE__ */ t(re, {
+          ...a,
+          successRate: Is(a)
+        })
+      })]
+    })
+  }) : null;
+  return /* @__PURE__ */ t(le, {
+    container: n,
+    useContainer: !i,
+    children: d
+  });
+}, Cs = ns(() => import("./gamification-feature.js")), Es = ({ sdk: e, feature: s, className: n, scrollStore: o, appNode: r, scrollNode: a, responsiveStore: i }) => {
+  const l = w(() => s && s.featureConfig.get().type === x.GAMES ? /* @__PURE__ */ t(ds, { className: n, sdk: e, feature: s, children: /* @__PURE__ */ t(
+    Cs,
+    {
+      appNode: r,
+      scrollStore: o,
+      scrollNode: a,
+      className: n,
+      responsiveStore: i,
+      gamification: s
+    }
+  ) }) : null, [e, s, n, i, o, a, r]);
+  return /* @__PURE__ */ t(
+    ts,
+    {
+      fallback: /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: l
+    }
+  );
+}, ws = ({ feature: e, className: s, appNode: n, responsiveStore: o }) => e && e.featureConfig.get().type === x.GAMES ? /* @__PURE__ */ t(
+  $s,
+  {
+    className: s,
+    appNode: n,
+    responsiveStore: o,
+    gamification: e
+  }
+) : null, As = () => Re, Ls = /* @__PURE__ */ h(As())({
+  name: "Container",
+  class: "ckodz37",
+  propsAsIs: !0
+}), Ds = ({
+  sdk: e
+}) => {
+  const s = u(e.sdkStore.organizationSettings), n = u(e.sdkStore.streamSettings), o = u(e.getActiveFeature()), r = w(() => {
+    const i = (n == null ? void 0 : n.data) || (s == null ? void 0 : s.data);
+    return i != null && i.overlays ? i.overlays : [];
+  }, [s, n]), a = w(() => [...r.filter(({
+    enableSdkButton: i
+  }) => i).map((i) => ({
+    id: i.type,
+    onClick: () => e.openFeature(i.type),
+    disabled: !(i.type in ls),
+    label: i.name,
+    icon: /* @__PURE__ */ t("img", {
+      src: i.icon,
+      alt: ""
+    }),
+    /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
+    position: i.position * 10
+  }))].sort((i, l) => i.position - l.position), [r, e]);
+  return /* @__PURE__ */ t(Ls, {
+    children: a.map((i) => /* @__PURE__ */ t(Oe, {
+      ...i,
+      icon: void 0,
+      active: i.id === o
+    }, i.id))
+  });
+}, Ts = /* @__PURE__ */ h("div")({
+  name: "Container",
+  class: "c3q0amv",
+  propsAsIs: !1
+}), xs = /* @__PURE__ */ h("div")({
+  name: "CloseIconWrap",
+  class: "cqihknq",
+  propsAsIs: !1
+}), Os = () => Ve, Rs = /* @__PURE__ */ h(Os())({
+  name: "CloseIcon",
+  class: "cl5ln9o",
+  propsAsIs: !0
+}), Vs = /* @__PURE__ */ h("div")({
+  name: "Title",
+  class: "t1bejf60",
+  propsAsIs: !1
+}), qs = /* @__PURE__ */ h("img")({
+  name: "SponsorLogo",
+  class: "sb0t4y8",
+  propsAsIs: !1
+}), Ps = /* @__PURE__ */ h("div")({
+  name: "PresentsTitle",
+  class: "p1nmyo08",
+  propsAsIs: !1
+}), Qs = /* @__PURE__ */ h("div")({
+  name: "Subtitle",
+  class: "sgd2pup",
+  propsAsIs: !1
+}), _s = /* @__PURE__ */ h("div")({
+  name: "Description",
+  class: "d6e19hw",
+  propsAsIs: !1
+}), Us = /* @__PURE__ */ h("button")({
+  name: "ActionButton",
+  class: "a17h53j4",
+  propsAsIs: !1
+}), te = ({ close: e, action: s, onboarding: n }) => {
+  var o, r, a, i, l, c, d, p;
+  return /* @__PURE__ */ y(Ts, { children: [
+    /* @__PURE__ */ t(xs, { onClick: e, children: /* @__PURE__ */ t(Rs, { name: "icon-cross" }) }),
+    ((r = (o = n == null ? void 0 : n.titleCard) == null ? void 0 : o.media) == null ? void 0 : r.sponsorLogo) && /* @__PURE__ */ y(Vs, { children: [
+      /* @__PURE__ */ t(qs, { alt: "sponsor-logo", src: (i = (a = n == null ? void 0 : n.titleCard) == null ? void 0 : a.media) == null ? void 0 : i.sponsorLogo }),
+      /* @__PURE__ */ t(Ps, { children: "PRESENTS" })
+    ] }),
+    ((l = n == null ? void 0 : n.titleCard) == null ? void 0 : l.title) && /* @__PURE__ */ t(Qs, { children: (c = n == null ? void 0 : n.titleCard) == null ? void 0 : c.title }),
+    ((d = n == null ? void 0 : n.titleCard) == null ? void 0 : d.subtitle) && /* @__PURE__ */ t(_s, { children: (p = n == null ? void 0 : n.titleCard) == null ? void 0 : p.subtitle }),
+    /* @__PURE__ */ t(Us, { onClick: s, children: "Play Now" })
+  ] });
+}, _ = [{
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_1.png",
+  tagline: "Featured groups+ experience",
+  headline: /* @__PURE__ */ y(D, {
+    children: ["Welcome to ", /* @__PURE__ */ t("br", {}), " Featured Groups +"]
+  })
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",
+  headline: "Get real-time insights"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",
+  headline: "Predictions, trivia & polls synced to match play"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",
+  headline: "Win points for every answer you get right"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",
+  headline: "Compete against friends on the leaderboard"
+}], Fs = /* @__PURE__ */ h("div")({
+  name: "OnboardingContainer",
+  class: "o1xcysoz",
+  propsAsIs: !1
+}), Ks = () => F, Ms = /* @__PURE__ */ h(Ks())({
+  name: "OnboardingNotificationContainer",
+  class: "oejzp3v",
+  propsAsIs: !0
+}), oe = /* @__PURE__ */ h("div")({
+  name: "InnerContainer",
+  class: "i134gfua",
+  propsAsIs: !1
+}), zs = ({
+  deepLink: e,
+  onboardingOpts: s,
+  notification: n,
+  gamification: o,
+  loading: r,
+  renderToNode: a,
+  sdk: i
+}) => {
+  var l, c, d, p, v, m, f;
+  const N = u(o.friends.getStore()), [b, A] = $(void 0), S = w(() => {
+    var C, T;
+    const z = i.getInviter();
+    return z ? (T = (C = N.data) == null ? void 0 : C.find(({
+      slId: ue
+    }) => ue === z)) == null ? void 0 : T.name : "";
+  }, [N.data, i]);
+  return k(() => {
+    const C = e.$store.subscribe((T) => {
+      T && A(T.data);
+    });
+    return () => {
+      C();
+    };
+  }, [e.$store]), /* @__PURE__ */ t(Fs, {
+    children: /* @__PURE__ */ t(Qe, {
+      loading: r,
+      renderToNode: a,
+      rules: [{
+        label: "Answer as many questions as you like.",
+        icon: "icon-btn-feature-groups"
+      }, {
+        label: "Win points for each correct trivia or prediction answer.",
+        icon: "icon-thumb-up"
+      }, {
+        label: "Top the leader board and best your friends.",
+        icon: "icon-trophy"
+      }],
+      rulesBtnLabel: (l = s.rules) == null ? void 0 : l.buttonLabel,
+      rulesTitle: (c = s.rules) == null ? void 0 : c.heading,
+      termsTitle: "Terms and Conditions",
+      termsText: (d = s.rules) == null ? void 0 : d.terms,
+      steps: _,
+      primaryColor: (p = s.inviteCard) == null ? void 0 : p.iconColor,
+      inviteLink: b,
+      inviteCardTitle: (v = s.inviteCard) == null ? void 0 : v.heading,
+      inviteCardSubtext: (m = s.inviteCard) == null ? void 0 : m.subtext,
+      inviteCardBtnLabel: (f = s.inviteCard) == null ? void 0 : f.buttonLabel,
+      onClose: () => {
+        var C;
+        (C = n.close) == null || C.call(n);
+      },
+      gamification: o,
+      sdk: i,
+      inviterName: S
+    })
+  });
+}, Bs = ({
+  sdk: e,
+  notification: s,
+  saveHeight: n,
+  style: o,
+  appNode: r,
+  sdkInDesktopView: a,
+  responsiveStore: i
+}) => {
+  var l;
+  const c = L(null), d = s.data.onboarding, [p, v] = $(d == null ? void 0 : d.instantOpen), m = e.getFeature(x.GAMES), f = w(() => _ == null ? void 0 : _.map(({
+    graphicSrc: S
+  }) => S), []), {
+    screen: N
+  } = u(i, {
+    keys: ["screen"]
+  });
+  (l = d == null ? void 0 : d.titleCard) != null && l.media && (d.titleCard.media.sponsorLogo = qe), os(() => {
+    var S;
+    n(((S = c.current) == null ? void 0 : S.getBoundingClientRect().height) || 0);
+  }, [n]);
+  const {
+    loading: b,
+    throttled: A
+  } = Pe(f);
+  return p && m && d && r.current && !A ? /* @__PURE__ */ t(le, {
+    container: r,
+    useContainer: !a,
+    children: /* @__PURE__ */ t(zs, {
+      notification: s,
+      setOpened: v,
+      gamification: m,
+      onboardingOpts: d,
+      deepLink: m.deepLink,
+      loading: b,
+      renderToNode: r,
+      sdk: e
+    })
+  }) : /* @__PURE__ */ y(D, {
+    children: [/* @__PURE__ */ t(oe, {
+      ref: c,
+      style: {
+        position: "absolute",
+        visibility: "hidden"
+      },
+      children: /* @__PURE__ */ t(te, {
+        close: () => {
+        },
+        action: () => {
+        },
+        onboarding: d
+      })
+    }), /* @__PURE__ */ t(Ms, {
+      style: o,
+      hiding: s.hiding,
+      children: /* @__PURE__ */ t(oe, {
+        children: /* @__PURE__ */ t(te, {
+          close: s.close,
+          action: () => {
+            var S;
+            v(!0), (((S = r.current) == null ? void 0 : S.getBoundingClientRect().y) || 0) < 0 && U(r, N.size, {
+              behavior: "smooth"
+            });
+          },
+          onboarding: d
+        })
+      })
+    })]
+  });
+}, Ws = () => F, js = /* @__PURE__ */ h(Ws())({
+  name: "Container",
+  class: "c1cu0box",
+  propsAsIs: !0
+}), pe = /* @__PURE__ */ h("div")({
+  name: "InnerContainer",
+  class: "i1p534h4",
+  propsAsIs: !1
+}), Gs = () => pe, Hs = /* @__PURE__ */ h(Gs())({
+  name: "HiddenContainer",
+  class: "hyh76ez",
+  propsAsIs: !0
+}), Xs = /* @__PURE__ */ h("div")({
+  name: "NotificationRefreshing",
+  class: "n1pj3cvw",
+  propsAsIs: !1
+}), Ys = () => _e, Zs = /* @__PURE__ */ h(Ys())({
+  name: "Pill",
+  class: "pk13by5",
+  propsAsIs: !0
+}), Js = (e) => {
+  const [s, n] = $(0), o = L(null), r = G((i) => {
+    o.current = i;
+  }, []);
+  k(() => {
+    var i;
+    const l = (i = o.current) == null ? void 0 : i.getBoundingClientRect();
+    l && n(l.height);
+  }, [e]);
+  const a = G((i) => {
+    n(i);
+  }, []);
+  return [r, s, a];
+}, en = ({
+  sdk: e,
+  notification: s,
+  appNode: n,
+  responsiveStore: o
+}) => {
+  var r, a;
+  const {
+    sdkInDesktopView: i
+  } = u(o, {
+    keys: ["sdkInDesktopView"]
+  }), {
+    sdk: l
+  } = M(), [c, d, p] = Js(s.id);
+  return s.type === O.QUESTION ? /* @__PURE__ */ y(D, {
+    children: [/* @__PURE__ */ t(Hs, {
+      ref: c,
+      children: /* @__PURE__ */ t(B, {
+        ...s
+      })
+    }), /* @__PURE__ */ y(js, {
+      style: {
+        height: s.hiding ? 0 : d
+      },
+      hiding: s.hiding,
+      children: [/* @__PURE__ */ t(pe, {
+        style: {
+          height: "100%"
+        },
+        children: /* @__PURE__ */ t(B, {
+          ...s,
+          controlVideo: l == null ? void 0 : l.controlVideoPlayer
+        })
+      }), /* @__PURE__ */ t(Xs, {}, s.id)]
+    })]
+  }) : s.type === O.QUESTION_RESOLVED && (a = (r = s.data) == null ? void 0 : r.question) != null && a.predictionResult ? /* @__PURE__ */ t(Fe, {
+    style: {
+      height: s.hiding ? 0 : d
+    },
+    saveHeight: p,
+    close: s.close,
+    hiding: s.hiding,
+    ...s.data.question
+  }) : s.type === O.ONBOARDING ? /* @__PURE__ */ t(Bs, {
+    style: {
+      height: s.hiding ? 0 : d
+    },
+    saveHeight: p,
+    sdk: e,
+    notification: s,
+    sdkInDesktopView: i,
+    appNode: n,
+    responsiveStore: o
+  }) : null;
+}, sn = "p6vl6vu", nn = ({
+  pill: e,
+  setPill: s,
+  appNode: n,
+  headerNode: o,
+  scrollNode: r,
+  responsiveStore: a,
+  scrollStore: i
+}) => {
+  var l, c;
+  const {
+    screen: d
+  } = u(a, {
+    keys: ["screen"]
+  }), {
+    tabsShown: p,
+    scrollPosition: v
+  } = u(i, {
+    keys: ["tabsShown", "scrollPosition"]
+  });
+  k(() => {
+    a.get().sdkInDesktopView ? v < 50 && s(null) : v > -50 && s(null);
+  }, [v, a, s]);
+  const m = a.get().sdkInDesktopView ? n : o;
+  return !e || !m.current ? null : Ke.createPortal(/* @__PURE__ */ t(Zs, {
+    title: e.type === O.QUESTION_RESOLVED ? "Prediction result" : `New ${((c = Me[(l = e.data) == null ? void 0 : l.questionType]) == null ? void 0 : c.label) || "notification"}`,
+    onClick: () => {
+      var f;
+      a.get().sdkInDesktopView ? (f = r.current) == null || f.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      }) : U(n, d.size, {
+        behavior: "smooth"
+      }), s(null);
+    },
+    className: ze(p && sn, "sl-pill-button")
+  }), m.current);
+}, tn = ({
+  sdk: e,
+  headerNode: s,
+  scrollNode: n,
+  responsiveStore: o,
+  appNode: r,
+  scrollStore: a
+}) => {
+  const [i] = $(e.getNotificationsStore()), l = u(i), [c, d] = $(null), p = w(() => e.getActiveNotification(), [e, l]);
+  return k(() => {
+    p && Ue.emit("notification", {
+      action: "rendered",
+      payload: {
+        questionId: p.data.questionId,
+        questionType: p.data.questionType
+      }
+    });
+  }, [p]), k(() => {
+    p && (o.get().sdkInDesktopView || o.get().sdkInView) && (!o.get().sdkInDesktopView && o.get().sdkInView && d(p), o.get().sdkInDesktopView && window.requestAnimationFrame(() => {
+      a.get().scrollPosition !== 0 && d(p);
+    }));
+  }, [p]), k(() => {
+    p || d(null);
+  }, [p]), /* @__PURE__ */ y(D, {
+    children: [!c && p && /* @__PURE__ */ t(en, {
+      headerNode: s,
+      appNode: r,
+      sdk: e,
+      notification: p,
+      responsiveStore: o
+    }), c && /* @__PURE__ */ t(nn, {
+      pill: c,
+      setPill: d,
+      appNode: r,
+      notification: p,
+      headerNode: s,
+      scrollNode: n,
+      scrollStore: a,
+      responsiveStore: o
+    })]
+  });
+}, on = (e) => {
+  const s = L(""), [n, o] = $(!1), r = u(e.status), a = u(e.sdkStore.slStreamId), i = u(e.userId()), l = u(e.getActiveFeature()), c = r === "ready" && !!a.data;
+  k(() => {
+    const v = e.getFeature(x.GAMES);
+    v && (v.closeQuestion(), v.closeUser());
+  }, [l, e]);
+  const d = (v) => {
+    s.current = v, o(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: m, err: f }) => {
+      if (!f && m) {
+        e.isUserAuthorized().then((N) => {
+          N || e.disableApp();
+        });
+        return;
+      }
+    });
+  }, p = () => {
+    o(!1), e.disableApp();
+  };
+  return k(() => {
+    if (!i) {
+      c && e.disableApp();
+      return;
+    }
+    if (i && s.current && n) {
+      e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
+        e.createEventSession(s.current);
+      });
+      return;
+    }
+  }, [i]), k(() => () => {
+    o(!1), e.disableApp();
+  }, [o, e]), {
+    sdkEnabled: n,
+    sdkReady: c,
+    activateEventWithId: d,
+    deactivate: p,
+    isLogged: !!i
+  };
+}, rn = ({ sdk: e, className: s, scrollStore: n, appNode: o, scrollNode: r, responsiveStore: a }) => {
+  const [, i] = He(e);
+  return /* @__PURE__ */ t(
+    Es,
+    {
+      className: s,
+      scrollNode: r,
+      appNode: o,
+      scrollStore: n,
+      feature: i,
+      responsiveStore: a,
+      sdk: e
+    }
+  );
+}, an = ({ sdk: e, className: s, appNode: n, responsiveStore: o }) => {
+  const r = u(e.featuresList.getStore());
+  return r ? Array.from(r, (a) => {
+    const i = e.getFeature(a);
+    return i ? /* @__PURE__ */ t(
+      ws,
+      {
+        className: s,
+        appNode: n,
+        feature: i,
+        responsiveStore: o,
+        sdk: e
+      },
+      a
+    ) : null;
+  }) : null;
+}, ln = ({ sdk: e, event: s }) => {
+  const n = L(null), o = L(null), [r] = Be(n), [a, i] = We(n, r), { sdkEnabled: l, sdkReady: c, activateEventWithId: d, deactivate: p, isLogged: v } = on(e);
+  k(() => {
+    s ? (e.createEventSession(s), d(s)) : p();
+  }, [s, d, p, e]), P(n, { enabled: l, event: "click", listener: Xe }), P(a, {
+    enabled: l,
+    event: "scrollend",
+    listener: Ye,
+    useDomNode: !0
+  }), P(a, {
+    enabled: l,
+    event: "click",
+    listener: Ze,
+    useDomNode: !0
+  });
+  const m = w(() => ({ sdk: e }), [e]);
+  return k(() => {
+    import("./gamification-feature.js");
+  }, []), /* @__PURE__ */ t(ce.Provider, { value: m, children: /* @__PURE__ */ y(je, { ref: n, children: [
+    l && /* @__PURE__ */ t(Ds, { sdk: e }),
+    /* @__PURE__ */ y(Ge, { className: "sl-hide-on-modal", ref: a, "data-nav": l.toString(), children: [
+      c && /* @__PURE__ */ t(
+        tn,
+        {
+          sdk: e,
+          scrollNode: a,
+          headerNode: o,
+          appNode: n,
+          scrollStore: i,
+          responsiveStore: r
+        }
+      ),
+      c && /* @__PURE__ */ t(
+        rn,
+        {
+          scrollStore: i,
+          responsiveStore: r,
+          scrollNode: a,
+          appNode: n,
+          className: W,
+          sdk: e
+        }
+      ),
+      c && /* @__PURE__ */ t(an, { responsiveStore: r, appNode: n, className: W, sdk: e })
+    ] }),
+    l && !v && /* @__PURE__ */ t(
+      "div",
+      {
+        style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
+        children: "You are not logged in."
+      }
+    )
+  ] }) });
+}, dn = ({ children: e, style: s }) => /* @__PURE__ */ t("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ t("div", { className: Je, style: s, children: e }) }), mn = () => {
+  const { sdk: e } = K(de);
   return e;
-}, l = () => {
-  const { sdk: e, status: a } = i(s);
-  if (a === t.UNSET)
+}, yn = ({ event: e }) => {
+  const { sdk: s, status: n } = K(de);
+  if (n === j.UNSET)
     throw new Error("Wrap app in `StreamLayerProvider`");
-  return a === t.CONNECTED ? /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: "wait" }) : e === null ? /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(o, { sdk: e }) }) });
+  return n === j.CONNECTED ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: "wait" }) : s === null ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(dn, { children: /* @__PURE__ */ t(ln, { sdk: s, event: e }) }) });
 };
 export {
-  l as S,
-  d as u
+  yn as S,
+  dn as i,
+  gn as q,
+  mn as u
 };