@streamlayer/react-ui 0.34.0 → 0.36.0

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export * from './ui/notifications/notification/question-inapp';
+export * from './ui/login';
+export * from './ui/gamification/onboarding';
+export * from './ui/gamification/tabs';
+export * from './ui/gamification/leaderboard-item-detail';
+export * from './ui/gamification/question';
+export * from './ui/gamification/question-list';
+export * from './ui/gamification/user-statistics';
+export * from './ui/gamification/vote';
+export * from './ui/demo';
+export * from './ui/gamification/points';
+export * from './ui/theme';
+export * from './ui/theme/theme';

package/lib/ui/app/Features/FeatureProvider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Features } from '@streamlayer/sdk-web-features';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+/** Here we check data, render loaders, load data and perform some side effects for the active feature */
+export declare const FeatureProvider: React.FC<{
+    feature: Features;
+    children: React.ReactNode;
+    sdk: StreamLayerSDK;
+}>;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const Leaderboard: React.FC<{
+    store: ReturnType<Exclude<Gamification['leaderboardList'], undefined>['getStore']>;
+}>;

package/lib/ui/app/Features/Gamification/Question.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GamificationBackground } from '@streamlayer/feature-gamification';
+export declare const Question: React.FC<{
+    openedQuestion: Awaited<ReturnType<GamificationBackground['openedQuestion']['getValue']>>;
+    closeQuestion: () => void;
+    vote: (questionId: string, answerId: string) => void;
+}>;

package/lib/ui/app/Features/Gamification/QuestionsList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const QuestionsList: React.FC<{
+    store: ReturnType<Exclude<Gamification['questions'], undefined>['getStore']>;
+    openQuestion: (questionId: string) => void;
+}>;

package/lib/ui/app/Features/Gamification/Tabs.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type Gamification } from '@streamlayer/feature-gamification';
+export declare const Tabs: React.FC<{
+    gamification: Gamification;
+}>;

package/lib/ui/app/Features/Gamification/UserSummary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const UserSummary: React.FC<{
+    store: ReturnType<Exclude<Gamification['userSummary'], undefined>['getStore']>;
+}>;

package/lib/ui/app/Features/Gamification/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type Gamification as GamificationClass } from '@streamlayer/feature-gamification';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const GamificationOverlay: React.FC<{
+    gamification: GamificationClass;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/Features/Highlights/Insight.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Highlights } from '@streamlayer/feature-gamification';
+export declare const Insight: React.FC<{
+    openedInsight: Exclude<Highlights['openedInsight']['value'], undefined>;
+    closeHighlights: () => void;
+    closeInsight: () => void;
+}>;

package/lib/ui/app/Features/Highlights/Insights.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Highlights } from '@streamlayer/feature-gamification';
+export declare const Insights: React.FC<{
+    highlights: Highlights;
+    store: ReturnType<Exclude<Highlights['insights'], undefined>['getStore']>;
+}>;

package/lib/ui/app/Features/Highlights/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Highlights } from '@streamlayer/feature-gamification';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const HighlightsOverlay: React.FC<{
+    highlights: Highlights;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/Features/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Features } from '@streamlayer/sdk-web-features';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+/** render feature by type */
+export declare const ActiveFeature: React.FC<{
+    sdk: StreamLayerSDK;
+    feature: Features | null;
+}>;

package/lib/ui/app/Navigation/MastersNavigation/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ChannelsButtonId } from '../../../navigation/button/Channels';
+import { FeaturedGroupsButtonId } from '../../../navigation/button/FeaturedGroups';
+import { LeaderBoardButtonId } from '../../../navigation/button/LeaderBoard';
+export { ChannelsButtonId, LeaderBoardButtonId, FeaturedGroupsButtonId };
+export type AvailableOverlays = typeof ChannelsButtonId | typeof LeaderBoardButtonId | typeof FeaturedGroupsButtonId;
+export declare const MastersNavigation: React.FC<{
+    activeOverlay: AvailableOverlays;
+    setActiveOverlay: (overlay: AvailableOverlays) => void;
+    sdkReady: boolean;
+}>;

package/lib/ui/app/Navigation/MastersNavigation/index.js

@@ -1,27 +1,28 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { ChannelsButton as u, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
-import { FeaturedGroupsButton as a, FeaturedGroupsButtonId as n } from "../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButton as d, LeaderBoardButtonId as m } from "../../../navigation/button/LeaderBoard.js";
-import { Navigation as s } from "../../../navigation/masters.js";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { ChannelsButton as a, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
+import { FeaturedGroupsButton as u, FeaturedGroupsButtonId as n } from "../../../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButton as s, LeaderBoardButtonId as m } from "../../../navigation/button/LeaderBoard.js";
+import { Navigation as e } from "../../../navigation/masters.js";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
 import "../../../navigation/button/index.js";
 import "../../../navigation/button/styles.js";
 import "../../../navigation/index.js";
-const l = ({ activeOverlay: o, setActiveOverlay: t }) => /* @__PURE__ */ p(s, { children: [
-  /* @__PURE__ */ r(u, { active: o === i, onClick: () => t(i) }),
+const F = ({ activeOverlay: o, setActiveOverlay: t, sdkReady: p }) => /* @__PURE__ */ d(e, { children: [
+  /* @__PURE__ */ r(a, { active: o === i, onClick: () => t(i) }),
   /* @__PURE__ */ r(
-    a,
+    u,
     {
       active: o === n,
+      disabled: !p,
       onClick: () => {
         t(n);
       }
     }
   ),
   /* @__PURE__ */ r(
-    d,
+    s,
     {
       active: o === m,
       onClick: () => t(m)
@@ -32,5 +33,5 @@ export {
   i as ChannelsButtonId,
   n as FeaturedGroupsButtonId,
   m as LeaderBoardButtonId,
-  l as MastersNavigation
+  F as MastersNavigation
 };

package/lib/ui/app/Navigation/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { Overlays } from '..';
+import { ButtonProps } from '../../navigation/button';
+export declare const SDKNavigation: React.FC<{
+    customOverlays: Overlays;
+    activeButton?: ButtonProps['id'];
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/Notifications/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const SDKNotifications: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/masters.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export type Overlays = {};
+export type AppChildrenProps = {
+    enableSdk: () => void;
+    disableSdk: () => void;
+};
+export type AppProps = {
+    sdk: StreamLayerSDK;
+    event: string;
+    overlays?: Overlays;
+    children?: (methods: AppChildrenProps) => React.ReactNode;
+};
+export declare const MastersApp: React.FC<AppProps>;

package/lib/ui/app/{index.js → masters.js}

@@ -1,16 +1,16 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { useStore as c } from "@nanostores/react";
-import { useState as f } from "react";
-import { FeatureType as u } from "@streamlayer/sdk-web-types";
-import { StreamLayerThemeProvider as S } from "../theme/index.js";
-import { mastersVariables as b } from "../theme/masters.js";
-import { ActiveFeature as v } from "./Features/index.js";
-import { MastersNavigation as h } from "./Navigation/MastersNavigation/index.js";
-import { SDKContainer as y, SDKScrollContainer as A } from "./styles.js";
-import { useSdkFeature as F } from "./useSdkFeature.js";
-import { FeaturedGroupsButtonId as m } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as B } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as l } from "../navigation/button/LeaderBoard.js";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { useStore as A } from "@nanostores/react";
+import { useState as S, useCallback as F, useEffect as E } from "react";
+import { FeatureType as B } from "@streamlayer/sdk-web-types";
+import { StreamLayerThemeProvider as C } from "../theme/index.js";
+import { mastersVariables as O } from "../theme/masters.js";
+import { ActiveFeature as g } from "./Features/index.js";
+import { MastersNavigation as x } from "./Navigation/MastersNavigation/index.js";
+import { SDKContainer as I, SDKScrollContainer as L } from "./styles.js";
+import { useSdkFeature as M } from "./useSdkFeature.js";
+import { FeaturedGroupsButtonId as i } from "../navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as s } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as v } from "../navigation/button/LeaderBoard.js";
 import "../theme/theme.js";
 import "@linaria/core";
 import "../theme/constants.js";
@@ -74,21 +74,49 @@ import "../navigation/index.js";
 import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const Rr = ({ sdk: r, overlays: p, children: e }) => {
-  const [t, a] = f(m), i = c(r.enabled) === "on", [, s] = F(r), d = () => {
-    r.initializeApp().then(() => {
-      a(m), r.openFeature(u.GAMES);
+const j = ({ sdk: t }) => {
+  const [, m] = M(t);
+  return /* @__PURE__ */ o(g, { feature: m, sdk: t });
+}, rr = ({ sdk: t, overlays: m, children: l, event: c }) => {
+  const [e, u] = S(!1), a = A(t.status) === "ready", [r, d] = S(i), n = F(
+    (p) => {
+      d(p), p === i ? (t.createEventSession(c), t.openFeature(B.GAMES)) : t.closeFeature();
+    },
+    [c, t]
+  );
+  E(() => {
+    !a && r === i && (d(s), t.closeFeature());
+  }, [a, r, t]);
+  const y = () => {
+    t.initializeApp().then(({ enabled: p, err: h }) => {
+      if (u(!0), h) {
+        n(s);
+        return;
+      }
+      if (p) {
+        n(i);
+        return;
+      }
     });
+  }, b = () => {
+    u(!1), t.disableApp();
   };
-  return /* @__PURE__ */ o(S, { style: { height: "100%" }, children: /* @__PURE__ */ n(y, { className: b, children: [
-    i && /* @__PURE__ */ o(h, { activeOverlay: t, setActiveOverlay: a }),
-    /* @__PURE__ */ n(A, { "data-nav": i.toString(), children: [
-      /* @__PURE__ */ o("div", { style: { display: !i || t === B ? "block" : "none" }, children: e && e({ enableSdk: d, disableSdk: r.disableApp }) }),
-      /* @__PURE__ */ o("div", { style: { display: t === l ? "block" : "none" }, children: p && t === l && p[t] }),
-      i && t === m && /* @__PURE__ */ o(v, { feature: s, sdk: r })
+  return /* @__PURE__ */ o(C, { style: { height: "100%" }, children: /* @__PURE__ */ f(I, { className: O, children: [
+    e && /* @__PURE__ */ o(
+      x,
+      {
+        sdkReady: a,
+        activeOverlay: r,
+        setActiveOverlay: n
+      }
+    ),
+    /* @__PURE__ */ f(L, { "data-nav": e.toString(), children: [
+      /* @__PURE__ */ o("div", { style: { display: !e || r === s ? "block" : "none" }, children: l && l({ enableSdk: y, disableSdk: b }) }),
+      /* @__PURE__ */ o("div", { style: { display: r === v ? "block" : "none" }, children: m && r === v && m[r] }),
+      e && r === i && /* @__PURE__ */ o(j, { sdk: t })
     ] })
   ] }) });
 };
 export {
-  Rr as App
+  rr as MastersApp
 };

package/lib/ui/app/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SDKContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKScrollContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/app/useSdkFeature.d.ts

@@ -0,0 +1,4 @@
+import { Features } from '@streamlayer/sdk-web-features';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { FeatureType } from '@streamlayer/sdk-web-types';
+export declare const useSdkFeature: (sdk: StreamLayerSDK) => [FeatureType, Features | null];

package/lib/ui/demo/DemoPoints.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const DemoPoints: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/Gamification.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const GamificationComponent: React.FC<{
+    gamification: Gamification;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/Highlights.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import type { Highlights } from '@streamlayer/feature-gamification';
+export declare const HighlightsComponent: React.FC<{
+    highlights: Highlights;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/Login.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const LoginComponent: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/Login.js

@@ -1,6 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "@streamlayer/sdk-web-anonymous-auth";
 import { Login as m } from "../login/index.js";
+import { useStore as n } from "@nanostores/react";
 import "react";
 import "react-auth-code-input";
 import "react-phone-number-input";
@@ -14,11 +15,11 @@ import "@connectrpc/connect";
 import "@connectrpc/connect-web";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-const A = ({ sdk: o }) => /* @__PURE__ */ i(m, { login: async (t) => {
+const A = ({ sdk: o }) => n(o.getUserStore()).data ? /* @__PURE__ */ r("button", { onClick: o.logout, children: "logout" }) : /* @__PURE__ */ r(m, { login: async (i) => {
   try {
-    await o.authorizationBypass("streamlayer:streamlayer", t);
-  } catch (r) {
-    throw console.log("login err", r), r;
+    await o.authorizationBypass("streamlayer:streamlayer", i);
+  } catch (t) {
+    throw console.log("login err", t), t;
   }
 }, anonymousLogin: o.anonymousAuthorization, host: o.host });
 export {

package/lib/ui/demo/components/EventProvider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EventProvider: React.FC;

package/lib/ui/demo/components/Insight.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Highlights } from '@streamlayer/feature-gamification';
+export declare const Insight: React.FC<{
+    openedInsight: Exclude<Highlights['openedInsight']['value'], undefined>;
+    closeHighlights: () => void;
+    closeInsight: () => void;
+}>;

package/lib/ui/demo/components/Insights.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Highlights } from '@streamlayer/feature-gamification';
+export declare const Insights: React.FC<{
+    highlights: Highlights;
+    store: ReturnType<Exclude<Highlights['insights'], undefined>['getStore']>;
+}>;

package/lib/ui/demo/components/Leaderboard.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const Leaderboard: React.FC<{
+    store: ReturnType<Exclude<Gamification['leaderboardList'], undefined>['getStore']>;
+}>;

package/lib/ui/demo/components/Question.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GamificationBackground } from '@streamlayer/feature-gamification';
+export declare const Question: React.FC<{
+    openedQuestion: Awaited<ReturnType<GamificationBackground['openedQuestion']['getValue']>>;
+    closeQuestion: () => void;
+    vote: (questionId: string, answerId: string) => void;
+}>;

package/lib/ui/demo/components/QuestionsList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const QuestionsList: React.FC<{
+    store: ReturnType<Exclude<Gamification['questions'], undefined>['getStore']>;
+    openQuestion: (questionId: string) => void;
+}>;

package/lib/ui/demo/components/UserSummary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const UserSummary: React.FC<{
+    store: ReturnType<Exclude<Gamification['userSummary'], undefined>['getStore']>;
+}>;

package/lib/ui/demo/components/index.d.ts

@@ -0,0 +1,7 @@
+export { UserSummary } from './UserSummary';
+export { QuestionsList } from './QuestionsList';
+export { Question } from './Question';
+export { Onboarding } from '../../gamification/onboarding';
+export { Insights } from './Insights';
+export { Insight } from './Insight';
+export { Leaderboard } from './Leaderboard';

package/lib/ui/demo/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const Demo: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/index.js

@@ -1,16 +1,16 @@
-import { jsx as o, jsxs as u, Fragment as b } from "react/jsx-runtime";
-import { FeatureStatus as f } from "@streamlayer/sdk-web-interfaces";
+import { jsx as i, jsxs as f, Fragment as v } from "react/jsx-runtime";
+import { FeatureStatus as l } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as g } from "@streamlayer/sdk-web-types";
-import { AvailableFeatures as A } from "@streamlayer/sdk-web-features";
-import { useState as E, useMemo as h, useEffect as F } from "react";
+import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
+import { useState as b, useMemo as h, useEffect as C } from "react";
 import "@streamlayer/sdk-web-storage";
 import "@streamlayer/sdk-web-api";
 import { useStore as c } from "@nanostores/react";
-import { Notifications as D } from "../notifications/index.js";
-import { GamificationComponent as C } from "./Gamification.js";
-import { HighlightsComponent as N } from "./Highlights.js";
-import { LoginComponent as T } from "./Login.js";
-import { Buttons as H, Button as s } from "./styles.js";
+import { Notifications as F } from "../notifications/index.js";
+import { GamificationComponent as w } from "./Gamification.js";
+import { HighlightsComponent as G } from "./Highlights.js";
+import { LoginComponent as H } from "./Login.js";
+import { Buttons as x, Button as s } from "./styles.js";
 import "../notifications/notification/index.js";
 import "@streamlayer/sdk-web-notifications";
 import "../notifications/notification/onboarding-inapp/index.js";
@@ -87,62 +87,54 @@ import "@connectrpc/connect";
 import "@connectrpc/connect-web";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-var y;
-(function(t) {
-  t.SCHEMA = "schema", t.TOKEN = "token";
-})(y || (y = {}));
-var v;
-(function(t) {
-  t.DISABLED = "disabled", t.INITIALIZATION = "initialization", t.READY = "ready", t.FAILED = "failed", t.SUSPENDED = "suspended";
-})(v || (v = {}));
-const L = ({ activeFeature: t, sdk: r }) => {
-  const [e, n] = E(null), { organizationSettings: a, streamSettings: l } = c(r.sdkStore), S = h(() => {
-    const i = (l == null ? void 0 : l.data) || (a == null ? void 0 : a.data);
-    return i != null && i.overlays ? i.overlays : [];
-  }, [a, l]);
-  F(() => {
-    const i = r.getFeatures();
-    if (t)
-      for (const [m, p] of i)
-        m === t ? p.status.get() === f.Suspended && (p.enable(), n(p)) : p.status.get() === f.Ready && p.disable();
+const A = ({ activeFeature: r, sdk: o }) => {
+  const [e, n] = b(null), { organizationSettings: a, streamSettings: u } = c(o.sdkStore), y = h(() => {
+    const t = (u == null ? void 0 : u.data) || (a == null ? void 0 : a.data);
+    return t != null && t.overlays ? t.overlays : [];
+  }, [a, u]);
+  C(() => {
+    const t = o.getFeatures();
+    if (r)
+      for (const [m, p] of t)
+        m === r ? p.status.get() === l.Suspended && (p.enable(), n(p)) : p.status.get() === l.Ready && p.disable();
     else {
-      for (const [, m] of i)
-        m.status.get() === f.Ready && m.disable();
+      for (const [, m] of t)
+        m.status.get() === l.Ready && m.disable();
       n(null);
     }
     return () => {
-      for (const [, m] of i)
-        m.status.get() === f.Ready && m.disable();
+      for (const [, m] of t)
+        m.status.get() === l.Ready && m.disable();
     };
-  }, [t, r]);
-  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(C, { gamification: e, sdk: r }) }) : /* @__PURE__ */ o("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(N, { highlights: e, sdk: r }) }) : /* @__PURE__ */ o("div", { children: "wait highlights..." }) : /* @__PURE__ */ o("div", { children: "unknown feature" }) : null, [r, e]);
-  return /* @__PURE__ */ u("div", { children: [
-    /* @__PURE__ */ u(H, { children: [
-      /* @__PURE__ */ o(s, { onClick: () => r.closeFeature(), disabled: !d, children: "close" }),
-      /* @__PURE__ */ o(s, { onClick: () => r.logout(), children: "logout" }),
-      S.map((i) => /* @__PURE__ */ u(
+  }, [r, o]);
+  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(G, { highlights: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [o, e]);
+  return /* @__PURE__ */ f("div", { children: [
+    /* @__PURE__ */ f(x, { children: [
+      /* @__PURE__ */ i(s, { onClick: () => o.closeFeature(), disabled: !d, children: "close" }),
+      /* @__PURE__ */ i(s, { onClick: () => o.logout(), children: "logout" }),
+      y.map((t) => /* @__PURE__ */ f(
         s,
         {
-          onClick: () => r.openFeature(i.type),
-          disabled: !(i.type in A),
-          "data-enable_sdk_button": i.enableSdkButton.toString(),
-          "data-selected": i.type === t,
+          onClick: () => o.openFeature(t.type),
+          disabled: !(t.type in S),
+          "data-enable_sdk_button": t.enableSdkButton.toString(),
+          "data-selected": t.type === r,
           children: [
-            /* @__PURE__ */ o("img", { src: i.icon, alt: "" }),
-            i.name
+            /* @__PURE__ */ i("img", { src: t.icon, alt: "" }),
+            t.name
           ]
         },
-        i.name
+        t.name
       ))
     ] }),
     d
   ] });
-}, ui = ({ sdk: t }) => {
-  const r = c(t.organizationStore()), e = c(t.getUserStore()), n = c(t.getActiveFeature());
-  return r.loading ? /* @__PURE__ */ o("div", { children: "authentication..." }) : r.data ? e.loading ? /* @__PURE__ */ o("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ u(b, { children: [
-    /* @__PURE__ */ o(D, { notificationsStore: t.getNotificationsStore() }),
-    /* @__PURE__ */ o(L, { sdk: t, activeFeature: n })
-  ] }) : /* @__PURE__ */ o(T, { sdk: t }) : /* @__PURE__ */ o("div", { children: "wrong sdk key..." });
+}, ui = ({ sdk: r }) => {
+  const o = c(r.organizationStore()), e = c(r.getUserStore()), n = c(r.getActiveFeature());
+  return o.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : o.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ f(v, { children: [
+    /* @__PURE__ */ i(F, { notificationsStore: r.getNotificationsStore() }),
+    /* @__PURE__ */ i(A, { sdk: r, activeFeature: n })
+  ] }) : /* @__PURE__ */ i(H, { sdk: r }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
 };
 export {
   ui as Demo

package/lib/ui/demo/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const DemoContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const UserStatisticsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Buttons: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Button: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

package/lib/ui/gamification/common-header/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type CommonHeaderProps = {
+    icon?: string;
+    comeBack?: () => void;
+    close?: () => void;
+};
+export declare const CommonHeader: React.FC<CommonHeaderProps>;
+export {};

package/lib/ui/gamification/common-header/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Button: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const HeaderIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/ui/gamification/detailed-insight/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type DetailedInsightProps = {
+    image?: string;
+    title?: string;
+    description?: string;
+    webLinkLabel?: string;
+    webLink?: string;
+    closeHighlights: () => void;
+    closeInsight: () => void;
+};
+export declare const DetailedInsight: React.FC<DetailedInsightProps>;
+export {};

package/lib/ui/gamification/detailed-insight/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const AdditionalContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Description: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdditionalBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const LinkIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;