@streamlayer/react-ui 1.18.1 → 1.19.0

package/lib/ui/loader/index.js

@@ -1,5 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-const r = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3e%3cradialGradient%20id='a9'%20cx='.66'%20fx='.66'%20cy='.3125'%20fy='.3125'%20gradientTransform='scale(1.5)'%3e%3cstop%20offset='0'%20stop-color='%23FFFFFF'%3e%3c/stop%3e%3cstop%20offset='.3'%20stop-color='%23FFFFFF'%20stop-opacity='.9'%3e%3c/stop%3e%3cstop%20offset='.6'%20stop-color='%23FFFFFF'%20stop-opacity='.6'%3e%3c/stop%3e%3cstop%20offset='.8'%20stop-color='%23FFFFFF'%20stop-opacity='.3'%3e%3c/stop%3e%3cstop%20offset='1'%20stop-color='%23FFFFFF'%20stop-opacity='0'%3e%3c/stop%3e%3c/radialGradient%3e%3ccircle%20transform-origin='center'%20fill='none'%20stroke='url(%23a9)'%20stroke-width='17'%20stroke-linecap='round'%20stroke-dasharray='200%201000'%20stroke-dashoffset='0'%20cx='100'%20cy='100'%20r='70'%3e%3canimateTransform%20type='rotate'%20attributeName='transform'%20calcMode='spline'%20dur='1.8'%20values='360;0'%20keyTimes='0;1'%20keySplines='0%200%201%201'%20repeatCount='indefinite'%3e%3c/animateTransform%3e%3c/circle%3e%3ccircle%20transform-origin='center'%20fill='none'%20opacity='.2'%20stroke='%23FFFFFF'%20stroke-width='17'%20stroke-linecap='round'%20cx='100'%20cy='100'%20r='70'%3e%3c/circle%3e%3c/svg%3e", c = ({ height: o = "37px", width: t = "37px" }) => /* @__PURE__ */ e("div", { style: { height: o, width: t }, children: /* @__PURE__ */ e("img", { alt: "loader", src: r }) });
+import { jsx as o } from "react/jsx-runtime";
+import { SvgIcon as m } from "../icons/index.js";
+const d = ({ height: r = "37px", width: e = "37px" }) => /* @__PURE__ */ o("div", { style: { height: r, width: e }, children: /* @__PURE__ */ o(m, { name: "loader" }) });
 export {
-  c as Loader
+  d as Loader
 };

package/lib/ui/modal/index.js

@@ -1,7 +1,7 @@
 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-B1QdimmR.js";
+import { r as a } from "../../index-DALxy-8N.js";
 import { BREAKPOINTS as u } from "../theme/constants.js";
 const h = /* @__PURE__ */ w("div")({
   name: "StaticContainer",

package/lib/ui/theme/masters-theme.js

@@ -1,7 +1,7 @@
-import { breakpoints as T } from "./breakpoints.js";
-import { COLORS as F, FONT as _ } from "./constants.js";
-const t = {
-  ...F,
+import { breakpoints as n } from "./breakpoints.js";
+import { COLORS as i, FONT as t } from "./constants.js";
+const c = {
+  ...i,
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
@@ -66,34 +66,36 @@ const t = {
   IN_APP_QUESTION_QUOTE: "rgba(10, 14, 19, 0.70)",
   IN_APP_QUESTION_RESULT_SUBTITLE_BG: "#1D7BFF",
   IN_APP_QUESTION_RESULT_LINE: "#babfc5"
-}, E = {
-  ..._,
+}, e = {
+  ...t,
   REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
   SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
+  SERIF1: "'Tiempos', 'Tiempos Headline', Times New Roman, serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
-}, N = Object.entries(t).reduce((R, [e, S]) => `
-    ${R}
-    --color-${e.toLowerCase().replaceAll("_", "-")}: ${S};
-  `, ""), i = `
-  ${N}
-  --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: ${_.SIZE_DEFAULT};
-  --font-size-secondary: ${_.SIZE_DEFAULT1};
-  --font-size-small: ${_.SIZE_DEFAULT2};
-  --line-height-default: ${_.LINE_HEIGHT};
-  --margin-title-default: ${_.MARGIN_TITLE_DEFAULT};
-  --font-header-title: 0.75rem;
+}, f = Object.entries(c).reduce((o, [a, r]) => `
+    ${o}
+    --color-${a.toLowerCase().replaceAll("_", "-")}: ${r};
+  `, ""), _ = `
+  ${f}
+  --font-family: ${e.REGULAR};
+  --font-regular: ${e.REGULAR};
+  --font-color: ${e.COLOR};
+  --font-serif: ${e.SERIF};
+  --font-serif1: ${e.SERIF1};
+  --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: ${t.SIZE_DEFAULT};
+  --font-size-secondary: ${t.SIZE_DEFAULT1};
+  --font-size-small: ${t.SIZE_DEFAULT2};
+  --line-height-default: ${t.LINE_HEIGHT};
+  --margin-title-default: ${t.MARGIN_TITLE_DEFAULT};
+  --font-header-title: 20px;
 
   --header-offset: 0px;
-  --header-height: 0px;
+  --header-height: 54px;
   --watch-live-header: 0px;
   --animation-duration: 0.5s;
   --animation-function: ease;
@@ -117,17 +119,135 @@ const t = {
   --welcome-screen-graphic-size-xl: 125px;
   --insight-image-ratio: 16/9;
 
-  ${T.down("xl")`
+  ${n.down("xl")`
     --header-offset: 0px;
     --watch-live-header: 0px;
   `}
 
-  ${T.intermediate("xl", "lg")`
+  ${n.intermediate("xl", "lg")`
     --header-offset: 0px;
   `}
-`, A = "m1ojpy2l";
+
+  --bet-pack-bg-color-loader-container: transparent;
+  --bet-pack-loader-svg-color: #006944;
+  --bet-pack-color-emergency-container: #006944;
+  --bet-pack-bg-emergency-container: #fff;
+  --bet-pack-color-emergency-btn: #006944;
+  --bet-pack-border-emergency-btn: 1px solid #d9d9d6;
+
+  .isMobile {
+    --bet-pack-bg-color-loader-container: #000;
+    --bet-pack-loader-svg-color: #fff;
+    --bet-pack-color-emergency-container: #fff;
+    --bet-pack-bg-emergency-container: #000;
+    --bet-pack-color-emergency-btn: #fff;
+    --bet-pack-border-emergency-btn: none;
+  }
+
+  --padding-question-content: 16px 16px 0px 16px;
+  --gap-vote-options: 8px;
+  --fz-feedback-header: 1em;
+  --letter-spacing-feedback-header: normal;
+  --size-transparent-icon: 51px;
+  --padding-feedback-container: 8px 0px 24px;
+  --fz-feedbackContainer: 14px;
+  --margin-top-feedback-text: 10px;
+  --margin-top-feedback-dynamic-text: 0px;
+  --fz-feedback-text: 1em;
+  --fz-feedback-dynamic-text: 1em;
+  --letter-spacing-feedback-text: normal;
+  --display-dynamic-wrap: inline;
+  --padding-question-title: 0em;
+  --text-align-question-title: start;
+  --line-height-question-title: 24px;
+  --fz-question-title: 16px;
+  --padding-vote-answer: 5px 15px 5px 9px;
+  --fz-vote-answer: 12px;
+  --border-radius-vote-btn: 4px;
+  --min-height-vote-btn: 44px;
+  --justify-content-feedback-container: start;
+  --bg-color-feedback-container: transparent;
+  --padding-feedback-wrap: 0px;
+  --border-radius-feedback-container: 0px;
+  --color-feedback-description: #25282A;
+  --text-align-feedback-description: start;
+  --color-feedback-text: rgba(10, 14, 19, 0.70);
+  --fz-vote-answer-title: 1em;
+  --size-vote-answer-icon: 32px;
+  --margin-left-vote-answer-indicator: 8px;
+  --size-vote-answer-indicator: 16px;
+  --path-fill-vote-answer-indicator: #107D57;
+  --font-weight-percentage: normal;
+  --margin-left-percentage: 8px;
+  --line-height-percentage: 17px;
+  --line-height-percentage: 1.55em;
+  --border-color-btn-correct: #107D57;
+  --border-color-btn-voted: #107D57;
+  --opacity-voted-btn-rct: 1;
+  --opacity-vote-btn-not-selected: 1;
+  --color-vote-btn-not-checked-bg: #fff;
+  --vote-options-margin-bottom: 0px;
+  --fw-feedback: inherit;
+  --letter-spacing-question-title: normal;
+
+  .betPack {
+    --padding-question-content: 0.8em 0.8em 0em 0.8em;
+    --gap-vote-options: 0.4em;
+    --fz-feedback-header: 0.82em;
+    --letter-spacing-feedback-header: 0.005em;
+    --size-transparent-icon: 2.5em;
+    --padding-feedback-container: 0em 0em 0.4em;
+    --fz-feedbackContainer: 1em;
+    --margin-top-feedback-text: 0.35em;
+    --margin-top-feedback-dynamic-text: 0.35em;
+    --fz-feedback-text: 0.64em;
+    --fz-feedback-dynamic-text: 0.8em;
+    --letter-spacing-feedback-text: 0.01em;
+    --display-dynamic-wrap: block;
+    --padding-question-title: 1.04em;
+    --text-align-question-title: center;
+    --line-height-question-title: 1.3em;
+    --fz-question-title: 0.9em;
+    --padding-vote-answer: 0.31em 0.93em 0.31em 0.55em;
+    --fz-vote-answer: 1em;
+    --color-vote-btn-bg: rgba(255, 255, 255, 0.1);
+    --color-vote-btn-border: transparent;
+    --border-radius-vote-btn: 8px;
+    --min-height-vote-btn: 2.26em;
+    --justify-content-feedback-container: center;
+    --bg-color-feedback-container: rgba(255, 255, 255, 0.1);
+    --padding-feedback-wrap: 0.7em;
+    --border-radius-feedback-container: 8px;
+    --color-feedback-description: #fff;
+    --text-align-feedback-description: center;
+    --color-feedback-text: #fff;
+    --fz-vote-answer-title: 0.7em;
+    --size-vote-answer-icon: 1.65em;
+    --margin-left-vote-answer-indicator: 0.8em;
+    --size-vote-answer-indicator: 1.4em;
+    --path-fill-vote-answer-indicator: #fff;
+    --font-weight-percentage: 500;
+    --margin-left-percentage: 0.72em;
+    --line-height-percentage: 1.55em;
+    --border-color-btn-correct: #fff;
+    --border-color-btn-voted: #fff;
+    --color-vote-btn-not-selected-border: rgba(255, 255, 255, 0.1);
+    --color-vote-btn-disabled-border: #fff;
+    --color-voted-btn-rct-bg: #fff;
+    --opacity-voted-btn-rct: 0.3;
+    --opacity-vote-btn-not-selected: 0.1;
+    --color-vote-btn-not-checked-bg: rgba(255, 255, 255, 0.1);
+    --color-vote-btn-selected-bg: rgba(255, 255, 255, 0.1);
+    --color-vote-btn-selected-border: transparent;
+    --color-unsuccess: #fff;
+    --color-success: #fff;
+    --vote-options-margin-bottom: 0.5em;
+    --fw-feedback: 600;
+    --letter-spacing-question-title: -0.03em;
+  }
+`, p = "m1ojpy2l";
 export {
-  t as MASTERS_COLORS,
-  A as mastersTheme,
-  i as mastersThemeStr
+  c as MASTERS_COLORS,
+  p as mastersTheme,
+  _ as mastersThemeStr
 };

package/lib/ui/theme/theme.js

@@ -1,5 +1,5 @@
-import { jsx as i, jsxs as t } from "react/jsx-runtime";
-import { breakpoints as d } from "./breakpoints.js";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { breakpoints as n } from "./breakpoints.js";
 import { colors as p, colorsAdvertisement as s, FONT as e } from "./constants.js";
 const l = `
   ${p}
@@ -54,16 +54,15 @@ const l = `
   --promo-animation-duration: 0.5s;
   --promo-animation-function: ease-in;
 
-  ${d.down("xl")`
+  ${n.down("xl")`
     --header-offset: 0px;
   `}
 
-  ${d.intermediate("xl", "lg")`
+  ${n.intermediate("xl", "lg")`
     --header-offset: 0px;
   `}
 
   --insight-image-ratio: 16/9;
-
   --adv-side-indents: 16px;
   --adv-top-indent: 12px;
   --adv-header-height: 52px;
@@ -94,24 +93,71 @@ const l = `
     --adv-sponsor-logo-size: 28px;
     --adv-sponsor-font-size: 12px;
   }
-`, f = "StreamLayerCSSReset", c = "ttkj0ah", g = () => /* @__PURE__ */ i("table", {
-  children: /* @__PURE__ */ t("table", {
-    children: [/* @__PURE__ */ i("thead", {
-      children: /* @__PURE__ */ t("tr", {
-        children: [/* @__PURE__ */ i("th", {
+
+  --padding-question-content: 16px 16px 0px 16px;
+  --gap-vote-options: 8px;
+  --fz-feedback-header: 1em;
+  --letter-spacing-feedback-header: normal;
+  --size-transparent-icon: 51px;
+  --padding-feedback-container: 8px 0px 24px;
+  --fz-feedbackContainer: 14px;
+  --margin-top-feedback-text: 10px;
+  --margin-top-feedback-dynamic-text: 0px;
+  --fz-feedback-text: 1em;
+  --fz-feedback-dynamic-text: 1em;
+  --letter-spacing-feedback-text: normal;
+  --display-dynamic-wrap: inline;
+  --padding-question-title: 0em;
+  --text-align-question-title: start;
+  --line-height-question-title: 24px;
+  --fz-question-title: 16px;
+  --padding-vote-answer: 5px 15px 5px 9px;
+  --fz-vote-answer: 12px;
+  --border-radius-vote-btn: 4px;
+  --min-height-vote-btn: 44px;
+  --justify-content-feedback-container: start;
+  --bg-color-feedback-container: transparent;
+  --padding-feedback-wrap: 0px;
+  --border-radius-feedback-container: 0px;
+  --text-align-feedback-description: start;
+  --color-feedback-description: #090E13;
+  --color-feedback-text: rgba(10, 14, 19, 0.70);
+  --fz-vote-answer-title: 1em;
+  --size-vote-answer-icon: 32px;
+  --margin-left-vote-answer-indicator: 8px;
+  --size-vote-answer-indicator: 16px;
+  --path-fill-vote-answer-indicator: #107D57;
+  --font-weight-percentage: normal;
+  --margin-left-percentage: 8px;
+  --line-height-percentage: 17px;
+  --line-height-percentage: 1.55em;
+  --border-color-btn-correct: #107D57;
+  --border-color-btn-voted: #1D7BFF;
+  --opacity-voted-btn-rct: 1;
+  --opacity-vote-btn-not-selected: 1;
+  --color-vote-btn-not-checked-bg: #fff;
+  --vote-options-margin-bottom: 0px;
+  --fw-feedback: inherit;
+  --letter-spacing-question-title: normal;
+
+`, h = "StreamLayerCSSReset", m = "ttkj0ah", g = () => /* @__PURE__ */ t("table", {
+  children: /* @__PURE__ */ i("table", {
+    children: [/* @__PURE__ */ t("thead", {
+      children: /* @__PURE__ */ i("tr", {
+        children: [/* @__PURE__ */ t("th", {
           children: "name"
-        }), /* @__PURE__ */ i("th", {
+        }), /* @__PURE__ */ t("th", {
           children: "value"
         })]
       })
-    }), /* @__PURE__ */ i("tbody", {
-      children: l.split(";").map((n) => {
-        const a = n.trim(), [o, r] = a.split(":");
-        return /* @__PURE__ */ t("tr", {
-          children: [/* @__PURE__ */ i("td", {
-            children: o
-          }), /* @__PURE__ */ i("td", {
+    }), /* @__PURE__ */ t("tbody", {
+      children: l.split(";").map((o) => {
+        const a = o.trim(), [r, d] = a.split(":");
+        return /* @__PURE__ */ i("tr", {
+          children: [/* @__PURE__ */ t("td", {
             children: r
+          }), /* @__PURE__ */ t("td", {
+            children: d
           })]
         }, a);
       })
@@ -120,7 +166,7 @@ const l = `
 });
 export {
   g as ThemeVariables,
-  f as resetCss,
-  c as theme,
+  h as resetCss,
+  m as theme,
   l as themeStr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -69,19 +69,19 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.14.1",
-    "@streamlayer/sdk-web-analytics": "^1.6.1",
-    "@streamlayer/sdk-web-api": "^1.7.1",
-    "@streamlayer/sdk-web-core": "^1.10.1",
-    "@streamlayer/sdk-web": "^1.8.1",
-    "@streamlayer/sdk-web-features": "^1.0.44",
-    "@streamlayer/sdk-web-interfaces": "^1.4.10",
-    "@streamlayer/sdk-web-logger": "^1.0.44",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.23",
-    "@streamlayer/sdk-web-storage": "^1.0.44",
-    "@streamlayer/sdk-web-notifications": "^1.3.6",
-    "@streamlayer/sdk-web-types": "^1.10.1",
-    "@streamlayer/react-polyfills": "^0.1.4"
+    "@streamlayer/feature-gamification": "^1.15.0",
+    "@streamlayer/sdk-web": "^1.9.0",
+    "@streamlayer/sdk-web-analytics": "^1.6.2",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.24",
+    "@streamlayer/sdk-web-core": "^1.11.0",
+    "@streamlayer/sdk-web-api": "^1.7.2",
+    "@streamlayer/sdk-web-features": "^1.0.45",
+    "@streamlayer/react-polyfills": "^0.1.5",
+    "@streamlayer/sdk-web-interfaces": "^1.4.11",
+    "@streamlayer/sdk-web-logger": "^1.0.45",
+    "@streamlayer/sdk-web-notifications": "^1.3.7",
+    "@streamlayer/sdk-web-storage": "^1.0.45",
+    "@streamlayer/sdk-web-types": "^1.10.2"
   },
   "nx": {
     "implicitDependencies": [
@@ -116,12 +116,13 @@
     "react-slick": "^0.30.3",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "screenfull": "^6.0.2",
+    "slick-carousel": "^1.8.1",
     "tslib": "^2.7.0",
     "vite": "5.4.8",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.12.1"
+    "@streamlayer/react": "^1.13.0"
   }
 }

package/lib/app/masters/Features/Gamification/Friends.d.ts

@@ -1,3 +0,0 @@
-export declare const Friends: React.FC<{
-    deepLink?: string;
-}>;

package/lib/app/masters/Features/Gamification/Friends.js

@@ -1,19 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { styled as i } from "@linaria/react";
-import { OnboardingInviteCard as n } from "../../../../ui/gamification/onboarding/slides/onboarding-invite-card/index.js";
-const r = /* @__PURE__ */ i("div")({
-  name: "InviteFriendsContainer",
-  class: "i1b9agwt",
-  propsAsIs: !1
-}), d = ({
-  deepLink: t
-}) => /* @__PURE__ */ e(r, {
-  children: /* @__PURE__ */ e(n, {
-    inviteLink: t,
-    inviteCardTitle: "It’s More Fun With Friends",
-    inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
-  })
-});
-export {
-  d as Friends
-};

package/lib/app/masters/Features/Gamification/Leaderboard.d.ts

@@ -1,8 +0,0 @@
-import { ScrollNodeRef } from '../../..';
-import { ScrollStore } from '../../useSdkScroll';
-import { Gamification } from '@streamlayer/feature-gamification';
-export declare const Leaderboard: React.FC<{
-    gamification: Gamification;
-    scrollNode: ScrollNodeRef;
-    scrollStore: ScrollStore;
-}>;

package/lib/app/masters/Features/Gamification/Leaderboard.js

@@ -1,56 +0,0 @@
-import { jsx as r, jsxs as f, Fragment as L } from "react/jsx-runtime";
-import { styled as h } from "@linaria/react";
-import { useClipboardCopy as k } from "../../../useClipboardCopy.js";
-import { useRef as u } from "react";
-import { useStore as i } from "@streamlayer/react-polyfills";
-import { InviteLink as I } from "../../../../ui/gamification/invite-link/index.js";
-import "react-virtualized-auto-sizer";
-import "react-window";
-import "react-window-infinite-loader";
-import "@storybook/blocks";
-import "../../../../ui/icons/index.js";
-import "../../../../ui/gamification/leaderboard/list-item/styles.js";
-/* empty css                                    */
-import { LeaderboardStaticList as y } from "../../../../ui/gamification/leaderboard/static.js";
-import { Friends as C } from "./Friends.js";
-const b = /* @__PURE__ */ h("div")({
-  name: "InviteLinkContainer",
-  class: "ij36hcn",
-  propsAsIs: !1
-}), z = ({
-  gamification: e,
-  scrollNode: s,
-  scrollStore: p
-}) => {
-  const o = u(null), {
-    data: n,
-    hasMore: d,
-    loading: m,
-    key: l
-  } = i(e.leaderboardList.$store), {
-    data: t
-  } = i(e.deepLink.$store), [a, c] = k(o);
-  return !n.length && !m ? /* @__PURE__ */ r(C, {
-    deepLink: t
-  }) : /* @__PURE__ */ f(L, {
-    children: [/* @__PURE__ */ r(y, {
-      items: n,
-      scrollNode: s,
-      scrollStore: p,
-      fetchMore: e.leaderboardList.fetchMore,
-      hasMore: d,
-      openItemDetail: e.openUser,
-      currentUserId: e.currentUserId.get()
-    }, l), t && /* @__PURE__ */ r(b, {
-      ref: o,
-      children: /* @__PURE__ */ r(I, {
-        onClick: () => a(t),
-        title: "Invite Friends",
-        description: "Challenge them now!"
-      })
-    }), c]
-  });
-};
-export {
-  z as Leaderboard
-};