@streamlayer/react-ui 0.29.1 → 0.30.0

package/lib/ui/theme/Typography.js

@@ -0,0 +1,50 @@
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { useEffect as g } from "react";
+const f = ["SL-FONT1", "SL-FONT2"], w = () => {
+  const p = (t) => {
+    var r;
+    const e = t.target.name, o = (r = t.target.files) == null ? void 0 : r[0];
+    if (!o)
+      return;
+    const a = new FileReader();
+    a.onloadend = (d) => {
+      var i, l;
+      const n = (l = (i = d.target) == null ? void 0 : i.result) == null ? void 0 : l.toString();
+      if (n) {
+        const c = window.document.styleSheets[0];
+        c.insertRule(
+          `
+          @font-face {
+            font-family: '${e}';
+            src: url(data:application/octet-stream;base64,${n});
+          }
+        `,
+          c.cssRules.length
+        ), window.localStorage.setItem(e, n);
+      }
+    }, a.readAsText(o);
+  };
+  return g(() => {
+    const t = window.document.styleSheets[0];
+    for (const e of f) {
+      const o = window.localStorage.getItem(e);
+      o && t.insertRule(
+        `
+          @font-face {
+            font-family: '${e}';
+            src: url(data:application/octet-stream;base64,${o});
+          }
+        `,
+        t.cssRules.length
+      );
+    }
+  }, []), /* @__PURE__ */ s("div", { children: f.map((t) => /* @__PURE__ */ m("p", { style: { fontSize: "32px", fontFamily: t, lineHeight: "45px" }, children: [
+    "[",
+    t,
+    "] Typography - Desktop/Mobile/App",
+    !window.localStorage.getItem(t) && /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s("input", { type: "file", name: t, accept: ".txt", onChange: p }) })
+  ] })) });
+};
+export {
+  w as Typography
+};

package/lib/ui/theme/constants.js

@@ -50,8 +50,8 @@ const N = {
   NEUTRALS_GRAY9: "#25282A",
   NEUTRALS_BLACK: "#000000"
 }, E = Object.assign({}, N, T), S = {
-  REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
-  SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
+  REGULAR: "'Benton Sans', BentonSans, SL-FONT1, Arial, Helvetica, sans-serif",
+  SERIF: "'Tiempos', 'Tiempos Text', SL-FONT2, Times New Roman, serif",
   COLOR: "#fff"
 }, O = Object.keys(E).reduce((_, R) => {
   const A = E[R];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -22,16 +22,16 @@
   ],
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.45.1",
-    "@streamlayer/feature-gamification": "^0.17.1",
-    "@streamlayer/sdk-web": "^0.27.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.10.7",
-    "@streamlayer/sdk-web-api": "^0.0.3",
-    "@streamlayer/sdk-web-core": "^0.13.1",
-    "@streamlayer/sdk-web-features": "^0.10.1",
-    "@streamlayer/sdk-web-interfaces": "^0.18.1",
-    "@streamlayer/sdk-web-notifications": "^0.10.0",
-    "@streamlayer/sdk-web-storage": "^0.3.3",
-    "@streamlayer/sdk-web-types": "^0.16.1"
+    "@streamlayer/feature-gamification": "^0.17.2",
+    "@streamlayer/sdk-web": "^0.27.3",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.10.8",
+    "@streamlayer/sdk-web-api": "^0.0.4",
+    "@streamlayer/sdk-web-core": "^0.13.2",
+    "@streamlayer/sdk-web-features": "^0.10.2",
+    "@streamlayer/sdk-web-interfaces": "^0.18.2",
+    "@streamlayer/sdk-web-notifications": "^0.10.1",
+    "@streamlayer/sdk-web-storage": "^0.3.4",
+    "@streamlayer/sdk-web-types": "^0.16.2"
   },
   "devDependencies": {
     "@connectrpc/connect": "^1.1.3",

package/lib/ui/theme/ThemeTypography.js

@@ -1,15 +0,0 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { styled as e } from "@linaria/react";
-const n = e.p`
-  font-family: var(--font-serif);
-  font-size: 32px;
-`, i = e.p`
-  font-family: var(--font-regular);
-  font-size: 32px;
-`, s = () => /* @__PURE__ */ o("div", { children: [
-  /* @__PURE__ */ r(i, { children: "Regular (Benton Sans Serif)" }),
-  /* @__PURE__ */ r(n, { children: "Serif (Tiempos)" })
-] });
-export {
-  s as ThemeTypography
-};