@streamlayer/react 1.23.1 → 1.24.0

package/lib/es/index9.js

@@ -1,11 +1,182 @@
-import { jsx as t } from "react/jsx-runtime";
-import { s as i } from "./sl-types.js";
-const l = /* @__PURE__ */ i("div")({
-  name: "Container",
-  class: "cqg02m",
+import { jsx as F } from "react/jsx-runtime";
+import { d as n } from "./index12.js";
+import { useEffect as D, useState as S, useCallback as C } from "react";
+import { s as I } from "./sl-types.js";
+import { CountdownCircleTimer as t } from "react-countdown-circle-timer";
+import { B as a } from "./index8.js";
+const f = {
+  BLUE_QUESTION_ACTION_BTN: "#1589ee",
+  WHITE: "#FFFFFF",
+  BLUE: "#2d6ffd",
+  GREY_PRIMARY: "#909395",
+  GREY_PRIMARY_ONBOARDING_INAPP: "#B5B7B8",
+  PRIMARY_1: "#1D7BFF",
+  // main
+  PRIMARY_2: "#095CD1",
+  // hover, active, ...etc (darken 10%)
+  PRIMARY_TEXT: "#090E13",
+  SECONDARY_TEXT: "rgba(10, 14, 19, 0.70)",
+  QUESTION_TYPE_ICON: "#1D7BFF",
+  QUESTION_BODY_TEXT: "#090E13",
+  PRESENTED_BY_TEXT: "#090E13",
+  SUCCESS: "#107D57",
+  UNSUCCESS: "#DF2F3B",
+  SECONDARY_RED1: "#DF2F3B",
+  NEUTRALS_WHITE: "#FFFFFF",
+  NEUTRALS_WHITE1: "#FFFFFF",
+  NEUTRALS_GRAY1: "#F7F7F7",
+  NEUTRALS_GRAY2: "#F2F2F1",
+  NEUTRALS_GRAY3: "#E8E8E8",
+  NEUTRALS_GRAY4: "#D9D9D6",
+  NEUTRALS_GRAY5: "#B1B3B3",
+  NEUTRALS_GRAY6: "#888B8D",
+  NEUTRALS_GRAY7: "#6B6F73",
+  NEUTRALS_GRAY9: "#25282A",
+  SDK_CONTAINER_BG: "#F7F7F7",
+  SDK_WHITE_CONTAINER_BG: "#fff",
+  SDK_DARK_CONTAINER_BG: "#fff",
+  SDK_PREDICTION_RESULT_SUCCESS_BG: "#fff",
+  SDK_PREDICTION_RESULT_INCORRECT_BG: "#fff",
+  SDK_PREDICTION_RESULT_SUCCESS_TEXT: "#107D57",
+  SDK_PREDICTION_RESULT_ERROR_TITLE: "#090E13",
+  SDK_PREDICTION_RESULT_ERROR_SUBTITLE: "#DF2F3B",
+  SDK_PREDICTION_RESULT_CLOSE_ICON: "#6B6F73",
+  SDK_PREDICTION_FEEDBACK_SUCCESS_ICON: "#107D57",
+  SDK_PREDICTION_FEEDBACK_INCORRECT_RECT1: "#CD2525",
+  SDK_PREDICTION_FEEDBACK_INCORRECT_RECT2: "#fff",
+  PREDICTION_BG_LINES_CORRECT: "#01AB58",
+  PREDICTION_BG_LINES_INCORRECT: "#888B8D",
+  SKELETON_COLOR_1: "#f1efef",
+  SKELETON_COLOR_2: "#f9f8f8",
+  TABS_CONTAINER_BG: "#F2F2F1",
+  TABS_ACTIVE_BG: "#FFFFFF",
+  TABS_COLOR: "#6B6F73",
+  TABS_ACTIVE_COLOR: "#1D7BFF",
+  CARD_BG: "#FFFFFF",
+  CARD_BORDER: "#fff",
+  BORDER: "#E8E8E8",
+  VOTE_BTN_BG: "#F7F7F7",
+  VOTE_BTN_BORDER: "rgb(232, 232, 232)",
+  VOTE_BTN_DISABLED_BORDER: "#B1B3B3",
+  VOTE_BTN_SELECTED_BORDER: "#25282A",
+  VOTE_BTN_NOT_SELECTED_BORDER: "#E8E8E8",
+  VOTE_BTN_SELECTED_BG: "#FFFFFF",
+  VOTE_BTN_SELECTED_BG_AD_UNIT: "#FFFFFF",
+  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",
+  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",
+  QUOTE_BORDER: "#E8E8E8",
+  QUOTE_TEXT: "rgba(10, 14, 19, 0.70)"
+}, c = {
+  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"
+}, l = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], L = "#cee5de", P = "#f9d6d8", U = "#E8E8E8", x = {
+  xs: 324,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1440
+};
+Object.entries(f).reduce((_, [E, T]) => `
+    ${_}
+    --color-${E.toLowerCase().replaceAll("_", "-")}: ${T};
+  `, "");
+Object.entries(c).reduce((_, [E, T]) => `
+    ${_}
+    --color-adv-${E.toLowerCase().replaceAll("_", "-")}: ${T};
+  `, "");
+const d = (_) => {
+  const { Component: E, options: T, customOptions: e, autoFocus: R, ...O } = _, N = n.useFocusable({
+    ...T,
+    ...e,
+    onEnterPress: () => _.onClick?.({ currentTarget: N.ref.current, stopPropagation: () => {
+    } })
+  });
+  return D(() => {
+    R && N.focusSelf();
+  }, []), /* @__PURE__ */ F(E, { ...O, ...N, "data-is-with-focus": "true" });
+};
+function Q(_, E) {
+  return ({ webos: T, options: e, ...R }) => T ? /* @__PURE__ */ F(d, { Component: _, options: E, customOptions: e, ...R }) : /* @__PURE__ */ F(_, { ...R });
+}
+const m = [10, 10, 1, 0], G = /* @__PURE__ */ I("div")({
+  name: "RemainingTimeCircle",
+  class: "r165427",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ I("div")({
+  name: "RemainingTime",
+  class: "r17garf3",
   propsAsIs: !1
-}), a = ({ children: s, style: e, loading: o }) => o ? /* @__PURE__ */ t(l, { style: e, children: s }) : s;
+}), Y = L, B = P, o = U, X = ({
+  className: _,
+  duration: E = 30,
+  onTimerExpired: T,
+  isPlaying: e = !0
+}) => /* @__PURE__ */ F(t, {
+  isPlaying: e,
+  strokeWidth: 0,
+  duration: E,
+  colors: B,
+  size: 24,
+  onComplete: T,
+  children: ({
+    remainingTime: R
+  }) => /* @__PURE__ */ F(p, {
+    className: _,
+    children: E === 0 ? 0 : R
+  })
+}), M = ({
+  isPlaying: _ = !0,
+  duration: E = 30,
+  onTimerExpired: T
+}) => {
+  const [e, R] = S(E > 10 ? Y : B), [O, N] = S(2);
+  D(() => {
+    E === 0 && (N(0), R(o));
+  }, [E]);
+  const i = ({
+    remainingTime: r
+  }) => /* @__PURE__ */ F(G, {
+    children: E === 0 ? 0 : r
+  }), s = C(() => {
+    T?.(), R(o);
+  }, [T, R]), A = C((r) => {
+    r === 10 && R(B);
+  }, [R]);
+  return /* @__PURE__ */ F(t, {
+    isPlaying: _,
+    duration: E,
+    colors: l,
+    colorsTime: m,
+    size: 32,
+    strokeWidth: O,
+    trailStrokeWidth: 2,
+    trailColor: e,
+    onComplete: s,
+    onUpdate: A,
+    children: i
+  });
+}, W = ({ height: _ = "37px", width: E = "37px" }) => /* @__PURE__ */ F("div", { style: { height: _, width: E }, children: /* @__PURE__ */ F(a, { name: "loader" }) });
 export {
-  l as e,
-  a as i
+  x as A,
+  X as G,
+  M as L,
+  f as R,
+  Q as b,
+  W as d
 };

package/lib/es/insight.js

@@ -1,81 +1,79 @@
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import { h as p } from "./index8.js";
-import { u as m, s as h } from "./sl-types.js";
-import { useRef as f, useEffect as I } from "react";
-import { h as g } from "./Question.js";
-import { S } from "./useStreamLayerApp2.js";
-import { B as k, z as v, j as Q } from "./hooks-WfHlJH12.js";
-const y = () => g, b = /* @__PURE__ */ h(y())({
+import { jsx as u, jsxs as c } from "react/jsx-runtime";
+import { h as p } from "./index7.js";
+import { u as a, s as h } from "./sl-types.js";
+import { useRef as f, useEffect as l } from "react";
+import { _ as I } from "./Question.js";
+import { S as g } from "./useStreamLayerApp2.js";
+import { Y as S, _ as k, g as Q } from "./hooks-n9ax4LRT.js";
+const y = () => I, A = /* @__PURE__ */ h(y())({
   name: "QuestionWrap",
   class: "q10hhsxv",
   propsAsIs: !0
-}), A = ({
+}), b = ({
   gamification: e,
-  sdk: n,
+  sdk: o,
   persistent: i,
-  skipAutoClose: o,
+  skipAutoClose: n,
   hideHeader: d,
   insightId: t
 }) => {
-  const s = f(""), c = m(e.openedQuestion.$store);
-  return I(() => t ? (!i || e.isOpenedQuestion(t) || (s.current = t, e.getFeedItem(t).then((r) => {
-    var u;
-    s.current === t && ((u = r == null ? void 0 : r.attributes) == null ? void 0 : u.attributes.case) === "insight" && e.openQuestion(t, r);
+  const r = f(""), m = a(e.openedQuestion.$store);
+  return l(() => t ? (!i || e.isOpenedQuestion(t) || (r.current = t, e.getFeedItem(t).then((s) => {
+    r.current === t && s?.attributes?.attributes.case === "insight" && e.openQuestion(t, s);
   })), () => {
-    s.current = "";
+    r.current = "";
   }) : (e.activeQuestionId.subscribe(({
-    data: r
+    data: s
   }) => {
-    var u;
-    r && ((u = r.feedItem) == null ? void 0 : u.type) === "insight" && (!i || e.isOpenedQuestion(r.feedItem.id) || (s.current = r.feedItem.id, e.openQuestion(r.feedItem.id, r.feedItem))), !r && s.current && (e.closeQuestion(s.current), s.current = "");
+    s && s.feedItem?.type === "insight" && (!i || e.isOpenedQuestion(s.feedItem.id) || (r.current = s.feedItem.id, e.openQuestion(s.feedItem.id, s.feedItem))), !s && r.current && (e.closeQuestion(r.current), r.current = "");
   }), () => {
-  }), [e, i, t]), c ? /* @__PURE__ */ a(b, {
-    sdk: n,
-    skipAutoClose: o,
+  }), [e, i, t]), m ? /* @__PURE__ */ u(A, {
+    sdk: o,
+    skipAutoClose: n,
     hideHeader: d,
     gamification: e,
     hideSponsor: !0
   }) : null;
-}, x = ({
+}, v = ({
   sdk: e,
-  persistent: n,
+  persistent: o,
   skipAutoClose: i,
-  insightId: o,
+  insightId: n,
   hideHeader: d
 }) => {
-  if (!m(e.featuresList.getStore()))
+  if (!a(e.featuresList.getStore()))
     return null;
-  const t = e.getFeature(S.GAMES);
-  return t ? /* @__PURE__ */ a(A, {
-    insightId: o,
+  const t = e.getFeature(g.GAMES);
+  return t ? /* @__PURE__ */ u(b, {
+    insightId: n,
     sdk: e,
-    persistent: n,
+    persistent: o,
     hideHeader: d,
     gamification: t,
     skipAutoClose: i
   }) : null;
-}, O = ({
+}, M = ({
   event: e,
-  theme: n,
+  theme: o,
   hideHeader: i,
-  skipAutoClose: o,
+  skipAutoClose: n,
   persistent: d
 }) => {
-  const t = k(), s = v();
-  return t ? /* @__PURE__ */ l("div", { className: "StreamLayerSDK", children: [
-    /* @__PURE__ */ a(p, { customTheme: n ?? s.theme, themeMode: s.themeMode, children: /* @__PURE__ */ a(
-      x,
+  const t = S(), r = k();
+  return t ? /* @__PURE__ */ c("div", { className: "StreamLayerSDK", children: [
+    /* @__PURE__ */ u(p, { customTheme: o ?? r.theme, themeMode: r.themeMode, children: /* @__PURE__ */ u(
+      v,
       {
-        skipAutoClose: o,
+        skipAutoClose: n,
         sdk: t,
         hideHeader: i,
         persistent: d
       }
     ) }),
-    e !== void 0 && /* @__PURE__ */ a(Q, { event: e })
+    e !== void 0 && /* @__PURE__ */ u(Q, { event: e })
   ] }) : null;
 };
 export {
-  O as StreamLayerSDKInsight,
-  x as StreamLayerSDKInsightUI
+  M as StreamLayerSDKInsight,
+  v as StreamLayerSDKInsightUI
 };

package/lib/es/masters.js

@@ -1,10 +1,9 @@
 import "react/jsx-runtime";
-import { S as o, M as s } from "./masters2.js";
+import { S as s, M as m } from "./masters2.js";
 import "react";
-import "./useStreamLayerApp2.js";
-import { B as S } from "./hooks-WfHlJH12.js";
+import { Y as S } from "./hooks-n9ax4LRT.js";
 export {
-  o as MastersStreamLayerProvider,
-  s as MastersStreamLayerSDKReact,
+  s as MastersStreamLayerProvider,
+  m as MastersStreamLayerSDKReact,
   S as useStreamLayer
 };