@streamlayer/react-ui 0.98.0 → 0.99.0

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,12 +1,9 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { useState as j, useLayoutEffect as U } from "react";
-import { QuestionImages as a, QuestionType as o, QuestionStatus as A } from "@streamlayer/sdk-web-types";
+import { QuestionImages as a, QuestionType as o, QuestionStatus as D } from "@streamlayer/sdk-web-types";
 import { AnimatedCounter as $ } from "../../../animated-counter/index.js";
 import { IconDefault as y, IconContainer as F, IconWrap as M, IconCircle as W, ButtonContainer as z, ButtonPct as G, ButtonBody as H, Title as J, Pts as K, Indicators as X, CheckIcon as Y, Percentage as Z } from "./styles.js";
-import "react-countup";
-import "@linaria/react";
-import "../../../icons/index.js";
-const I = {
+const E = {
   [a.CENTERED]: (t) => /* @__PURE__ */ e(y, { alt: "option-icon", src: t }),
   [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(M, { style: { backgroundImage: `url(${t})` } }) }),
   [a.ROUNDED]: (t) => /* @__PURE__ */ e(W, { alt: "option-icon", src: t }),
@@ -28,66 +25,68 @@ const I = {
   correct: n,
   hasCorrectAnswer: r,
   questionStatus: i
-}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === A.RESOLVED && n : !1, at = (t) => {
-  var T;
+}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === D.RESOLVED && n : !1, ot = (t) => {
+  var S;
   const {
     // option props
     id: c,
     icon: n,
     text: r,
     percentageDecimal: i,
-    points: N,
+    points: p,
     // extra props
-    onVote: S,
-    markThatVoted: D,
-    onPercentsAnimated: w,
-    youSelected: E,
+    onVote: w,
+    markThatVoted: A,
+    onPercentsAnimated: f,
+    youSelected: h,
     questionVoted: s,
-    imageMode: h,
+    imageMode: C,
     answerTimeExpired: O,
-    questionStatus: C,
+    questionStatus: P,
     isLoading: g,
     questionType: d,
     correct: k,
     hasCorrectAnswer: v,
     votedAfterQuestionClosed: x,
-    enteredAnActiveQuestion: P,
-    marketClosed: l
-  } = t, [L, p] = j(0), m = _(t), Q = q({ questionType: d, questionVoted: s, correct: k, hasCorrectAnswer: v, questionStatus: C }), f = l && d === o.PREDICTION, R = s || f, B = d === o.PREDICTION && !s && !l, V = s && !E && m !== "incorrect";
+    enteredAnActiveQuestion: R,
+    marketClosed: I
+  } = t, [L, T] = j(0), m = _(t), Q = q({ questionType: d, questionVoted: s, correct: k, hasCorrectAnswer: v, questionStatus: P }), u = I && d === o.PREDICTION, N = s || u, B = d === o.PREDICTION && !s && !I, V = s && !h && m !== "incorrect";
   return U(() => {
-    p(0), requestAnimationFrame(() => {
-      p(i);
+    T(0), requestAnimationFrame(() => {
+      T(i);
     });
-  }, [i]), /* @__PURE__ */ u(
+  }, [i]), /* @__PURE__ */ l(
     z,
     {
       value: c,
-      "data-selected": E,
+      "data-selected": h,
       "data-answer-state": m,
-      disabled: s || g || O || f && !P || f && P && x,
+      disabled: s || g || O || u && !R || u && R && x,
       "data-is-not-checked": V,
       onClick: (b) => {
-        D(
-          d === o.PREDICTION ? l : C === A.RESOLVED
-        ), S(b);
+        A(
+          d === o.PREDICTION ? I : P === D.RESOLVED
+        ), w(b);
       },
       children: [
         /* @__PURE__ */ e(
           G,
           {
             "data-answer-state": m,
-            style: { width: `${R ? L : 0}%` },
-            onTransitionEnd: w
+            style: { width: `${N ? L : 0}%` },
+            onTransitionEnd: () => {
+              u || f == null || f();
+            }
           }
         ),
-        /* @__PURE__ */ u(H, { children: [
-          n && h && ((T = I[h]) == null ? void 0 : T.call(I, n)),
+        /* @__PURE__ */ l(H, { children: [
+          n && C && ((S = E[C]) == null ? void 0 : S.call(E, n)),
           /* @__PURE__ */ e(J, { children: r }),
-          B && /* @__PURE__ */ u("div", { children: [
-            N,
+          B && /* @__PURE__ */ l("div", { children: [
+            p,
             /* @__PURE__ */ e(K, { children: "pts" })
           ] }),
-          R && /* @__PURE__ */ u(X, { children: [
+          N && /* @__PURE__ */ l(X, { children: [
             Q && /* @__PURE__ */ e(Y, { name: "selected" }),
             /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e($, { value: i, suffix: "%" }) })
           ] })
@@ -97,5 +96,5 @@ const I = {
   );
 };
 export {
-  at as VotingOption
+  ot as VotingOption
 };

package/lib/ui/gamification/vote/vote-option/styles.js

@@ -1,24 +1,22 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const I = /* @__PURE__ */ s("button")({
+const r = /* @__PURE__ */ s("button")({
   name: "ButtonContainer",
   class: "b1b6dl8t",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "ButtonPct",
   class: "b4iik8i",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("span")({
+}), I = /* @__PURE__ */ s("span")({
   name: "ButtonBody",
   class: "b1gq1lnf",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "IconContainer",
   class: "i1j65z51",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "IconWrap",
   class: "i19tpfua",
   propsAsIs: !1
@@ -26,47 +24,47 @@ const I = /* @__PURE__ */ s("button")({
   name: "Icon",
   class: "i1tubmma",
   propsAsIs: !1
-}), t = () => n, A = /* @__PURE__ */ s(t())({
+}), t = () => n, f = /* @__PURE__ */ s(t())({
   name: "IconDefault",
   class: "i1grrgwj",
   propsAsIs: !0
-}), a = () => n, d = /* @__PURE__ */ s(a())({
+}), a = () => n, u = /* @__PURE__ */ s(a())({
   name: "IconCircle",
   class: "ibemyq8",
   propsAsIs: !0
-}), b = /* @__PURE__ */ s("span")({
+}), A = /* @__PURE__ */ s("span")({
   name: "Title",
   class: "t1dceht",
   propsAsIs: !1
-}), B = /* @__PURE__ */ s("span")({
+}), d = /* @__PURE__ */ s("span")({
   name: "Indicators",
   class: "i116q4vq",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s("span")({
+}), b = /* @__PURE__ */ s("span")({
   name: "Pts",
   class: "p17ajcu2",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("span")({
+}), B = /* @__PURE__ */ s("span")({
   name: "Percentage",
   class: "pu9kmlb",
   propsAsIs: !1
-}), c = () => o, P = /* @__PURE__ */ s(c())({
+}), c = () => o, C = /* @__PURE__ */ s(c())({
   name: "CheckIcon",
   class: "c1j2j0s0",
   propsAsIs: !0
 });
 export {
-  m as ButtonBody,
-  I as ButtonContainer,
-  i as ButtonPct,
-  P as CheckIcon,
+  I as ButtonBody,
+  r as ButtonContainer,
+  l as ButtonPct,
+  C as CheckIcon,
   n as Icon,
-  d as IconCircle,
-  f as IconContainer,
-  A as IconDefault,
-  u as IconWrap,
-  B as Indicators,
-  g as Percentage,
-  C as Pts,
-  b as Title
+  u as IconCircle,
+  i as IconContainer,
+  f as IconDefault,
+  m as IconWrap,
+  d as Indicators,
+  B as Percentage,
+  b as Pts,
+  A as Title
 };

package/lib/ui/gamification/vote/win-bar/index.js

@@ -1,55 +1,47 @@
-import { jsx as r, jsxs as n, Fragment as C } from "react/jsx-runtime";
-import { QuestionType as t } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as P } from "../../../animated-counter/index.js";
-import { Timer as s } from "../../../timer/index.js";
-import { ShowInContainer as I, WinBarContainer as f, Content as u, Title as O, WinIcon as T, Points as j, PointsCount as x, PointsUnits as y } from "./styles.js";
-import "react-countup";
-import "@linaria/react";
-import "react";
-import "react-countdown-circle-timer";
-import "../../../theme/constants.js";
-import "../../../icons/index.js";
-import "../../../show-in/index.js";
-import "@linaria/core";
-const F = ({
-  title: e,
-  points: o,
-  isPlayingTimer: m,
-  isTimer: a,
+import { jsx as n, jsxs as e, Fragment as P } from "react/jsx-runtime";
+import { QuestionType as i } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as s } from "../../../animated-counter/index.js";
+import { Timer as I } from "../../../timer/index.js";
+import { ShowInContainer as f, WinBarContainer as p, Content as u, Title as O, WinIcon as T, Points as j, PointsCount as x, PointsUnits as y } from "./styles.js";
+const b = ({
+  title: o,
+  points: t,
+  isPlayingTimer: a,
+  isTimer: m,
   animatePoints: c,
-  questionType: i,
+  questionType: r,
   timerDuration: d,
   votedInCurrentRender: l,
-  percentsAnimated: p,
-  onTimerExpired: h
-}) => /* @__PURE__ */ r(
-  I,
+  percentsAnimated: h,
+  onTimerExpired: C
+}) => /* @__PURE__ */ n(
+  f,
   {
-    enabled: i === t.PREDICTION && l,
-    animate: p,
-    children: /* @__PURE__ */ n(
-      f,
+    enabled: r === i.PREDICTION && l,
+    animate: h,
+    children: /* @__PURE__ */ e(
+      p,
       {
         style: {
-          justifyContent: i === t.PREDICTION ? "center" : "space-between"
+          justifyContent: r === i.PREDICTION ? "center" : "space-between"
         },
         children: [
-          /* @__PURE__ */ n(u, { children: [
-            e && /* @__PURE__ */ r(O, { children: e }),
-            o !== void 0 && i !== t.POLL && /* @__PURE__ */ n(C, { children: [
-              /* @__PURE__ */ r(T, { name: "icon-trophy" }),
-              /* @__PURE__ */ n(j, { children: [
-                /* @__PURE__ */ r(x, { children: c ? /* @__PURE__ */ r(P, { value: o, delay: 0.3 }) : o }),
-                /* @__PURE__ */ r(y, { children: "PTS" })
+          /* @__PURE__ */ e(u, { children: [
+            o && /* @__PURE__ */ n(O, { children: o }),
+            t !== void 0 && r !== i.POLL && /* @__PURE__ */ e(P, { children: [
+              /* @__PURE__ */ n(T, { name: "icon-trophy" }),
+              /* @__PURE__ */ e(j, { children: [
+                /* @__PURE__ */ n(x, { children: c ? /* @__PURE__ */ n(s, { value: t, delay: 0.3 }) : t }),
+                /* @__PURE__ */ n(y, { children: "PTS" })
               ] })
             ] })
           ] }),
-          a && i !== t.PREDICTION && /* @__PURE__ */ r(s, { isPlaying: m, onTimerExpired: h, duration: d })
+          m && r !== i.PREDICTION && /* @__PURE__ */ n(I, { isPlaying: a, onTimerExpired: C, duration: d })
         ]
       }
     )
   }
 );
 export {
-  F as WinBar
+  b as WinBar
 };

package/lib/ui/gamification/vote/win-bar/styles.js

@@ -1,49 +1,46 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as n } from "../../../icons/index.js";
 import { GrowingShowIn as o } from "../../../show-in/index.js";
-import "react/jsx-runtime";
-import "react";
-import "@linaria/core";
-const t = () => o, m = /* @__PURE__ */ s(t())({
+const t = () => o, c = /* @__PURE__ */ s(t())({
   name: "ShowInContainer",
   class: "sie6cqo",
   propsAsIs: !0
-}), I = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "WinBarContainer",
   class: "wgizw4u",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1l3ucjp",
   propsAsIs: !1
-}), w = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "tx7j799",
   propsAsIs: !1
-}), i = () => n, A = /* @__PURE__ */ s(i())({
+}), a = () => n, I = /* @__PURE__ */ s(a())({
   name: "WinIcon",
   class: "w4lwuj0",
   propsAsIs: !0
-}), C = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "Points",
   class: "po9i64o",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("span")({
+}), w = /* @__PURE__ */ s("span")({
   name: "PointsCount",
   class: "pe5g05h",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("span")({
+}), A = /* @__PURE__ */ s("span")({
   name: "PointsUnits",
   class: "p1hdtpmb",
   propsAsIs: !1
 });
 export {
-  f as Content,
-  C as Points,
-  u as PointsCount,
-  d as PointsUnits,
-  m as ShowInContainer,
-  w as Title,
-  I as WinBarContainer,
-  A as WinIcon
+  l as Content,
+  f as Points,
+  w as PointsCount,
+  A as PointsUnits,
+  c as ShowInContainer,
+  m as Title,
+  r as WinBarContainer,
+  I as WinIcon
 };

package/lib/ui/login/demo.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import '@streamlayer/sdk-web-anonymous-auth';
 export declare const LoginComponent: React.FC<{
     sdk: StreamLayerSDK;
 }>;

package/lib/ui/login/demo.js

@@ -1,26 +1,14 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useStore as m } from "@nanostores/react";
+import { useStore as e } from "@nanostores/react";
 import "@streamlayer/sdk-web-anonymous-auth";
-import { Login as n } from "./index.js";
-import "react";
-import "react-auth-code-input";
-import "react-phone-number-input";
-import "../timer/index.js";
-import "@linaria/react";
-import "react-countdown-circle-timer";
-import "../theme/constants.js";
-import "../../utils/login.js";
-import "@connectrpc/connect";
-import "@connectrpc/connect-web";
-import "@streamlayer/sl-eslib/users/users_connect";
-import "./styles.js";
-const j = ({ sdk: o }) => m(o.getUserStore()).data ? /* @__PURE__ */ r("button", { onClick: o.logout, children: "logout" }) : /* @__PURE__ */ r(n, { login: async (i) => {
+import { Login as i } from "./index.js";
+const c = ({ sdk: o }) => e(o.getUserStore()).data ? /* @__PURE__ */ r("button", { onClick: o.logout, children: "logout" }) : /* @__PURE__ */ r(i, { login: async (n) => {
   try {
-    await o.authorizationBypass("streamlayer:streamlayer", i);
+    await o.authorizationBypass("streamlayer:streamlayer", n);
   } catch (t) {
     throw console.log("login err", t), t;
   }
 }, anonymousLogin: o.anonymousAuthorization, host: o.host });
 export {
-  j as LoginComponent
+  c as LoginComponent
 };

package/lib/ui/login/index.js

@@ -1,60 +1,54 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { useState as a } from "react";
 import w from "react-auth-code-input";
 import P, { isValidPhoneNumber as F, formatPhoneNumberIntl as v } from "react-phone-number-input";
 import { Timer as D } from "../timer/index.js";
 import { requestLoginCode as I, register as k, login as S } from "../../utils/login.js";
-import { Panel as q, Form as u, FormTitle as p, FormDescription as d, FormInputContainer as x, FormSubmit as m, Digits as E } from "./styles.js";
-import "@linaria/react";
-import "react-countdown-circle-timer";
-import "../theme/constants.js";
-import "@connectrpc/connect";
-import "@connectrpc/connect-web";
-import "@streamlayer/sl-eslib/users/users_connect";
-const O = ({ login: s, anonymousLogin: h, host: c }) => {
-  const [n, g] = a(""), [i, b] = a(""), [l, f] = a(""), y = async (o) => {
-    o.preventDefault();
+import { Panel as q, Form as m, FormTitle as p, FormDescription as d, FormInputContainer as x, FormSubmit as s, Digits as E } from "./styles.js";
+const z = ({ login: h, anonymousLogin: u, host: c }) => {
+  const [o, g] = a(""), [i, b] = a(""), [l, f] = a(""), y = async (t) => {
+    t.preventDefault();
     try {
-      const r = n.replaceAll("+", "");
+      const n = o.replaceAll("+", "");
       try {
-        await I(c, r);
+        await I(c, n);
       } catch {
-        await k(c, r);
+        await k(c, n);
       }
-      b(r);
-    } catch (r) {
-      window.alert(r);
+      b(n);
+    } catch (n) {
+      window.alert(n);
     }
-  }, C = async (o) => {
-    if (o.preventDefault(), i && l)
+  }, C = async (t) => {
+    if (t.preventDefault(), i && l)
       try {
-        const r = await S(c, i, l);
-        r && s ? await s(r) : console.log("token", r);
-      } catch (r) {
-        window.alert(r);
+        const n = await S(c, i, l);
+        n && h ? await h(n) : console.log("token", n);
+      } catch (n) {
+        window.alert(n);
       }
   };
-  return /* @__PURE__ */ t(q, { children: [
-    !i && /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ t(u, { onSubmit: y, children: [
+  return /* @__PURE__ */ r(q, { children: [
+    !i && /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ r(m, { onSubmit: y, children: [
         /* @__PURE__ */ e(p, { children: "Enter your phone number" }),
         /* @__PURE__ */ e(d, { children: "Enter your phone up for number to log in or sign an account." }),
-        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(P, { value: n, onChange: (o) => g(`${o}`) }) }),
-        /* @__PURE__ */ e(m, { disabled: !F(n), type: "submit", children: "request code" })
+        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(P, { value: o, onChange: (t) => g(`${t}`) }) }),
+        /* @__PURE__ */ e(s, { disabled: !F(o), type: "submit", children: "request code" })
       ] }),
-      h && /* @__PURE__ */ e(m, { style: { display: "block", margin: "auto" }, onClick: h, children: "anonymous login" })
+      u && /* @__PURE__ */ e(s, { style: { display: "block", margin: "auto" }, onClick: u, children: "anonymous login" })
     ] }),
-    i && /* @__PURE__ */ t(u, { onSubmit: C, children: [
+    i && /* @__PURE__ */ r(m, { onSubmit: C, children: [
       /* @__PURE__ */ e(p, { children: "Enter Verification Code" }),
-      /* @__PURE__ */ t(d, { children: [
+      /* @__PURE__ */ r(d, { children: [
         "Please enter the verification code ",
         /* @__PURE__ */ e("br", {}),
         "sent to ",
-        /* @__PURE__ */ e("b", { children: v(n) })
+        /* @__PURE__ */ e("b", { children: v(o) })
       ] }),
       /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(w, { autoFocus: !0, allowedCharacters: "numeric", length: 4, onChange: f }) }),
-      /* @__PURE__ */ e(m, { disabled: l.length !== 4, type: "submit", children: "login" }),
-      /* @__PURE__ */ t(d, { children: [
+      /* @__PURE__ */ e(s, { disabled: l.length !== 4, type: "submit", children: "login" }),
+      /* @__PURE__ */ r(d, { children: [
         "Didn't get 59 the code? ",
         /* @__PURE__ */ e("br", {}),
         "Resend Code in",
@@ -64,5 +58,5 @@ const O = ({ login: s, anonymousLogin: h, host: c }) => {
   ] });
 };
 export {
-  O as Login
+  z as Login
 };

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

@@ -2,7 +2,6 @@
 type ModalProps = {
     children: React.ReactNode;
     container: React.MutableRefObject<HTMLDivElement | null>;
-    fixedView: boolean;
     useContainer: boolean;
 };
 /**

package/lib/ui/modal/index.js

@@ -1,52 +1,59 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { cx as m } from "@linaria/core";
-import { styled as f } from "@linaria/react";
-import { useState as u, useCallback as i, useEffect as c } from "react";
-import { r as d } from "../../index-jRXrW6ie.js";
-import "../../index-uEuzH3jr.js";
-const p = /* @__PURE__ */ f("div")({
+import { jsxs as p, jsx as u } from "react/jsx-runtime";
+import { styled as h } from "@linaria/react";
+import { useState as w, useEffect as a } from "react";
+import { r as f } from "../../index-Bicco-Aq.js";
+import { BREAKPOINTS as n } from "../theme/constants.js";
+const y = /* @__PURE__ */ h("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), v = "fd3gza8", x = `
-  body {
-    overflow: hidden !important;
-  }
-`, y = `
+}), g = `
   .sl-hide-on-modal {
-    display: none !important;
+    height: 0 !important;
+    opacity: 0 !important;
+    overflow: hidden !important;
   }
-`, h = `
+`, O = `
   .sl-pill-button {
     display: none !important;
   }
-`, E = (r) => {
-  const [t, n] = u(r), o = i((l) => {
-    l.target instanceof HTMLAnchorElement && l.target.href.slice(-1) === "#" && n(!1);
-  }, []), e = i(() => n(!1), []);
-  return c(() => (r && (document.addEventListener("scroll", e), document.addEventListener("click", o)), () => {
-    document.removeEventListener("scroll", e), document.removeEventListener("click", o);
-  }), [r, e, o]), c(() => {
-    t === !1 && (document.removeEventListener("scroll", e), document.removeEventListener("click", o));
-  }, [t, e, o]), [t];
-}, V = ({
-  children: r,
+`, W = ({
+  children: i,
   container: t,
-  fixedView: n,
-  useContainer: o
+  useContainer: m
 }) => {
-  const [e] = E(n);
-  return t.current ? o ? d.createPortal(/* @__PURE__ */ a(p, {
-    className: m(e && v),
-    children: [r, e && /* @__PURE__ */ s("style", {
-      children: x
-    }), !e && /* @__PURE__ */ s("style", {
-      children: y
-    }), /* @__PURE__ */ s("style", {
-      children: h
+  const [l] = w(() => {
+    var r;
+    const e = window.innerWidth >= n.lg && window.innerWidth < n.xl ? 75 : 52;
+    return (((r = t.current) == null ? void 0 : r.getBoundingClientRect().y) || 0) - e < 0;
+  }), [o, s] = w(!1);
+  return a(() => {
+    if (!t.current || !l)
+      return s(!0), () => {
+      };
+    const e = window.scrollY;
+    return s(!0), () => {
+      var c;
+      const d = window.innerWidth >= n.lg && window.innerWidth < n.xl ? 75 : 52;
+      (((c = t.current) == null ? void 0 : c.getBoundingClientRect().y) || 0) - d < 0 && window.scrollTo({
+        top: e
+      });
+    };
+  }, []), a(() => {
+    if (o && t.current && l) {
+      const e = window.innerWidth >= n.lg && window.innerWidth < n.xl ? 75 : 52;
+      window.scrollTo({
+        top: t.current.offsetTop - e
+      });
+    }
+  }, [o]), !t.current || !o ? null : m ? f.createPortal(/* @__PURE__ */ p(y, {
+    children: [i, /* @__PURE__ */ u("style", {
+      children: g
+    }), /* @__PURE__ */ u("style", {
+      children: O
     })]
-  }), t.current, "modal-node") : d.createPortal(r, t.current, "modal-node") : null;
+  }), t.current, "modal-node") : f.createPortal(i, t.current, "modal-node");
 };
 export {
-  V as ModalPortal
+  W as ModalPortal
 };

package/lib/ui/navigation/button/Channels.js

@@ -2,26 +2,23 @@ import { jsx as o } from "react/jsx-runtime";
 import { styled as e } from "@linaria/react";
 import { SvgIcon as s } from "../../icons/index.js";
 import { Button as c } from "./index.js";
-import "react";
-import "@linaria/core";
-import "./styles.js";
-const r = () => s, a = /* @__PURE__ */ e(r())({
+const a = () => s, l = /* @__PURE__ */ e(a())({
   name: "ButtonIcon",
   class: "b1whzxvd",
   propsAsIs: !0
-}), B = "channels", I = (n) => {
+}), d = "channels", p = (n) => {
   var t;
   return /* @__PURE__ */ o(c, {
     ...n,
     id: "channels",
     label: "Channels",
-    icon: /* @__PURE__ */ o(a, {
+    icon: /* @__PURE__ */ o(l, {
       name: "icon-btn-channels",
       "data-selected": (t = n.active) == null ? void 0 : t.toString()
     })
   });
 };
 export {
-  I as ChannelsButton,
-  B as ChannelsButtonId
+  p as ChannelsButton,
+  d as ChannelsButtonId
 };