@streamlayer/react-ui 0.66.0 → 0.67.1

package/lib/ui/gamification/vote/vote-option/styles.js

@@ -1,151 +1,67 @@
-import { styled as o } from "@linaria/react";
-import { SvgIcon as t } from "../../../icons/index.js";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const c = o.button`
-  background-color: var(--color-neutrals-gray2);
-  border: 1px solid transparent;
-  box-sizing: border-box;
-  border-radius: 4px;
-  position: relative;
-  max-height: 44px;
-  min-height: 44px;
-  height: 44px;
-  width: 100%;
-
-  &:hover:not(:disabled) {
-    border-color: var(--color-neutrals-gray5);
-    cursor: pointer;
-  }
-
-  &[data-selected='true'] {
-    border-color: var(--color-neutrals-gray9);
-    background-color: var(--color-white);
-  }
-
-  &[data-answerState='correct'] {
-    position: relative;
-    border-color: var(--color-primary-green1);
-
-    &:before {
-      content: '';
-      top: 0;
-      left: 0;
-      opacity: 0.1;
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background-color: var(--color-primary-green1);
-    }
-  }
-
-  &[data-answerState='incorrect'] {
-    position: relative;
-    border-color: var(--color-secondary-red1);
-
-    &:before {
-      content: '';
-      top: 0;
-      left: 0;
-      opacity: 0.1;
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background-color: var(--color-secondary-red1);
-    }
-  }
-
-  &[data-isNotChecked='true'] {
-    border-color: var(--color-neutrals-gray3);
-    background-color: var(--color-white);
-  }
-`, l = o.div`
-  transition: width 1s ease-in;
-  position: absolute;
-  border-radius: 3px;
-  height: 100%;
-  z-index: 0;
-  left: 0;
-  top: 0;
-
-  background-color: var(--color-neutrals-gray3);
-
-  &[data-answerState='correct'] {
-    background-color: var(--color-primary-green1);
-    opacity: 0.3;
-  }
-
-  &[data-answerState='incorrect'] {
-    background-color: var(--color-secondary-red1);
-    opacity: 0.3;
-  }
-
-  &[data-answerState='unset'] {
-    background-color: var(--color-neutrals-gray3);
-  }
-`, d = o.span`
-  font-weight: var(--font-weight-default);
-  color: var(--color-neutrals-gray9);
-  font-family: var(--font-regular);
-  background-color: transparent;
-  padding: 5px 15px 5px 9px;
-  align-items: center;
-  border-radius: 2px;
-  position: relative;
-  font-size: 12px;
-  outline: none;
-  display: flex;
-  height: 100%;
-  border: none;
-  width: 100%;
-`, s = o.div`
-  width: 60px;
-`, p = o.div`
-  position: absolute;
-  left: 0;
-  bottom: -1px;
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 52px;
-  height: 52px;
-`, r = o.img`
-  margin-right: 8px;
-`, g = o(r)`
-  height: 32px;
-  width: 32px;
-`, h = o(r)`
-  border-radius: 50%;
-  height: 32px;
-  width: 32px;
-`, u = o.span`
-  overflow: hidden;
-  text-align: left;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex: 1;
-`, b = o.span`
-  display: flex;
-`, x = o.span`
-  margin-left: 8px;
-  line-height: 17px;
-`, v = o(t)`
-  margin-left: 8px;
-  height: 16px;
-  width: 16px;
-`;
+const i = /* @__PURE__ */ s("button")({
+  name: "ButtonContainer",
+  class: "b1b6dl8t",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "ButtonPct",
+  class: "b4iik8i",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("span")({
+  name: "ButtonBody",
+  class: "b1gq1lnf",
+  propsAsIs: !1
+}), u = /* @__PURE__ */ s("div")({
+  name: "IconContainer",
+  class: "i1j65z51",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("div")({
+  name: "IconWrap",
+  class: "i19tpfua",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("img")({
+  name: "Icon",
+  class: "i1tubmma",
+  propsAsIs: !1
+}), t = () => n, A = /* @__PURE__ */ s(t())({
+  name: "IconDefault",
+  class: "i1grrgwj",
+  propsAsIs: !0
+}), c = () => n, d = /* @__PURE__ */ s(c())({
+  name: "IconCircle",
+  class: "ibemyq8",
+  propsAsIs: !0
+}), b = /* @__PURE__ */ s("span")({
+  name: "Title",
+  class: "t1dceht",
+  propsAsIs: !1
+}), B = /* @__PURE__ */ s("span")({
+  name: "Indicators",
+  class: "i116q4vq",
+  propsAsIs: !1
+}), C = /* @__PURE__ */ s("span")({
+  name: "Percentage",
+  class: "p17ajcu2",
+  propsAsIs: !1
+}), a = () => o, g = /* @__PURE__ */ s(a())({
+  name: "CheckIcon",
+  class: "cu9kmlb",
+  propsAsIs: !0
+});
 export {
-  d as ButtonBody,
-  c as ButtonContainer,
-  l as ButtonPct,
-  v as CheckIcon,
-  r as Icon,
-  h as IconCircle,
-  s as IconContainer,
-  g as IconDefault,
-  p as IconWrap,
-  b as Indicators,
-  x as Percentage,
-  u as Title
+  m as ButtonBody,
+  i as ButtonContainer,
+  I as ButtonPct,
+  g as CheckIcon,
+  n as Icon,
+  d as IconCircle,
+  u as IconContainer,
+  A as IconDefault,
+  f as IconWrap,
+  B as Indicators,
+  C as Percentage,
+  b as Title
 };

package/lib/ui/gamification/vote/win-bar/styles.js

@@ -1,50 +1,42 @@
-import { styled as t } from "@linaria/react";
-import { SvgIcon as i } 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 = t.div`
-  border: 1px solid var(--color-neutrals-gray3);
-  font-family: var(--font-regular);
-  font-weight: var(--font-weight-default);
-  color: var(--color-neutrals-gray9);
-  width: 100%;
-  min-height: 40px;
-  border-radius: 100px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 3px 3px 3px 11px;
-  font-size: 14px;
-  letter-spacing: -0.15px;
-
-  > div:first-child:last-child {
-    margin-left: auto;
-    margin-right: auto;
-  }
-`, s = t.div`
-  display: flex;
-  align-items: center;
-`, l = t.div`
-  color: var(--color-neutrals-gray7);
-  margin-right: 8px;
-`, p = t(i)`
-  margin-right: 4px;
-`, g = t.div`
-  display: flex;
-  align-items: flex-end;
-`, c = t.span`
-  margin-right: 6px;
-  font-size: 14px;
-  line-height: 14px;
-`, d = t.span`
-  font-size: 10px;
-`;
+const p = /* @__PURE__ */ s("div")({
+  name: "WinBarContainer",
+  class: "wie6cqo",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "cgizw4u",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t1l3ucjp",
+  propsAsIs: !1
+}), o = () => n, r = /* @__PURE__ */ s(o())({
+  name: "WinIcon",
+  class: "wx7j799",
+  propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "Points",
+  class: "p4lwuj0",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("span")({
+  name: "PointsCount",
+  class: "po9i64o",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("span")({
+  name: "PointsUnits",
+  class: "pe5g05h",
+  propsAsIs: !1
+});
 export {
-  s as Content,
-  g as Points,
-  c as PointsCount,
-  d as PointsUnits,
+  c as Content,
+  m as Points,
+  I as PointsCount,
+  f as PointsUnits,
   l as Title,
-  a as WinBarContainer,
-  p as WinIcon
+  p as WinBarContainer,
+  r as WinIcon
 };