@streamlayer/react-ui 1.33.2 → 1.34.0

package/lib/{index-tnt2CtQe.js → index-Deo5_bIg.js}

@@ -1,6 +1,5 @@
 let t = [], i = 0;
-const r = 4;
-let a = (s) => {
+const s = 4, a = /* @__NO_SIDE_EFFECTS__ */ (r) => {
   let f = [], e = {
     get() {
       return e.lc || e.listen(() => {
@@ -9,8 +8,8 @@ let a = (s) => {
     lc: 0,
     listen(l) {
       return e.lc = f.push(l), () => {
-        for (let u = i + r; u < t.length; )
-          t[u] === l ? t.splice(u, r) : u += r;
+        for (let u = i + s; u < t.length; )
+          t[u] === l ? t.splice(u, s) : u += s;
         let n = f.indexOf(l);
         ~n && (f.splice(n, 1), --e.lc || e.off());
       };
@@ -18,14 +17,9 @@ let a = (s) => {
     notify(l, n) {
       let u = !t.length;
       for (let o of f)
-        t.push(
-          o,
-          e.value,
-          l,
-          n
-        );
+        t.push(o, e.value, l, n);
       if (u) {
-        for (i = 0; i < t.length; i += r)
+        for (i = 0; i < t.length; i += s)
           t[i](
             t[i + 1],
             t[i + 2],
@@ -46,7 +40,7 @@ let a = (s) => {
       let n = e.listen(l);
       return l(e.value), n;
     },
-    value: s
+    value: r
   };
   return e;
 };

package/lib/{index-DSi8Qgfs.js → index-Fv2CC2QU.js}

@@ -1,6 +1,6 @@
-import { a as u } from "./index-tnt2CtQe.js";
-let i = (o = {}) => {
-  let e = u(o);
+import { a as n } from "./index-Deo5_bIg.js";
+const f = /* @__NO_SIDE_EFFECTS__ */ (o = {}) => {
+  let e = n(o);
   return e.setKey = function(a, t) {
     let l = e.value;
     typeof t > "u" && a in e.value ? (e.value = { ...e.value }, delete e.value[a], e.notify(l, a)) : e.value[a] !== t && (e.value = {
@@ -10,5 +10,5 @@ let i = (o = {}) => {
   }, e;
 };
 export {
-  i as m
+  f as m
 };

package/lib/ui/advertisement/overlay/externalAd/vast-player/useGAMPlayer.js

@@ -2,7 +2,7 @@ import { VASTTracker as R } from "@dailymotion/vast-client";
 import { useRef as b, useCallback as m, useEffect as A } from "react";
 import U from "video.js";
 import { useVastAds as x } from "./useVastAds.js";
-import { m as D } from "../../../../../index-DSi8Qgfs.js";
+import { m as D } from "../../../../../index-Fv2CC2QU.js";
 const V = (u) => {
   const c = b();
   return A(() => {

package/lib/ui/advertisement/overlay/externalAd/vast-player/useVastAds.js

@@ -2,7 +2,7 @@ import { VASTClient as R } from "@dailymotion/vast-client";
 import { useState as A, useRef as P, useEffect as w } from "react";
 import D from "vmap";
 import { v4 as S, validate as L, v5 as y } from "uuid";
-import { a as F } from "../../../../../index-tnt2CtQe.js";
+import { a as F } from "../../../../../index-Deo5_bIg.js";
 const N = (a, s) => {
   const o = goog.pal, c = new o.ConsentSettings();
   c.allowStorage = !1;

package/lib/ui/gamification/question/inapp/notification/AdNotification/index.d.ts

@@ -4,6 +4,7 @@ type InAppProps = NotificationProps['data'] & {
     close?: NotificationProps['close'];
     color: string;
     webos?: boolean;
+    className?: string;
 };
 export declare const InAppNotification: React.FC<InAppProps>;
 export {};

package/lib/ui/gamification/question/inapp/notification/AdNotification/index.js

@@ -1,103 +1,117 @@
 import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { cx as Q } from "@linaria/core";
 import { withFocusable as D } from "../../../../../../app/webos/useTvButton.js";
-import { useState as Q, useRef as x, useEffect as R } from "react";
-import { QuestionType as d, NotificationUseContentMedia as w, QuestionStatus as W } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as j } from "../../../../constants.js";
-import { QuestionTypeHeader as P } from "../../../index.js";
-import { NotificationMedia as O } from "./NotificationMedia/index.js";
-import { NotificationContainer as y, LogoImgContainer as H, LogoImg as S, NotificationContent as E, MainContent as _, StyledChevronRight as h, TVButtons as z, Body as G, Title as J, Description as K, DismissButton as X, AnswerButton as Y, NotificationInterstitialContainer as Z } from "./styles.js";
-const $ = ({ title: a, questionType: c, questionTypeData: e, description: o, imageMode: t, webos: n }) => /* @__PURE__ */ u(G, { imageMode: t, questionType: c, webos: n, children: [
+import { useState as R, useRef as W, useEffect as j } from "react";
+import { QuestionType as l, NotificationUseContentMedia as O, QuestionStatus as P } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as y } from "../../../../constants.js";
+import { QuestionTypeHeader as H } from "../../../index.js";
+import { NotificationMedia as S } from "./NotificationMedia/index.js";
+import { NotificationContainer as _, LogoImgContainer as h, LogoImg as E, NotificationContent as b, MainContent as z, StyledChevronRight as G, TVButtons as J, Body as K, Title as X, Description as Y, DismissButton as Z, AnswerButton as $, NotificationInterstitialContainer as q } from "./styles.js";
+const g = ({ title: a, questionType: c, questionTypeData: e, description: o, imageMode: t, webos: n }) => /* @__PURE__ */ u(K, { imageMode: t, questionType: c, webos: n, children: [
   /* @__PURE__ */ r(
-    P,
+    H,
     {
       questionTypeData: e,
       questionType: c,
-      questionStatus: W.UNSET
+      questionStatus: P.UNSET
     }
   ),
-  a && /* @__PURE__ */ r(J, { webos: n, children: a }),
-  o && /* @__PURE__ */ r(K, { children: o })
-] }), q = D(Z), g = D(X), A = D(Y), p = ({
-  sponsorLogo: a,
-  onClick: c,
-  webos: e
-}) => /* @__PURE__ */ r(q, { autoFocus: !0, webos: e, onClick: c, "data-webos": e, children: /* @__PURE__ */ r(E, { withoutPadding: !0, children: /* @__PURE__ */ r(S, { src: a }) }) }), uo = ({
+  a && /* @__PURE__ */ r(X, { webos: n, children: a }),
+  o && /* @__PURE__ */ r(Y, { children: o })
+] }), A = D(q), p = D(Z), oo = D($), to = ({
+  className: a,
+  sponsorLogo: c,
+  onClick: e,
+  webos: o
+}) => /* @__PURE__ */ r(
+  A,
+  {
+    className: a,
+    autoFocus: !0,
+    webos: o,
+    onClick: e,
+    "data-webos": o,
+    children: /* @__PURE__ */ r(b, { withoutPadding: !0, children: /* @__PURE__ */ r(E, { src: c }) })
+  }
+), io = ({
   action: a,
   close: c,
   questionType: e,
   inApp: o,
   insight: t,
   color: n,
-  webos: s
+  webos: s,
+  className: L
 }) => {
-  var T, B, F;
-  const [b, m] = Q(!1), L = x();
-  R(() => (o != null && o.sponsorLogo && (m(!0), L.current = setTimeout(() => {
+  var B, F, w;
+  const [v, m] = R(!1), N = W();
+  j(() => (o != null && o.sponsorLogo && (m(!0), N.current = setTimeout(() => {
     m(!1);
-  }, 5e3)), () => clearTimeout(L.current)), [o == null ? void 0 : o.sponsorLogo]);
-  const N = j[e];
-  if (!N || !o || !o.notification)
+  }, 5e3)), () => clearTimeout(N.current)), [o == null ? void 0 : o.sponsorLogo]);
+  const T = y[e];
+  if (!T || !o || !o.notification)
     return null;
-  const { title: v, image: M, imageMode: i, useContentMedia: f } = o.notification, U = e === d.FACTOID ? t == null ? void 0 : t.heading : v, V = e === d.FACTOID ? t == null ? void 0 : t.body : "", k = M, C = e === d.FACTOID && ((T = t == null ? void 0 : t.video) == null ? void 0 : T.url) && (o == null ? void 0 : o.isVideo) && f === w.ENABLED, I = f === w.ENABLED ? C ? (B = t == null ? void 0 : t.video) == null ? void 0 : B.url : t == null ? void 0 : t.image : "";
-  return o != null && o.sponsorLogo && b ? /* @__PURE__ */ r(
-    p,
+  const { title: M, image: U, imageMode: i, useContentMedia: f } = o.notification, V = e === l.FACTOID ? t == null ? void 0 : t.heading : M, k = e === l.FACTOID ? t == null ? void 0 : t.body : "", x = U, C = e === l.FACTOID && ((B = t == null ? void 0 : t.video) == null ? void 0 : B.url) && (o == null ? void 0 : o.isVideo) && f === O.ENABLED, I = f === O.ENABLED ? C ? (F = t == null ? void 0 : t.video) == null ? void 0 : F.url : t == null ? void 0 : t.image : "";
+  return o != null && o.sponsorLogo && v ? /* @__PURE__ */ r(
+    to,
     {
+      className: L,
       sponsorLogo: o == null ? void 0 : o.sponsorLogo,
       webos: s,
       onClick: () => m(!1)
     }
   ) : /* @__PURE__ */ u(
-    y,
+    _,
     {
       "data-a": "intr",
-      className: "SL_InApp",
-      onClick: (l) => {
-        s || a == null || a(l);
+      className: Q("SL_InApp", L),
+      onClick: (d) => {
+        s || a == null || a(d);
       },
-      "data-is-insight": e === d.FACTOID,
+      "data-is-insight": e === l.FACTOID,
       "data-webos": s,
       children: [
-        (o == null ? void 0 : o.sponsorLogo) && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(S, { src: o == null ? void 0 : o.sponsorLogo }) }),
-        /* @__PURE__ */ u(E, { children: [
-          /* @__PURE__ */ u(_, { children: [
-            !I && /* @__PURE__ */ r(O, { src: k, imageMode: i, withVideo: !!C, color: n }),
+        (o == null ? void 0 : o.sponsorLogo) && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(E, { src: o == null ? void 0 : o.sponsorLogo }) }),
+        /* @__PURE__ */ u(b, { children: [
+          /* @__PURE__ */ u(z, { children: [
+            !I && /* @__PURE__ */ r(S, { src: x, imageMode: i, withVideo: !!C, color: n }),
             I && /* @__PURE__ */ r(
-              O,
+              S,
               {
                 src: I,
                 imageMode: i,
                 withVideo: !!C,
                 color: n,
                 useContentMedia: f,
-                thumbnailUrl: (F = t == null ? void 0 : t.video) == null ? void 0 : F.thumbnailUrl
+                thumbnailUrl: (w = t == null ? void 0 : t.video) == null ? void 0 : w.thumbnailUrl
               }
             ),
             /* @__PURE__ */ r(
-              $,
+              g,
               {
-                questionTypeData: N,
+                questionTypeData: T,
                 questionType: e,
-                title: U,
-                description: V,
+                title: V,
+                description: k,
                 imageMode: i,
                 webos: s
               }
             )
           ] }),
-          !s && /* @__PURE__ */ r(h, { name: "chevronRight" }),
-          s && /* @__PURE__ */ u(z, { children: [
+          !s && /* @__PURE__ */ r(G, { name: "chevronRight" }),
+          s && /* @__PURE__ */ u(J, { children: [
             /* @__PURE__ */ r(
-              g,
+              p,
               {
                 webos: !0,
                 "data-close-btn": "true",
-                onClick: (l) => {
-                  l.stopPropagation(), c == null || c(l);
+                onClick: (d) => {
+                  d.stopPropagation(), c == null || c(d);
                 },
                 children: "Dismiss"
               }
             ),
-            /* @__PURE__ */ r(A, { webos: !0, autoFocus: !0, onClick: a, children: "Answer" })
+            /* @__PURE__ */ r(oo, { webos: !0, autoFocus: !0, onClick: a, children: "Answer" })
           ] })
         ] })
       ]
@@ -105,5 +119,5 @@ const $ = ({ title: a, questionType: c, questionTypeData: e, description: o, ima
   );
 };
 export {
-  uo as InAppNotification
+  io as InAppNotification
 };

package/lib/ui/gamification/question/inapp/prediction-result/index.d.ts

@@ -3,6 +3,7 @@ type InAppProps = NotificationProps['data'] & {
     action: NotificationProps['action'];
 };
 export declare const InAppPredictionResult: React.FC<Exclude<InAppProps['question'], undefined> & {
+    className?: string;
     action?: () => void;
     close?: () => void;
 }>;

package/lib/ui/gamification/question/inapp/prediction-result/index.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { PredictionResult as t } from "./frames/index.js";
-import { NotificationContainer as i } from "./styles.js";
-const p = (r) => /* @__PURE__ */ o(i, { children: /* @__PURE__ */ o(t, { ...r }) });
+import { PredictionResult as i } from "./frames/index.js";
+import { NotificationContainer as n } from "./styles.js";
+const c = ({ className: r, ...t }) => /* @__PURE__ */ o(n, { className: r, children: /* @__PURE__ */ o(i, { ...t }) });
 export {
-  p as InAppPredictionResult
+  c as InAppPredictionResult
 };

package/lib/ui/gamification/question/inapp/prediction-result-ad/index.d.ts

@@ -3,6 +3,7 @@ type InAppProps = NotificationProps['data'] & {
     action: NotificationProps['action'];
 };
 export declare const InAppPredictionResultAd: React.FC<Exclude<InAppProps['question'], undefined> & {
+    className?: string;
     action?: () => void;
     close?: () => void;
     inApp?: InAppProps['inApp'];

package/lib/ui/gamification/question/inapp/prediction-result-ad/index.js

@@ -1,20 +1,31 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useState as d, useRef as g, useEffect as h } from "react";
-import { PredictionResult as L } from "./frames/index.js";
-import { NotificationContainer as A, LogoImgContainer as I, LogoImg as m, NotificationInterstitialContainer as C, NotificationContent as N } from "./styles.js";
-const w = ({ sponsorLogo: r, onClick: t }) => /* @__PURE__ */ o(C, { onClick: t, children: /* @__PURE__ */ o(N, { withoutPadding: !0, children: /* @__PURE__ */ o(m, { src: r }) }) }), j = (r) => {
-  var n, c, a, e, l;
-  const [t, i] = d(!1), p = g();
-  return h(() => {
-    var f;
-    return (f = r == null ? void 0 : r.inApp) != null && f.sponsorLogo && (i(!0), p.current = setTimeout(() => {
-      i(!1);
-    }, 5e3)), () => clearTimeout(p.current);
-  }, [(n = r == null ? void 0 : r.inApp) == null ? void 0 : n.sponsorLogo]), (c = r == null ? void 0 : r.inApp) != null && c.sponsorLogo && t ? /* @__PURE__ */ o(w, { sponsorLogo: (a = r.inApp) == null ? void 0 : a.sponsorLogo, onClick: () => i(!1) }) : /* @__PURE__ */ o(A, { children: /* @__PURE__ */ s("div", { children: [
-    ((e = r == null ? void 0 : r.inApp) == null ? void 0 : e.sponsorLogo) && /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(m, { src: (l = r == null ? void 0 : r.inApp) == null ? void 0 : l.sponsorLogo }) }),
-    /* @__PURE__ */ o(L, { ...r })
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { useState as s, useRef as h, useEffect as L } from "react";
+import { PredictionResult as A } from "./frames/index.js";
+import { NotificationContainer as I, LogoImgContainer as C, LogoImg as g, NotificationInterstitialContainer as w, NotificationContent as x } from "./styles.js";
+const N = ({
+  className: t,
+  sponsorLogo: r,
+  onClick: i
+}) => /* @__PURE__ */ o(w, { className: t, onClick: i, children: /* @__PURE__ */ o(x, { withoutPadding: !0, children: /* @__PURE__ */ o(g, { src: r }) }) }), S = ({ className: t, ...r }) => {
+  var c, e, a, f, l;
+  const [i, p] = s(!1), n = h();
+  return L(() => {
+    var d;
+    return (d = r == null ? void 0 : r.inApp) != null && d.sponsorLogo && (p(!0), n.current = setTimeout(() => {
+      p(!1);
+    }, 5e3)), () => clearTimeout(n.current);
+  }, [(c = r == null ? void 0 : r.inApp) == null ? void 0 : c.sponsorLogo]), (e = r == null ? void 0 : r.inApp) != null && e.sponsorLogo && i ? /* @__PURE__ */ o(
+    N,
+    {
+      className: t,
+      sponsorLogo: (a = r.inApp) == null ? void 0 : a.sponsorLogo,
+      onClick: () => p(!1)
+    }
+  ) : /* @__PURE__ */ o(I, { className: t, children: /* @__PURE__ */ m("div", { children: [
+    ((f = r == null ? void 0 : r.inApp) == null ? void 0 : f.sponsorLogo) && /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(g, { src: (l = r == null ? void 0 : r.inApp) == null ? void 0 : l.sponsorLogo }) }),
+    /* @__PURE__ */ o(A, { ...r })
   ] }) });
 };
 export {
-  j as InAppPredictionResultAd
+  S as InAppPredictionResultAd
 };

package/lib/ui/gamification/vote/insight-details/index.js

@@ -1,14 +1,14 @@
 import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import { InsightContentTV as e } from "../../../../app/webos/ui/insight/index.js";
 import { InsightContent as m } from "../../../questions/insight/index.js";
-import { Container as k, WebLinkBtn as h, WebLinkIcon as c } from "./styles.js";
-const x = ({ instantView: r, ...o }) => /* @__PURE__ */ b(k, { children: [
-  o.webos ? /* @__PURE__ */ l(e, { instantView: r, ...o, isDetail: !0 }) : /* @__PURE__ */ l(m, { instantView: r, ...o, isDetail: !0 }),
+import { Container as k, WebLinkBtn as h, WebLinkIcon as L } from "./styles.js";
+const u = ({ instantView: r, ...o }) => /* @__PURE__ */ b(k, { children: [
+  o.SL - CardWebOs ? /* @__PURE__ */ l(e, { instantView: r, ...o, isDetail: !0 }) : /* @__PURE__ */ l(m, { instantView: r, ...o, isDetail: !0 }),
   (r == null ? void 0 : r.webLink) && /* @__PURE__ */ b(h, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-a": "web-link", children: [
     r == null ? void 0 : r.webLink.label,
-    /* @__PURE__ */ l(c, { name: "icon-external-link" })
+    /* @__PURE__ */ l(L, { name: "icon-external-link" })
   ] })
 ] });
 export {
-  x as InsightDetails
+  u as InsightDetails
 };

package/lib/ui/polymarket/index.d.ts

@@ -0,0 +1,21 @@
+export type PolymarketCardProps = {
+    logo: string;
+    volume: number;
+    drawProbabilityPct: number;
+    teams: {
+        teamName: string;
+        probabilityPct: number;
+        teamColor: string;
+        teamLogo: string;
+    }[];
+    drawColor: string;
+    chartData: {
+        label: string;
+        color: string;
+        points: Array<{
+            t: string;
+            p: number;
+        }>;
+    }[];
+};
+export declare const PolymarketCard: React.FC<PolymarketCardProps>;

package/lib/ui/polymarket/index.js

@@ -0,0 +1,226 @@
+import { jsxs as m, jsx as g } from "react/jsx-runtime";
+import { createChart as M, ColorType as U, LineStyle as k, LineSeries as H } from "lightweight-charts";
+import { useRef as P, useEffect as z } from "react";
+import { Container as R, Header as F, Logo as q, AdTitle as W, Vol as A, Teams as B, Team as I, TeamLogo as j, TeamName as D, TeamPercentage as N, Draw as O, DrawPercentage as Z, Chart as G } from "./styles.js";
+const J = (c) => `${(c / 1e3).toFixed(1)}`, V = (c) => c && !c.startsWith("#") ? `#${c}` : c ?? "#fff", _ = ({
+  logo: c,
+  volume: S,
+  drawProbabilityPct: E,
+  teams: f,
+  drawColor: v,
+  chartData: n
+}) => {
+  var w;
+  const C = P(null);
+  return z(() => {
+    var x;
+    const a = C.current;
+    if (!a || !n || n.length === 0)
+      return;
+    let u = 0;
+    n.forEach((t) => {
+      t.points.forEach((e) => {
+        const o = e.p * 100;
+        o > u && (u = o);
+      });
+    });
+    const y = Math.floor(u / 10) * 10, b = 0, d = ((x = n[0]) == null ? void 0 : x.points) || [];
+    let l = "day";
+    if (d.length >= 2) {
+      const t = new Date(d[0].t).getTime() / 1e3, o = new Date(d[1].t).getTime() / 1e3 - t;
+      o >= 20 * 60 * 60 ? l = "day" : o >= 60 * 60 ? l = "hour" : l = "minute";
+    }
+    const h = M(a, {
+      layout: {
+        background: { type: U.Solid, color: "transparent" },
+        textColor: "rgba(255, 255, 255, 0.5)",
+        fontSize: 12
+      },
+      grid: {
+        vertLines: { visible: !1 },
+        horzLines: {
+          color: "rgba(255, 255, 255, 0.2)",
+          style: k.Dashed
+        }
+      },
+      crosshair: {
+        mode: 0,
+        vertLine: {
+          visible: !1,
+          labelVisible: !1
+        },
+        horzLine: {
+          visible: !1,
+          labelVisible: !1
+        }
+      },
+      width: a.clientWidth,
+      handleScroll: !1,
+      handleScale: !1,
+      height: 300,
+      localization: {
+        timeFormatter: (t) => {
+          const e = new Date(t * 1e3);
+          if (l === "day") {
+            const o = e.getUTCDate(), i = e.toLocaleDateString("en-US", { month: "short", timeZone: "UTC" });
+            return `${o} ${i}`;
+          } else {
+            if (l === "hour")
+              return `${e.getUTCHours()}h`;
+            {
+              const o = e.getUTCHours(), i = e.getUTCMinutes(), s = o >= 12 ? "pm" : "am";
+              return `${o % 12 || 12}:${i.toString().padStart(2, "0")}${s}`;
+            }
+          }
+        }
+      },
+      timeScale: {
+        timeVisible: !0,
+        secondsVisible: !1,
+        barSpacing: 30,
+        minBarSpacing: 8,
+        rightOffset: 15,
+        allowBoldLabels: !1,
+        borderColor: "rgba(255, 255, 255, 0.5)",
+        fixLeftEdge: !0,
+        fixRightEdge: !0,
+        tickMarkFormatter: (t) => {
+          const e = new Date(t * 1e3);
+          if (!d.slice(-4).map((i) => Math.floor(new Date(i.t).getTime() / 1e3)).includes(t))
+            return "";
+          if (l === "day") {
+            const i = e.getUTCDate(), s = e.toLocaleDateString("en-US", { month: "short", timeZone: "UTC" });
+            return `${i} ${s}`;
+          } else {
+            if (l === "hour")
+              return `${e.getUTCHours()}h`;
+            {
+              const i = e.getUTCHours(), s = e.getUTCMinutes(), r = i >= 12 ? "pm" : "am";
+              return `${i % 12 || 12}:${s.toString().padStart(2, "0")}${r}`;
+            }
+          }
+        }
+      },
+      rightPriceScale: {
+        visible: !0,
+        borderVisible: !1,
+        autoScale: !1
+      },
+      leftPriceScale: {
+        visible: !1
+      }
+    }), $ = [];
+    if (n.forEach((t) => {
+      var s;
+      const e = h.addSeries(H, {
+        color: t.color,
+        lineWidth: 4,
+        lastValueVisible: !1,
+        priceLineVisible: !1,
+        priceFormat: {
+          type: "custom",
+          formatter: (r) => `${Math.round(r)}%`
+        },
+        autoscaleInfoProvider: () => ({
+          priceRange: {
+            minValue: b,
+            maxValue: y
+          }
+        })
+      }), o = (s = t.points) == null ? void 0 : s.map((r) => ({
+        time: Math.floor(new Date(r.t).getTime() / 1e3),
+        value: r.p * 100
+      })), i = o == null ? void 0 : o.filter(
+        (r, p, T) => p === 0 || r.time !== T[p - 1].time
+      );
+      e.setData(i), i.length > 0 && $.push({
+        series: e,
+        lastPoint: i[i.length - 1],
+        color: t.color
+      });
+    }), d.length >= 4) {
+      const t = d.slice(-4), e = Math.floor(new Date(t[0].t).getTime() / 1e3), o = Math.floor(new Date(t[3].t).getTime() / 1e3), i = o - e, s = i * 0.02, r = i * 0.03;
+      h.timeScale().setVisibleRange({
+        from: e - s,
+        to: o + r
+      });
+    } else
+      h.timeScale().fitContent();
+    setTimeout(() => {
+      const t = a.querySelector(".tv-lightweight-charts");
+      if (!t)
+        return;
+      t.style.position = "relative";
+      const e = t.querySelector("table");
+      e && (e.style.position = "relative", e.style.zIndex = "1", e.style.pointerEvents = "none"), $.forEach(({ series: o, lastPoint: i, color: s }) => {
+        const r = o.priceToCoordinate(i.value), p = h.timeScale().timeToCoordinate(i.time);
+        if (r !== null && p !== null) {
+          const T = document.createElement("div");
+          T.style.cssText = `
+            position: absolute !important;
+            width: 40px !important;
+            height: 40px !important;
+            border-radius: 50% !important;
+            background-color: ${s} !important;
+            border: 10px solid rgba(26, 26, 26, 0.75) !important;
+            left: ${p - 20}px !important;
+            top: ${r - 20}px !important;
+            pointer-events: none !important;
+            display: block !important;
+            visibility: visible !important;
+            opacity: 1 !important;
+          `, T.className = "chart-endpoint-marker", t.appendChild(T);
+        }
+      });
+    }, 100);
+    const L = () => {
+      a && h.applyOptions({ width: a.clientWidth });
+    };
+    return window.addEventListener("resize", L), () => {
+      window.removeEventListener("resize", L);
+      const t = a.querySelector(".tv-lightweight-charts");
+      t && t.querySelectorAll(".chart-endpoint-marker").forEach((o) => o.remove()), h.remove();
+    };
+  }, [n]), /* @__PURE__ */ m(R, { children: [
+    /* @__PURE__ */ m(F, { children: [
+      /* @__PURE__ */ g(q, { src: c }),
+      /* @__PURE__ */ g(W, { children: "Ad" })
+    ] }),
+    /* @__PURE__ */ m(A, { children: [
+      "$",
+      J(S),
+      "k Vol."
+    ] }),
+    /* @__PURE__ */ g(B, { children: f == null ? void 0 : f.map(({ teamLogo: a, teamName: u, probabilityPct: y, teamColor: b }, d) => {
+      var l;
+      return /* @__PURE__ */ m(I, { children: [
+        /* @__PURE__ */ g(j, { src: a }),
+        /* @__PURE__ */ g(D, { children: u }),
+        /* @__PURE__ */ m(N, { style: { color: b ? V(b) : ((l = n == null ? void 0 : n[d]) == null ? void 0 : l.color) ?? "#fff" }, children: [
+          Math.round(y),
+          "%"
+        ] })
+      ] }, u);
+    }) }),
+    /* @__PURE__ */ m(O, { children: [
+      "Draw",
+      " ",
+      /* @__PURE__ */ m(
+        Z,
+        {
+          style: {
+            color: v ? V(v) : ((w = n == null ? void 0 : n[(f == null ? void 0 : f.length) ?? 0]) == null ? void 0 : w.color) ?? "#fff"
+          },
+          children: [
+            Math.round(E),
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ g(G, { ref: C })
+  ] });
+};
+export {
+  _ as PolymarketCard
+};

package/lib/ui/polymarket/styles.d.ts

@@ -0,0 +1,13 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Header: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Logo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const AdTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Vol: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Teams: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Team: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const TeamLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const TeamName: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const TeamPercentage: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Draw: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const DrawPercentage: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Chart: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;