@streamlayer/react-ui 1.16.2 → 1.18.0

package/lib/ui/loader/index.js

@@ -0,0 +1,5 @@
+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 }) });
+export {
+  c as Loader
+};

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

@@ -1,6 +1,7 @@
-import { breakpoints as i } from "./breakpoints.js";
-import { FONT as t } from "./constants.js";
-const r = {
+import { breakpoints as T } from "./breakpoints.js";
+import { COLORS as F, FONT as _ } from "./constants.js";
+const t = {
+  ...F,
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
@@ -11,7 +12,7 @@ const r = {
   GREY_PRIMARY: "#909395",
   PRIMARY_1: "#107D57",
   PRIMARY_2: "#006747",
-  PRIMARY_TEXT: "#006747",
+  PRIMARY_TEXT: "#25282A",
   QUESTION_TYPE_ICON: "#107D57",
   SUCCESS: "#107D57",
   UNSUCCESS: "#DF2F3B",
@@ -25,40 +26,74 @@ const r = {
   NEUTRALS_GRAY5: "#B1B3B3",
   NEUTRALS_GRAY6: "#888B8D",
   NEUTRALS_GRAY7: "#6B6F73",
-  NEUTRALS_GRAY9: "#25282A"
-}, e = {
-  ...t,
+  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: "#107D57",
+  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_NOT_SELECTED_BG: "#FFFFFF",
+  VOTE_BTN_NOT_SELECTED_BG_UNSET: "rgb(196, 196, 196)",
+  VOTED_ANSWER_BG: "rgba(16, 125, 87, 0.10)",
+  VOTED_BTN_RCT_BG: "rgba(16, 125, 87, 0.30)",
+  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"
+}, E = {
+  ..._,
   REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
   SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
-}, E = Object.entries(r).reduce((n, [o, a]) => `
-    ${n}
-    --color-${o.toLowerCase().replaceAll("_", "-")}: ${a};
-  `, ""), R = `
-  ${E}
-  --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: ${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};
+}, 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;
-  --color-vote-btn-border: transparent;
-  --color-vote-btn-not-selected-bg-unset: #fff;
-  --color-voted-answer-bg: #1D7BFF;
-  --color-voted-btn-rct-bg: #fff;
-  --color-prediction-bg-lines-correct: #095CD1;
 
   --header-offset: 0px;
-  --header-height: 68px;
+  --header-height: 0px;
   --watch-live-header: 0px;
   --animation-duration: 0.5s;
   --animation-function: ease;
@@ -82,17 +117,17 @@ const r = {
   --welcome-screen-graphic-size-xl: 125px;
   --insight-image-ratio: 16/9;
 
-  ${i.down("xl")`
-    --header-offset: 56px;
-    --watch-live-header: 46px;
+  ${T.down("xl")`
+    --header-offset: 0px;
+    --watch-live-header: 0px;
   `}
 
-  ${i.intermediate("xl", "lg")`
-    --header-offset: 76px;
+  ${T.intermediate("xl", "lg")`
+    --header-offset: 0px;
   `}
-`, T = "m1ojpy2l";
+`, A = "m1ojpy2l";
 export {
-  r as MASTERS_COLORS,
-  T as mastersTheme,
-  R as mastersThemeStr
+  t as MASTERS_COLORS,
+  A as mastersTheme,
+  i as mastersThemeStr
 };

package/lib/ui/theme/masters.js

@@ -1,6 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
+import { cx as s } from "@linaria/core";
 import { mastersTheme as a } from "./masters-theme.js";
-const o = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: a, style: m, children: r }) });
+const c = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: s("masters-theme", a), style: m, children: r }) });
 export {
-  o as StreamLayerMastersThemeProvider
+  c as StreamLayerMastersThemeProvider
 };

package/lib/utils/decorators/container.js

@@ -1,12 +1,14 @@
 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, {}) }) }) });
+import { StreamLayerThemeProvider as n } from "../../ui/theme/index.js";
+import { StreamLayerMastersThemeProvider as i } from "../../ui/theme/masters.js";
+import { BGContainer as m, AppContainer as c } from "./styles.js";
+const l = (r, t) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, {}) }), p = (r, t) => {
+  const o = t.globals.theme || "light";
+  return /* @__PURE__ */ e(n, { themeMode: o, children: /* @__PURE__ */ e(r, {}) });
+}, f = (r) => /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, {}) }), u = (r) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {}) }) }) });
 export {
-  a as bgContainer,
-  s as container,
-  l as theme
+  f as bgContainer,
+  u as container,
+  l as mastersTheme,
+  p as theme
 };

package/lib/utils/decorators/masters.js

@@ -0,0 +1,29 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useEffect as r } from "react";
+const t = (s) => {
+  const e = document.createElement("link");
+  for (const o in s)
+    e.setAttribute(o, s[o]);
+  document.head.appendChild(e);
+}, a = (s) => (r(() => {
+  t({
+    rel: "stylesheet",
+    href: "https://simulation.masters.com/assets/style/styles.ca29f286.css",
+    type: "text/css"
+  }), t({
+    rel: "preload",
+    href: "https://simulation.masters.com/assets/fonts/icons/masters-icons.woff",
+    as: "font",
+    type: "font/woff",
+    crossorigin: "anonymous"
+  }), t({
+    rel: "preload",
+    href: "https://simulation.masters.com/assets/fonts/icons/masters-icons.ttf",
+    as: "font",
+    type: "font/ttf",
+    crossorigin: "anonymous"
+  });
+}, []), /* @__PURE__ */ n(s, {}));
+export {
+  a as useMastersFiles
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.16.2",
+  "version": "1.18.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -20,6 +20,11 @@
       "default": "./lib/app/masters/Points/index.js",
       "types": "./lib/app/masters/Points/index.d.ts"
     },
+    "./bet-pack": {
+      "import": "./lib/app/masters/BetPack/index.js",
+      "default": "./lib/app/masters/BetPack/index.js",
+      "types": "./lib/app/masters/BetPack/index.d.ts"
+    },
     "./points": {
       "import": "./lib/app/app/Points/index.js",
       "default": "./lib/app/app/Points/index.js",
@@ -56,7 +61,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.130.0",
+    "@streamlayer/sl-eslib": "^5.149.1",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "nanoid": "3.3.7",
@@ -64,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.13.3",
-    "@streamlayer/sdk-web": "^1.7.3",
-    "@streamlayer/sdk-web-analytics": "^1.5.7",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.20",
-    "@streamlayer/sdk-web-api": "^1.6.20",
-    "@streamlayer/sdk-web-core": "^1.9.3",
-    "@streamlayer/sdk-web-features": "^1.0.41",
-    "@streamlayer/sdk-web-interfaces": "^1.4.7",
-    "@streamlayer/sdk-web-logger": "^1.0.41",
-    "@streamlayer/sdk-web-notifications": "^1.3.3",
-    "@streamlayer/sdk-web-storage": "^1.0.41",
-    "@streamlayer/sdk-web-types": "^1.9.3",
-    "@streamlayer/react-polyfills": "^0.1.1"
+    "@streamlayer/feature-gamification": "^1.14.0",
+    "@streamlayer/sdk-web": "^1.8.0",
+    "@streamlayer/sdk-web-analytics": "^1.6.0",
+    "@streamlayer/sdk-web-api": "^1.7.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.22",
+    "@streamlayer/sdk-web-core": "^1.10.0",
+    "@streamlayer/sdk-web-interfaces": "^1.4.9",
+    "@streamlayer/sdk-web-features": "^1.0.43",
+    "@streamlayer/sdk-web-notifications": "^1.3.5",
+    "@streamlayer/sdk-web-logger": "^1.0.43",
+    "@streamlayer/sdk-web-storage": "^1.0.43",
+    "@streamlayer/sdk-web-types": "^1.10.0",
+    "@streamlayer/react-polyfills": "^0.1.3"
   },
   "nx": {
     "implicitDependencies": [
@@ -108,6 +113,7 @@
     "react-countdown-circle-timer": "^3.2.1",
     "react-countup": "^6.5.3",
     "react-phone-number-input": "^3.4.8",
+    "react-slick": "^0.30.3",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "screenfull": "^6.0.2",
     "tslib": "^2.7.0",
@@ -116,6 +122,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.11.2"
+    "@streamlayer/react": "^1.12.0"
   }
 }