@streamlayer/react-ui 1.7.1 → 1.8.1

package/lib/ui/advertisement/banner/styles.d.ts

@@ -1,3 +1,2 @@
 export declare const BannerContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const BannerLink: any;
-export declare const BannerImg: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/ui/advertisement/banner/styles.js

@@ -1,6 +1,6 @@
 import { styled as n } from "@linaria/react";
 import { Link as s } from "../../link/index.js";
-const o = /* @__PURE__ */ n("div")({
+const a = /* @__PURE__ */ n("div")({
   name: "BannerContainer",
   class: "b7yfc72",
   propsAsIs: !1
@@ -8,13 +8,8 @@ const o = /* @__PURE__ */ n("div")({
   name: "BannerLink",
   class: "bejjq94",
   propsAsIs: !0
-}), m = /* @__PURE__ */ n("img")({
-  name: "BannerImg",
-  class: "b1j94hdr",
-  propsAsIs: !1
 });
 export {
-  o as BannerContainer,
-  m as BannerImg,
+  a as BannerContainer,
   t as BannerLink
 };

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

@@ -1,11 +1,10 @@
 import { Advertisement } from '@streamlayer/feature-gamification';
 export declare const AdvertisementUI: React.FC<{
-    advertisement: Advertisement & {
-        data: Exclude<Advertisement['data'], undefined>;
-    };
+    advertisement: Exclude<Advertisement['data'], undefined>;
     layoutMode?: 'cover' | 'side-by-side';
     sidebar?: 'left' | 'right';
     banner?: 'top' | 'bottom';
+    close?: () => void;
     isNotification?: boolean;
     skipTypeCheck?: boolean;
 }>;

package/lib/ui/advertisement/index.js

@@ -1,29 +1,27 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import { useStore as f } from "@nanostores/react";
-import { PromotionType as t } from "@streamlayer/sdk-web-types";
-import { Banner as s } from "./banner/index.js";
-import { Notification as u } from "./notification/index.js";
-import { Overlay as c } from "./overlay/index.js";
-import { Sidebar as I } from "./sidebar/index.js";
-import { OverlayContainer as y } from "./overlay/styles.js";
-const A = (r) => (r == null ? void 0 : r.type) === t.INGAME_IAB11_LBAR || (r == null ? void 0 : r.type) === t.INGAME_IAB21_LBAR, h = (r) => (r == null ? void 0 : r.type) === t.INGAME_IAB11 || (r == null ? void 0 : r.type) === t.INGAME_IAB21, G = ({ advertisement: r, skipTypeCheck: d, layoutMode: m = "side-by-side", sidebar: n, isNotification: e, banner: l }) => {
-  const o = f(r.data);
-  return !o.data && o.loading ? null : o.error ? /* @__PURE__ */ a("div", { children: [
-    "error ",
-    /* @__PURE__ */ i("button", { onClick: r.close, children: "close" })
-  ] }) : o.data ? e ? /* @__PURE__ */ i(u, { notification: o.data.notification, promotionId: r.id }) : !n && !l && (d || h(o.data.promotions)) ? /* @__PURE__ */ i(y, { className: "PromoOverlayContainer", children: /* @__PURE__ */ i(c, { promotionId: r.id, promotion: o.data.promotions, onClose: r.close }) }) : n && (d || A(o.data.promotions)) ? /* @__PURE__ */ i(I, { className: "PromoSidebarContainer", direction: n, hiding: r.hiding, children: /* @__PURE__ */ i(c, { promotionId: r.id, promotion: o.data.promotions, onClose: r.close }) }) : l ? /* @__PURE__ */ i(
-    s,
-    {
-      promotionId: r.id,
-      hiding: r.hiding,
-      promotion: o.data.promotions,
-      direction: l
-    }
-  ) : null : /* @__PURE__ */ a("div", { children: [
-    "empty promo ",
-    /* @__PURE__ */ i("button", { onClick: r.close, children: "close" })
-  ] });
-};
+import { jsx as o } from "react/jsx-runtime";
+import { PromotionType as r } from "@streamlayer/sdk-web-types";
+import { Banner as c } from "./banner/index.js";
+import { Notification as y } from "./notification/index.js";
+import { Overlay as u } from "./overlay/index.js";
+import { Sidebar as A } from "./sidebar/index.js";
+import { OverlayContainer as a } from "./overlay/styles.js";
+const d = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === r.INGAME_IAB21_LBAR, B = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11 || (i == null ? void 0 : i.type) === r.INGAME_IAB21, C = ({
+  advertisement: i,
+  close: t,
+  skipTypeCheck: l,
+  layoutMode: N = "side-by-side",
+  sidebar: n,
+  isNotification: I,
+  banner: f
+}) => i.promotion ? I && i.notification ? /* @__PURE__ */ o(y, { notification: i.notification, promotionId: i.question.id }) : !n && !f && (l || B(i.promotion)) ? /* @__PURE__ */ o(a, { className: "PromoOverlayContainer", children: /* @__PURE__ */ o(u, { promotionId: i.question.id, promotion: i.promotion, onClose: t }) }) : n && (l || d(i.promotion)) ? /* @__PURE__ */ o(A, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ o(u, { promotionId: i.question.id, promotion: i.promotion, onClose: t }) }) : f ? /* @__PURE__ */ o(
+  c,
+  {
+    promotionId: i.question.id,
+    hiding: !1,
+    promotion: i.promotion,
+    direction: f
+  }
+) : null : null;
 export {
-  G as AdvertisementUI
+  C as AdvertisementUI
 };

package/lib/ui/advertisement/overlay/index.js

@@ -1,45 +1,45 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import { cx as D } from "@linaria/core";
-import { eventBus as U } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as R, PromotionLogoMode as l } from "@streamlayer/sdk-web-types";
-import { VideoPlayer as j } from "../../video-player/index.js";
-import { PromoOverlay as G, Header as H, HeaderContent as W, headerContentShift as V, SponsorLogo as F, Sponsor as q, SponsorName as w, SponsorText as z, ADLogo as J, SponsoredText as K, CloseIconWrap as Q, CloseIcon as X, Media as Y, shiftMedia as Z, Content as _, PromoImg as $, Title as ee, hideOnMobile as re, Description as ae, ActionBtnWrap as le, ActionButton as ne } from "./styles.js";
-import { OverlayContainer as ge } from "./styles.js";
-const he = ({ promotion: e, promotionId: s, onClose: k }) => {
-  var t, c, d, i, h, b, y, g, p, m, f, u, v, C, N, x, A, T, M, P, B, I, S, E, L, O;
-  const n = e.type === R.INGAME_IAB11_LBAR || e.type === R.INGAME_IAB11, o = ((t = e.sponsor) == null ? void 0 : t.logo) && e.logoMode === l.CENTER;
-  return /* @__PURE__ */ a(G, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ a(H, { children: [
-      /* @__PURE__ */ a(W, { className: D(!o && V), children: [
-        ((c = e.sponsor) == null ? void 0 : c.logo) && e.logoMode === l.LEFT && /* @__PURE__ */ r(F, { src: (d = e.sponsor) == null ? void 0 : d.logo, alt: "promo" }),
+import { eventBus as k } from "@streamlayer/sdk-web-interfaces";
+import { PromotionType as R, PromotionLogoMode as n, PromotionButtonType as j } from "@streamlayer/sdk-web-types";
+import { VideoPlayer as G } from "../../video-player/index.js";
+import { PromoOverlay as H, Header as W, HeaderContent as V, headerContentShift as q, SponsorLogo as _, Sponsor as w, SponsorName as z, SponsorText as J, ADLogo as K, SponsoredText as Q, CloseIconWrap as X, CloseIcon as Y, Media as Z, shiftMedia as $, Content as F, PromoImg as ee, Title as re, hideOnMobile as ae, Description as ne, ActionBtnWrap as le, ActionButton as oe } from "./styles.js";
+import { OverlayContainer as pe } from "./styles.js";
+const be = ({ promotion: e, promotionId: s, onClose: U }) => {
+  var t, c, d, i, y, b, h, g, p, u, m, T, f, v, N, C, x, A, B, P, M, I, O, S, E, L;
+  const l = e.type === R.INGAME_IAB11_LBAR || e.type === R.INGAME_IAB11, o = ((t = e.sponsor) == null ? void 0 : t.logo) && e.logoMode === n.CENTER;
+  return /* @__PURE__ */ a(H, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ a(W, { children: [
+      /* @__PURE__ */ a(V, { className: D(!o && q), children: [
+        ((c = e.sponsor) == null ? void 0 : c.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(_, { src: (d = e.sponsor) == null ? void 0 : d.logo, alt: "promo" }),
         /* @__PURE__ */ a(
-          q,
+          w,
           {
             style: {
-              paddingLeft: (i = e.sponsor) != null && i.logo && e.logoMode === l.LEFT ? "0px" : "8px"
+              paddingLeft: (i = e.sponsor) != null && i.logo && e.logoMode === n.LEFT ? "0px" : "8px"
             },
             children: [
-              ((h = e.sponsor) == null ? void 0 : h.logo) && e.logoMode === l.LEFT && /* @__PURE__ */ r(w, { children: (b = e.sponsor) == null ? void 0 : b.name }),
-              /* @__PURE__ */ a(z, { className: "SponsorText", children: [
-                /* @__PURE__ */ r(J, { children: "AD" }),
-                /* @__PURE__ */ r(K, { children: "SPONSORED" })
+              ((y = e.sponsor) == null ? void 0 : y.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(z, { children: (b = e.sponsor) == null ? void 0 : b.name }),
+              /* @__PURE__ */ a(J, { className: "SponsorText", children: [
+                /* @__PURE__ */ r(K, { children: "AD" }),
+                /* @__PURE__ */ r(Q, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ r(Q, { className: "ClosePromoIcon", onClick: k, children: /* @__PURE__ */ r(X, { name: "icon-cross" }) })
+      /* @__PURE__ */ r(X, { className: "ClosePromoIcon", onClick: U, children: /* @__PURE__ */ r(Y, { name: "icon-cross" }) })
     ] }),
-    /* @__PURE__ */ a(Y, { children: [
-      o && /* @__PURE__ */ r(F, { className: Z, src: (y = e.sponsor) == null ? void 0 : y.logo, alt: "promo" }),
-      /* @__PURE__ */ r(_, { children: (p = (g = e.banner) == null ? void 0 : g.video) != null && p.url ? /* @__PURE__ */ r(
-        j,
+    /* @__PURE__ */ a(Z, { children: [
+      o && /* @__PURE__ */ r(_, { className: $, src: (h = e.sponsor) == null ? void 0 : h.logo, alt: "promo" }),
+      /* @__PURE__ */ r(F, { children: (p = (g = e.banner) == null ? void 0 : g.video) != null && p.url ? /* @__PURE__ */ r(
+        G,
         {
-          source: (f = (m = e.banner) == null ? void 0 : m.video) == null ? void 0 : f.url,
-          poster: (v = (u = e.banner) == null ? void 0 : u.video) == null ? void 0 : v.thumbnailUrl,
-          aspectRatio: n ? "1/1" : "16/9",
+          source: (m = (u = e.banner) == null ? void 0 : u.video) == null ? void 0 : m.url,
+          poster: (f = (T = e.banner) == null ? void 0 : T.video) == null ? void 0 : f.thumbnailUrl,
+          aspectRatio: l ? "1/1" : "16/9",
           onPlay: () => {
-            U.emit("advertisement", {
+            k.emit("advertisement", {
               action: "videoPlay",
               payload: {
                 advertisementId: s,
@@ -48,30 +48,30 @@ const he = ({ promotion: e, promotionId: s, onClose: k }) => {
             });
           }
         }
-      ) : (C = e.banner) != null && C.imageUrl ? /* @__PURE__ */ r($, { style: n ? { aspectRatio: "1/1" } : {}, src: (N = e.banner) == null ? void 0 : N.imageUrl, alt: "promo" }) : null }),
-      !n && /* @__PURE__ */ a(_, { children: [
-        ((x = e.banner) == null ? void 0 : x.title) && /* @__PURE__ */ r(ee, { className: D("AdvTitle", o && re), children: (A = e.banner) == null ? void 0 : A.title }),
-        ((T = e.banner) == null ? void 0 : T.body) && /* @__PURE__ */ r(ae, { className: "AdvDescription", children: (M = e.banner) == null ? void 0 : M.body })
+      ) : (v = e.banner) != null && v.imageUrl ? /* @__PURE__ */ r(ee, { style: l ? { aspectRatio: "1/1" } : {}, src: (N = e.banner) == null ? void 0 : N.imageUrl, alt: "promo" }) : null }),
+      !l && /* @__PURE__ */ a(F, { children: [
+        ((C = e.banner) == null ? void 0 : C.title) && /* @__PURE__ */ r(re, { className: D("AdvTitle", o && ae), children: (x = e.banner) == null ? void 0 : x.title }),
+        ((A = e.banner) == null ? void 0 : A.body) && /* @__PURE__ */ r(ne, { className: "AdvDescription", children: (B = e.banner) == null ? void 0 : B.body })
       ] })
     ] }),
-    /* @__PURE__ */ r(le, { children: /* @__PURE__ */ r(
-      ne,
+    e.buttonType !== j.NO_BUTTON && /* @__PURE__ */ r(le, { children: /* @__PURE__ */ r(
+      oe,
       {
         href: (P = e.banner) == null ? void 0 : P.url,
         style: {
-          backgroundColor: ((I = (B = e.banner) == null ? void 0 : B.ctaButton) == null ? void 0 : I.color) || "#009dc4",
-          color: ((E = (S = e.banner) == null ? void 0 : S.ctaButton) == null ? void 0 : E.textColor) || "#fff"
+          backgroundColor: ((I = (M = e.banner) == null ? void 0 : M.ctaButton) == null ? void 0 : I.color) || "#009dc4",
+          color: ((S = (O = e.banner) == null ? void 0 : O.ctaButton) == null ? void 0 : S.textColor) || "#fff"
         },
         "data-analytics": "button",
         "data-promo-id": s,
         "data-promo-type": e.type,
         target: "_blank",
-        children: (O = (L = e.banner) == null ? void 0 : L.ctaButton) == null ? void 0 : O.label
+        children: (L = (E = e.banner) == null ? void 0 : E.ctaButton) == null ? void 0 : L.label
       }
     ) })
   ] });
 };
 export {
-  he as Overlay,
-  ge as OverlayContainer
+  be as Overlay,
+  pe as OverlayContainer
 };

package/lib/ui/theme/constants.d.ts

@@ -12,6 +12,7 @@ export declare const COLORS: {
     UNSUCCESS: string;
     SECONDARY_RED1: string;
     NEUTRALS_WHITE: string;
+    NEUTRALS_WHITE1: string;
     NEUTRALS_GRAY1: string;
     NEUTRALS_GRAY2: string;
     NEUTRALS_GRAY3: string;
@@ -27,6 +28,7 @@ export declare const COLORS_ADVERTISEMENT: {
     BG_SECONDARY1: string;
     BORDER_PRIMARY: string;
     TEXT_PRIMARY: string;
+    TEXT_PRIMARY1: string;
     TEXT_SECONDARY: string;
     TEXT_SECONDARY1: string;
     WHITE: string;
@@ -41,6 +43,14 @@ export declare const FONT: {
     SERIF: string;
     COLOR: string;
     WEIGHT_DEFAULT: string;
+    WEIGHT_DEFAULT1: string;
+    WEIGHT_DEFAULT2: string;
+    WEIGHT_DEFAULT3: string;
+    SIZE_DEFAULT: string;
+    SIZE_DEFAULT1: string;
+    SIZE_DEFAULT2: string;
+    LINE_HEIGHT: string;
+    MARGIN_TITLE_DEFAULT: string;
 };
 export declare const BREAKPOINTS: {
     xs: number;

package/lib/ui/theme/constants.js

@@ -1,4 +1,4 @@
-const e = {
+const T = {
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
   BLUE_QUESTION_ACTION_BTN: "#1589ee",
   WHITE: "#FFFFFF",
@@ -12,6 +12,7 @@ const e = {
   UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
   NEUTRALS_WHITE: "#FFFFFF",
+  NEUTRALS_WHITE1: "#FFFFFF",
   NEUTRALS_GRAY1: "#F7F7F7",
   NEUTRALS_GRAY2: "#F2F2F1",
   NEUTRALS_GRAY3: "#E8E8E8",
@@ -20,47 +21,56 @@ const e = {
   NEUTRALS_GRAY6: "#888B8D",
   NEUTRALS_GRAY7: "#6B6F73",
   NEUTRALS_GRAY9: "#25282A"
-}, T = {
+}, F = {
   BG_PRIMARY: "#13212b",
   BG_SECONDARY: "#152430",
   BG_SECONDARY1: "#435059",
   BORDER_PRIMARY: "rgba(255, 255, 255, 0.1)",
   TEXT_PRIMARY: "#f9f9f9",
+  TEXT_PRIMARY1: "#f9f9f9",
   TEXT_SECONDARY: "rgba(255, 255, 255, 0.8)",
   TEXT_SECONDARY1: "#878787",
   WHITE: "#fff"
-}, _ = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], F = "#cee5de", r = "#f9d6d8", S = "#E8E8E8", s = {
+}, _ = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], e = "#cee5de", I = "#f9d6d8", S = "#E8E8E8", N = {
   REGULAR: "'SF Pro Text', Arial, Helvetica, sans-serif",
   SERIF: "'SF Pro Display', Arial, Helvetica, sans-serif",
   COLOR: "#fff",
-  WEIGHT_DEFAULT: "500"
-}, t = {
+  WEIGHT_DEFAULT: "500",
+  WEIGHT_DEFAULT1: "500",
+  WEIGHT_DEFAULT2: "400",
+  WEIGHT_DEFAULT3: "500",
+  SIZE_DEFAULT: "16px",
+  SIZE_DEFAULT1: "14px",
+  SIZE_DEFAULT2: "12px",
+  LINE_HEIGHT: "24px",
+  MARGIN_TITLE_DEFAULT: "24px 0px"
+}, r = {
   xs: 324,
   sm: 576,
   md: 768,
   lg: 992,
   xl: 1200,
   xxl: 1440
-}, N = {
+}, D = {
   landscape: "landscape",
   portrait: "portrait"
-}, o = Object.entries(e).reduce((R, [E, A]) => `
-    ${R}
-    --color-${E.toLowerCase().replaceAll("_", "-")}: ${A};
-  `, ""), c = Object.entries(T).reduce((R, [E, A]) => `
-    ${R}
-    --color-adv-${E.toLowerCase().replaceAll("_", "-")}: ${A};
+}, s = Object.entries(T).reduce((E, [R, A]) => `
+    ${E}
+    --color-${R.toLowerCase().replaceAll("_", "-")}: ${A};
+  `, ""), t = Object.entries(F).reduce((E, [R, A]) => `
+    ${E}
+    --color-adv-${R.toLowerCase().replaceAll("_", "-")}: ${A};
   `, "");
 export {
-  t as BREAKPOINTS,
-  e as COLORS,
-  T as COLORS_ADVERTISEMENT,
-  s as FONT,
-  N as ORIENTATION,
+  r as BREAKPOINTS,
+  T as COLORS,
+  F as COLORS_ADVERTISEMENT,
+  N as FONT,
+  D as ORIENTATION,
   _ as TIMER_COLORS,
   S as TIMER_GRAY,
-  F as TIMER_GREEN,
-  r as TIMER_RED,
-  o as colors,
-  c as colorsAdvertisement
+  e as TIMER_GREEN,
+  I as TIMER_RED,
+  s as colors,
+  t as colorsAdvertisement
 };

package/lib/ui/theme/theme.js

@@ -1,14 +1,22 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
 import { breakpoints as d } from "./breakpoints.js";
-import { colors as p, colorsAdvertisement as s, FONT as i } from "./constants.js";
-const h = `
+import { colors as p, colorsAdvertisement as s, FONT as e } from "./constants.js";
+const l = `
   ${p}
   ${s}
-  --font-family: ${i.REGULAR};
-  --font-regular: ${i.REGULAR};
-  --font-color: ${i.COLOR};
-  --font-serif: ${i.SERIF};
-  --font-weight-default: ${i.WEIGHT_DEFAULT};
+  --font-family: ${e.REGULAR};
+  --font-regular: ${e.REGULAR};
+  --font-color: ${e.COLOR};
+  --font-serif: ${e.SERIF};
+  --font-weight-default: ${e.WEIGHT_DEFAULT};
+  --font-weight-default1: ${e.WEIGHT_DEFAULT1};
+  --font-weight-default2: ${e.WEIGHT_DEFAULT2};
+  --font-weight-default3: ${e.WEIGHT_DEFAULT3};
+  --font-size-default: ${e.SIZE_DEFAULT};
+  --font-size-default1: ${e.SIZE_DEFAULT1};
+  --font-size-default2: ${e.SIZE_DEFAULT2};
+  --line-height-default: ${e.LINE_HEIGHT};
+  --margin-title-default: ${e.MARGIN_TITLE_DEFAULT};
 
   --header-offset: 0px;
   --header-height: 68px;
@@ -22,6 +30,20 @@ const h = `
   --pill-offset: 0px;
   --max-width: 600px;
   --max-notifications-width: 400px;
+  --promo-header-line-height: 18.5px;
+  --row-gap-default: 12px;
+  --row-gap-default1: 12px;
+  --row-gap-default2: 16px;
+  --header-padding: 12px 12px 12px 16px;
+  --margin-web-link-btn: 0px;
+  --padding-web-link-btn: 11px 16px;
+  --insight-content-padding: 0px;
+  --close-icon-size: 12px;
+  --close-icon-stroke-width: 1.5;
+  --padding-title-default: 0px;
+  --insight-image-display: inline;
+  --web-link-align-items: center;
+  --web-link-column-gap: 10px;
 
   ${d.down("xl")`
     --header-offset: 0px;
@@ -64,23 +86,23 @@ const h = `
     --adv-sponsor-logo-size: 28px;
     --adv-sponsor-font-size: 12px;
   }
-`, v = "StreamLayerCSSReset", f = "ttkj0ah", c = () => /* @__PURE__ */ e("table", {
-  children: /* @__PURE__ */ t("table", {
-    children: [/* @__PURE__ */ e("thead", {
-      children: /* @__PURE__ */ t("tr", {
-        children: [/* @__PURE__ */ e("th", {
+`, m = "StreamLayerCSSReset", g = "ttkj0ah", c = () => /* @__PURE__ */ t("table", {
+  children: /* @__PURE__ */ i("table", {
+    children: [/* @__PURE__ */ t("thead", {
+      children: /* @__PURE__ */ i("tr", {
+        children: [/* @__PURE__ */ t("th", {
           children: "name"
-        }), /* @__PURE__ */ e("th", {
+        }), /* @__PURE__ */ t("th", {
           children: "value"
         })]
       })
-    }), /* @__PURE__ */ e("tbody", {
-      children: h.split(";").map((o) => {
-        const a = o.trim(), [n, r] = a.split(":");
-        return /* @__PURE__ */ t("tr", {
-          children: [/* @__PURE__ */ e("td", {
-            children: n
-          }), /* @__PURE__ */ e("td", {
+    }), /* @__PURE__ */ t("tbody", {
+      children: l.split(";").map((n) => {
+        const a = n.trim(), [o, r] = a.split(":");
+        return /* @__PURE__ */ i("tr", {
+          children: [/* @__PURE__ */ t("td", {
+            children: o
+          }), /* @__PURE__ */ t("td", {
             children: r
           })]
         }, a);
@@ -90,7 +112,7 @@ const h = `
 });
 export {
   c as ThemeVariables,
-  v as resetCss,
-  f as theme,
-  h as themeStr
+  m as resetCss,
+  g as theme,
+  l as themeStr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -51,7 +51,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.122.0",
+    "@streamlayer/sl-eslib": "^5.123.1",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "nanoid": "3.3.7",
@@ -59,18 +59,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.5.4",
-    "@streamlayer/sdk-web": "^1.2.7",
-    "@streamlayer/sdk-web-analytics": "^1.2.7",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.0.16",
-    "@streamlayer/sdk-web-api": "^1.4.1",
-    "@streamlayer/sdk-web-core": "^1.3.1",
-    "@streamlayer/sdk-web-features": "^1.0.16",
-    "@streamlayer/sdk-web-interfaces": "^1.1.11",
-    "@streamlayer/sdk-web-logger": "^1.0.16",
-    "@streamlayer/sdk-web-notifications": "^1.1.11",
-    "@streamlayer/sdk-web-storage": "^1.0.16",
-    "@streamlayer/sdk-web-types": "^1.5.1"
+    "@streamlayer/feature-gamification": "^1.6.1",
+    "@streamlayer/sdk-web": "^1.3.1",
+    "@streamlayer/sdk-web-analytics": "^1.3.1",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.0.18",
+    "@streamlayer/sdk-web-api": "^1.5.1",
+    "@streamlayer/sdk-web-core": "^1.4.1",
+    "@streamlayer/sdk-web-features": "^1.0.18",
+    "@streamlayer/sdk-web-interfaces": "^1.1.13",
+    "@streamlayer/sdk-web-logger": "^1.0.18",
+    "@streamlayer/sdk-web-notifications": "^1.1.13",
+    "@streamlayer/sdk-web-storage": "^1.0.18",
+    "@streamlayer/sdk-web-types": "^1.6.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -111,6 +111,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.4.1"
+    "@streamlayer/react": "^1.5.1"
   }
 }