meticulous-ui 2.2.7 → 2.2.9

package/components/MenuItem/styles.js

@@ -1,6 +1,6 @@
 import t from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
 import n from "../Typography/P/P.js";
-const d = t.div`
+const m = t.div`
   width: ${({ $width: o }) => o};
   background-color: ${({
   $isSelected: o,
@@ -18,13 +18,13 @@ const d = t.div`
   &:active {
     background-color: ${({ $isSelected: o, $activeColor: r, $selectedColor: e }) => o ? e : r};
   }
-`, m = t(n)`
+`, d = t(n)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: calc(${({ $width: o }) => o} - 2rem);
 `;
 export {
-  m as PWrapper,
-  d as Wrapper
+  d as PWrapper,
+  m as Wrapper
 };

package/components/OtpInput/OtpInput.js

@@ -1,42 +1,43 @@
-import { j as D } from "../../_virtual/jsx-runtime.js";
-import { useState as O, useRef as h, useEffect as w } from "react";
-import { OTPWrapper as x } from "./styles.js";
-import { renderNums as E } from "./helpers.js";
-const A = ({ length: r = 6, value: o = "", onChange: i, onComplete: n }) => {
-  const [p, a] = O(Array(r).fill("")), c = h([]);
-  w(() => {
-    if (!o) return;
-    const s = String(o).replace(/\D/g, "").slice(0, r), t = s.split("");
+import { j as x } from "../../_virtual/jsx-runtime.js";
+import { useState as E, useRef as P, useEffect as R } from "react";
+import { OTPWrapper as k } from "./styles.js";
+import { renderNums as l } from "./helpers.js";
+const b = ({ length: r = 6, value: a = "", onChange: p, onComplete: c }) => {
+  const [u, e] = E(Array(r).fill("")), i = P([]);
+  R(() => {
+    if (!a) return;
+    const s = String(a).replace(/\D/g, "").slice(0, r), t = s.split("");
     for (; t.length < r; ) t.push("");
-    a(t), s.length === r && n?.(s);
-  }, [o, r, n]);
-  const f = (s) => {
-    a(s);
+    e(t), s.length === r && (c == null || c(s));
+  }, [a, r, c]);
+  const n = (s) => {
+    e(s);
     const t = s.join("");
-    i?.(t), t.length === r && n?.(t);
-  }, u = (s, t) => {
+    p == null || p(t), t.length === r && (c == null || c(t));
+  }, d = (s, t) => {
     s = s.replace(/\D/g, "");
-    const e = [...p];
-    e[t] = s, f(e), s && t < r - 1 && c.current[t + 1].focus();
-  }, l = (s, t) => {
-    s.key === "Backspace" && !p[t] && t > 0 && c.current[t - 1].focus();
-  }, m = (s) => {
+    const f = [...u];
+    f[t] = s, n(f), s && t < r - 1 && i.current[t + 1].focus();
+  }, y = (s, t) => {
+    s.key === "Backspace" && !u[t] && t > 0 && i.current[t - 1].focus();
+  }, j = (s) => {
+    var o;
     const t = s.clipboardData.getData("text").replace(/\D/g, "");
     if (!t) return;
-    const e = Array(r).fill("");
-    t.slice(0, r).split("").forEach((y, j) => e[j] = y), f(e);
-    const d = Math.min(t.length - 1, r - 1);
-    c.current[d]?.focus();
+    const f = Array(r).fill("");
+    t.slice(0, r).split("").forEach((O, w) => f[w] = O), n(f);
+    const D = Math.min(t.length - 1, r - 1);
+    (o = i.current[D]) == null || o.focus();
   };
-  return /* @__PURE__ */ D.jsx(
-    x,
+  return /* @__PURE__ */ x.jsx(
+    k,
     {
       style: { display: "flex", gap: "10px", justifyContent: "center" },
-      onPaste: m,
-      children: p.map(E({ inputsRef: c, handleChange: u, handleKeyDown: l }))
+      onPaste: j,
+      children: u.map(l({ inputsRef: i, handleChange: d, handleKeyDown: y }))
     }
   );
 };
 export {
-  A as default
+  b as default
 };

package/components/Pagination/styles.js

@@ -1,13 +1,13 @@
 import o, { css as i } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
-import a from "../Icons/ChevronLeft/ChevronLeft.js";
-import f from "../Icons/ChevronRight/ChevronRight.js";
+import f from "../Icons/ChevronLeft/ChevronLeft.js";
+import a from "../Icons/ChevronRight/ChevronRight.js";
 import c from "../../colors/grey.js";
 import n from "../../colors/white.js";
-import d from "../../colors/black.js";
+import u from "../../colors/black.js";
 import { SELECTED_BG as m, NOT_SELECTED_BG as l, ACTIVE_NOT_SELECTED_BG as s } from "./constants.js";
 const t = (r) => ({ $shades: e }) => {
   if (["#FFFFFF"].includes(e))
-    return d.m900;
+    return u.m900;
   if (r === m)
     return e.m500;
   if (r === l)
@@ -55,9 +55,9 @@ const t = (r) => ({ $shades: e }) => {
         `}
 `, y = o.p`
   color: ${c.m500};
-`, k = o(a)`
+`, k = o(f)`
   cursor: pointer;
-`, w = o(f)`
+`, w = o(a)`
   cursor: pointer;
 `, x = o.div`
   min-width: ${({ size: r }) => r};

package/components/Spinner/Spinner.js

@@ -1,9 +1,9 @@
-import { j as t } from "../../_virtual/jsx-runtime.js";
-import n from "../../node_modules/lodash-es/get.js";
-import { SpinnerWrapper as p } from "./styles.js";
-import i from "../../colors/index.js";
-import l from "../../colors/green.js";
-const s = {
+import { j as n } from "../../_virtual/jsx-runtime.js";
+import p from "../../node_modules/lodash-es/get.js";
+import { SpinnerWrapper as i } from "./styles.js";
+import l from "../../colors/index.js";
+import s from "../../colors/green.js";
+const $ = {
   small: {
     $border: "0.25rem",
     $length: "1rem"
@@ -16,10 +16,11 @@ const s = {
     $border: "0.75rem",
     $length: "3rem"
   }
-}, c = ({ color: r = "green", size: e = "medium" }) => {
-  const { $border: m, $length: o } = s[e];
-  return /* @__PURE__ */ t.jsx(p, { $color: n(i, r, l)?.m500, $border: m, $length: o });
+}, u = ({ color: e = "green", size: m = "medium" }) => {
+  var r;
+  const { $border: o, $length: t } = $[m];
+  return /* @__PURE__ */ n.jsx(i, { $color: (r = p(l, e, s)) == null ? void 0 : r.m500, $border: o, $length: t });
 };
 export {
-  c as default
+  u as default
 };

package/components/Timer/Timer.js

@@ -0,0 +1,64 @@
+import { j as e } from "../../_virtual/jsx-runtime.js";
+import { useState as x, useEffect as B } from "react";
+import t from "../../node_modules/lodash-es/noop.js";
+import I from "../Glass/Glass.js";
+import b from "./components/TimerRing/TimerRing.js";
+import o from "../../colors/white.js";
+import { Wrapper as E, Dimmer as L, Time as u, TimeTxt as h, HourHand as N, MinuteHand as G, SecondHand as K, AllDots as U, Dots as _, AlarmRing as q, BulletRing as J, Bullet as O, LeftActions as Q, ActionBtn as n, MediaStopFilledWrapper as V, MediaPauseFilledWrapper as X, MediaPlayFilledWrapper as Y, RightActions as Z, AddWrapper as ee } from "./styles.js";
+const ae = ({
+  color: f = "green",
+  showTime: g = !0,
+  showTimeWithSec: T = !0,
+  timeZone: A = "Asia/Kolkata",
+  isDigital: y = !0,
+  timerSeconds: $ = 0,
+  onTimerAdd: P = t,
+  onTimerComplete: R = t,
+  onTimerRemove: S = t,
+  onTimerPause: W = t,
+  onTimerPlay: k = t
+}) => {
+  const [D, F] = x(/* @__PURE__ */ new Date()), [r, l] = x(0), [c, a] = x(!1), v = () => {
+    l($), a(!1), P();
+  }, w = () => {
+    l(0), S();
+  }, z = () => {
+    a(!0), W();
+  }, C = () => {
+    a(!1), k();
+  };
+  B(() => {
+    const p = setInterval(() => {
+      F(/* @__PURE__ */ new Date()), !c && l((s) => (s - 1 === 0 && R(), s - 1));
+    }, 1e3);
+    return () => clearInterval(p);
+  }, [c]);
+  const m = D.toLocaleString("en-Us", { hour12: !0, timeZone: A }).split(", ")[1], j = m.split(" ")[0], H = m.split(" ")[1], M = m.split(":").slice(0, 2).join(":"), i = j.split(":"), d = !(Number.isInteger(r) && r > 0);
+  return /* @__PURE__ */ e.jsxs(E, { $color: f, children: [
+    /* @__PURE__ */ e.jsx(I, { borderRadius: "1.2rem" }),
+    g && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx(L, {}),
+      y ? /* @__PURE__ */ e.jsxs(u, { children: [
+        /* @__PURE__ */ e.jsx(h, { children: T ? j : M }),
+        /* @__PURE__ */ e.jsx(h, { children: H })
+      ] }) : /* @__PURE__ */ e.jsxs(u, { children: [
+        /* @__PURE__ */ e.jsx(N, { style: { rotate: `${i[0] * 30 + i[1] * 0.5}deg` } }),
+        /* @__PURE__ */ e.jsx(G, { style: { rotate: `${i[1] * 6}deg` } }),
+        /* @__PURE__ */ e.jsx(K, { style: { rotate: `${i[2] * 6}deg` } })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx(U, { children: [...Array(60)].map((p, s) => /* @__PURE__ */ e.jsx(_, { style: { rotate: `${s * 6}deg` } }, s)) }),
+    !d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx(q, { children: /* @__PURE__ */ e.jsx(b, { progress: r >= 60 ? 1 : r % 60 / 60 }) }),
+      /* @__PURE__ */ e.jsx(J, { $angle: r % 60 * 6, children: /* @__PURE__ */ e.jsx(O, {}) })
+    ] }),
+    /* @__PURE__ */ e.jsxs(Q, { $noActions: d, children: [
+      /* @__PURE__ */ e.jsx(n, { onClick: w, children: /* @__PURE__ */ e.jsx(V, { color: o, size: 14 }) }),
+      d || !c ? /* @__PURE__ */ e.jsx(n, { onClick: z, children: /* @__PURE__ */ e.jsx(X, { color: o, size: 14 }) }) : /* @__PURE__ */ e.jsx(n, { onClick: C, children: /* @__PURE__ */ e.jsx(Y, { color: o, size: 14 }) })
+    ] }),
+    /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx(n, { title: "Add timer in seconds", onClick: v, children: /* @__PURE__ */ e.jsx(ee, { color: o, size: 20 }) }) })
+  ] });
+};
+export {
+  ae as default
+};

package/components/Timer/components/TimerRing/TimerRing.js

@@ -0,0 +1,42 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.js";
+import { useRef as c, useEffect as f } from "react";
+import n from "../../../../colors/white.js";
+import { SVG as a } from "./styles.js";
+const k = ({ progress: s }) => {
+  const o = c(null), e = 105, t = 2 * Math.PI * e;
+  return f(() => {
+    const i = t * (1 - s);
+    o.current.style.strokeDashoffset = i;
+  }, [s]), /* @__PURE__ */ r.jsxs(a, { width: "220", height: "220", children: [
+    /* @__PURE__ */ r.jsx(
+      "circle",
+      {
+        cx: "110",
+        cy: "110",
+        r: e,
+        stroke: "rgba(255,255,255,.2)",
+        strokeWidth: "4",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      "circle",
+      {
+        ref: o,
+        cx: "110",
+        cy: "110",
+        r: e,
+        stroke: n,
+        strokeWidth: "4",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeDasharray: t,
+        strokeDashoffset: t,
+        style: { transition: "stroke-dashoffset 0.2s linear" }
+      }
+    )
+  ] });
+};
+export {
+  k as default
+};

package/components/Timer/components/TimerRing/styles.js

@@ -0,0 +1,7 @@
+import t from "../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const r = t.svg`
+  rotate: -90deg;
+`;
+export {
+  r as SVG
+};

package/components/Timer/constants.js

@@ -0,0 +1,25 @@
+import o from "../../colors/green.js";
+import r from "../../colors/red.js";
+import m from "../../colors/blue.js";
+import e from "../../colors/brown.js";
+import i from "../../colors/grey.js";
+import t from "../../colors/indigo.js";
+import p from "../../colors/orange.js";
+import f from "../../colors/teal.js";
+import l from "../../colors/violet.js";
+import n from "../../colors/yellow.js";
+const c = {
+  green: o.m500,
+  red: r.m500,
+  blue: m.m500,
+  brown: e.m500,
+  grey: i.m500,
+  indigo: t.m500,
+  orange: p.m500,
+  teal: f.m500,
+  violet: l.m500,
+  yellow: n.m500
+};
+export {
+  c as COLOR_MAPPING
+};

package/components/Timer/index.js

@@ -0,0 +1,4 @@
+import e from "./Timer.js";
+export {
+  e as default
+};

package/components/Timer/styles.js

@@ -0,0 +1,164 @@
+import t, { css as e } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import n from "../Icons/Add/Add.js";
+import a from "../Icons/MediaStopFilled/MediaStopFilled.js";
+import s from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
+import d from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
+import i from "../../colors/white.js";
+import p from "../../colors/black.js";
+import l from "../../colors/red.js";
+import { COLOR_MAPPING as c } from "./constants.js";
+const m = ({ $color: o }) => c[o], r = e`
+  position: absolute;
+  bottom: 50%;
+  transform-origin: bottom;
+  border-radius: 4px;
+`, $ = t.div`
+  position: relative;
+  height: 20rem;
+  width: 20rem;
+  border-radius: 1.2rem;
+  background-color: ${m};
+`, A = t.div`
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  width: 12rem;
+  height: 12rem;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.16);
+  pointer-events: none;
+`, M = t.div`
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  transform: translate(-50%, -50%);
+`, F = t.div`
+  color: ${i};
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-align: center;
+  opacity: 0.8;
+`, P = t.span`
+  position: absolute;
+  width: 2.4px;
+  height: 2.4px;
+  background: rgba(255, 255, 255, 0.4);
+  transform-origin: 94px;
+  border-radius: 2px;
+
+  &:nth-child(5n) {
+    width: 3px;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.7);
+  }
+
+  &:nth-child(15n) {
+    width: 6px;
+    height: 2px;
+    background: rgba(255, 255, 255);
+  }
+`, y = t.div`
+  position: absolute;
+  left: 21%;
+  top: 44.3%;
+  transform: translate(-50%, -50%) rotate(6.7deg);
+`, H = t.div`
+  ${r};
+  width: 6px;
+  height: 60px;
+  background: ${i};
+`, S = t.div`
+  ${r};
+  width: 4px;
+  height: 80px;
+  background: ${p.m200};
+`, W = t.div`
+  ${r};
+  width: 2px;
+  height: 90px;
+  background: ${l.m800};
+`, D = t.div`
+  position: absolute;
+  left: 16%;
+  top: 14%;
+`, R = t.div`
+  position: absolute;
+  bottom: 6%;
+  left: 8%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  ${({ $noActions: o }) => o && e`
+      pointer-events: none;
+      opacity: 0.5;
+    `}
+`, B = t.div`
+  position: absolute;
+  bottom: 6%;
+  right: 8%;
+  border-radius: 0.4rem;
+`, C = t.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  height: 2.4rem;
+  width: 2.4rem;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.4);
+`, T = t(n)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`, L = t(a)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`, N = t(s)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`, O = t(d)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`, _ = t.div`
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: ${i};
+`, z = t.div`
+  position: absolute;
+  left: 26%;
+  top: 24%;
+  rotate: ${({ $angle: o }) => 45 + o}deg;
+  height: 157.5px;
+  width: 157.5px;
+  transform-origin: center;
+`;
+export {
+  C as ActionBtn,
+  T as AddWrapper,
+  D as AlarmRing,
+  y as AllDots,
+  _ as Bullet,
+  z as BulletRing,
+  A as Dimmer,
+  P as Dots,
+  H as HourHand,
+  R as LeftActions,
+  N as MediaPauseFilledWrapper,
+  O as MediaPlayFilledWrapper,
+  L as MediaStopFilledWrapper,
+  S as MinuteHand,
+  B as RightActions,
+  W as SecondHand,
+  M as Time,
+  F as TimeTxt,
+  $ as Wrapper
+};

package/components/Typography/Headings/H1.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h1`
+  color: ${({ $color: o }) => o};
+  font-size: 3.6rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H2.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h2`
+  color: ${({ $color: o }) => o};
+  font-size: 3rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H3.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h3`
+  color: ${({ $color: o }) => o};
+  font-size: 2.4rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H4.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h4`
+  color: ${({ $color: o }) => o};
+  font-size: 1.8rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H5.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h5`
+  color: ${({ $color: o }) => o};
+  font-size: 1.4rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H6.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h6`
+  color: ${({ $color: o }) => o};
+  font-size: 1.2rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,34 @@
+import { j as r } from "../../_virtual/jsx-runtime.js";
+import { useRef as n } from "react";
+import { VideoContainer as p, Video as V } from "./styles.js";
+import { useSpacebarToggle as h } from "./useSpacebarToggle.js";
+import x from "./components/Volumebar/Volumebar.js";
+import { useVolumeOverlay as j } from "./useVolumeOverlay.js";
+const C = ({ link: s, thumbnail: i, width: u = "600", borderRadius: c = 8, height: l = "auto" }) => {
+  const e = n(null), t = n(null), { volume: m, showVolume: a } = j(), d = () => {
+    var o;
+    (o = e.current) == null || o.focus();
+  }, f = (o) => {
+    o.code === "Space" && o.preventDefault();
+  };
+  return h(e, t, a), /* @__PURE__ */ r.jsxs(p, { ref: t, $width: u, $height: l, children: [
+    /* @__PURE__ */ r.jsx(
+      V,
+      {
+        $borderRadius: c,
+        ref: e,
+        src: s,
+        poster: i,
+        controls: !0,
+        tabIndex: 0,
+        onClick: d,
+        onKeyDown: f,
+        children: "Your browser does not support the video tag."
+      }
+    ),
+    /* @__PURE__ */ r.jsx(x, { volume: m })
+  ] });
+};
+export {
+  C as default
+};

package/components/VideoPlayer/components/Volumebar/Volumebar.js

@@ -0,0 +1,13 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.js";
+import { Wrapper as n, Track as s, Fill as e, Label as o } from "./styles.js";
+const i = ({ volume: t }) => {
+  if (t === null) return null;
+  const l = Math.round(t);
+  return /* @__PURE__ */ r.jsxs(n, { children: [
+    /* @__PURE__ */ r.jsx(s, { children: /* @__PURE__ */ r.jsx(e, { $pct: l }) }),
+    /* @__PURE__ */ r.jsx(o, { children: l })
+  ] });
+};
+export {
+  i as default
+};

package/components/VideoPlayer/components/Volumebar/styles.js

@@ -0,0 +1,38 @@
+import e from "../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const i = e.div`
+  position: absolute;
+  right: 0.8rem;
+  top: 1.6rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  pointer-events: none;
+  user-select: none;
+`, n = e.div`
+  width: 0.4rem;
+  height: 8rem;
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 0.2rem;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+`, o = e.div`
+  width: 100%;
+  height: ${({ $pct: r }) => r}%;
+  background: #fff;
+  border-radius: 0.2rem;
+  transition: height 0.1s ease;
+`, s = e.span`
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+  width: 3.5rem;
+  text-align: center;
+`;
+export {
+  o as Fill,
+  s as Label,
+  n as Track,
+  i as Wrapper
+};

package/components/VideoPlayer/index.js

@@ -0,0 +1,4 @@
+import o from "./VideoPlayer.js";
+export {
+  o as default
+};

package/components/VideoPlayer/styles.js

@@ -0,0 +1,34 @@
+import t from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import o from "../../colors/black.js";
+const c = t.div`
+  position: relative;
+  display: inline-block;
+  width: ${({ $width: i }) => i}px;
+  height: ${({ $height: i }) => i}px;
+
+  &:fullscreen video {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+    background: ${o.m900};
+  }
+`, r = t.video`
+  border-radius: ${({ $borderRadius: i }) => i}px;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  max-width: ${({ width: i }) => i}px;
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+  object-fit: contain;
+
+  &:fullscreen {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+  }
+`;
+export {
+  r as Video,
+  c as VideoContainer
+};