@streamlayer/react-ui 1.14.3 → 1.15.0

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

@@ -55,6 +55,12 @@ export declare const COLORS: {
     VOTE_BTN_NOT_SELECTED_BG_UNSET: string;
     VOTED_ANSWER_BG: string;
     VOTED_BTN_RCT_BG: string;
+    IN_APP_BG: string;
+    IN_APP_QUESTION_TYPE_ICON: string;
+    IN_APP_QUESTION_TYPE_LABEL: string;
+    IN_APP_QUESTION_QUOTE: string;
+    IN_APP_QUESTION_RESULT_SUBTITLE_BG: string;
+    IN_APP_QUESTION_RESULT_LINE: string;
 };
 export declare const COLORS_ADVERTISEMENT: {
     BG_PRIMARY: string;

package/lib/ui/theme/constants.js

@@ -9,7 +9,7 @@ const R = {
   PRIMARY_2: "#095CD1",
   // hover, active, ...etc (darken 10%)
   PRIMARY_TEXT: "#090E13",
-  SECONDARY_TEXT: "#090E13",
+  SECONDARY_TEXT: "rgba(10, 14, 19, 0.70)",
   QUESTION_TYPE_ICON: "#1D7BFF",
   SUCCESS: "#107D57",
   UNSUCCESS: "#DF2F3B",
@@ -56,7 +56,13 @@ const R = {
   VOTE_BTN_NOT_SELECTED_BG: "#FFFFFF",
   VOTE_BTN_NOT_SELECTED_BG_UNSET: "rgb(196, 196, 196)",
   VOTED_ANSWER_BG: "#FFFFFF",
-  VOTED_BTN_RCT_BG: "#2d5694"
+  VOTED_BTN_RCT_BG: "#2d5694",
+  IN_APP_BG: "rgba(255, 255, 255, 0.90)",
+  IN_APP_QUESTION_TYPE_ICON: "#1D7BFF",
+  IN_APP_QUESTION_TYPE_LABEL: "#82899E",
+  IN_APP_QUESTION_QUOTE: "rgba(10, 14, 19, 0.70)",
+  IN_APP_QUESTION_RESULT_SUBTITLE_BG: "#1D7BFF",
+  IN_APP_QUESTION_RESULT_LINE: "#babfc5"
 }, F = {
   BG_PRIMARY: "#13212b",
   BG_SECONDARY: "#152430",
@@ -67,7 +73,7 @@ const R = {
   TEXT_SECONDARY: "rgba(255, 255, 255, 0.8)",
   TEXT_SECONDARY1: "#878787",
   WHITE: "#fff"
-}, D = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], O = "#cee5de", S = "#f9d6d8", I = "#E8E8E8", A = {
+}, I = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], N = "#cee5de", O = "#f9d6d8", S = "#E8E8E8", D = {
   REGULAR: "'SF Pro Text', Arial, Helvetica, sans-serif",
   SERIF: "'SF Pro Display', Arial, Helvetica, sans-serif",
   COLOR: "#fff",
@@ -80,17 +86,17 @@ const R = {
   SIZE_DEFAULT2: "12px",
   LINE_HEIGHT: "24px",
   MARGIN_TITLE_DEFAULT: "24px 0px"
-}, N = {
+}, A = {
   xs: 324,
   sm: 576,
   md: 768,
   lg: 992,
   xl: 1200,
   xxl: 1440
-}, C = {
+}, B = {
   landscape: "landscape",
   portrait: "portrait"
-}, B = Object.entries(R).reduce((E, [_, T]) => `
+}, C = Object.entries(R).reduce((E, [_, T]) => `
     ${E}
     --color-${_.toLowerCase().replaceAll("_", "-")}: ${T};
   `, ""), L = Object.entries(F).reduce((E, [_, T]) => `
@@ -98,15 +104,15 @@ const R = {
     --color-adv-${_.toLowerCase().replaceAll("_", "-")}: ${T};
   `, "");
 export {
-  N as BREAKPOINTS,
+  A as BREAKPOINTS,
   R as COLORS,
   F as COLORS_ADVERTISEMENT,
-  A as FONT,
-  C as ORIENTATION,
-  D as TIMER_COLORS,
-  I as TIMER_GRAY,
-  O as TIMER_GREEN,
-  S as TIMER_RED,
-  B as colors,
+  D as FONT,
+  B as ORIENTATION,
+  I as TIMER_COLORS,
+  S as TIMER_GRAY,
+  N as TIMER_GREEN,
+  O as TIMER_RED,
+  C as colors,
   L as colorsAdvertisement
 };

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

@@ -1,5 +1,6 @@
 export declare const StreamLayerThemeProvider: React.FC<{
     children: React.ReactNode;
     style?: React.CSSProperties;
+    themeMode?: 'light' | 'dark';
     customTheme?: string;
 }>;

package/lib/ui/theme/index.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { cx as a } from "@linaria/core";
-import { theme as t } from "./theme.js";
-const d = ({ children: r, customTheme: m, style: o }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: a(t, m), style: o, children: r }) });
+import { cx as t } from "@linaria/core";
+import { theme as i } from "./theme.js";
+const h = ({ children: r, customTheme: m, themeMode: o, style: a }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: t(i, o, m), style: a, children: r }) });
 export {
-  d as StreamLayerThemeProvider
+  h as StreamLayerThemeProvider
 };

package/lib/ui/theme/theme.js

@@ -65,7 +65,7 @@ const l = `
   --insight-image-ratio: 16/9;
 
   --adv-side-indents: 16px;
-  --adv-top-indent: 32px;
+  --adv-top-indent: 12px;
   --adv-header-height: 52px;
   --adv-media-row-gap: 24px;
   --adv-media-padding: 0 26.5px;
@@ -73,7 +73,7 @@ const l = `
   --adv-sponsor-font-size: 16px;
   --adv-header-border: 1px solid var(--color-adv-border-primary);
   --adv-header-shift: 0;
-  --adv-media-shift: 0;
+  --adv-media-shift: 24px;
   --adv-hide-on-mobile: unset;
   --adv-title-font-size: 24px;
   --adv-description-font-size: 16px;

package/lib/utils/decorators/container.js

@@ -1,8 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import { StreamLayerThemeProvider as n } from "../../ui/theme/index.js";
-import { AppContainer as o } from "./styles.js";
-const c = (e) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {}) }), d = (e) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
+import { jsx as e } from "react/jsx-runtime";
+import { StreamLayerThemeProvider as t } from "../../ui/theme/index.js";
+import { BGContainer as i, AppContainer as m } from "./styles.js";
+const l = (r, n) => {
+  const o = n.globals.theme || "light";
+  return /* @__PURE__ */ e(t, { themeMode: o, children: /* @__PURE__ */ e(r, {}) });
+}, a = (r) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, {}) }), s = (r) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {}) }) }) });
 export {
-  d as container,
-  c as theme
+  a as bgContainer,
+  s as container,
+  l as theme
 };

package/lib/utils/decorators/styles.js

@@ -1,9 +1,14 @@
 import { styled as s } from "@linaria/react";
-const o = /* @__PURE__ */ s("div")({
+const a = /* @__PURE__ */ s("div")({
   name: "AppContainer",
   class: "azqfrs3",
   propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "BGContainer",
+  class: "b1t42us",
+  propsAsIs: !1
 });
 export {
-  o as AppContainer
+  a as AppContainer,
+  o as BGContainer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.14.3",
+  "version": "1.15.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -35,6 +35,11 @@
       "default": "./lib/app/app/Insight/index.js",
       "types": "./lib/app/app/Insight/index.d.ts"
     },
+    "./notification": {
+      "import": "./lib/app/app/InApp/index.js",
+      "default": "./lib/app/app/InApp/index.js",
+      "types": "./lib/app/app/InApp/index.d.ts"
+    },
     "./*": {
       "import": "./lib/*/index.js",
       "default": "./lib/*/index.js",
@@ -59,18 +64,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.12.3",
-    "@streamlayer/sdk-web": "^1.6.8",
-    "@streamlayer/sdk-web-analytics": "^1.5.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.16",
-    "@streamlayer/sdk-web-api": "^1.6.16",
-    "@streamlayer/sdk-web-core": "^1.8.5",
-    "@streamlayer/sdk-web-features": "^1.0.37",
-    "@streamlayer/sdk-web-interfaces": "^1.4.3",
-    "@streamlayer/sdk-web-logger": "^1.0.37",
-    "@streamlayer/sdk-web-notifications": "^1.2.16",
-    "@streamlayer/sdk-web-storage": "^1.0.37",
-    "@streamlayer/sdk-web-types": "^1.8.10"
+    "@streamlayer/feature-gamification": "^1.13.0",
+    "@streamlayer/sdk-web": "^1.7.0",
+    "@streamlayer/sdk-web-analytics": "^1.5.4",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.17",
+    "@streamlayer/sdk-web-api": "^1.6.17",
+    "@streamlayer/sdk-web-core": "^1.9.0",
+    "@streamlayer/sdk-web-features": "^1.0.38",
+    "@streamlayer/sdk-web-interfaces": "^1.4.4",
+    "@streamlayer/sdk-web-logger": "^1.0.38",
+    "@streamlayer/sdk-web-notifications": "^1.3.0",
+    "@streamlayer/sdk-web-storage": "^1.0.38",
+    "@streamlayer/sdk-web-types": "^1.9.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -111,6 +116,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.9.8"
+    "@streamlayer/react": "^1.10.0"
   }
 }