@streamlayer/react-ui 0.91.1 → 0.93.0

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

@@ -1,83 +1,87 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { QuestionImages as a, QuestionType as i, QuestionStatus as h } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as P } from "../../../animated-counter/index.js";
-import { IconDefault as B, IconContainer as V, IconWrap as b, IconCircle as j, ButtonContainer as U, ButtonPct as $, ButtonBody as M, Title as W, Pts as y, Indicators as z, CheckIcon as F, Percentage as G } from "./styles.js";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { useState as b, useLayoutEffect as j } from "react";
+import { QuestionImages as a, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as U } from "../../../animated-counter/index.js";
+import { IconDefault as $, IconContainer as y, IconWrap as F, IconCircle as M, ButtonContainer as W, ButtonPct as z, ButtonBody as G, Title as H, Pts as J, Indicators as K, CheckIcon as X, Percentage as Y } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
-import "react";
-const f = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e(B, { alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(b, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ e(j, { alt: "option-icon", src: t }),
+const I = {
+  [a.CENTERED]: (t) => /* @__PURE__ */ n($, { alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n(F, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ n(M, { alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, H = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: o }) => {
-  if (t === i.POLL && r)
+}, Z = ({ questionType: t, hasCorrectAnswer: c, correct: r, youVoted: i, questionVoted: e }) => {
+  if (t === o.POLL && i)
     return "correct";
-  if (t === i.PREDICTION) {
-    if (c && o)
-      return r ? n ? "correct" : "incorrect" : "unset";
-    if (r)
+  if (t === o.PREDICTION) {
+    if (c && e)
+      return i ? r ? "correct" : "incorrect" : "unset";
+    if (i)
       return "correct";
   }
-  return t === i.TRIVIA && o && r ? n ? "correct" : "incorrect" : "unset";
-}, J = ({
+  return t === o.TRIVIA && e && i ? r ? "correct" : "incorrect" : "unset";
+}, _ = ({
   questionType: t,
   questionVoted: c,
-  correct: n,
-  hasCorrectAnswer: r,
-  questionStatus: o
-}) => t === i.TRIVIA ? c && n : t === i.PREDICTION ? c && n && r || o === h.RESOLVED && n : !1, rt = (t) => {
-  var D;
+  correct: r,
+  hasCorrectAnswer: i,
+  questionStatus: e
+}) => t === o.TRIVIA ? c && r : t === o.PREDICTION ? c && r && i || e === S.RESOLVED && r : !1, st = (t) => {
+  var N;
   const {
     // option props
     id: c,
-    icon: n,
-    text: r,
-    percentageDecimal: o,
-    points: S,
+    icon: r,
+    text: i,
+    percentageDecimal: e,
+    points: T,
     // extra props
-    onVote: T,
-    markThatVoted: O,
-    youSelected: E,
+    onVote: A,
+    markThatVoted: D,
+    youSelected: h,
     questionVoted: s,
-    imageMode: C,
+    imageMode: E,
     answerTimeExpired: w,
-    questionStatus: u,
-    isLoading: g,
+    questionStatus: C,
+    isLoading: O,
     questionType: d,
-    correct: A,
+    correct: g,
     hasCorrectAnswer: k,
-    votedAfterQuestionClosed: v,
-    enteredAnActiveQuestion: R,
-    marketClosed: p
-  } = t, I = H(t), x = J({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: k, questionStatus: u }), m = p && d === i.PREDICTION, N = s || m, L = d === i.PREDICTION && !s && u !== h.RESOLVED;
-  return /* @__PURE__ */ l(
-    U,
+    votedAfterQuestionClosed: x,
+    enteredAnActiveQuestion: P,
+    marketClosed: l
+  } = t, [L, p] = b(e), m = Z(t), v = _({ questionType: d, questionVoted: s, correct: g, hasCorrectAnswer: k, questionStatus: C }), f = l && d === o.PREDICTION, R = s || f, Q = d === o.PREDICTION && !s && !l, B = s && !h && m !== "incorrect";
+  return j(() => {
+    e > 0 && (p(0), requestAnimationFrame(() => {
+      p(e);
+    }));
+  }, [e]), /* @__PURE__ */ u(
+    W,
     {
       value: c,
-      "data-selected": E,
-      "data-answer-state": I,
-      disabled: s || g || w || m && !R || m && R && v,
-      "data-is-not-checked": s && !E && I !== "incorrect",
-      onClick: (Q) => {
-        O(
-          d === i.PREDICTION ? p : u === h.RESOLVED
-        ), T(Q);
+      "data-selected": h,
+      "data-answer-state": m,
+      disabled: s || O || w || f && !P || f && P && x,
+      "data-is-not-checked": B,
+      onClick: (V) => {
+        D(
+          d === o.PREDICTION ? l : C === S.RESOLVED
+        ), A(V);
       },
       children: [
-        /* @__PURE__ */ e($, { "data-answer-state": I, style: { width: `${N ? o : 0}%` } }),
-        /* @__PURE__ */ l(M, { children: [
-          n && C && ((D = f[C]) == null ? void 0 : D.call(f, n)),
-          /* @__PURE__ */ e(W, { children: r }),
-          L && /* @__PURE__ */ l("div", { children: [
-            /* @__PURE__ */ e(P, { value: S }),
-            /* @__PURE__ */ e(y, { children: "pts" })
+        /* @__PURE__ */ n(z, { "data-answer-state": m, style: { width: `${R ? L : 0}%` } }),
+        /* @__PURE__ */ u(G, { children: [
+          r && E && ((N = I[E]) == null ? void 0 : N.call(I, r)),
+          /* @__PURE__ */ n(H, { children: i }),
+          Q && /* @__PURE__ */ u("div", { children: [
+            T,
+            /* @__PURE__ */ n(J, { children: "pts" })
           ] }),
-          N && /* @__PURE__ */ l(z, { children: [
-            x && /* @__PURE__ */ e(F, { name: "selected" }),
-            /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(P, { value: o, suffix: "%" }) })
+          R && /* @__PURE__ */ u(K, { children: [
+            v && /* @__PURE__ */ n(X, { name: "selected" }),
+            /* @__PURE__ */ n(Y, { children: /* @__PURE__ */ n(U, { value: e, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -85,5 +89,5 @@ const f = {
   );
 };
 export {
-  rt as VotingOption
+  st as VotingOption
 };

package/lib/ui/gamification/vote/win-bar/index.d.ts

@@ -5,6 +5,7 @@ interface WinBarProps {
     points?: number;
     isPlayingTimer?: boolean;
     isTimer?: boolean;
+    animatePoints?: boolean;
     questionType?: QuestionType;
     timerDuration?: number;
     onTimerExpired?: () => void;

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

@@ -1,35 +1,36 @@
-import { jsxs as i, jsx as r, Fragment as d } from "react/jsx-runtime";
-import { QuestionType as t } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as l } from "../../../animated-counter/index.js";
-import { Timer as s } from "../../../timer/index.js";
-import { WinBarContainer as h, Content as P, Title as C, WinIcon as f, Points as u, PointsCount as I, PointsUnits as T } from "./styles.js";
+import { jsxs as i, jsx as r, Fragment as p } from "react/jsx-runtime";
+import { QuestionType as o } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as s } from "../../../animated-counter/index.js";
+import { Timer as h } from "../../../timer/index.js";
+import { WinBarContainer as P, Content as C, Title as f, WinIcon as u, Points as I, PointsCount as y, PointsUnits as T } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "react";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../icons/index.js";
-const N = ({
-  title: o,
-  points: e,
+const R = ({
+  title: e,
+  points: n,
   isPlayingTimer: m,
   isTimer: c,
-  questionType: n,
-  timerDuration: p,
-  onTimerExpired: a
-}) => /* @__PURE__ */ i(h, { style: { justifyContent: n === t.PREDICTION ? "center" : "space-between" }, children: [
-  /* @__PURE__ */ i(P, { children: [
-    o && /* @__PURE__ */ r(C, { children: o }),
-    e !== void 0 && n !== t.POLL && /* @__PURE__ */ i(d, { children: [
-      /* @__PURE__ */ r(f, { name: "icon-trophy" }),
-      /* @__PURE__ */ i(u, { children: [
-        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(l, { value: e }) }),
+  animatePoints: a,
+  questionType: t,
+  timerDuration: d,
+  onTimerExpired: l
+}) => /* @__PURE__ */ i(P, { style: { justifyContent: t === o.PREDICTION ? "center" : "space-between" }, children: [
+  /* @__PURE__ */ i(C, { children: [
+    e && /* @__PURE__ */ r(f, { children: e }),
+    n !== void 0 && t !== o.POLL && /* @__PURE__ */ i(p, { children: [
+      /* @__PURE__ */ r(u, { name: "icon-trophy" }),
+      /* @__PURE__ */ i(I, { children: [
+        /* @__PURE__ */ r(y, { children: a ? /* @__PURE__ */ r(s, { value: n, delay: 0.3 }) : n }),
         /* @__PURE__ */ r(T, { children: "PTS" })
       ] })
     ] })
   ] }),
-  c && n !== t.PREDICTION && /* @__PURE__ */ r(s, { isPlaying: m, onTimerExpired: a, duration: p })
+  c && t !== o.PREDICTION && /* @__PURE__ */ r(h, { isPlaying: m, onTimerExpired: l, duration: d })
 ] });
 export {
-  N as WinBar
+  R as WinBar
 };

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

@@ -2,26 +2,25 @@ import { jsx as r } from "react/jsx-runtime";
 import { styled as e } from "@linaria/react";
 import { SvgIcon as a } from "../../icons/index.js";
 import { Button as d } from "./index.js";
-import "../../../LeaderBoard_fzzlxb-w40geAFS.js";
 import "react";
 import "./styles.js";
-const n = () => a, m = /* @__PURE__ */ e(n())({
+const n = () => a, c = /* @__PURE__ */ e(n())({
   name: "ButtonIcon",
   class: "b180jd7l",
   propsAsIs: !0
-}), u = "leaderboard", I = (o) => {
+}), b = "leaderboard", u = (o) => {
   var t;
   return /* @__PURE__ */ r(d, {
     ...o,
     label: "Leader Board",
     id: "leaderboard",
-    icon: /* @__PURE__ */ r(m, {
+    icon: /* @__PURE__ */ r(c, {
       name: "icon-btn-leaderboard",
       "data-selected": (t = o.active) == null ? void 0 : t.toString()
     })
   });
 };
 export {
-  I as LeaderBoardButton,
-  u as LeaderBoardButtonId
+  u as LeaderBoardButton,
+  b as LeaderBoardButtonId
 };

package/lib/ui/navigation/index.js

@@ -1,17 +1,16 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { styled as r } from "@linaria/react";
-import "../../index_ej4hfx-w40geAFS.js";
 const n = /* @__PURE__ */ r("div")({
   name: "Buttons",
   class: "b6tbwuy",
   propsAsIs: !1
-}), a = ({
+}), i = ({
   children: t,
-  className: o
-}) => /* @__PURE__ */ s(n, {
-  className: o,
+  className: s
+}) => /* @__PURE__ */ o(n, {
+  className: s,
   children: t
 });
 export {
-  a as Navigation
+  i as Navigation
 };

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,13 +1,16 @@
-import { styled as o } from "@linaria/react";
-import { Navigation as t } from "./index.js";
-import "../../masters_m6itlr-w40geAFS.js";
+import { styled as a } from "@linaria/react";
+import { Navigation as s } from "./index.js";
 import "react/jsx-runtime";
-import "../../index_ej4hfx-w40geAFS.js";
-const i = () => t, n = /* @__PURE__ */ o(i())({
+const p = /* @__PURE__ */ a("div")({
   name: "Navigation",
   class: "n19lpak2",
+  propsAsIs: !1
+}), o = () => s, e = /* @__PURE__ */ a(o())({
+  name: "NavigationItems",
+  class: "n1w473c2",
   propsAsIs: !0
 });
 export {
-  n as Navigation
+  p as Navigation,
+  e as NavigationItems
 };

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

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

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
 };