@streamlayer/react-ui 0.66.0 → 0.67.0

package/lib/ui/gamification/insight/styles.js

@@ -1,65 +1,44 @@
-import { styled as t } from "@linaria/react";
-const e = t.div`
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  min-height: 55px;
-  height: 55px;
-  background-color: var(--color-transparent-item);
-  border-radius: 8px;
-  cursor: pointer;
-`, o = t.div`
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-  align-items: center;
-  padding: 9px;
-`, n = t.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-  min-width: 60px;
-  width: 60px;
-  height: 100%;
-  background-color: var(--color-blue-question-action-btn);
-  position: relative;
-`, r = t.img`
-  width: 35px;
-  height: 35px;
-`, l = t.img`
-  width: 35px;
-  height: 35px;
-  border-radius: 50%;
-`, s = t.img`
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 60px;
-`, p = t.div`
-  color: var(--color-white);
-  font-size: 12px;
-  font-weight: 400px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  word-break: break-all;
-  text-overflow: ellipsis;
-  max-height: 100%;
-  margin-right: 35px;
-`, a = t.img`
-  width: 16px;
-  height: 16px;
-`;
+import { styled as s } from "@linaria/react";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_cygkmjj",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c71yvf9",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Graphic",
+  class: "Graphic_gao3b2f",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("img")({
+  name: "InsightIconDefault",
+  class: "InsightIconDefault_i1k4eec3",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("img")({
+  name: "InsightIconCircle",
+  class: "InsightIconCircle_i1uhyahn",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "InsightIconAbsolute",
+  class: "InsightIconAbsolute_i2ernmy",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "Title_t12j99pr",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("img")({
+  name: "NextIcon",
+  class: "NextIcon_n1uwonpi",
+  propsAsIs: !1
+});
 export {
-  e as Container,
-  o as Content,
-  n as Graphic,
-  s as InsightIconAbsolute,
-  l as InsightIconCircle,
-  r as InsightIconDefault,
-  a as NextIcon,
-  p as Title
+  t as Container,
+  e as Content,
+  o as Graphic,
+  i as InsightIconAbsolute,
+  a as InsightIconCircle,
+  c as InsightIconDefault,
+  I as NextIcon,
+  l as Title
 };

package/lib/ui/gamification/insight-list/styles.js

@@ -1,20 +1,14 @@
-import { styled as o } from "@linaria/react";
-const e = o.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: 13px;
-  height: 100%;
-`, t = o.div`
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: 100%;
-
-  & > div {
-    margin-bottom: 8px;
-  }
-`;
+import { styled as s } from "@linaria/react";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_cddmj9e",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "ItemsContainer",
+  class: "ItemsContainer_i16t83sg",
+  propsAsIs: !1
+});
 export {
-  e as Container,
-  t as ItemsContainer
+  t as Container,
+  n as ItemsContainer
 };

package/lib/ui/gamification/invite-link/styles.js

@@ -1,48 +1,34 @@
-import { styled as i } from "@linaria/react";
-const t = i.div`
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  width: 100%;
-  height: 58px;
-  min-height: 58px;
-  max-height: 58px;
-  padding: 4px 12px;
-  border-radius: 8px;
-  box-sizing: border-box;
-  background-color: var(--color-primary-green1);
-  overflow: hidden;
-  cursor: pointer;
-`, e = i.img`
-  width: 32px;
-  height: 32px;
-`, r = i.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  row-gap: 6px;
-  padding: 0px 4px;
-  font-weight: var(--font-weight-default);
-`, n = i.div`
-  color: var(--color-neutrals-white);
-  font-size: 11px;
-  line-height: 14px;
-  text-transform: uppercase;
-  opacity: 0.8;
-`, p = i.div`
-  color: var(--color-white);
-  font-size: 14px;
-  line-height: 13px;
-`, x = i.img`
-  margin-right: 8px;
-  width: 18px;
-  height: 18px;
-`;
+import { styled as s } from "@linaria/react";
+const o = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1ux29ft",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("img")({
+  name: "FriendsIcon",
+  class: "FriendsIcon_f10ncfg2",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c1yc07bd",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "Title_tj6cq7w",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "Description_d1ag78xo",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "ArrowInviteIcon",
+  class: "ArrowInviteIcon_awohrz6",
+  propsAsIs: !1
+});
 export {
-  x as ArrowInviteIcon,
-  t as Container,
-  r as Content,
-  p as Description,
+  i as ArrowInviteIcon,
+  o as Container,
+  t as Content,
+  r as Description,
   e as FriendsIcon,
-  n as Title
+  c as Title
 };

package/lib/ui/gamification/leaderboard/list-item/styles.js

@@ -1,69 +1,47 @@
-import { styled as r } from "@linaria/react";
-import { SvgIcon as e } from "../../../icons/index.js";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as a } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const a = r.div`
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  padding: 8px 16px 8px 8px;
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 16px;
-  border: 1px solid var(--color-neutrals-gray3);
-  border-radius: 8px;
-  background-color: var(--color-neutrals-white);
-  cursor: pointer;
-
-  &:hover {
-    color: var(--color-primary-green1);
-    border-color: var(--color-neutrals-gray5);
-  }
-`, l = r.div`
-  min-width: 28px;
-  text-align: center;
-`, p = r.img`
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-`, s = r.div`
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  border-radius: 50%;
-  background: var(--color-grey-primary-onboarding-inapp);
-  text-align: center;
-  text-transform: uppercase;
-`, c = r.div`
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  column-gap: 8px;
-`, d = r.div`
-  display: grid;
-  align-items: center;
-  column-gap: 4px;
-  grid-template-columns: 1fr auto;
-`, g = r.span`
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-`, x = r(e)`
-  flex-shrink: 0;
-`;
+const c = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_culdu4a",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Position",
+  class: "Position_pwf8e69",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("img")({
+  name: "Avatar",
+  class: "Avatar_atf4yh4",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "AvatarPlaceholder",
+  class: "AvatarPlaceholder_a1dg29ja",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c10a68rc",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "NameContainer",
+  class: "NameContainer_nc4kck5",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("span")({
+  name: "Name",
+  class: "Name_njsrqgr",
+  propsAsIs: !1
+}), e = () => a, v = /* @__PURE__ */ s(e())({
+  name: "CurrentUserBadge",
+  class: "CurrentUserBadge_c17uc4zr",
+  propsAsIs: !0
+});
 export {
   p as Avatar,
-  s as AvatarPlaceholder,
-  a as Container,
-  c as Content,
-  x as CurrentUserBadge,
-  g as Name,
+  i as AvatarPlaceholder,
+  c as Container,
+  m as Content,
+  v as CurrentUserBadge,
+  A as Name,
   d as NameContainer,
   l as Position
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.js

@@ -1,47 +1,34 @@
-import { styled as t } from "@linaria/react";
-const o = t.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  padding-bottom: 24px;
-`, n = t.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  padding: 0 16px 32px;
-`, i = t.div`
-  display: flex;
-  flex-grow: 1;
-  width: 100%;
-`, r = t.div`
-  max-width: 270px;
-  color: var(--color-primary-green1);
-  font-family: var(--font-serif);
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 30px;
-  text-align: center;
-`, a = t.div`
-  display: flex;
-  justify-content: center;
-  column-gap: 8px;
-`, c = t.span`
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: var(--color-neutrals-gray4);
-
-  &[data-active='true'] {
-    background-color: var(--color-primary-green1);
-  }
-`;
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1htq1lb",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_cjyzpp7",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Graphic",
+  class: "Graphic_g16mldgz",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Headline",
+  class: "Headline_h69js65",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "StepsContainer",
+  class: "StepsContainer_smm7qmo",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("span")({
+  name: "StepIndicator",
+  class: "StepIndicator_s17knuw2",
+  propsAsIs: !1
+});
 export {
-  o as Container,
-  n as Content,
-  i as Graphic,
-  r as Headline,
-  c as StepIndicator,
-  a as StepsContainer
+  e as Container,
+  a as Content,
+  t as Graphic,
+  o as Headline,
+  i as StepIndicator,
+  p as StepsContainer
 };

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/styles.js

@@ -1,104 +1,77 @@
-import { styled as e } from "@linaria/react";
-import { SvgIcon as t } from "../../../../icons/index.js";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as n } from "../../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const a = e.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  row-gap: 24px;
-  height: 100%;
-  padding: 16px 16px 56px;
-`, l = e.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background-color: var(--color-primary-green1);
-`, p = e(t)`
-  width: 24px;
-  height: 24px;
-`, c = e.div`
-  max-width: 270px;
-  width: 100%;
-`, s = e.div`
-  margin-bottom: 8px;
-  color: var(--color-primary-green1);
-  font-family: var(--font-serif);
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 30px;
-  text-align: center;
-`, x = e.div`
-  color: var(--color-neutrals-gray9);
-  font-size: 14px;
-  font-weight: var(--font-weight-default);
-  line-height: 20px;
-  letter-spacing: -0.154px;
-  text-align: center;
-`, d = e.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  column-gap: 16px;
-  padding: 12px 16px;
-  max-width: 292px;
-  width: 100%;
-  border-radius: 8px;
-  border: 1px solid var(--color-neutrals-gray3);
-  cursor: pointer;
-`, g = e.div`
-  display: flex;
-  flex-direction: column;
-  font-weight: var(--font-weight-default);
-  overflow: hidden;
-`, f = e.span`
-  color: var(--color-primary-green1);
-  font-size: 16px;
-  line-height: 24px;
-`, h = e.span`
-  color: var(--color-neutrals-gray9);
-  font-size: 14px;
-  line-height: 20px;
-  letter-spacing: -0.154px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`, m = e(t)`
-  flex-shrink: 0;
-`, v = e.div`
-  display: flex;
-  column-gap: 8px;
-`, w = e.a`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 8px;
-  min-width: 68px;
-  text-decoration: none;
-`, u = e.span`
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-  letter-spacing: -0.154px;
-`;
+const l = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1itm4k7",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "IconContainer",
+  class: "IconContainer_i1w4fsni",
+  propsAsIs: !1
+}), o = () => n, p = /* @__PURE__ */ s(o())({
+  name: "InviteGameIcon",
+  class: "InviteGameIcon_i19m85r1",
+  propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c1mbu204",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "Heading",
+  class: "Heading_h1amdqtv",
+  propsAsIs: !1
+}), k = /* @__PURE__ */ s("div")({
+  name: "Subtext",
+  class: "Subtext_s1lhlj9j",
+  propsAsIs: !1
+}), L = /* @__PURE__ */ s("div")({
+  name: "LinkContainer",
+  class: "LinkContainer_l1wot35e",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "LinkInfo",
+  class: "LinkInfo_l1jdw39q",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("span")({
+  name: "LinkTitle",
+  class: "LinkTitle_l1cr5mk",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("span")({
+  name: "LinkAddress",
+  class: "LinkAddress_lvi87q4",
+  propsAsIs: !1
+}), a = () => n, _ = /* @__PURE__ */ s(a())({
+  name: "LinkIcon",
+  class: "LinkIcon_l1pqlvw3",
+  propsAsIs: !0
+}), v = /* @__PURE__ */ s("div")({
+  name: "SocialLinksContainer",
+  class: "SocialLinksContainer_s1n7kzeh",
+  propsAsIs: !1
+}), C = /* @__PURE__ */ s("a")({
+  name: "SocialLink",
+  class: "SocialLink_s2m9o9y",
+  propsAsIs: !1
+}), S = /* @__PURE__ */ s("span")({
+  name: "SocialLinkLabel",
+  class: "SocialLinkLabel_sewjbbn",
+  propsAsIs: !1
+});
 export {
-  a as Container,
-  c as Content,
-  s as Heading,
-  l as IconContainer,
+  l as Container,
+  m as Content,
+  I as Heading,
+  r as IconContainer,
   p as InviteGameIcon,
-  h as LinkAddress,
-  d as LinkContainer,
-  m as LinkIcon,
-  g as LinkInfo,
+  A as LinkAddress,
+  L as LinkContainer,
+  _ as LinkIcon,
+  d as LinkInfo,
   f as LinkTitle,
-  w as SocialLink,
-  u as SocialLinkLabel,
+  C as SocialLink,
+  S as SocialLinkLabel,
   v as SocialLinksContainer,
-  x as Subtext
+  k as Subtext
 };