@streamlayer/react-ui 0.66.0 → 0.67.0

package/lib/ui/app/Notifications/Onboarding/index.js

@@ -1,9 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
-import { styled as g } from "@linaria/react";
+import { jsx as o } from "react/jsx-runtime";
+import { styled as u } from "@linaria/react";
+import { useStore as g } from "@nanostores/react";
 import { useState as y } from "react";
 import { FeatureType as k } from "@streamlayer/sdk-web-types";
 import { Onboarding as w } from "../../../gamification/onboarding/index.js";
-import { ShowIn as f } from "../../../show-in/index.js";
+import { ShowIn as C } from "../../../show-in/index.js";
+import { Onboarding as f } from "./Notification/index.js";
 import "react-virtualized-auto-sizer";
 import "../../../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../../../lottie/index.js";
@@ -18,79 +20,99 @@ import "../../../gamification/onboarding/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "@linaria/core";
-const C = g(f)`
-  height: 100%;
-
-  animation-duration: var(--animation-duration);
-`, $ = ({ sdk: b, hiding: o, notification: t, NotificationContainer: h }) => {
-  var n, a, p, d, l, c;
-  const [u, i] = y(!1), s = b.getFeature(k.GAMES), e = t.data.onboarding;
-  return u && s && e ? /* @__PURE__ */ r(C, { hiding: o, children: /* @__PURE__ */ r(
-    w,
-    {
-      rules: [
-        {
-          label: "Answer as many questions as you like.",
-          icon: "icon-btn-feature-groups"
-        },
-        {
-          label: "Win points for each correct trivia or prediction answer.",
-          icon: "icon-thumb-up"
-        },
-        {
-          label: "Top the leader board and best your friends.",
-          icon: "icon-trophy"
-        }
-      ],
-      rulesBtnLabel: (n = e.rules) == null ? void 0 : n.buttonLabel,
-      rulesTitle: (a = e.rules) == null ? void 0 : a.heading,
-      steps: [
-        {
-          graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_01.json",
-          headline: "Welcome to the Featured Groups +"
-        },
-        {
-          graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_02.json",
-          headline: "Get real-time insights"
-        },
-        {
-          graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_03.json",
-          headline: "Predictions, trivia & polls synced to match play"
-        },
-        {
-          graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_04.json",
-          headline: "Win points for every answer you get right"
-        },
-        {
-          graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_05.json",
-          headline: "Compete against friends on the leaderboard"
-        }
-      ],
-      primaryColor: (p = e.inviteCard) == null ? void 0 : p.iconColor,
-      inviteLink: "masters.com/baf/5Ukwo245io",
-      inviteCardTitle: (d = e.inviteCard) == null ? void 0 : d.heading,
-      inviteCardSubtext: (l = e.inviteCard) == null ? void 0 : l.subtext,
-      inviteCardBtnLabel: (c = e.inviteCard) == null ? void 0 : c.buttonLabel,
+import "./Notification/styles.js";
+const v = () => C, S = /* @__PURE__ */ u(v())({
+  name: "OnboardingContainer",
+  class: "OnboardingContainer_o9squag",
+  propsAsIs: !0
+}), L = ({
+  hiding: n,
+  deepLink: a,
+  onboardingOpts: e,
+  setOpened: p,
+  notification: s,
+  gamification: i
+}) => {
+  var t, d, l, c, m, b;
+  const {
+    data: r
+  } = g(a.$store);
+  return /* @__PURE__ */ o(S, {
+    hiding: n,
+    children: /* @__PURE__ */ o(w, {
+      rules: [{
+        label: "Answer as many questions as you like.",
+        icon: "icon-btn-feature-groups"
+      }, {
+        label: "Win points for each correct trivia or prediction answer.",
+        icon: "icon-thumb-up"
+      }, {
+        label: "Top the leader board and best your friends.",
+        icon: "icon-trophy"
+      }],
+      rulesBtnLabel: (t = e.rules) == null ? void 0 : t.buttonLabel,
+      rulesTitle: (d = e.rules) == null ? void 0 : d.heading,
+      steps: [{
+        graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_01.json",
+        headline: "Welcome to the Featured Groups +"
+      }, {
+        graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_02.json",
+        headline: "Get real-time insights"
+      }, {
+        graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_03.json",
+        headline: "Predictions, trivia & polls synced to match play"
+      }, {
+        graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_04.json",
+        headline: "Win points for every answer you get right"
+      }, {
+        graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_05.json",
+        headline: "Compete against friends on the leaderboard"
+      }],
+      primaryColor: (l = e.inviteCard) == null ? void 0 : l.iconColor,
+      inviteLink: r == null ? void 0 : r.url,
+      inviteCardTitle: (c = e.inviteCard) == null ? void 0 : c.heading,
+      inviteCardSubtext: (m = e.inviteCard) == null ? void 0 : m.subtext,
+      inviteCardBtnLabel: (b = e.inviteCard) == null ? void 0 : b.buttonLabel,
       onClose: () => {
-        var m;
-        i(!1), (m = t.close) == null || m.call(t);
+        var h;
+        p(!1), (h = s.close) == null || h.call(s);
       },
-      socialLinks: [
-        {
-          icon: "icon-facebook",
-          link: "https://www.facebook.com/TheMasters",
-          label: "Facebook"
-        },
-        {
-          icon: "icon-twitter",
-          link: "https://twitter.com/@TheMasters",
-          label: "X"
-        }
-      ],
-      gamification: s
-    }
-  ) }) : /* @__PURE__ */ r(h, { hiding: o, children: /* @__PURE__ */ r("button", { onClick: () => i(!0), children: "go onboarding" }) });
+      socialLinks: [{
+        icon: "icon-facebook",
+        link: "https://www.facebook.com/TheMasters",
+        label: "Facebook"
+      }, {
+        icon: "icon-twitter",
+        link: "https://twitter.com/@TheMasters",
+        label: "X"
+      }],
+      gamification: i
+    })
+  });
+}, Q = ({
+  sdk: n,
+  hiding: a,
+  notification: e,
+  NotificationContainer: p
+}) => {
+  const [s, i] = y(!1), r = n.getFeature(k.GAMES), t = e.data.onboarding;
+  return s && r && t ? /* @__PURE__ */ o(L, {
+    notification: e,
+    setOpened: i,
+    gamification: r,
+    onboardingOpts: t,
+    deepLink: r.deepLink
+  }) : /* @__PURE__ */ o(p, {
+    hiding: a,
+    children: /* @__PURE__ */ o("div", {
+      children: /* @__PURE__ */ o(f, {
+        close: e.close,
+        action: () => i(!0),
+        onboarding: t
+      })
+    })
+  });
 };
 export {
-  $ as Onboarding
+  Q as Onboarding
 };

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

@@ -1,9 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useStore as c } from "@nanostores/react";
-import { useMemo as s } from "react";
-import { NotificationType as r } from "@streamlayer/sdk-web-notifications";
-import { Notification as p } from "../../gamification/question/notification/index.js";
-import { Container as n } from "./styles.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useStore as u } from "@nanostores/react";
+import { useMemo as c } from "react";
+import { NotificationType as o } from "@streamlayer/sdk-web-notifications";
+import { Notification as e } from "../../gamification/question/notification/index.js";
+import { Onboarding as s } from "./Onboarding/index.js";
+import { Container as m } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/constants.js";
 import "../../gamification/question/notification/insight/index.js";
@@ -21,19 +22,42 @@ import "../../gamification/question/notification/tweet/index.js";
 import "../../questions/twitter/account/index.js";
 import "../../questions/twitter/account/styles.js";
 import "../../gamification/question/notification/tweet/styles.js";
+import "../../gamification/onboarding/index.js";
+import "react-virtualized-auto-sizer";
+import "../../gamification/onboarding/slides/onboarding-instructions/index.js";
+import "../../lottie/index.js";
+import "@lottiefiles/react-lottie-player";
+import "../../gamification/onboarding/slides/onboarding-instructions/styles.js";
+import "../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+import "../../gamification/onboarding/slides/onboarding-rules/index.js";
+import "../../gamification/onboarding/slides/onboarding-rules/styles.js";
+import "../../gamification/onboarding/styles.js";
+import "../../button/index.js";
+import "../../button/styles.js";
 import "../../show-in/index.js";
 import "@linaria/core";
-const L = ({ sdk: e }) => {
-  const f = e.getNotificationsStore(), t = c(f), i = s(() => {
+import "./Onboarding/Notification/index.js";
+import "./Onboarding/Notification/styles.js";
+const ii = ({ sdk: p }) => {
+  const f = p.getNotificationsStore(), t = u(f), i = c(() => {
     if (!(t != null && t.size))
       return null;
-    for (const m of t.values())
-      if (m.type === r.ONBOARDING)
-        return m;
+    for (const n of t.values())
+      if (n.type === o.ONBOARDING)
+        return n;
     return t.values().next().value;
   }, [t]);
-  return (i == null ? void 0 : i.type) === r.QUESTION ? /* @__PURE__ */ o(n, { hiding: i.hiding, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(p, { ...i }) }) }) : (i == null ? void 0 : i.type) === r.QUESTION_RESOLVED ? /* @__PURE__ */ o(n, { hiding: i.hiding, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(p, { ...i }) }) }) : null;
+  return (i == null ? void 0 : i.type) === o.QUESTION ? /* @__PURE__ */ r(m, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, { ...i }) }) }) : (i == null ? void 0 : i.type) === o.QUESTION_RESOLVED ? /* @__PURE__ */ r(m, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, { ...i }) }) }) : (i == null ? void 0 : i.type) === o.ONBOARDING ? /* @__PURE__ */ r(
+    s,
+    {
+      NotificationContainer: m,
+      sdk: p,
+      notification: i,
+      hiding: i.hiding
+    }
+  ) : null;
 };
 export {
-  L as SDKNotifications
+  ii as SDKNotifications
 };

package/lib/ui/app/Notifications/styles.js

@@ -1,17 +1,12 @@
-import { styled as i } from "@linaria/react";
-import { ShowIn as o } from "../../show-in/index.js";
+import { styled as o } from "@linaria/react";
+import { ShowIn as t } from "../../show-in/index.js";
 import "react/jsx-runtime";
 import "@linaria/core";
-const d = i(o)`
-  position: relative;
-  top: var(--header-height);
-
-  animation-duration: calc(var(--animation-duration) * 3);
-
-  & > div {
-    padding: var(--container-padding);
-  }
-`;
+const r = () => t, c = /* @__PURE__ */ o(r())({
+  name: "Container",
+  class: "Container_ctckejh",
+  propsAsIs: !0
+});
 export {
-  d as Container
+  c as Container
 };

package/lib/ui/app/masters.js

@@ -9,7 +9,6 @@ import { useSdkFeature as A } from "./useSdkFeature.js";
 import { ChannelsButtonId as C } from "../navigation/button/Channels.js";
 import { LeaderBoardButtonId as s } from "../navigation/button/LeaderBoard.js";
 import { FeaturedGroupsButtonId as d } from "../navigation/button/FeaturedGroups.js";
-import "@linaria/core";
 import "../theme/constants.js";
 import "react";
 import "@streamlayer/sdk-web-types";
@@ -19,6 +18,8 @@ import "@streamlayer/sdk-web-interfaces";
 import "../navigation/masters.js";
 import "@linaria/react";
 import "../navigation/index.js";
+import "../../index_1ujx5m0-4ed993c7.js";
+import "../../masters_18kvgvj-4ed993c7.js";
 import "@streamlayer/sdk-web-notifications";
 import "../gamification/question/notification/index.js";
 import "../gamification/constants.js";
@@ -36,15 +37,33 @@ import "../gamification/question/notification/tweet/index.js";
 import "../questions/twitter/account/index.js";
 import "../questions/twitter/account/styles.js";
 import "../gamification/question/notification/tweet/styles.js";
-import "./Notifications/styles.js";
+import "./Notifications/Onboarding/index.js";
+import "../gamification/onboarding/index.js";
+import "react-virtualized-auto-sizer";
+import "../gamification/onboarding/slides/onboarding-instructions/index.js";
+import "../lottie/index.js";
+import "@lottiefiles/react-lottie-player";
+import "../gamification/onboarding/slides/onboarding-instructions/styles.js";
+import "../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+import "../gamification/onboarding/slides/onboarding-rules/index.js";
+import "../gamification/onboarding/slides/onboarding-rules/styles.js";
+import "../gamification/onboarding/styles.js";
+import "../button/index.js";
+import "../button/styles.js";
 import "../show-in/index.js";
-import "../navigation/button/index.js";
+import "@linaria/core";
+import "./Notifications/Onboarding/Notification/index.js";
+import "./Notifications/Onboarding/Notification/styles.js";
+import "./Notifications/styles.js";
 import "../navigation/button/styles.js";
-const x = ({ sdk: i, className: e }) => {
-  const [, m] = A(i);
-  return /* @__PURE__ */ o(S, { className: e, feature: m, sdk: i });
-}, ft = ({ sdk: i, overlays: e, children: m }) => {
-  const { sdkEnabled: t, sdkReady: l, activeOverlay: r, activateAndLoadOverlay: c, enableSdk: f, disableSdk: u, isLogged: p } = k(i);
+import "../../LeaderBoard_p8tnz3-4ed993c7.js";
+import "../navigation/button/index.js";
+const x = ({ sdk: i, className: m }) => {
+  const [, p] = A(i);
+  return /* @__PURE__ */ o(S, { className: m, feature: p, sdk: i });
+}, Lt = ({ sdk: i, overlays: m, children: p }) => {
+  const { sdkEnabled: t, sdkReady: l, activeOverlay: r, activateAndLoadOverlay: c, enableSdk: f, disableSdk: u, isLogged: e } = k(i);
   return /* @__PURE__ */ y(b, { children: [
     t && /* @__PURE__ */ o(
       g,
@@ -61,7 +80,7 @@ const x = ({ sdk: i, className: e }) => {
       {
         "data-nav": t.toString(),
         style: { display: !t || r === C ? "block" : "none" },
-        children: m && m({ enableSdk: f, disableSdk: u })
+        children: p && p({ enableSdk: f, disableSdk: u })
       }
     ),
     /* @__PURE__ */ o(
@@ -69,13 +88,13 @@ const x = ({ sdk: i, className: e }) => {
       {
         "data-nav": t.toString(),
         style: { display: r === s ? "block" : "none" },
-        children: e && r === s && e[r]
+        children: m && r === s && m[r]
       }
     ),
-    p && t && r === d && /* @__PURE__ */ o(x, { className: a, sdk: i }),
-    !p && t && r === d && /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
+    e && t && r === d && /* @__PURE__ */ o(x, { className: a, sdk: i }),
+    !e && t && r === d && /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
   ] });
 };
 export {
-  ft as MastersApp
+  Lt as MastersApp
 };

package/lib/ui/app/styles.js

@@ -1,39 +1,24 @@
-import { styled as t } from "@linaria/react";
-const i = t.div`
-  height: 100%;
-  background: transparent;
-  font-family: var(--font-regular);
-  position: relative;
-  min-width: 324px;
-  overflow: hidden;
-`, r = t.div`
-  width: 100%;
-  overflow-y: auto;
-  height: 100%;
-  transition: transform;
-  transition-duration: var(--animation-duration);
-  transition-timing-function: var(--animation-function);
-
-  &[data-nav='true'] {
-    height: calc(100% - var(--header-height));
-    transform: translateY(var(--header-height));
-  }
-
-  &[data-question-header='true'] {
-    height: calc(100% - var(--question-headers-height, 0%));
-    transform: translateY(var(--question-headers-height));
-  }
-`, n = t.div`
-  display: flex;
-  flex-direction: column;
-  padding: var(--container-padding);
-  gap: var(--container-padding);
-`, e = t(n)`
-  background-color: var(--color-neutrals-white);
-`;
+import { styled as n } from "@linaria/react";
+const e = /* @__PURE__ */ n("div")({
+  name: "SDKContainer",
+  class: "SDKContainer_stu11h7",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ n("div")({
+  name: "SDKScrollContainer",
+  class: "SDKScrollContainer_s1ucohr1",
+  propsAsIs: !1
+}), s = /* @__PURE__ */ n("div")({
+  name: "SDKContentContainer",
+  class: "SDKContentContainer_s1el4wvm",
+  propsAsIs: !1
+}), o = () => s, a = /* @__PURE__ */ n(o())({
+  name: "SDKWhiteContainer",
+  class: "SDKWhiteContainer_s1oe3036",
+  propsAsIs: !0
+});
 export {
-  i as SDKContainer,
-  n as SDKContentContainer,
+  e as SDKContainer,
+  s as SDKContentContainer,
   r as SDKScrollContainer,
-  e as SDKWhiteContainer
+  a as SDKWhiteContainer
 };

package/lib/ui/app/useMastersApp.js

@@ -4,13 +4,13 @@ import { FeatureType as v } from "@streamlayer/sdk-web-types";
 import "react/jsx-runtime";
 import { ChannelsButtonId as m } from "../navigation/button/Channels.js";
 import { FeaturedGroupsButtonId as o } from "../navigation/button/FeaturedGroups.js";
-import "../navigation/button/LeaderBoard.js";
-import "../navigation/masters.js";
 import "@linaria/react";
 import "../icons/index.js";
-import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-import "../navigation/index.js";
+import "../../LeaderBoard_p8tnz3-4ed993c7.js";
+import "../../index_1ujx5m0-4ed993c7.js";
+import "../../masters_18kvgvj-4ed993c7.js";
+import "../navigation/button/index.js";
 const T = (e) => {
   const [c, n] = l(!1), d = u(e.status), { data: f } = u(e.getUserStore()), a = d === "ready", [i, p] = l(o), s = b(
     (t, r) => {

package/lib/ui/button/styles.js

@@ -1,44 +1,14 @@
-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``;
+import { styled as s } from "@linaria/react";
+const o = /* @__PURE__ */ s("button")({
+  name: "SButton",
+  class: "SButton_s1nve60q",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("span")({
+  name: "ButtonLabel",
+  class: "ButtonLabel_b1xoswwx",
+  propsAsIs: !1
+});
 export {
-  e as ButtonLabel,
-  a as SButton
+  n as ButtonLabel,
+  o as SButton
 };

package/lib/ui/gamification/detail/header/styles.js

@@ -1,59 +1,37 @@
-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 a = o.div`
-  font-weight: var(--font-weight-default);
-  color: var(--color-neutrals-gray7);
-  border-bottom: 1px solid var(--color-neutrals-gray3);
-  background: var(--color-neutrals-white);
-  box-sizing: border-box;
-  width: 100%;
-  font-size: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 12px 12px 16px;
-`, l = o.div`
-  display: flex;
-  align-items: center;
-`, p = o(t)`
-  width: 16px;
-  height: 16px;
-
-  path {
-    fill: var(--color-primary-green1);
-    fill-opacity: 1;
-  }
-`, s = o.span`
-  font-family: var(--font-regular);
-  margin-left: 8px;
-`, c = o.button`
-  width: 24px;
-  height: 24px;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-`, g = o(t)`
-  path {
-    stroke: var(--color-neutrals-gray7);
-  }
-
-  &:hover {
-    path {
-      stroke: var(--color-primary-green2);
-    }
-  }
-`;
+const l = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1vwopgc",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "QuestionTypeWrap",
+  class: "QuestionTypeWrap_qyktpt0",
+  propsAsIs: !1
+}), e = () => o, r = /* @__PURE__ */ s(e())({
+  name: "QuestionTypeIcon",
+  class: "QuestionTypeIcon_q951jdx",
+  propsAsIs: !0
+}), u = /* @__PURE__ */ s("span")({
+  name: "QuestionTypeTitle",
+  class: "QuestionTypeTitle_qss5f0e",
+  propsAsIs: !1
+}), y = /* @__PURE__ */ s("button")({
+  name: "CloseButton",
+  class: "CloseButton_c1ao1jtv",
+  propsAsIs: !1
+}), t = () => o, I = /* @__PURE__ */ s(t())({
+  name: "CloseIcon",
+  class: "CloseIcon_cvsl7l3",
+  propsAsIs: !0
+});
 export {
-  c as CloseButton,
-  g as CloseIcon,
-  a as Container,
-  p as QuestionTypeIcon,
-  s as QuestionTypeTitle,
-  l as QuestionTypeWrap
+  y as CloseButton,
+  I as CloseIcon,
+  l as Container,
+  r as QuestionTypeIcon,
+  u as QuestionTypeTitle,
+  i as QuestionTypeWrap
 };

package/lib/ui/gamification/detail/sponsor/index.js

@@ -1,14 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
-import { styled as p } from "@linaria/react";
-const r = p.div`
-  width: 100%;
-  height: 53px;
-  display: flex;
-  padding: 16px 0px;
-  justify-content: center;
-`, i = p.img`
-  max-width: 20px;
-`, d = ({ sponsorLogo: o }) => o && /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(i, { alt: "sponsor-logo", src: o }) });
+import { jsx as s } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
+const p = /* @__PURE__ */ r("div")({
+  name: "SponsorLogoWrap",
+  class: "SponsorLogoWrap_s8p5v5z",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ r("img")({
+  name: "SponsorLogo",
+  class: "SponsorLogo_s755yti",
+  propsAsIs: !1
+}), c = ({
+  sponsorLogo: o
+}) => o && /* @__PURE__ */ s(p, {
+  children: /* @__PURE__ */ s(n, {
+    alt: "sponsor-logo",
+    src: o
+  })
+});
 export {
-  d as Sponsor
+  c as Sponsor
 };