@streamlayer/react-ui 0.29.1 → 0.30.1

package/lib/ui/theme/Typography.js

@@ -0,0 +1,53 @@
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { useEffect as g } from "react";
+const p = ["SL-FONT1", "SL-FONT2"], u = () => {
+  g(() => {
+    const o = window.document.styleSheets[0];
+    for (const t of p) {
+      const e = window.localStorage.getItem(t);
+      e && o.insertRule(
+        `
+          @font-face {
+            font-family: '${t}';
+            src: url(data:application/octet-stream;base64,${e});
+          }
+        `,
+        o.cssRules.length
+      );
+    }
+  }, []);
+}, y = () => {
+  const o = (t) => {
+    var i;
+    const e = t.target.name, a = (i = t.target.files) == null ? void 0 : i[0];
+    if (!a)
+      return;
+    const r = new FileReader();
+    r.onloadend = (m) => {
+      var c, l;
+      const n = (l = (c = m.target) == null ? void 0 : c.result) == null ? void 0 : l.toString();
+      if (n) {
+        const f = window.document.styleSheets[0];
+        f.insertRule(
+          `
+          @font-face {
+            font-family: '${e}';
+            src: url(data:application/octet-stream;base64,${n});
+          }
+        `,
+          f.cssRules.length
+        ), window.localStorage.setItem(e, n);
+      }
+    }, r.readAsText(a);
+  };
+  return u(), /* @__PURE__ */ s("div", { children: p.map((t) => /* @__PURE__ */ d("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: o }) })
+  ] })) });
+};
+export {
+  y as Typography,
+  u as useCustomFonts
+};

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/lib/utils/decorators/container.js

@@ -1,11 +1,13 @@
 import { jsx as r } from "react/jsx-runtime";
-import { StreamLayerThemeProvider as i } from "../../ui/theme/index.js";
+import { StreamLayerThemeProvider as t } from "../../ui/theme/index.js";
+import { useCustomFonts as i } from "../../ui/theme/Typography.js";
 import { AppContainer as m } from "./styles.js";
 import "../../ui/theme/theme.js";
 import "@linaria/core";
 import "../../ui/theme/constants.js";
+import "react";
 import "@linaria/react";
-const h = (o) => /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(o, {}) }) }) });
+const l = (o) => (i(), /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(o, {}) }) }) }));
 export {
-  h as container
+  l as container
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.29.1",
+  "version": "0.30.1",
   "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
-};