@streamlayer/react-ui 0.96.2 → 0.97.0

package/lib/ui/modal/index.js

@@ -1,44 +1,50 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { cx as a } from "@linaria/core";
-import { styled as d } from "@linaria/react";
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { cx as d } from "@linaria/core";
+import { styled as a } from "@linaria/react";
 import { useState as m, useCallback as f, useEffect as l } from "react";
-import { r as c } from "../../index-jRXrW6ie.js";
+import { r as i } from "../../index-jRXrW6ie.js";
 import "../../index-uEuzH3jr.js";
-const u = /* @__PURE__ */ d("div")({
+const u = /* @__PURE__ */ a("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), p = "fd3gza8", v = `
+}), p = "fd3gza8", y = `
   body {
     overflow: hidden !important;
   }
-`, x = `
+`, v = `
   .sl-hide-on-modal {
     display: none !important;
   }
-`, y = (r) => {
-  const [e, o] = m(r), t = f(() => o(!1), []);
-  return l(() => (r && document.addEventListener("scroll", t), () => {
+`, x = `
+  .sl-pill-button {
+    display: none;
+  }
+`, h = (o) => {
+  const [e, r] = m(o), t = f(() => r(!1), []);
+  return l(() => (o && document.addEventListener("scroll", t), () => {
     document.removeEventListener("scroll", t);
-  }), [r, t]), l(() => {
+  }), [o, t]), l(() => {
     e === !1 && document.removeEventListener("scroll", t);
   }, [e, t]), [e];
-}, V = ({
-  children: r,
+}, P = ({
+  children: o,
   container: e,
-  fixedView: o,
+  fixedView: r,
   useContainer: t
 }) => {
-  const [s] = y(o);
-  return e.current ? t ? c.createPortal(/* @__PURE__ */ i(u, {
-    className: a(s && p),
-    children: [r, s && /* @__PURE__ */ n("style", {
-      children: v
+  const [s] = h(r);
+  return e.current ? t ? i.createPortal(/* @__PURE__ */ c(u, {
+    className: d(s && p),
+    children: [o, s && /* @__PURE__ */ n("style", {
+      children: y
     }), !s && /* @__PURE__ */ n("style", {
+      children: v
+    }), /* @__PURE__ */ n("style", {
       children: x
     })]
-  }), e.current, "modal-node") : c.createPortal(r, e.current, "modal-node") : null;
+  }), e.current, "modal-node") : i.createPortal(o, e.current, "modal-node") : null;
 };
 export {
-  V as ModalPortal
+  P as ModalPortal
 };

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

@@ -3,24 +3,25 @@ import { styled as e } from "@linaria/react";
 import { SvgIcon as s } from "../../icons/index.js";
 import { Button as c } from "./index.js";
 import "react";
+import "@linaria/core";
 import "./styles.js";
-const a = () => s, r = /* @__PURE__ */ e(a())({
+const r = () => s, a = /* @__PURE__ */ e(r())({
   name: "ButtonIcon",
   class: "b1whzxvd",
   propsAsIs: !0
-}), u = "channels", B = (n) => {
+}), B = "channels", I = (n) => {
   var t;
   return /* @__PURE__ */ o(c, {
     ...n,
     id: "channels",
     label: "Channels",
-    icon: /* @__PURE__ */ o(r, {
+    icon: /* @__PURE__ */ o(a, {
       name: "icon-btn-channels",
       "data-selected": (t = n.active) == null ? void 0 : t.toString()
     })
   });
 };
 export {
-  B as ChannelsButton,
-  u as ChannelsButtonId
+  I as ChannelsButton,
+  B as ChannelsButtonId
 };

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

@@ -3,12 +3,13 @@ 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 "@linaria/core";
 import "./styles.js";
 const s = () => u, a = /* @__PURE__ */ r(s())({
   name: "ButtonIcon",
   class: "b11des7c",
   propsAsIs: !0
-}), f = "featuredGroups", G = (t) => {
+}), G = "featuredGroups", B = (t) => {
   var o;
   return /* @__PURE__ */ e(n, {
     ...t,
@@ -21,6 +22,6 @@ const s = () => u, a = /* @__PURE__ */ r(s())({
   });
 };
 export {
-  G as FeaturedGroupsButton,
-  f as FeaturedGroupsButtonId
+  B as FeaturedGroupsButton,
+  G as FeaturedGroupsButtonId
 };

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

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

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

@@ -1,10 +1,23 @@
-import { jsx as t, jsxs as d, Fragment as i } from "react/jsx-runtime";
-import { SButton as l, ButtonIcon as m, ButtonLabel as s } from "./styles.js";
+import { jsx as e, jsxs as l, Fragment as m } from "react/jsx-runtime";
+import { cx as d } from "@linaria/core";
+import { SButton as s, SelectedButton as u, HoverIconState as p, HoverIconLeaderboardState as h, ButtonIcon as B, ButtonLabel as f } from "./styles.js";
 import "@linaria/react";
-const p = ({ disabled: e, active: n, onClick: o, label: c, icon: r }) => /* @__PURE__ */ t(l, { onClick: o, disabled: e, "data-selected": n, children: /* @__PURE__ */ d(i, { children: [
-  r && /* @__PURE__ */ t(m, { children: r }),
-  /* @__PURE__ */ t(s, { children: c })
-] }) });
+const I = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: t }) => /* @__PURE__ */ e(
+  s,
+  {
+    onClick: a,
+    disabled: n,
+    className: d(
+      r && u,
+      !r && (t === "channels" || t === "featuredGroups") && p,
+      !r && t === "leaderboard" && h
+    ),
+    children: /* @__PURE__ */ l(m, { children: [
+      o && /* @__PURE__ */ e(B, { children: o }),
+      /* @__PURE__ */ e(f, { children: c })
+    ] })
+  }
+);
 export {
-  p as Button
+  I as Button
 };

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

@@ -2,3 +2,6 @@
 export declare const SButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const ButtonIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const ButtonLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const SelectedButton: import("@linaria/core").LinariaClassName;
+export declare const HoverIconState: import("@linaria/core").LinariaClassName;
+export declare const HoverIconLeaderboardState: import("@linaria/core").LinariaClassName;

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

@@ -1,19 +1,22 @@
-import { styled as s } from "@linaria/react";
-const o = /* @__PURE__ */ s("button")({
+import { styled as t } from "@linaria/react";
+const o = /* @__PURE__ */ t("button")({
   name: "SButton",
   class: "sxxa0c",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("span")({
+}), n = /* @__PURE__ */ t("span")({
   name: "ButtonIcon",
   class: "b193dcyu",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("span")({
+}), a = /* @__PURE__ */ t("span")({
   name: "ButtonLabel",
   class: "b40tuix",
   propsAsIs: !1
-});
+}), e = "s14xk0af", c = "ha3mg7c", r = "h103yr45";
 export {
   n as ButtonIcon,
   a as ButtonLabel,
-  o as SButton
+  r as HoverIconLeaderboardState,
+  c as HoverIconState,
+  o as SButton,
+  e as SelectedButton
 };

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

@@ -1,35 +1,35 @@
-import { jsxs as c, jsx as d } from "react/jsx-runtime";
-import { QuestionImages as v } from "@streamlayer/sdk-web-types";
-import { VideoPlayer as C } from "../../video-player/index.js";
-import { Container as b, ImageContainer as e, Image as x, Content as D, Title as T, Description as j } from "./styles.js";
+import { jsxs as g, jsx as d } from "react/jsx-runtime";
+import { QuestionImages as I } from "@streamlayer/sdk-web-types";
+import { VideoPlayer as e } from "../../video-player/index.js";
+import { Container as v, ImageContainer as C, Image as b, Content as x, Title as D, Description as T } from "./styles.js";
+import "@linaria/core";
 import "react";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
-const k = ({
-  imageMode: g,
+const R = ({
   instantView: r,
   isDetail: m,
   notification: o,
-  controlVideo: u
+  controlVideo: c
 }) => {
-  const l = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = l || p, y = o == null ? void 0 : o.title, I = o == null ? void 0 : o.body;
-  return /* @__PURE__ */ c(b, { children: [
+  const l = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = l || p, u = o == null ? void 0 : o.title, y = o == null ? void 0 : o.body;
+  return /* @__PURE__ */ g(v, { children: [
     (r == null ? void 0 : r.video) && /* @__PURE__ */ d(
-      C,
+      e,
       {
         source: r.video.url,
         poster: r.video.thumbnailUrl,
-        controlVideo: u
+        controlVideo: c
       }
     ),
-    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(e, { "data-rounded": g === v.ROUNDED, children: /* @__PURE__ */ d(x, { src: r == null ? void 0 : r.image }) }),
-    /* @__PURE__ */ c(D, { children: [
-      /* @__PURE__ */ d(T, { children: m && h ? l : y }),
-      /* @__PURE__ */ d(j, { children: m && h ? p : I })
+    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(C, { "data-rounded": r.imageMode === I.ROUNDED, children: /* @__PURE__ */ d(b, { src: r == null ? void 0 : r.image }) }),
+    /* @__PURE__ */ g(x, { children: [
+      /* @__PURE__ */ d(D, { children: m && h ? l : u }),
+      /* @__PURE__ */ d(T, { children: m && h ? p : y })
     ] })
   ] });
 };
 export {
-  k as InsightContent
+  R as InsightContent
 };

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

@@ -2,13 +2,14 @@ import { jsxs as t, jsx as n, Fragment as j } from "react/jsx-runtime";
 import { VideoPlayer as k } from "../../video-player/index.js";
 import { Account as x } from "./account/index.js";
 import { Container as B, Details as E, Body as N, ImagesContainer as c, ImageFullSize as i, ImageHalfSize as e, ImagesBlock as m } from "./styles.js";
+import "@linaria/core";
 import "react";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
 import "../../../utils/common.js";
 import "./account/styles.js";
-const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (o) => o == null ? void 0 : o.replace(R, ""), J = ({
+const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (o) => o == null ? void 0 : o.replace(R, ""), K = ({
   image: o,
   body: C,
   account: z,
@@ -64,5 +65,5 @@ const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (o) => o == null ?
   ] });
 };
 export {
-  J as TwitterContent
+  K as TwitterContent
 };

package/lib/ui/show-in/index.d.ts

@@ -3,5 +3,7 @@ export declare const ShowIn: React.FC<{
     children: React.ReactNode | React.ReactNode[];
     style?: React.CSSProperties;
     className?: string;
+    enabled?: boolean;
+    replayKey?: unknown;
     hiding?: boolean;
 }>;

package/lib/ui/show-in/index.js

@@ -1,20 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cx as i } from "@linaria/core";
-import { styled as m } from "@linaria/react";
-const a = /* @__PURE__ */ m("div")({
+import { jsx as f } from "react/jsx-runtime";
+import { cx as u } from "@linaria/core";
+import { styled as g } from "@linaria/react";
+import { useState as p, useEffect as h } from "react";
+const w = /* @__PURE__ */ g("div")({
   name: "Container",
   class: "c1pgyo67",
   propsAsIs: !1
-}), e = "hx17qu6", l = ({
-  children: o,
+}), S = "sx17qu6", d = "h1692c5m", v = ({
+  children: i,
   style: n,
-  className: s,
-  hiding: r
-}) => /* @__PURE__ */ t(a, {
-  style: n,
-  className: i(s, r && e),
-  children: o
-});
+  className: r,
+  enabled: o = !0,
+  replayKey: t,
+  hiding: e
+}) => {
+  const [m, s] = p(!0), c = o && m, a = o && e;
+  return h(() => {
+    t !== void 0 && (s(!1), requestAnimationFrame(() => {
+      s(!0);
+    }));
+  }, [t]), /* @__PURE__ */ f(w, {
+    style: n,
+    className: u(r, c && S, a && d),
+    children: i
+  });
+};
 export {
-  l as ShowIn
+  v as ShowIn
 };

package/lib/ui/timer/index.js

@@ -1,41 +1,45 @@
 import { jsx as R } from "react/jsx-runtime";
-import { styled as E } from "@linaria/react";
-import { useState as S, useCallback as n } from "react";
-import { CountdownCircleTimer as A } from "react-countdown-circle-timer";
-import { COLORS as o } from "../theme/constants.js";
-const O = [o.PRIMARY_GREEN1, o.SECONDARY_RED1, o.SECONDARY_RED1, o.NEUTRALS_GRAY3], _ = [10, 10, 1, 0], N = /* @__PURE__ */ E("div")({
+import { styled as _ } from "@linaria/react";
+import { useState as c, useEffect as a, useCallback as n } from "react";
+import { CountdownCircleTimer as N } from "react-countdown-circle-timer";
+import { COLORS as t } from "../theme/constants.js";
+const D = [t.PRIMARY_GREEN1, t.SECONDARY_RED1, t.SECONDARY_RED1, t.NEUTRALS_GRAY3], T = [10, 10, 1, 0], Y = /* @__PURE__ */ _("div")({
   name: "RemainingTime",
   class: "r165427",
   propsAsIs: !1
-}), f = o.SECONDARY_GREEN6, c = o.SECONDARY_RED3, D = o.NEUTRALS_GRAY3, d = ({
-  isPlaying: l = !0,
-  duration: e = 30,
-  onTimerExpired: t
+}), h = t.SECONDARY_GREEN6, l = t.SECONDARY_RED3, m = t.NEUTRALS_GRAY3, G = ({
+  isPlaying: i = !0,
+  duration: o = 30,
+  onTimerExpired: e
 }) => {
-  const [i, s] = S(e > 10 ? f : c), m = ({
+  const [C, s] = c(o > 10 ? h : l), [E, S] = c(2);
+  a(() => {
+    o === 0 && (S(0), s(m));
+  }, [o]);
+  const f = ({
     remainingTime: r
-  }) => /* @__PURE__ */ R(N, {
-    children: r
-  }), C = n(() => {
-    t == null || t(), s(D);
-  }, [t, s]), a = n((r) => {
-    r === 10 && s(c);
+  }) => /* @__PURE__ */ R(Y, {
+    children: o === 0 ? 0 : r
+  }), A = n(() => {
+    e == null || e(), s(m);
+  }, [e, s]), O = n((r) => {
+    r === 10 && s(l);
   }, [s]);
-  return /* @__PURE__ */ R(A, {
-    isPlaying: l,
-    duration: e,
-    colors: O,
-    colorsTime: _,
+  return /* @__PURE__ */ R(N, {
+    isPlaying: i,
+    duration: o,
+    colors: D,
+    colorsTime: T,
     size: 32,
-    strokeWidth: 2,
+    strokeWidth: E,
     trailStrokeWidth: 2,
-    trailColor: i,
-    onComplete: C,
-    onUpdate: a,
-    children: m
+    trailColor: C,
+    onComplete: A,
+    onUpdate: O,
+    children: f
   });
 };
 export {
-  N as RemainingTime,
-  d as Timer
+  Y as RemainingTime,
+  G as Timer
 };

package/lib/ui/video-player/index.js

@@ -1,69 +1,71 @@
-import { jsxs as w, jsx as i } from "react/jsx-runtime";
-import { useRef as C, useState as v, useCallback as p, useEffect as d } from "react";
-import { SvgIcon as E } from "../icons/index.js";
-import { Container as I, Player as S, Poster as x, Control as L } from "./styles.js";
+import { jsxs as w, jsx as n } from "react/jsx-runtime";
+import { cx as x } from "@linaria/core";
+import { useRef as C, useState as p, useCallback as g, useEffect as v } from "react";
+import { SvgIcon as d } from "../icons/index.js";
+import { Container as E, ToggleIconPause as S, Player as T, Poster as L, Control as j } from "./styles.js";
 import "@linaria/react";
-const T = (s, c) => {
+const k = (s, o) => {
   for (const t of s)
-    t.isIntersecting || t.target instanceof HTMLVideoElement && !t.target.paused && (c.unobserve(t.target), t.target.pause());
-}, g = new IntersectionObserver(T, { threshold: 0.5 }), f = /* @__PURE__ */ new Set(), j = (s) => {
-  g.observe(s), f.add(s);
-}, n = (s) => {
-  g.unobserve(s), f.delete(s);
-}, k = () => {
+    t.isIntersecting || t.target instanceof HTMLVideoElement && !t.target.paused && (o.unobserve(t.target), t.target.pause());
+}, y = new IntersectionObserver(k, { threshold: 0.5 }), f = /* @__PURE__ */ new Set(), H = (s) => {
+  y.observe(s), f.add(s);
+}, u = (s) => {
+  y.unobserve(s), f.delete(s);
+}, M = () => {
   for (const s of f)
-    s instanceof HTMLVideoElement && !s.paused && (s.pause(), n(s));
-}, z = ({ poster: s, source: c, controlVideo: t }) => {
-  const e = C(null), [l, o] = v(!1), [b, m] = v(!0), y = p(() => {
+    s instanceof HTMLVideoElement && !s.paused && (s.pause(), u(s));
+}, D = ({ poster: s, source: o, controlVideo: t }) => {
+  const e = C(null), [a, c] = p(!1), [m, b] = p(!0), P = g(() => {
     t == null || t({ muted: !0 });
-  }, [t]), u = p(() => {
+  }, [t]), i = g(() => {
     t == null || t({ muted: !1 });
-  }, [t]), P = () => {
+  }, [t]), h = () => {
     const r = e == null ? void 0 : e.current;
     if (r)
-      if (l)
-        r.pause(), e.current && n(e.current);
+      if (a)
+        r.pause(), e.current && u(e.current);
       else {
-        const a = e == null ? void 0 : e.current;
-        if (!a)
+        const l = e == null ? void 0 : e.current;
+        if (!l)
           return;
-        k(), j(a), a.play().catch((O) => console.log(O)), m(!1);
+        M(), H(l), l.play().catch((O) => console.log(O)), b(!1);
       }
-  }, h = () => {
+  }, I = () => {
     var r;
-    e.current && n(e.current), (r = e == null ? void 0 : e.current) == null || r.load(), m(!0);
+    e.current && u(e.current), (r = e == null ? void 0 : e.current) == null || r.load(), b(!0);
   };
-  return d(() => {
-    e.current && n(e.current);
-  }, []), d(() => {
+  return v(() => {
+    e.current && u(e.current);
+  }, []), v(() => {
     const r = e == null ? void 0 : e.current;
     return () => {
-      r && (r.paused || u(), n(r));
+      r && (r.paused || i(), u(r));
     };
-  }, [u]), /* @__PURE__ */ w(I, { onClick: P, children: [
-    /* @__PURE__ */ i(
-      S,
+  }, [i]), /* @__PURE__ */ w(E, { onClick: h, className: x(a && S), children: [
+    /* @__PURE__ */ n(
+      T,
       {
         ref: e,
-        src: c,
+        src: o,
         onPlay: () => {
-          y(), o(!0);
+          P(), c(!0);
         },
         onPause: () => {
-          u(), o(!1);
+          i(), c(!1);
         },
         onEnded: () => {
-          u(), o(!1), h();
+          i(), c(!1), I();
         },
-        style: { visibility: b ? "hidden" : "visible" },
+        style: { visibility: m ? "hidden" : "visible" },
+        controls: !1,
         playsInline: !0
       }
     ),
-    /* @__PURE__ */ i(x, { src: s, style: { visibility: b ? "visible" : "hidden" } }),
-    /* @__PURE__ */ i(L, { children: !l && /* @__PURE__ */ i(E, { name: "icon-play" }) })
+    /* @__PURE__ */ n(L, { src: s, style: { visibility: m ? "visible" : "hidden" } }),
+    /* @__PURE__ */ n(j, { children: a ? /* @__PURE__ */ n(d, { name: "icon-pause" }) : /* @__PURE__ */ n(d, { name: "icon-play" }) })
   ] });
 };
 export {
-  z as VideoPlayer,
-  k as pauseAllVideos
+  D as VideoPlayer,
+  M as pauseAllVideos
 };

package/lib/ui/video-player/styles.d.ts

@@ -3,3 +3,4 @@ export declare const Container: import("@linaria/react").StyledComponent<import(
 export declare const Player: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLVideoElement> & import("react").VideoHTMLAttributes<HTMLVideoElement> & Record<never, unknown>>;
 export declare const Poster: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const Control: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ToggleIconPause: import("@linaria/core").LinariaClassName;

package/lib/ui/video-player/styles.js

@@ -1,24 +1,25 @@
 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1bgb86j",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("video")({
+}), a = /* @__PURE__ */ s("video")({
   name: "Player",
   class: "p6703cq",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("img")({
+}), l = /* @__PURE__ */ s("img")({
   name: "Poster",
   class: "p12ow7zo",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "Control",
   class: "cdpal9o",
   propsAsIs: !1
-});
+}), r = "t1xke4ml";
 export {
-  a as Container,
-  l as Control,
-  e as Player,
-  r as Poster
+  e as Container,
+  n as Control,
+  a as Player,
+  l as Poster,
+  r as ToggleIconPause
 };