@streamlayer/react-ui 0.98.1 → 0.100.0

package/lib/ui/modal/index.js

@@ -1,14 +1,13 @@
-import { jsxs as p, jsx as u } from "react/jsx-runtime";
-import { styled as h } from "@linaria/react";
-import { useState as w, useEffect as m } from "react";
-import { r as a } from "../../index-jRXrW6ie.js";
-import { BREAKPOINTS as n } from "../theme/constants.js";
-import "../../index-uEuzH3jr.js";
-const y = /* @__PURE__ */ h("div")({
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import { styled as w } from "@linaria/react";
+import { useState as c, useEffect as d } from "react";
+import { r as a } from "../../index-Bicco-Aq.js";
+import { BREAKPOINTS as u } from "../theme/constants.js";
+const h = /* @__PURE__ */ w("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), g = `
+}), y = `
   .sl-hide-on-modal {
     height: 0 !important;
     opacity: 0 !important;
@@ -18,43 +17,43 @@ const y = /* @__PURE__ */ h("div")({
   .sl-pill-button {
     display: none !important;
   }
-`, k = ({
-  children: i,
+`, m = () => window.innerWidth >= u.lg && window.innerWidth < u.xl ? 76 : 53, f = (o) => {
+  var e;
+  const t = m();
+  return Math.round((((e = o.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) - t) <= 0;
+}, x = ({
+  children: o,
   container: t,
-  useContainer: f
+  useContainer: e
 }) => {
-  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 m(() => {
+  const [l] = c(() => f(t)), [n, s] = c(!1);
+  return d(() => {
     if (!t.current || !l)
       return s(!0), () => {
       };
-    const e = window.scrollY;
+    const r = 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
+      f(t) && window.scrollTo({
+        top: r,
+        behavior: "instant"
       });
     };
-  }, []), m(() => {
-    if (o && t.current && l) {
-      const e = window.innerWidth >= n.lg && window.innerWidth < n.xl ? 75 : 52;
+  }, []), d(() => {
+    if (n && t.current && l) {
+      const r = m();
       window.scrollTo({
-        top: t.current.offsetTop - e
+        top: t.current.offsetTop - r,
+        behavior: "instant"
       });
     }
-  }, [o]), !t.current || !o ? null : f ? a.createPortal(/* @__PURE__ */ p(y, {
-    children: [i, /* @__PURE__ */ u("style", {
-      children: g
-    }), /* @__PURE__ */ u("style", {
+  }, [n]), !t.current || !n ? null : e ? a.createPortal(/* @__PURE__ */ p(h, {
+    children: [o, /* @__PURE__ */ i("style", {
+      children: y
+    }), /* @__PURE__ */ i("style", {
       children: O
     })]
-  }), t.current, "modal-node") : a.createPortal(i, t.current, "modal-node");
+  }), t.current, "modal-node") : a.createPortal(o, t.current, "modal-node");
 };
 export {
-  k as ModalPortal
+  x 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
 };

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

@@ -2,14 +2,11 @@ import { jsx as e } from "react/jsx-runtime";
 import { styled as r } from "@linaria/react";
 import { SvgIcon as u } from "../../icons/index.js";
 import { Button as n } from "./index.js";
-import "react";
-import "@linaria/core";
-import "./styles.js";
 const s = () => u, a = /* @__PURE__ */ r(s())({
   name: "ButtonIcon",
   class: "b11des7c",
   propsAsIs: !0
-}), G = "featuredGroups", B = (t) => {
+}), i = "featuredGroups", l = (t) => {
   var o;
   return /* @__PURE__ */ e(n, {
     ...t,
@@ -22,6 +19,6 @@ const s = () => u, a = /* @__PURE__ */ r(s())({
   });
 };
 export {
-  B as FeaturedGroupsButton,
-  G as FeaturedGroupsButtonId
+  l as FeaturedGroupsButton,
+  i as FeaturedGroupsButtonId
 };

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

@@ -1,27 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
-import { styled as e } from "@linaria/react";
+import { jsx as e } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
 import { SvgIcon as a } from "../../icons/index.js";
 import { Button as d } from "./index.js";
-import "react";
-import "@linaria/core";
-import "./styles.js";
-const n = () => a, m = /* @__PURE__ */ e(n())({
+const n = () => a, c = /* @__PURE__ */ r(n())({
   name: "ButtonIcon",
   class: "b180jd7l",
   propsAsIs: !0
-}), u = "leaderboard", I = (o) => {
+}), B = "leaderboard", b = (o) => {
   var t;
-  return /* @__PURE__ */ r(d, {
+  return /* @__PURE__ */ e(d, {
     ...o,
     label: "Leader Board",
     id: "leaderboard",
-    icon: /* @__PURE__ */ r(m, {
+    icon: /* @__PURE__ */ e(c, {
       name: "icon-btn-leaderboard",
       "data-selected": (t = o.active) == null ? void 0 : t.toString()
     })
   });
 };
 export {
-  I as LeaderBoardButton,
-  u as LeaderBoardButtonId
+  b as LeaderBoardButton,
+  B as LeaderBoardButtonId
 };

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

@@ -1,20 +1,19 @@
-import { jsx as e, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { cx as d } from "@linaria/core";
-import { SButton as s, SelectedButton as u, HoverIconState as p, HoverIconLeaderboardState as h, ButtonIcon as B, ButtonLabel as f } from "./styles.js";
-import "@linaria/react";
-const I = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: t }) => /* @__PURE__ */ e(
+import { jsx as t, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { cx as m } from "@linaria/core";
+import { SButton as s, SelectedButton as u, HoverIconState as h, HoverIconLeaderboardState as p, ButtonIcon as B, ButtonLabel as f } from "./styles.js";
+const I = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: e }) => /* @__PURE__ */ t(
   s,
   {
     onClick: a,
     disabled: n,
-    className: d(
+    className: m(
       r && u,
-      !r && (t === "channels" || t === "featuredGroups") && p,
-      !r && t === "leaderboard" && h
+      !r && (e === "channels" || e === "featuredGroups") && h,
+      !r && e === "leaderboard" && p
     ),
-    children: /* @__PURE__ */ l(m, { children: [
-      o && /* @__PURE__ */ e(B, { children: o }),
-      /* @__PURE__ */ e(f, { children: c })
+    children: /* @__PURE__ */ l(d, { children: [
+      o && /* @__PURE__ */ t(B, { children: o }),
+      /* @__PURE__ */ t(f, { children: c })
     ] })
   }
 );

package/lib/ui/navigation/masters.js

@@ -1,7 +1,6 @@
 import { styled as a } from "@linaria/react";
 import { Navigation as s } from "./index.js";
-import "react/jsx-runtime";
-const p = /* @__PURE__ */ a("div")({
+const n = /* @__PURE__ */ a("div")({
   name: "Navigation",
   class: "n19lpak2",
   propsAsIs: !1
@@ -11,6 +10,6 @@ const p = /* @__PURE__ */ a("div")({
   propsAsIs: !0
 });
 export {
-  p as Navigation,
+  n as Navigation,
   e as NavigationItems
 };

package/lib/ui/questions/insight/index.js

@@ -1,35 +1,30 @@
-import { jsxs as g, jsx as d } from "react/jsx-runtime";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
 import { QuestionImages as I } from "@streamlayer/sdk-web-types";
 import { VideoPlayer as e } from "../../video-player/index.js";
 import { Container as v, ImageContainer as C, Image as b, Content as x, Title as D, Description as T } from "./styles.js";
-import "@linaria/core";
-import "react";
-import "../../icons/index.js";
-import "@linaria/react";
-import "../../video-player/styles.js";
-const R = ({
+const M = ({
   instantView: r,
-  isDetail: m,
-  notification: o,
-  controlVideo: c
+  isDetail: l,
+  notification: d,
+  controlVideo: p
 }) => {
-  const l = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = l || p, u = o == null ? void 0 : o.title, y = o == null ? void 0 : o.body;
-  return /* @__PURE__ */ g(v, { children: [
-    (r == null ? void 0 : r.video) && /* @__PURE__ */ d(
+  const m = r == null ? void 0 : r.heading, h = r == null ? void 0 : r.body, g = m || h, u = d == null ? void 0 : d.title, y = d == null ? void 0 : d.body;
+  return /* @__PURE__ */ c(v, { children: [
+    (r == null ? void 0 : r.video) && /* @__PURE__ */ o(
       e,
       {
         source: r.video.url,
         poster: r.video.thumbnailUrl,
-        controlVideo: c
+        controlVideo: p
       }
     ),
-    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(C, { "data-rounded": r.imageMode === I.ROUNDED, children: /* @__PURE__ */ d(b, { src: r == null ? void 0 : r.image }) }),
-    /* @__PURE__ */ g(x, { children: [
-      /* @__PURE__ */ d(D, { children: m && h ? l : u }),
-      /* @__PURE__ */ d(T, { children: m && h ? p : y })
+    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ o(C, { "data-rounded": r.imageMode === I.ROUNDED, children: /* @__PURE__ */ o(b, { src: r == null ? void 0 : r.image }) }),
+    /* @__PURE__ */ c(x, { children: [
+      /* @__PURE__ */ o(D, { children: l && g ? m : u }),
+      /* @__PURE__ */ o(T, { children: l && g ? h : y })
     ] })
   ] });
 };
 export {
-  R as InsightContent
+  M as InsightContent
 };

package/lib/ui/questions/twitter/account/index.js

@@ -1,31 +1,29 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { SvgIcon as a } from "../../../icons/index.js";
 import { getTimeUntilNow as l } from "../../../../utils/common.js";
-import { Container as p, ImageContainer as s, Image as d, TwitterIcon as f, Details as h, Name as D, UserNameAndDate as I } from "./styles.js";
-import "@linaria/react";
-import "react";
-const C = ({ image: i, name: o, userName: e, verified: c, createdTweet: n }) => {
-  const m = n && l(n);
-  return /* @__PURE__ */ r(p, { children: [
-    i && /* @__PURE__ */ r(s, { children: [
-      /* @__PURE__ */ t(d, { src: i }),
+import { Container as s, ImageContainer as d, Image as p, TwitterIcon as f, Details as h, Name as D, UserNameAndDate as I } from "./styles.js";
+const v = ({ image: e, name: i, userName: n, verified: m, createdTweet: o }) => {
+  const c = o && l(o);
+  return /* @__PURE__ */ r(s, { children: [
+    e && /* @__PURE__ */ r(d, { children: [
+      /* @__PURE__ */ t(p, { src: e }),
       /* @__PURE__ */ t(f, { name: "twitter" })
     ] }),
     /* @__PURE__ */ r(h, { children: [
-      o && /* @__PURE__ */ r(D, { children: [
-        o,
+      i && /* @__PURE__ */ r(D, { children: [
+        i,
         " ",
-        c && /* @__PURE__ */ t(a, { name: "icon-twitter-verified" })
+        m && /* @__PURE__ */ t(a, { name: "icon-twitter-verified" })
       ] }),
-      e && /* @__PURE__ */ r(I, { children: [
+      n && /* @__PURE__ */ r(I, { children: [
         "@",
-        e,
+        n,
         " ",
-        m && `･ ${m}`
+        c && `･ ${c}`
       ] })
     ] })
   ] });
 };
 export {
-  C as Account
+  v as Account
 };

package/lib/ui/questions/twitter/account/styles.js

@@ -1,42 +1,40 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as e } from "../../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const m = /* @__PURE__ */ s("div")({
+const t = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cjq447q",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "ImageContainer",
   class: "i14egogb",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("img")({
+}), c = /* @__PURE__ */ s("img")({
   name: "Image",
   class: "i2g9g4l",
   propsAsIs: !1
-}), a = () => e, p = /* @__PURE__ */ s(a())({
+}), a = () => e, m = /* @__PURE__ */ s(a())({
   name: "TwitterIcon",
   class: "t1c454nm",
   propsAsIs: !0
-}), l = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "Details",
   class: "d11nigc3",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Name",
   class: "nrxa4k8",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "UserNameAndDate",
   class: "u1p051g3",
   propsAsIs: !1
 });
 export {
-  m as Container,
-  l as Details,
-  i as Image,
-  c as ImageContainer,
-  I as Name,
-  p as TwitterIcon,
-  g as UserNameAndDate
+  t as Container,
+  i as Details,
+  c as Image,
+  r as ImageContainer,
+  p as Name,
+  m as TwitterIcon,
+  l as UserNameAndDate
 };

package/lib/ui/questions/twitter/index.js

@@ -1,33 +1,26 @@
-import { jsxs as t, jsx as n, Fragment as j } from "react/jsx-runtime";
+import { jsxs as c, jsx as n, Fragment as j } from "react/jsx-runtime";
 import { VideoPlayer as k } from "../../video-player/index.js";
 import { Account as x } from "./account/index.js";
-import { Container as B, Details as E, Body as N, ImagesContainer as c, ImageFullSize as i, ImageHalfSize as e, ImagesBlock as m } from "./styles.js";
-import "@linaria/core";
-import "react";
-import "../../icons/index.js";
-import "@linaria/react";
-import "../../video-player/styles.js";
-import "../../../utils/common.js";
-import "./account/styles.js";
-const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (o) => o == null ? void 0 : o.replace(R, ""), K = ({
-  image: o,
+import { Container as B, Details as E, Body as N, ImagesContainer as i, ImageFullSize as l, ImageHalfSize as p, ImagesBlock as a } from "./styles.js";
+const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (t) => t == null ? void 0 : t.replace(R, ""), V = ({
+  image: t,
   body: C,
   account: z,
   accountVerified: F,
   tweet: s,
-  isDetail: a,
+  isDetail: d,
   controlVideo: T
 }) => {
-  var h, g, H, U, f, u, v, I, y;
-  const r = (g = (h = s == null ? void 0 : s.meta) == null ? void 0 : h.extendedEntities) == null ? void 0 : g.media, l = r == null ? void 0 : r.find(({ type: p }) => p === "photo"), d = (u = (f = (U = (H = r == null ? void 0 : r[0]) == null ? void 0 : H.videoInfo) == null ? void 0 : U.variants) == null ? void 0 : f.find(
-    ({ contentType: p }) => p === "video/mp4"
+  var m, g, H, U, f, u, v, I, y;
+  const r = (g = (m = s == null ? void 0 : s.meta) == null ? void 0 : m.extendedEntities) == null ? void 0 : g.media, o = r == null ? void 0 : r.find(({ type: e }) => e === "photo"), h = (u = (f = (U = (H = r == null ? void 0 : r[0]) == null ? void 0 : H.videoInfo) == null ? void 0 : U.variants) == null ? void 0 : f.find(
+    ({ contentType: e }) => e === "video/mp4"
   )) == null ? void 0 : u.url;
-  return /* @__PURE__ */ t(B, { children: [
-    /* @__PURE__ */ t(E, { children: [
+  return /* @__PURE__ */ c(B, { children: [
+    /* @__PURE__ */ c(E, { children: [
       /* @__PURE__ */ n(
         x,
         {
-          image: o,
+          image: t,
           name: (v = s == null ? void 0 : s.meta) == null ? void 0 : v.accountName,
           userName: z,
           verified: F,
@@ -35,35 +28,35 @@ const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (o) => o == null ?
         }
       ),
       /* @__PURE__ */ n(N, { children: S(C) }),
-      !a && l && /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(i, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
-      a && l && /* @__PURE__ */ t(j, { children: [
-        (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(i, { src: r[0].mediaUrlHttps }) }),
-        (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ t(c, { children: [
-          /* @__PURE__ */ n(e, { src: r[0].mediaUrlHttps }),
-          /* @__PURE__ */ n(e, { src: r[1].mediaUrlHttps })
+      !d && o && /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(l, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
+      d && o && /* @__PURE__ */ c(j, { children: [
+        (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(l, { src: r[0].mediaUrlHttps }) }),
+        (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ c(i, { children: [
+          /* @__PURE__ */ n(p, { src: r[0].mediaUrlHttps }),
+          /* @__PURE__ */ n(p, { src: r[1].mediaUrlHttps })
         ] }),
-        (r == null ? void 0 : r.length) === 3 && /* @__PURE__ */ t(c, { children: [
-          /* @__PURE__ */ n(e, { src: r[0].mediaUrlHttps }),
-          /* @__PURE__ */ t(m, { children: [
-            /* @__PURE__ */ n(i, { src: r[1].mediaUrlHttps }),
-            /* @__PURE__ */ n(i, { src: r[2].mediaUrlHttps })
+        (r == null ? void 0 : r.length) === 3 && /* @__PURE__ */ c(i, { children: [
+          /* @__PURE__ */ n(p, { src: r[0].mediaUrlHttps }),
+          /* @__PURE__ */ c(a, { children: [
+            /* @__PURE__ */ n(l, { src: r[1].mediaUrlHttps }),
+            /* @__PURE__ */ n(l, { src: r[2].mediaUrlHttps })
           ] })
         ] }),
-        (r == null ? void 0 : r.length) === 4 && /* @__PURE__ */ t(c, { children: [
-          /* @__PURE__ */ t(m, { children: [
-            /* @__PURE__ */ n(i, { src: r[0].mediaUrlHttps }),
-            /* @__PURE__ */ n(i, { src: r[1].mediaUrlHttps })
+        (r == null ? void 0 : r.length) === 4 && /* @__PURE__ */ c(i, { children: [
+          /* @__PURE__ */ c(a, { children: [
+            /* @__PURE__ */ n(l, { src: r[0].mediaUrlHttps }),
+            /* @__PURE__ */ n(l, { src: r[1].mediaUrlHttps })
           ] }),
-          /* @__PURE__ */ t(m, { children: [
-            /* @__PURE__ */ n(i, { src: r[2].mediaUrlHttps }),
-            /* @__PURE__ */ n(i, { src: r[3].mediaUrlHttps })
+          /* @__PURE__ */ c(a, { children: [
+            /* @__PURE__ */ n(l, { src: r[2].mediaUrlHttps }),
+            /* @__PURE__ */ n(l, { src: r[3].mediaUrlHttps })
           ] })
         ] })
       ] })
     ] }),
-    !l && (((I = r == null ? void 0 : r[0]) == null ? void 0 : I.type) === "video" || ((y = r == null ? void 0 : r[0]) == null ? void 0 : y.type) === "animated_gif") && d && /* @__PURE__ */ n(k, { source: d, poster: r[0].mediaUrlHttps, controlVideo: T })
+    !o && (((I = r == null ? void 0 : r[0]) == null ? void 0 : I.type) === "video" || ((y = r == null ? void 0 : r[0]) == null ? void 0 : y.type) === "animated_gif") && h && /* @__PURE__ */ n(k, { source: h, poster: r[0].mediaUrlHttps, controlVideo: T })
   ] });
 };
 export {
-  K as TwitterContent
+  V as TwitterContent
 };

package/lib/ui/show-in/index.d.ts

@@ -5,6 +5,7 @@ type ShowInProps = {
     className?: string;
     enabled?: boolean;
     hiding?: boolean;
+    onAnimationEnd?: React.AnimationEventHandler;
 };
 export declare const ShowIn: React.FC<ShowInProps>;
 export declare const GrowingShowIn: React.FC<ShowInProps & {

package/lib/ui/show-in/index.js

@@ -9,12 +9,14 @@ const w = /* @__PURE__ */ p("div")({
 }), f = "sx17qu6", d = "h1692c5m", x = ({
   children: r,
   style: e,
-  className: t,
+  className: n,
   enabled: o = !0,
-  hiding: s
+  hiding: s,
+  onAnimationEnd: t
 }) => /* @__PURE__ */ c(w, {
   style: e,
-  className: h(t, o && f, o && s && d),
+  className: h(n, o && f, o && s && d),
+  onAnimationEnd: t,
   children: r
 }), y = () => x, C = /* @__PURE__ */ p(y())({
   name: "GrowingContainer",
@@ -23,25 +25,25 @@ const w = /* @__PURE__ */ p("div")({
 }), G = ({
   children: r,
   style: e,
-  enabled: t,
+  enabled: n,
   animate: o,
   ...s
 }) => {
-  const n = l(null), u = a(() => {
-    const m = n == null ? void 0 : n.current, i = m && window.getComputedStyle(m), g = i == null ? void 0 : i.getPropertyValue("height");
-    return t ? {
+  const t = l(null), u = a(() => {
+    const m = t == null ? void 0 : t.current, i = m && window.getComputedStyle(m), g = i == null ? void 0 : i.getPropertyValue("height");
+    return n ? {
       height: o ? g : 0
     } : {};
-  }, [t, o]);
+  }, [n, o]);
   return /* @__PURE__ */ c(C, {
     ...s,
-    enabled: t && o,
+    enabled: n && o,
     style: {
       ...e,
       ...u
     },
     children: /* @__PURE__ */ c("div", {
-      ref: n,
+      ref: t,
       children: r
     })
   });

package/lib/ui/skeleton/index.js

@@ -1,7 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Container as m } from "./styles.js";
-import "@linaria/react";
-const f = ({ children: r, style: o, loading: t }) => t ? /* @__PURE__ */ e(m, { style: o, children: r }) : r;
+import { Container as n } from "./styles.js";
+const i = ({ children: r, style: o, loading: t }) => t ? /* @__PURE__ */ e(n, { style: o, children: r }) : r;
 export {
-  f as Skeleton
+  i as Skeleton
 };

package/lib/ui/theme/index.js

@@ -1,8 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { theme as o } from "./theme.js";
-import "./breakpoints.js";
-import "./constants.js";
-const p = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: o, style: m, children: r }) });
+import { theme as a } from "./theme.js";
+const i = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: a, style: m, children: r }) });
 export {
-  p as StreamLayerThemeProvider
+  i as StreamLayerThemeProvider
 };