@streamlayer/react-ui 0.38.0 → 0.40.0

package/lib/index.js

@@ -1,16 +1,16 @@
-import { QuestionInApp as jo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as qo } from "./ui/login/index.js";
-import { Onboarding as zo } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as Co, Tab as Eo, Tabs as Fo } from "./ui/gamification/tabs/index.js";
-import { LeaderboardItemDetail as Ho } from "./ui/gamification/leaderboard-item-detail/index.js";
-import { Question as Ko } from "./ui/gamification/question/index.js";
-import { QuestionList as No } from "./ui/gamification/question-list/index.js";
-import { UserStatistics as Wo } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Yo } from "./ui/gamification/vote/index.js";
-import { Demo as _o } from "./ui/demo/index.js";
-import { Points as or } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as tr } from "./ui/theme/index.js";
-import { ThemeVariables as pr, theme as ir, themeStr as er } from "./ui/theme/theme.js";
+import { QuestionInApp as ko } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as wo } from "./ui/login/index.js";
+import { Onboarding as Bo } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as Eo, Tab as Fo, Tabs as Go } from "./ui/gamification/tabs/index.js";
+import { LeaderboardItemDetail as Jo } from "./ui/gamification/leaderboard-item-detail/index.js";
+import { Question as Mo } from "./ui/gamification/question/index.js";
+import { QuestionList as Ro } from "./ui/gamification/question-list/index.js";
+import { UserStatistics as Xo } from "./ui/gamification/user-statistics/index.js";
+import { Vote as Zo } from "./ui/gamification/vote/index.js";
+import { Demo as $o } from "./ui/demo/index.js";
+import { Points as rr } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as mr } from "./ui/theme/index.js";
+import { ThemeVariables as ir, theme as er, themeStr as fr } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-6a55bb8f.js";
@@ -39,14 +39,16 @@ import "./ui/gamification/common-header/index.js";
 import "./ui/gamification/common-header/styles.js";
 import "./ui/gamification/leaderboard-item-detail/styles.js";
 import "@streamlayer/sdk-web-types";
-import "./icon-chevron-138a557c.js";
+import "./ui/button/index.js";
+import "./ui/button/styles.js";
 import "./ui/gamification/question/styles.js";
+import "./ui/icons/index.js";
 import "./ui/gamification/question-list/styles.js";
 import "./utils/common.js";
 import "./ui/gamification/user-statistics/components/rank/index.js";
 import "./ui/gamification/user-statistics/components/rank/styles.js";
-import "./ui/gamification/user-statistics/components/statistics/index.js";
-import "./ui/gamification/user-statistics/components/statistics/styles.js";
+import "./ui/gamification/user-statistics/components/statistic/index.js";
+import "./ui/gamification/user-statistics/components/statistic/styles.js";
 import "./ui/gamification/user-statistics/styles.js";
 import "./index-7045fbb2.js";
 import "./ui/gamification/vote/components/voting-option/styles.js";
@@ -92,24 +94,23 @@ import "./ui/gamification/detailed-insight/index.js";
 import "./ui/demo/Login.js";
 import "@streamlayer/sdk-web-anonymous-auth";
 import "./ui/gamification/points/styles.js";
-import "./ui/icons/index.js";
 import "@linaria/core";
 export {
-  Co as ActivePages,
-  _o as Demo,
-  Ho as LeaderboardItemDetail,
-  qo as Login,
-  zo as Onboarding,
-  or as Points,
-  Ko as Question,
-  jo as QuestionInApp,
-  No as QuestionList,
-  tr as StreamLayerThemeProvider,
-  Eo as Tab,
-  Fo as Tabs,
-  pr as ThemeVariables,
-  Wo as UserStatistics,
-  Yo as Vote,
-  ir as theme,
-  er as themeStr
+  Eo as ActivePages,
+  $o as Demo,
+  Jo as LeaderboardItemDetail,
+  wo as Login,
+  Bo as Onboarding,
+  rr as Points,
+  Mo as Question,
+  ko as QuestionInApp,
+  Ro as QuestionList,
+  mr as StreamLayerThemeProvider,
+  Fo as Tab,
+  Go as Tabs,
+  ir as ThemeVariables,
+  Xo as UserStatistics,
+  Zo as Vote,
+  er as theme,
+  fr as themeStr
 };

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

@@ -11,8 +11,8 @@ import "../../../gamification/user-statistics/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
-import "../../../gamification/user-statistics/components/statistics/index.js";
-import "../../../gamification/user-statistics/components/statistics/styles.js";
+import "../../../gamification/user-statistics/components/statistic/index.js";
+import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
 import "../../../gamification/leaderboard-item-detail/styles.js";
 import "../../../gamification/leaderboard-invite-link/index.js";

package/lib/ui/app/Features/Gamification/QuestionsList.js

@@ -1,16 +1,19 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useStore as m } from "@nanostores/react";
-import { QuestionList as s } from "../../../gamification/question-list/index.js";
+import { QuestionList as p } from "../../../gamification/question-list/index.js";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
-import "../../../../icon-chevron-138a557c.js";
-import "../../../gamification/question/styles.js";
+import "../../../button/index.js";
+import "../../../button/styles.js";
 import "@linaria/react";
+import "../../../gamification/question/styles.js";
+import "../../../icons/index.js";
+import "react";
 import "../../../gamification/question-list/styles.js";
-const L = ({ store: r, openQuestion: i }) => {
+const j = ({ store: r, openQuestion: i }) => {
   const t = m(r);
-  return t != null && t.data ? /* @__PURE__ */ o(s, { openQuestion: i, questions: t.data }) : /* @__PURE__ */ o("div", { children: "wait questions..." });
+  return t != null && t.data ? /* @__PURE__ */ o(p, { openQuestion: i, questions: t.data }) : /* @__PURE__ */ o("div", { children: "wait questions..." });
 };
 export {
-  L as QuestionsList
+  j as QuestionsList
 };

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -1,11 +1,12 @@
-import { jsxs as e, Fragment as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as e, Fragment as p, jsx as r } from "react/jsx-runtime";
 import { useState as s } from "react";
-import { ActivePages as m, Tabs as a } from "../../../gamification/tabs/index.js";
-import { Leaderboard as n } from "./Leaderboard.js";
-import { QuestionsList as u } from "./QuestionsList.js";
+import { SDKWhiteContainer as n, SDKContentContainer as a } from "../../styles.js";
+import { ActivePages as m, Tabs as u } from "../../../gamification/tabs/index.js";
+import { Leaderboard as S } from "./Leaderboard.js";
+import { QuestionsList as d } from "./QuestionsList.js";
 import { UserSummary as g } from "./UserSummary.js";
-import "../../../gamification/tabs/styles.js";
 import "@linaria/react";
+import "../../../gamification/tabs/styles.js";
 import "@nanostores/react";
 import "../../../gamification/leaderboard-item-detail/index.js";
 import "../../../gamification/common-header/index.js";
@@ -15,8 +16,8 @@ import "../../../gamification/user-statistics/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
-import "../../../gamification/user-statistics/components/statistics/index.js";
-import "../../../gamification/user-statistics/components/statistics/styles.js";
+import "../../../gamification/user-statistics/components/statistic/index.js";
+import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
 import "../../../gamification/leaderboard-item-detail/styles.js";
 import "../../../gamification/leaderboard-list/index.js";
@@ -28,20 +29,22 @@ import "../../../gamification/leaderboard-list/styles.js";
 import "../../../gamification/question-list/index.js";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
-import "../../../../icon-chevron-138a557c.js";
+import "../../../button/index.js";
+import "../../../button/styles.js";
 import "../../../gamification/question/styles.js";
+import "../../../icons/index.js";
 import "../../../gamification/question-list/styles.js";
-const J = ({ gamification: r }) => {
-  const [o, p] = s(m.HOME);
-  return /* @__PURE__ */ e(i, { children: [
-    /* @__PURE__ */ t(a, { activePage: o, toggleActivePage: p }),
-    o === m.HOME && /* @__PURE__ */ e(i, { children: [
-      /* @__PURE__ */ t(g, { store: r.userSummary.getStore() }),
-      /* @__PURE__ */ t(u, { openQuestion: r.openQuestion, store: r.questions.getStore() })
+const X = ({ gamification: t }) => {
+  const [o, i] = s(m.HOME);
+  return /* @__PURE__ */ e(p, { children: [
+    /* @__PURE__ */ e(n, { children: [
+      /* @__PURE__ */ r(u, { activePage: o, toggleActivePage: i }),
+      o === m.HOME && /* @__PURE__ */ r(g, { store: t.userSummary.getStore() })
     ] }),
-    o === m.LEADERBOARD && /* @__PURE__ */ t(n, { store: r.leaderboardList.getStore() })
+    o === m.HOME && /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(d, { openQuestion: t.openQuestion, store: t.questions.getStore() }) }),
+    o === m.LEADERBOARD && /* @__PURE__ */ r(S, { store: t.leaderboardList.getStore() })
   ] });
 };
 export {
-  J as Tabs
+  X as Tabs
 };

package/lib/ui/app/Features/Gamification/UserSummary.js

@@ -5,8 +5,8 @@ import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
 import "@linaria/react";
-import "../../../gamification/user-statistics/components/statistics/index.js";
-import "../../../gamification/user-statistics/components/statistics/styles.js";
+import "../../../gamification/user-statistics/components/statistic/index.js";
+import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
 const S = ({ store: m }) => {
   const { data: r } = o(m);

package/lib/ui/app/Features/Gamification/index.js

@@ -19,6 +19,7 @@ import "../../../theme/constants.js";
 import "../../../gamification/vote/components/voting-header/components/timer/styles.js";
 import "../../../gamification/vote/components/voting-header/styles.js";
 import "../../../../fedex-a8dcc7b2.js";
+import "../../styles.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -29,8 +30,8 @@ import "../../../gamification/user-statistics/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
-import "../../../gamification/user-statistics/components/statistics/index.js";
-import "../../../gamification/user-statistics/components/statistics/styles.js";
+import "../../../gamification/user-statistics/components/statistic/index.js";
+import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
 import "../../../gamification/leaderboard-item-detail/styles.js";
 import "../../../gamification/leaderboard-list/index.js";
@@ -42,11 +43,13 @@ import "../../../gamification/leaderboard-list/styles.js";
 import "./QuestionsList.js";
 import "../../../gamification/question-list/index.js";
 import "../../../gamification/question/index.js";
-import "../../../../icon-chevron-138a557c.js";
+import "../../../button/index.js";
+import "../../../button/styles.js";
 import "../../../gamification/question/styles.js";
+import "../../../icons/index.js";
 import "../../../gamification/question-list/styles.js";
 import "./UserSummary.js";
-const to = ({
+const io = ({
   gamification: o
 }) => {
   const r = i(o.openedQuestion);
@@ -63,5 +66,5 @@ const to = ({
   ] });
 };
 export {
-  to as GamificationOverlay
+  io as GamificationOverlay
 };

package/lib/ui/app/Features/Highlights/Insights.js

@@ -1,16 +1,15 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useStore as s } from "@nanostores/react";
-import { InsightList as m } from "../../../gamification/insight-list/index.js";
+import { InsightList as n } from "../../../gamification/insight-list/index.js";
 import "../../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
-import "../../../../icon-chevron-138a557c.js";
 import "../../../gamification/insight/styles.js";
 import "@linaria/react";
 import "../../../gamification/insight-list/styles.js";
-const u = ({ highlights: r, store: o }) => {
+const d = ({ highlights: r, store: o }) => {
   const { data: t } = s(o);
-  return t ? /* @__PURE__ */ i(m, { insights: t, openInsight: r.openHighlight }) : /* @__PURE__ */ i("div", { children: "wait insights..." });
+  return t ? /* @__PURE__ */ i(n, { insights: t, openInsight: r.openHighlight }) : /* @__PURE__ */ i("div", { children: "wait insights..." });
 };
 export {
-  u as Insights
+  d as Insights
 };

package/lib/ui/app/Features/Highlights/index.js

@@ -1,5 +1,5 @@
-import { jsxs as i, Fragment as m, jsx as r } from "react/jsx-runtime";
-import { useStore as e } from "@nanostores/react";
+import { jsxs as i, Fragment as e, jsx as r } from "react/jsx-runtime";
+import { useStore as m } from "@nanostores/react";
 import { Insight as p } from "../../../demo/components/Insight.js";
 import { Insights as s } from "../../../demo/components/Insights.js";
 import "../../../gamification/detailed-insight/index.js";
@@ -11,12 +11,11 @@ import "../../../gamification/detailed-insight/styles.js";
 import "../../../gamification/insight-list/index.js";
 import "../../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
-import "../../../../icon-chevron-138a557c.js";
 import "../../../gamification/insight/styles.js";
 import "../../../gamification/insight-list/styles.js";
-const O = ({ highlights: o }) => {
-  const t = e(o.openedInsight);
-  return /* @__PURE__ */ i(m, { children: [
+const y = ({ highlights: o }) => {
+  const t = m(o.openedInsight);
+  return /* @__PURE__ */ i(e, { children: [
     !t && o.insights && /* @__PURE__ */ r(s, { highlights: o, store: o.insights.getStore() }),
     t && /* @__PURE__ */ r(
       p,
@@ -29,5 +28,5 @@ const O = ({ highlights: o }) => {
   ] });
 };
 export {
-  O as HighlightsOverlay
+  y as HighlightsOverlay
 };

package/lib/ui/app/Features/index.js

@@ -23,6 +23,7 @@ import "../../gamification/vote/components/voting-header/components/timer/styles
 import "../../gamification/vote/components/voting-header/styles.js";
 import "../../../fedex-a8dcc7b2.js";
 import "./Gamification/Tabs.js";
+import "../styles.js";
 import "../../gamification/tabs/index.js";
 import "../../gamification/tabs/styles.js";
 import "./Gamification/Leaderboard.js";
@@ -33,8 +34,8 @@ import "../../gamification/user-statistics/index.js";
 import "../../../utils/common.js";
 import "../../gamification/user-statistics/components/rank/index.js";
 import "../../gamification/user-statistics/components/rank/styles.js";
-import "../../gamification/user-statistics/components/statistics/index.js";
-import "../../gamification/user-statistics/components/statistics/styles.js";
+import "../../gamification/user-statistics/components/statistic/index.js";
+import "../../gamification/user-statistics/components/statistic/styles.js";
 import "../../gamification/user-statistics/styles.js";
 import "../../gamification/leaderboard-item-detail/styles.js";
 import "../../gamification/leaderboard-list/index.js";
@@ -46,8 +47,10 @@ import "../../gamification/leaderboard-list/styles.js";
 import "./Gamification/QuestionsList.js";
 import "../../gamification/question-list/index.js";
 import "../../gamification/question/index.js";
-import "../../../icon-chevron-138a557c.js";
+import "../../button/index.js";
+import "../../button/styles.js";
 import "../../gamification/question/styles.js";
+import "../../icons/index.js";
 import "../../gamification/question-list/styles.js";
 import "./Gamification/UserSummary.js";
 import "../../demo/components/Insight.js";
@@ -58,7 +61,7 @@ import "../../gamification/insight-list/index.js";
 import "../../gamification/insight/index.js";
 import "../../gamification/insight/styles.js";
 import "../../gamification/insight-list/styles.js";
-const yr = ({ sdk: i, feature: r }) => p(() => r ? r.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(e, { gamification: r, sdk: i }) }) : r.featureConfig.get().type === o.HIGHLIGHTS ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(n, { highlights: r, sdk: i }) }) : null : null, [i, r]);
+const Gr = ({ sdk: i, feature: r }) => p(() => r ? r.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(e, { gamification: r, sdk: i }) }) : r.featureConfig.get().type === o.HIGHLIGHTS ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(n, { highlights: r, sdk: i }) }) : null : null, [i, r]);
 export {
-  yr as ActiveFeature
+  Gr as ActiveFeature
 };

package/lib/ui/app/masters.js

@@ -44,8 +44,8 @@ import "../gamification/user-statistics/index.js";
 import "../../utils/common.js";
 import "../gamification/user-statistics/components/rank/index.js";
 import "../gamification/user-statistics/components/rank/styles.js";
-import "../gamification/user-statistics/components/statistics/index.js";
-import "../gamification/user-statistics/components/statistics/styles.js";
+import "../gamification/user-statistics/components/statistic/index.js";
+import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
 import "../gamification/leaderboard-item-detail/styles.js";
 import "../gamification/leaderboard-list/index.js";
@@ -57,8 +57,10 @@ import "../gamification/leaderboard-list/styles.js";
 import "./Features/Gamification/QuestionsList.js";
 import "../gamification/question-list/index.js";
 import "../gamification/question/index.js";
-import "../../icon-chevron-138a557c.js";
+import "../button/index.js";
+import "../button/styles.js";
 import "../gamification/question/styles.js";
+import "../icons/index.js";
 import "../gamification/question-list/styles.js";
 import "./Features/Gamification/UserSummary.js";
 import "./Features/Highlights/index.js";
@@ -72,13 +74,12 @@ import "../gamification/insight/styles.js";
 import "../gamification/insight-list/styles.js";
 import "../navigation/masters.js";
 import "../navigation/index.js";
-import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
 const F = ({ sdk: o }) => {
   const [, i] = k(o);
   return /* @__PURE__ */ t(v, { feature: i, sdk: o });
-}, Ur = ({ sdk: o, overlays: i, children: p, event: n }) => {
+}, Wr = ({ sdk: o, overlays: i, children: p, event: n }) => {
   const { sdkEnabled: m, sdkReady: s, activeOverlay: r, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = b(
     o,
     n
@@ -100,5 +101,5 @@ const F = ({ sdk: o }) => {
   ] }) });
 };
 export {
-  Ur as MastersApp
+  Wr as MastersApp
 };

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

@@ -1,3 +1,7 @@
 /// <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>>;
+export declare const SDKContentContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKWhiteContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;

package/lib/ui/app/styles.js

@@ -1,10 +1,10 @@
-import { styled as t } from "@linaria/react";
-const n = t.div`
+import { styled as n } from "@linaria/react";
+const i = n.div`
   height: 100%;
-  background: #fff;
+  background: transparent;
   font-family: var(--font-regular);
   position: relative;
-`, i = t.div`
+`, r = n.div`
   overflow-y: auto;
   height: 100%;
   transition: transform;
@@ -15,8 +15,17 @@ const n = t.div`
     height: calc(100% - var(--header-height));
     transform: translateY(var(--header-height));
   }
+`, t = n.div`
+  display: flex;
+  flex-direction: column;
+  padding: var(--container-padding);
+  gap: var(--container-padding);
+`, o = n(t)`
+  background-color: var(--color-neutrals-white);
 `;
 export {
-  n as SDKContainer,
-  i as SDKScrollContainer
+  i as SDKContainer,
+  t as SDKContentContainer,
+  r as SDKScrollContainer,
+  o as SDKWhiteContainer
 };

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type ButtonProps = {
+    children?: string | React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    variant?: 'primary' | 'secondary';
+};
+export declare const Button: React.FC<ButtonProps>;

package/lib/ui/button/index.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SButton as i, ButtonLabel as m } from "./styles.js";
+import "@linaria/react";
+const B = ({ disabled: r, variant: o = "primary", onClick: n, children: a }) => /* @__PURE__ */ t(i, { onClick: n, disabled: r, "data-variant": o, children: /* @__PURE__ */ t(m, { children: a }) });
+export {
+  B as Button
+};

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

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

package/lib/ui/button/styles.js

@@ -0,0 +1,44 @@
+import { styled as r } from "@linaria/react";
+const a = r.button`
+  border-radius: 71px;
+  padding: 14px 16px 12px;
+  font-size: 12px;
+  border: 1px solid;
+  font-weight: var(--font-weight-default);
+  outline: none;
+
+  &[data-variant='primary'] {
+    color: var(--color-neutrals-white);
+    background-color: var(--color-primary-green1);
+    border-color: var(--color-primary-green1);
+
+    &:hover:enabled {
+      background-color: var(--color-primary-green2);
+      border-color: var(--color-primary-green2);
+    }
+  }
+
+  &[data-variant='secondary'] {
+    color: var(--color-primary-green1);
+    background-color: transparent;
+    border-color: var(--color-primary-green1);
+
+    &:hover:enabled {
+      color: var(--color-neutrals-white);
+      background-color: var(--color-primary-green2);
+      border-color: var(--color-primary-green2);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+
+    &:hover {
+      cursor: default;
+    }
+  }
+`, e = r.span``;
+export {
+  e as ButtonLabel,
+  a as SButton
+};

package/lib/ui/demo/Gamification.js

@@ -20,13 +20,15 @@ import "../gamification/user-statistics/index.js";
 import "../../utils/common.js";
 import "../gamification/user-statistics/components/rank/index.js";
 import "../gamification/user-statistics/components/rank/styles.js";
-import "../gamification/user-statistics/components/statistics/index.js";
-import "../gamification/user-statistics/components/statistics/styles.js";
+import "../gamification/user-statistics/components/statistic/index.js";
+import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
 import "../gamification/question-list/index.js";
 import "../gamification/question/index.js";
-import "../../icon-chevron-138a557c.js";
+import "../button/index.js";
+import "../button/styles.js";
 import "../gamification/question/styles.js";
+import "../icons/index.js";
 import "../gamification/question-list/styles.js";
 import "../gamification/vote/index.js";
 import "../../index-7045fbb2.js";
@@ -58,17 +60,17 @@ import "../gamification/leaderboard-invite-link/styles.js";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
 import "../gamification/leaderboard-list/styles.js";
-const mt = ({
+const st = ({
   gamification: r,
   sdk: u
 }) => {
   var d, v, c, b, y, g, S, h, C, G, L, Q, A, E, f, w, x, P, F, O, B, D, R;
-  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(r.featureSettings), [n, q] = K(a.HOME);
+  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: e } = p(u.sdkStore), o = p(r.featureSettings), [n, q] = K(a.HOME);
   if (T !== J.Ready)
     return /* @__PURE__ */ t("div", { children: "wait..." });
-  if (o != null && o.loading)
+  if (e != null && e.loading)
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
-  if (!(o != null && o.data))
+  if (!(e != null && e.data))
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
   if (!j)
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
@@ -76,16 +78,16 @@ const mt = ({
       {
         closeFeature: u.closeFeature,
         gamification: r,
-        steps: (v = (d = e.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
-        gameIcon: (y = (b = (c = e.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
-        sponsorLogo: (h = (S = (g = e.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
-        rules: (G = (C = e.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
-        rulesBtnLabel: (Q = (L = e.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
-        rulesTitle: (E = (A = e.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
-        primaryColor: (x = (w = (f = e.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
-        inviteCardTitle: (F = (P = e.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
-        inviteCardSubtext: (B = (O = e.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
-        inviteCardBtnLabel: (R = (D = e.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
+        steps: (v = (d = o.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
+        gameIcon: (y = (b = (c = o.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
+        sponsorLogo: (h = (S = (g = o.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
+        rules: (G = (C = o.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
+        rulesBtnLabel: (Q = (L = o.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
+        rulesTitle: (E = (A = o.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
+        primaryColor: (x = (w = (f = o.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
+        inviteCardTitle: (F = (P = o.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
+        inviteCardSubtext: (B = (O = o.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
+        inviteCardBtnLabel: (R = (D = o.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
       }
     ) });
   const H = (i) => {
@@ -110,5 +112,5 @@ const mt = ({
   ] });
 };
 export {
-  mt as GamificationComponent
+  st as GamificationComponent
 };

package/lib/ui/demo/Highlights.js

@@ -3,7 +3,7 @@ import { FeatureStatus as d } from "@streamlayer/sdk-web-interfaces";
 import { useStore as m } from "@nanostores/react";
 import { DemoContainer as p } from "./styles.js";
 import "../gamification/user-statistics/components/rank/styles.js";
-import "../gamification/user-statistics/components/statistics/styles.js";
+import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
 import "../gamification/question/index.js";
 import "../gamification/question-list/styles.js";
@@ -22,8 +22,10 @@ import "../gamification/leaderboard-item/styles.js";
 import "../gamification/leaderboard-list/styles.js";
 import "@linaria/react";
 import "@streamlayer/sdk-web-types";
-import "../../icon-chevron-138a557c.js";
+import "../button/index.js";
+import "../button/styles.js";
 import "../gamification/question/styles.js";
+import "../icons/index.js";
 import "../gamification/vote/index.js";
 import "../../index-7045fbb2.js";
 import "../gamification/vote/components/voting-option/styles.js";
@@ -45,7 +47,7 @@ import "../gamification/insight-list/styles.js";
 import "../gamification/detailed-insight/index.js";
 import "../gamification/common-header/index.js";
 import "../gamification/detailed-insight/styles.js";
-const pt = ({ highlights: i, sdk: e }) => {
+const nt = ({ highlights: i, sdk: e }) => {
   const n = m(i.status), r = m(i.openedInsight), { slStreamId: o } = m(e.sdkStore);
   return n !== d.Ready ? /* @__PURE__ */ t("div", { children: "wait..." }) : o != null && o.loading ? /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) }) : o != null && o.data ? i.insights === void 0 ? /* @__PURE__ */ t("div", { children: "wait insights..." }) : /* @__PURE__ */ s(p, { children: [
     !r && /* @__PURE__ */ t(c, { highlights: i, store: i.insights.getStore() }),
@@ -60,5 +62,5 @@ const pt = ({ highlights: i, sdk: e }) => {
   ] }) : /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
 };
 export {
-  pt as HighlightsComponent
+  nt as HighlightsComponent
 };