@streamlayer/react-ui 0.93.0 → 0.95.0

package/lib/ui/gamification/vote/insight-details/index.js

@@ -1,20 +1,19 @@
 import { jsxs as o, jsx as m } from "react/jsx-runtime";
-import { SvgIcon as l } from "../../../icons/index.js";
+import { SvgIcon as p } from "../../../icons/index.js";
 import { InsightContent as b } from "../../../questions/insight/index.js";
 import { Container as k, WebLinkBtn as c } from "./styles.js";
 import "@linaria/react";
 import "react";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
-import "../../../../utils/common.js";
 import "../../../questions/insight/styles.js";
-const C = ({ instantView: r, ...p }) => /* @__PURE__ */ o(k, { children: [
-  /* @__PURE__ */ m(b, { instantView: r, ...p, isDetail: !0 }),
+const j = ({ instantView: r, ...l }) => /* @__PURE__ */ o(k, { children: [
+  /* @__PURE__ */ m(b, { instantView: r, ...l, isDetail: !0 }),
   (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(c, { href: r == null ? void 0 : r.webLink.url, target: "_blank", children: [
     r == null ? void 0 : r.webLink.label,
-    /* @__PURE__ */ m(l, { name: "icon-external-link" })
+    /* @__PURE__ */ m(p, { name: "icon-external-link" })
   ] })
 ] });
 export {
-  C as InsightDetails
+  j as InsightDetails
 };

package/lib/ui/gamification/vote/twitter-details/index.js

@@ -1,35 +1,19 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import { TwitterContent as a } from "../../../questions/twitter/index.js";
-import { isValidDate as f, formatDate as l, formatTime as p } from "../../../../utils/common.js";
-import { Container as s, DateTime as d, Quote as u } from "./styles.js";
-import "../../../questions/twitter/account/index.js";
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { TwitterContent as o } from "../../../questions/twitter/index.js";
+import { Container as m, Quote as e } from "./styles.js";
+import "../../../video-player/index.js";
+import "react";
 import "../../../icons/index.js";
 import "@linaria/react";
+import "../../../video-player/styles.js";
+import "../../../questions/twitter/account/index.js";
+import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
-const V = ({ created: t, ...i }) => {
-  const e = n(() => {
-    if (t) {
-      const r = new Date(t);
-      if (f(r))
-        return {
-          date: l(r),
-          time: p(r)
-        };
-    }
-    return null;
-  }, [t]);
-  return /* @__PURE__ */ m(s, { children: [
-    e && /* @__PURE__ */ m(d, { children: [
-      e.date,
-      " · ",
-      e.time
-    ] }),
-    i.title && /* @__PURE__ */ o(u, { children: i.title }),
-    /* @__PURE__ */ o(a, { ...i })
-  ] });
-};
+const w = (t) => /* @__PURE__ */ r(m, { children: [
+  t.title && /* @__PURE__ */ i(e, { children: t.title }),
+  /* @__PURE__ */ i(o, { ...t, isDetail: !0 })
+] });
 export {
-  V as TwitterDetails
+  w as TwitterDetails
 };

package/lib/ui/gamification/vote/twitter-details/styles.d.ts

@@ -1,4 +1,3 @@
 /// <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 DateTime: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;

package/lib/ui/gamification/vote/twitter-details/styles.js

@@ -1,19 +1,14 @@
 import { styled as s } from "@linaria/react";
-const o = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1dcxmvf",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("div")({
-  name: "DateTime",
-  class: "db4q22c",
-  propsAsIs: !1
 }), t = /* @__PURE__ */ s("blockquote")({
   name: "Quote",
-  class: "q111mmic",
+  class: "qb4q22c",
   propsAsIs: !1
 });
 export {
-  o as Container,
-  a as DateTime,
+  e as Container,
   t as Quote
 };

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type ModalProps = {
+    Modal: React.ReactNode;
+    container: React.MutableRefObject<HTMLDivElement | null>;
+    fixedView: boolean;
+    useContainer: boolean;
+};
+export declare const createModal: ({ Modal, container, fixedView, useContainer }: ModalProps) => import("react").ReactPortal | null;
+export {};

package/lib/ui/modal/index.js

@@ -0,0 +1,34 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cx as l } from "@linaria/core";
+import { styled as m } from "@linaria/react";
+import { r as n } from "../../index-jRXrW6ie.js";
+import "../../index-uEuzH3jr.js";
+import "react";
+const c = /* @__PURE__ */ m("div")({
+  name: "StaticContainer",
+  class: "svm502q",
+  propsAsIs: !1
+}), i = "fd3gza8", d = `
+  body {
+    overflow: hidden !important;
+  }
+`, p = `
+  .sl-hide-on-modal {
+    display: none !important;
+  }
+`, C = ({
+  Modal: o,
+  container: t,
+  fixedView: r,
+  useContainer: s
+}) => t.current ? s ? n.createPortal(/* @__PURE__ */ a(c, {
+  className: l(r && i),
+  children: [o, r && /* @__PURE__ */ e("style", {
+    children: d
+  }), !r && /* @__PURE__ */ e("style", {
+    children: p
+  })]
+}), t.current, "modal-node") : n.createPortal(o, t.current, "modal-node") : null;
+export {
+  C as createModal
+};

package/lib/ui/navigation/button/FeaturedGroups.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { ButtonProps } from '.';
 export declare const FeaturedGroupsButtonId = "featuredGroups";
-export declare const FeaturedGroupsButton: React.FC<Omit<ButtonProps, 'label' | 'id' | 'icon'>>;
+export declare const FeaturedGroupsButton: React.FC<Omit<ButtonProps, 'label' | 'id' | 'icon'> & {
+    labelFull: boolean;
+}>;

package/lib/ui/navigation/button/FeaturedGroups.js

@@ -1,26 +1,26 @@
-import { jsx as r } from "react/jsx-runtime";
-import { styled as e } from "@linaria/react";
-import { SvgIcon as n } from "../../icons/index.js";
-import { Button as s } from "./index.js";
+import { jsx as e } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
+import { SvgIcon as u } from "../../icons/index.js";
+import { Button as n } from "./index.js";
 import "react";
 import "./styles.js";
-const u = () => n, c = /* @__PURE__ */ e(u())({
+const s = () => u, a = /* @__PURE__ */ r(s())({
   name: "ButtonIcon",
   class: "b11des7c",
   propsAsIs: !0
-}), l = "featuredGroups", B = (t) => {
+}), f = "featuredGroups", G = (t) => {
   var o;
-  return /* @__PURE__ */ r(s, {
+  return /* @__PURE__ */ e(n, {
     ...t,
-    label: "FG+",
+    label: t.labelFull ? "Featured Groups +" : "FG+",
     id: "featuredGroups",
-    icon: /* @__PURE__ */ r(c, {
+    icon: /* @__PURE__ */ e(a, {
       name: "icon-btn-feature-groups",
       "data-selected": (o = t.active) == null ? void 0 : o.toString()
     })
   });
 };
 export {
-  B as FeaturedGroupsButton,
-  l as FeaturedGroupsButtonId
+  G as FeaturedGroupsButton,
+  f as FeaturedGroupsButtonId
 };

package/lib/ui/questions/insight/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { InsightHistory, FeedItem } from '@streamlayer/sdk-web-types';
+import { InsightHistory } from '@streamlayer/sdk-web-types';
 export type InsightContentProps = InsightHistory & {
-    created?: FeedItem['created'];
     isDetail?: boolean;
 };
 export declare const InsightContent: React.FC<InsightContentProps>;

package/lib/ui/questions/insight/index.js

@@ -1,37 +1,21 @@
-import { jsxs as e, jsx as m } from "react/jsx-runtime";
-import { useMemo as T } from "react";
-import { VideoPlayer as v } from "../../video-player/index.js";
-import { isValidDate as b, formatDate as f, formatTime as x } from "../../../utils/common.js";
-import { Container as C, DateWrap as I, Image as j, Content as B, Title as M, Description as P } from "./styles.js";
+import { jsxs as c, jsx as d } from "react/jsx-runtime";
+import { VideoPlayer as u } from "../../video-player/index.js";
+import { Container as v, Image as b, Content as x, Title as C, Description as I } from "./styles.js";
+import "react";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
-const G = ({ created: d, instantView: r, isDetail: h, notification: o }) => {
-  const l = T(() => {
-    if (d) {
-      const p = new Date(d);
-      if (b(p))
-        return {
-          date: f(p),
-          time: x(p)
-        };
-    }
-    return null;
-  }, [d]), u = r == null ? void 0 : r.heading, c = r == null ? void 0 : r.body, g = u || c, y = o == null ? void 0 : o.title, D = o == null ? void 0 : o.body;
-  return /* @__PURE__ */ e(C, { children: [
-    l && /* @__PURE__ */ e(I, { children: [
-      l.date,
-      " · ",
-      l.time
-    ] }),
-    (r == null ? void 0 : r.video) && /* @__PURE__ */ m(v, { source: r.video.url, poster: r.video.thumbnailUrl }),
-    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ m(j, { src: r == null ? void 0 : r.image }),
-    /* @__PURE__ */ e(B, { children: [
-      /* @__PURE__ */ m(M, { children: h && g ? u : y }),
-      /* @__PURE__ */ m(P, { children: h && g ? c : D })
+const q = ({ instantView: r, isDetail: l, notification: o }) => {
+  const m = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = m || p, g = o == null ? void 0 : o.title, y = o == null ? void 0 : o.body;
+  return /* @__PURE__ */ c(v, { children: [
+    (r == null ? void 0 : r.video) && /* @__PURE__ */ d(u, { source: r.video.url, poster: r.video.thumbnailUrl }),
+    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(b, { src: r == null ? void 0 : r.image }),
+    /* @__PURE__ */ c(x, { children: [
+      /* @__PURE__ */ d(C, { children: l && h ? m : g }),
+      /* @__PURE__ */ d(I, { children: l && h ? p : y })
     ] })
   ] });
 };
 export {
-  G as InsightContent
+  q as InsightContent
 };

package/lib/ui/questions/insight/styles.d.ts

@@ -3,5 +3,4 @@ export declare const Container: import("@linaria/react").StyledComponent<import(
 export declare const Content: 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<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & 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 DateWrap: 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>>;

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

@@ -1,13 +1,13 @@
 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const n = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cgn5uen",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1px8nt6",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("h3")({
+}), a = /* @__PURE__ */ s("h3")({
   name: "Title",
   class: "t5et2jt",
   propsAsIs: !1
@@ -15,20 +15,15 @@ const a = /* @__PURE__ */ s("div")({
   name: "Description",
   class: "d1i2kpk2",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
-  name: "DateWrap",
-  class: "dd3lh3p",
-  propsAsIs: !1
-}), c = /* @__PURE__ */ s("img")({
+}), p = /* @__PURE__ */ s("img")({
   name: "Image",
-  class: "i1gfjeu5",
+  class: "id3lh3p",
   propsAsIs: !1
 });
 export {
-  a as Container,
-  n as Content,
-  p as DateWrap,
+  n as Container,
+  t as Content,
   o as Description,
-  c as Image,
-  t as Title
+  p as Image,
+  a as Title
 };

package/lib/ui/questions/twitter/account/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 export type AccountProps = {
     image: string;
-    name: string;
+    name: string | undefined;
     userName: string;
     verified: boolean;
+    createdTweet?: string;
 };
 export declare const Account: React.FC<AccountProps>;

package/lib/ui/questions/twitter/account/index.js

@@ -1,25 +1,31 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { SvgIcon as c } from "../../../icons/index.js";
-import { Container as m, ImageContainer as a, Image as d, TwitterIcon as l, Details as p, Name as s, UserName as h } from "./styles.js";
+import { SvgIcon as a } from "../../../icons/index.js";
+import { getTimeUntilNow as l } from "../../../../utils/common.js";
+import { Container as p, ImageContainer as s, Image as d, TwitterIcon as f, Details as h, Name as D, UserNameAndDate as I } from "./styles.js";
 import "@linaria/react";
 import "react";
-const j = ({ image: e, name: n, userName: i, verified: o }) => /* @__PURE__ */ r(m, { children: [
-  e && /* @__PURE__ */ r(a, { children: [
-    /* @__PURE__ */ t(d, { src: e }),
-    /* @__PURE__ */ t(l, { name: "twitter" })
-  ] }),
-  /* @__PURE__ */ r(p, { children: [
-    /* @__PURE__ */ r(s, { children: [
-      n,
-      " ",
-      o && /* @__PURE__ */ t(c, { name: "icon-twitter-verified" })
+const C = ({ image: i, name: o, userName: e, verified: c, createdTweet: n }) => {
+  const m = n && l(n);
+  return /* @__PURE__ */ r(p, { children: [
+    i && /* @__PURE__ */ r(s, { children: [
+      /* @__PURE__ */ t(d, { src: i }),
+      /* @__PURE__ */ t(f, { name: "twitter" })
     ] }),
-    i && /* @__PURE__ */ r(h, { children: [
-      "@",
-      i
+    /* @__PURE__ */ r(h, { children: [
+      o && /* @__PURE__ */ r(D, { children: [
+        o,
+        " ",
+        c && /* @__PURE__ */ t(a, { name: "icon-twitter-verified" })
+      ] }),
+      e && /* @__PURE__ */ r(I, { children: [
+        "@",
+        e,
+        " ",
+        m && `･ ${m}`
+      ] })
     ] })
-  ] })
-] });
+  ] });
+};
 export {
-  j as Account
+  C as Account
 };

package/lib/ui/questions/twitter/account/styles.d.ts

@@ -5,4 +5,4 @@ export declare const Image: import("@linaria/react").StyledComponent<import("rea
 export declare const TwitterIcon: any;
 export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const UserName: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const UserNameAndDate: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/questions/twitter/account/styles.js

@@ -27,7 +27,7 @@ const m = /* @__PURE__ */ s("div")({
   class: "nrxa4k8",
   propsAsIs: !1
 }), g = /* @__PURE__ */ s("div")({
-  name: "UserName",
+  name: "UserNameAndDate",
   class: "u1p051g3",
   propsAsIs: !1
 });
@@ -38,5 +38,5 @@ export {
   c as ImageContainer,
   I as Name,
   p as TwitterIcon,
-  g as UserName
+  g as UserNameAndDate
 };

package/lib/ui/questions/twitter/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { TweetHistory, FeedItem } from '@streamlayer/sdk-web-types';
+import { TweetHistory } from '@streamlayer/sdk-web-types';
 export type TwitterContentProps = TweetHistory & {
-    created?: FeedItem['created'];
+    isDetail?: boolean;
 };
 export declare const TwitterContent: React.FC<TwitterContentProps>;

package/lib/ui/questions/twitter/index.js

@@ -1,14 +1,67 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { Account as s } from "./account/index.js";
-import { Container as m, Details as p, Body as c } from "./styles.js";
+import { jsxs as t, jsx as n, Fragment as T } from "react/jsx-runtime";
+import { VideoPlayer as j } from "../../video-player/index.js";
+import { Account as k } from "./account/index.js";
+import { Container as x, Details as B, Body as E, ImagesContainer as c, ImageFullSize as i, ImageHalfSize as e, ImagesBlock as m } from "./styles.js";
+import "react";
 import "../../icons/index.js";
 import "@linaria/react";
-import "react";
+import "../../video-player/styles.js";
+import "../../../utils/common.js";
 import "./account/styles.js";
-const a = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), d = (r) => r == null ? void 0 : r.replace(a, ""), j = ({ image: r, body: o, account: i, accountVerified: t }) => /* @__PURE__ */ e(m, { children: /* @__PURE__ */ n(p, { children: [
-  /* @__PURE__ */ e(s, { image: r, name: i, userName: i, verified: t }),
-  /* @__PURE__ */ e(c, { children: d(o) })
-] }) });
+const N = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), R = (o) => o == null ? void 0 : o.replace(N, ""), G = ({
+  image: o,
+  body: C,
+  account: z,
+  accountVerified: F,
+  tweet: s,
+  isDetail: a
+}) => {
+  var h, g, H, U, f, u, v, I, y;
+  const r = (g = (h = s == null ? void 0 : s.meta) == null ? void 0 : h.extendedEntities) == null ? void 0 : g.media, l = r == null ? void 0 : r.find(({ type: p }) => p === "photo"), d = (u = (f = (U = (H = r == null ? void 0 : r[0]) == null ? void 0 : H.videoInfo) == null ? void 0 : U.variants) == null ? void 0 : f.find(
+    ({ contentType: p }) => p === "video/mp4"
+  )) == null ? void 0 : u.url;
+  return /* @__PURE__ */ t(x, { children: [
+    /* @__PURE__ */ t(B, { children: [
+      /* @__PURE__ */ n(
+        k,
+        {
+          image: o,
+          name: (v = s == null ? void 0 : s.meta) == null ? void 0 : v.accountName,
+          userName: z,
+          verified: F,
+          createdTweet: s == null ? void 0 : s.date
+        }
+      ),
+      /* @__PURE__ */ n(E, { children: R(C) }),
+      !a && l && /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(i, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
+      a && l && /* @__PURE__ */ t(T, { children: [
+        (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(i, { src: r[0].mediaUrlHttps }) }),
+        (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ t(c, { children: [
+          /* @__PURE__ */ n(e, { src: r[0].mediaUrlHttps }),
+          /* @__PURE__ */ n(e, { src: r[1].mediaUrlHttps })
+        ] }),
+        (r == null ? void 0 : r.length) === 3 && /* @__PURE__ */ t(c, { children: [
+          /* @__PURE__ */ n(e, { src: r[0].mediaUrlHttps }),
+          /* @__PURE__ */ t(m, { children: [
+            /* @__PURE__ */ n(i, { src: r[1].mediaUrlHttps }),
+            /* @__PURE__ */ n(i, { src: r[2].mediaUrlHttps })
+          ] })
+        ] }),
+        (r == null ? void 0 : r.length) === 4 && /* @__PURE__ */ t(c, { children: [
+          /* @__PURE__ */ t(m, { children: [
+            /* @__PURE__ */ n(i, { src: r[0].mediaUrlHttps }),
+            /* @__PURE__ */ n(i, { src: r[1].mediaUrlHttps })
+          ] }),
+          /* @__PURE__ */ t(m, { children: [
+            /* @__PURE__ */ n(i, { src: r[2].mediaUrlHttps }),
+            /* @__PURE__ */ n(i, { src: r[3].mediaUrlHttps })
+          ] })
+        ] })
+      ] })
+    ] }),
+    !l && (((I = r == null ? void 0 : r[0]) == null ? void 0 : I.type) === "video" || ((y = r == null ? void 0 : r[0]) == null ? void 0 : y.type) === "animated_gif") && d && /* @__PURE__ */ n(j, { source: d, poster: r[0].mediaUrlHttps })
+  ] });
+};
 export {
-  j as TwitterContent
+  G as TwitterContent
 };

package/lib/ui/questions/twitter/styles.d.ts

@@ -2,3 +2,12 @@
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Body: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ImagesContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ImagesBlock: 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 ImageFullSize: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}>;
+export declare const ImageHalfSize: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}>;

package/lib/ui/questions/twitter/styles.js

@@ -1,19 +1,44 @@
 import { styled as s } from "@linaria/react";
-const e = /* @__PURE__ */ s("div")({
+const l = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1kzqw87",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Details",
   class: "d9r1hf9",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "bezygt5",
   propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "ImagesContainer",
+  class: "i1y8f7ym",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "ImagesBlock",
+  class: "i18gwonx",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "i3g0xjd",
+  propsAsIs: !1
+}), a = () => e, p = /* @__PURE__ */ s(a())({
+  name: "ImageFullSize",
+  class: "io8rt7p",
+  propsAsIs: !0
+}), o = () => e, r = /* @__PURE__ */ s(o())({
+  name: "ImageHalfSize",
+  class: "i4hn3ox",
+  propsAsIs: !0
 });
 export {
-  t as Body,
-  e as Container,
-  o as Details
+  i as Body,
+  l as Container,
+  t as Details,
+  e as Image,
+  p as ImageFullSize,
+  r as ImageHalfSize,
+  c as ImagesBlock,
+  m as ImagesContainer
 };

package/lib/ui/theme/constants.d.ts

@@ -80,6 +80,7 @@ export declare const FONT: {
     WEIGHT_DEFAULT: string;
 };
 export declare const BREAKPOINTS: {
+    xs: number;
     sm: number;
     md: number;
     lg: number;

package/lib/ui/theme/constants.js

@@ -55,11 +55,12 @@ const N = {
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
 }, O = {
+  xs: 324,
   sm: 576,
   md: 768,
   lg: 992,
-  xl: 1200,
-  xxl: 1400
+  xl: 1215,
+  xxl: 1440
 }, G = {
   landscape: "landscape",
   portrait: "portrait"