@streamlayer/react-ui 0.92.0 → 0.94.0

package/lib/ui/navigation/masters.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare const Navigation: import("@linaria/react").WYWEvalMeta & import("react").FC<{
+export declare const Navigation: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NavigationItems: import("@linaria/react").WYWEvalMeta & import("react").FC<{
     children: import("react").ReactElement<import("./button").ButtonProps, string | import("react").JSXElementConstructor<any>>[];
     className?: string | undefined;
 }>;

package/lib/ui/navigation/masters.js

@@ -1,11 +1,16 @@
-import { styled as o } from "@linaria/react";
-import { Navigation as a } from "./index.js";
+import { styled as a } from "@linaria/react";
+import { Navigation as s } from "./index.js";
 import "react/jsx-runtime";
-const t = () => a, p = /* @__PURE__ */ o(t())({
+const p = /* @__PURE__ */ a("div")({
   name: "Navigation",
   class: "n19lpak2",
+  propsAsIs: !1
+}), o = () => s, e = /* @__PURE__ */ a(o())({
+  name: "NavigationItems",
+  class: "n1w473c2",
   propsAsIs: !0
 });
 export {
-  p as Navigation
+  p as Navigation,
+  e as NavigationItems
 };

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'];
-    isPickHistory?: boolean;
+    isDetail?: boolean;
 };
 export declare const InsightContent: React.FC<InsightContentProps>;

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

@@ -1,43 +1,21 @@
-import { jsxs as h, jsx as m } from "react/jsx-runtime";
-import { useMemo as f } from "react";
-import { VideoPlayer as g } from "../../video-player/index.js";
-import { isValidDate as D, formatDate as c, formatTime as v } from "../../../utils/common.js";
-import { Container as b, DateWrap as x, Image as C, Content as T, Title as j, Description as y } 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 E = ({
-  created: o,
-  title: e,
-  isPickHistory: u,
-  instantView: r,
-  notification: d
-}) => {
-  const l = f(() => {
-    if (o) {
-      const p = new Date(o);
-      if (D(p))
-        return {
-          date: c(p),
-          time: v(p)
-        };
-    }
-    return null;
-  }, [o]);
-  return /* @__PURE__ */ h(b, { children: [
-    l && /* @__PURE__ */ h(x, { children: [
-      l.date,
-      " · ",
-      l.time
-    ] }),
-    (r == null ? void 0 : r.video) && /* @__PURE__ */ m(g, { source: r.video.url, poster: r.video.thumbnailUrl }),
-    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ m(C, { src: r == null ? void 0 : r.image }),
-    /* @__PURE__ */ h(T, { children: [
-      /* @__PURE__ */ m(j, { children: u ? e : r == null ? void 0 : r.heading }),
-      /* @__PURE__ */ m(y, { children: u ? d == null ? void 0 : d.body : r == null ? void 0 : r.body })
+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 {
-  E 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,36 @@
-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 l, jsx as n } from "react/jsx-runtime";
+import { VideoPlayer as v } from "../../video-player/index.js";
+import { Account as y } from "./account/index.js";
+import { Container as C, Details as T, Body as U, Image as j } 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 x = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), D = (i) => i == null ? void 0 : i.replace(x, ""), L = ({ image: i, body: f, account: h, accountVerified: u, tweet: o }) => {
+  var s, m, t, a, c, e, d;
+  const r = (m = (s = o == null ? void 0 : o.meta) == null ? void 0 : s.extendedEntities) == null ? void 0 : m.media, p = (e = (c = (a = (t = r == null ? void 0 : r[0]) == null ? void 0 : t.videoInfo) == null ? void 0 : a.variants) == null ? void 0 : c.find(
+    ({ contentType: g }) => g === "video/mp4"
+  )) == null ? void 0 : e.url;
+  return /* @__PURE__ */ l(C, { children: [
+    /* @__PURE__ */ l(T, { children: [
+      /* @__PURE__ */ n(
+        y,
+        {
+          image: i,
+          name: (d = o == null ? void 0 : o.meta) == null ? void 0 : d.accountName,
+          userName: h,
+          verified: u,
+          createdTweet: o == null ? void 0 : o.date
+        }
+      ),
+      /* @__PURE__ */ n(U, { children: D(f) }),
+      (r == null ? void 0 : r.length) && r[0].type === "photo" && /* @__PURE__ */ n(j, { src: r[0].mediaUrlHttps })
+    ] }),
+    (r == null ? void 0 : r.length) && (r[0].type === "video" || r[0].type === "animated_gif") && p && /* @__PURE__ */ n(v, { source: p, poster: r[0].mediaUrlHttps })
+  ] });
+};
 export {
-  j as TwitterContent
+  L as TwitterContent
 };

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

@@ -2,3 +2,4 @@
 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 Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

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

@@ -7,13 +7,18 @@ const e = /* @__PURE__ */ s("div")({
   name: "Details",
   class: "d9r1hf9",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "bezygt5",
   propsAsIs: !1
+}), t = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "i1y8f7ym",
+  propsAsIs: !1
 });
 export {
-  t as Body,
+  n as Body,
   e as Container,
-  o as Details
+  o as Details,
+  t as Image
 };

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type SkeletonProps = {
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    loading: boolean;
+};
+export declare const Skeleton: React.FC<SkeletonProps>;

package/lib/ui/skeleton/index.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Container as m } from "./styles.js";
+import "@linaria/react";
+const f = ({ children: r, style: o, loading: t }) => t ? /* @__PURE__ */ e(m, { style: o, children: r }) : r;
+export {
+  f as Skeleton
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/skeleton/styles.js

@@ -0,0 +1,9 @@
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cqg02m",
+  propsAsIs: !1
+});
+export {
+  e as Container
+};

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

@@ -1,6 +1,9 @@
-import { BREAKPOINTS } from './constants';
+import { BREAKPOINTS, ORIENTATION } from './constants';
 export type Breakpoints = keyof typeof BREAKPOINTS;
+export type Orientation = keyof typeof ORIENTATION;
 export declare const breakpoints: {
     up: (key: Breakpoints) => (styles: TemplateStringsArray) => string;
     down: (key: Breakpoints) => (styles: TemplateStringsArray) => string;
+    intermediate: (down: Breakpoints, up: Breakpoints) => (styles: TemplateStringsArray) => string;
+    orientation: (key: Orientation) => (styles: TemplateStringsArray) => string;
 };

package/lib/ui/theme/breakpoints.js

@@ -1,18 +1,30 @@
-import { BREAKPOINTS as e } from "./constants.js";
-const i = (t) => (n) => `
-  @media (${t}) {
-    ${n}
+import { BREAKPOINTS as e, ORIENTATION as a } from "./constants.js";
+const r = (n) => (t) => `
+  @media only screen and (${n}) {
+    ${t}
   }
-`, o = {
-  up: (t) => {
-    const n = e[t];
-    return i(`min-width: ${n}px`);
+`, d = (n, t) => (i) => `
+  @media only screen and (${n}) and (${t}) {
+    ${i}
+  }
+`, s = {
+  up: (n) => {
+    const t = e[n];
+    return r(`min-width: ${t}px`);
+  },
+  down: (n) => {
+    const t = e[n] - 1;
+    return r(`max-width: ${t}px`);
+  },
+  intermediate: (n, t) => {
+    const i = e[n] - 1, o = e[t];
+    return d(`max-width: ${i}px`, `min-width: ${o}px`);
   },
-  down: (t) => {
-    const n = e[t] - 1;
-    return i(`max-width: ${n}px`);
+  orientation: (n) => {
+    const t = a[n];
+    return r(`orientation: ${t}`);
   }
 };
 export {
-  o as breakpoints
+  s as breakpoints
 };

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

@@ -86,4 +86,8 @@ export declare const BREAKPOINTS: {
     xl: number;
     xxl: number;
 };
+export declare const ORIENTATION: {
+    landscape: string;
+    portrait: string;
+};
 export declare const colors: string;

package/lib/ui/theme/constants.js

@@ -60,7 +60,10 @@ const N = {
   lg: 992,
   xl: 1200,
   xxl: 1400
-}, G = Object.keys(E).reduce((A, R) => {
+}, G = {
+  landscape: "landscape",
+  portrait: "portrait"
+}, B = Object.keys(E).reduce((A, R) => {
   const _ = E[R];
   return `
     ${A}
@@ -72,5 +75,6 @@ export {
   E as COLORS,
   S as FONT,
   T as MASTERS_COLORS,
-  G as colors
+  G as ORIENTATION,
+  B as colors
 };

package/lib/ui/theme/index.js

@@ -1,7 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import { theme as a } from "./theme.js";
+import { theme as o } from "./theme.js";
+import "./breakpoints.js";
 import "./constants.js";
-const s = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: a, style: m, children: r }) });
+const p = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: o, style: m, children: r }) });
 export {
-  s as StreamLayerThemeProvider
+  p as StreamLayerThemeProvider
 };

package/lib/ui/theme/theme.js

@@ -1,36 +1,44 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { colors as l, FONT as t } from "./constants.js";
-const s = `
-  ${l}
-  --font-family: ${t.REGULAR};
-  --font-regular: ${t.REGULAR};
-  --font-color: ${t.COLOR};
-  --font-serif: ${t.SERIF};
-  --font-weight-default: ${t.WEIGHT_DEFAULT};
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { breakpoints as d } from "./breakpoints.js";
+import { colors as s, FONT as e } from "./constants.js";
+const h = `
+  ${s}
+  --font-family: ${e.REGULAR};
+  --font-regular: ${e.REGULAR};
+  --font-color: ${e.COLOR};
+  --font-serif: ${e.SERIF};
+  --font-weight-default: ${e.WEIGHT_DEFAULT};
 
+  --header-offset: 0px;
   --header-height: 68px;
   --animation-duration: 0.5s;
   --animation-function: ease;
   --container-padding: 16px;
   --border-radius: 8px;
   --pill-offset: 0px;
-`, c = "StreamLayerCSSReset", m = "ttkj0ah", f = () => /* @__PURE__ */ e("table", {
+  --max-width: 600px;
+  --max-notifications-width: 400px;
+
+  ${d.down("xl")`
+    --header-offset: 56px;
+  `}
+`, m = "StreamLayerCSSReset", p = "ttkj0ah", x = () => /* @__PURE__ */ t("table", {
   children: /* @__PURE__ */ r("table", {
-    children: [/* @__PURE__ */ e("thead", {
+    children: [/* @__PURE__ */ t("thead", {
       children: /* @__PURE__ */ r("tr", {
-        children: [/* @__PURE__ */ e("th", {
+        children: [/* @__PURE__ */ t("th", {
           children: "name"
-        }), /* @__PURE__ */ e("th", {
+        }), /* @__PURE__ */ t("th", {
           children: "value"
         })]
       })
-    }), /* @__PURE__ */ e("tbody", {
-      children: s.split(";").map((i) => {
+    }), /* @__PURE__ */ t("tbody", {
+      children: h.split(";").map((i) => {
         const n = i.trim(), [o, a] = n.split(":");
         return /* @__PURE__ */ r("tr", {
-          children: [/* @__PURE__ */ e("td", {
+          children: [/* @__PURE__ */ t("td", {
             children: o
-          }), /* @__PURE__ */ e("td", {
+          }), /* @__PURE__ */ t("td", {
             children: a
           })]
         }, n);
@@ -39,8 +47,8 @@ const s = `
   })
 });
 export {
-  f as ThemeVariables,
-  c as resetCss,
-  m as theme,
-  s as themeStr
+  x as ThemeVariables,
+  m as resetCss,
+  p as theme,
+  h as themeStr
 };

package/lib/utils/common.js

@@ -1,15 +1,29 @@
-const o = (t) => t.split(/\s+/).map((e) => e[0]).join("").toUpperCase(), i = (t) => t ? t.toLocaleString("en-US") : "0", a = (t) => t.toLocaleDateString("en-US", {
+const I = (t) => t.split(/\s+/).map((n) => n[0]).join("").toUpperCase(), s = (t) => t ? t.toLocaleString("en-US") : "0", S = (t) => t.toLocaleDateString("en-US", {
   weekday: "short",
   month: "short",
   day: "numeric"
-}), n = (t) => t.toLocaleTimeString("en-US", {
+}), N = (t) => t.toLocaleTimeString("en-US", {
   hour: "2-digit",
   minute: "2-digit"
-}), r = (t) => !isNaN(t.getTime());
+}), c = (t) => !isNaN(t.getTime()), L = (t) => {
+  const o = new Date(t);
+  if (!o)
+    return "";
+  const r = /* @__PURE__ */ new Date(), e = Math.floor(r.getTime() - o.getTime());
+  return e < 6e4 ? `${Math.floor(e / 1e3)}s` : e < 36e5 ? `${Math.floor(e / 6e4)}m` : e < 864e5 ? `${Math.floor(e / 36e5)}h` : o.getFullYear() === r.getFullYear() ? `${o.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  })}` : `${o.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "2-digit"
+  })}`;
+};
 export {
-  o as abbreviate,
-  a as formatDate,
-  i as formatDecimals,
-  n as formatTime,
-  r as isValidDate
+  I as abbreviate,
+  S as formatDate,
+  s as formatDecimals,
+  N as formatTime,
+  L as getTimeUntilNow,
+  c as isValidDate
 };

package/lib/utils/decorators/container.js

@@ -2,10 +2,11 @@ import { jsx as r } from "react/jsx-runtime";
 import { StreamLayerThemeProvider as o } from "../../ui/theme/index.js";
 import { AppContainer as t } from "./styles.js";
 import "../../ui/theme/theme.js";
+import "../../ui/theme/breakpoints.js";
 import "../../ui/theme/constants.js";
 import "@linaria/react";
-const h = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(e, {}) }), a = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
+const a = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(e, {}) }), l = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
 export {
-  a as container,
-  h as theme
+  l as container,
+  a as theme
 };