@zeniai/web-components 3.17.23 → 3.17.24

package/dist/VerifyDevice-c6uTgDIl.js

@@ -0,0 +1,298 @@
+import { au as W, U as S, g as U, j as t, F as X } from "./vendor-.pnpm-UYinI_7q.js";
+import { useState as f, useEffect as C } from "react";
+import n from "@emotion/styled";
+import { dateNow as Z } from "@zeniai/client-epic-state";
+import { aD as z, eY as G, aL as a, Z as Q, F as y, eZ as Y, S as r, a as w, B as b, e_ as q, o as A, ag as J, C as $, n as I, e$ as K } from "./index-ymbrtWl5.js";
+import { A as ee, Z as R } from "./AccountLockedInfoModal-BqLkGmTA.js";
+const te = (e) => {
+  if (!e)
+    return "";
+  try {
+    const s = W(e);
+    if (!s) {
+      const m = e.replace(/\D/g, "");
+      if (m.length >= 4) {
+        const u = m.slice(-4);
+        return `+${m.slice(0, -4) || "1"} (•••) ••• ${u}`;
+      }
+      return S(e) || e;
+    }
+    const d = s.countryCallingCode, c = s.nationalNumber.slice(-4);
+    return `+${d} (•••) ••• ${c}`;
+  } catch {
+    const s = e.replace(/\D/g, "");
+    if (s.length >= 4) {
+      const d = s.slice(-4);
+      return `+${s.slice(0, -4) || "1"} (•••) ••• ${d}`;
+    }
+    return S(e) || e;
+  }
+}, L = 120, O = 30, _ = 2, ne = "456px", re = "256px", k = 6, o = w.getLocalizedStrings().commonSetUp.twoFactorAuthentication, g = "otpInputField", _e = (e) => {
+  const s = e.verifyOtpFetchState === "In-Progress", [d, p] = f(!1), [c, m] = f(!1), [u, F] = f(0), [v, T] = f(L), [h, D] = f(O), E = z(e.verifyOtpFetchState), x = U({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: { [g]: "" }
+  }), j = x.watch(g), M = () => {
+    e.onCancelVerifyDevice();
+  }, V = () => {
+    j.trim().length === k && e.onVerifyOtp(j);
+  }, N = o.footerHelperText.replace(
+    /<button_text>/,
+    o.verify
+  );
+  C(() => {
+    E === "In-Progress" && e.verifyOtpFetchState === "Error" && (p(!0), F((i) => i + 1), x.setValue(g, ""));
+  }, [E, e.verifyOtpFetchState, x]), C(() => {
+    if (v <= 0) {
+      m(!0);
+      return;
+    }
+    const i = setInterval(() => {
+      T((l) => l <= 1 ? 0 : l - 1);
+    }, 1e3);
+    return () => clearInterval(i);
+  }, [v]), C(() => {
+    if (h <= 0)
+      return;
+    const i = setInterval(() => {
+      D((l) => l <= 1 ? 0 : l - 1);
+    }, 1e3);
+    return () => clearInterval(i);
+  }, [h]);
+  const B = (i) => {
+    const l = Math.floor(i / 60), H = i % 60;
+    return `${l}:${H.toString().padStart(2, "0")}`;
+  };
+  return /* @__PURE__ */ t.jsx(G, { open: !0, children: /* @__PURE__ */ t.jsxs(oe, { children: [
+    /* @__PURE__ */ t.jsx(
+      a,
+      {
+        controller: u > _,
+        children: /* @__PURE__ */ t.jsx(
+          ee,
+          {
+            unlockDate: Z().add(1, "hour"),
+            onSubmit: e.onCancelVerifyDevice
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      a,
+      {
+        controller: u <= _,
+        children: /* @__PURE__ */ t.jsx(X, { ...x, children: /* @__PURE__ */ t.jsxs(ye, { children: [
+          /* @__PURE__ */ t.jsxs(ge, { children: [
+            /* @__PURE__ */ t.jsx(ie, { children: o.verifyDeviceTitle }),
+            /* @__PURE__ */ t.jsx(se, { children: o.verifyDeviceDescription }),
+            /* @__PURE__ */ t.jsxs(le, { children: [
+              e.phoneNumber != null && /* @__PURE__ */ t.jsx(ce, { children: te(e.phoneNumber + "") }),
+              /* @__PURE__ */ t.jsx(
+                Q,
+                {
+                  placement: "top",
+                  title: /* @__PURE__ */ t.jsxs(y, { children: [
+                    o.changePhoneNumberHelperText,
+                    /* @__PURE__ */ t.jsx(De, { href: `mailto:${R}`, children: R })
+                  ] }),
+                  enterDelay: 600,
+                  children: /* @__PURE__ */ t.jsx(Te, {})
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ t.jsxs(ae, { children: [
+            /* @__PURE__ */ t.jsx(
+              Y,
+              {
+                value: j,
+                valueLength: 6,
+                hasError: c === !0 || d === !0,
+                style: { margin: r.sp0 },
+                onChange: (i) => {
+                  x.setValue(g, i), p(!1);
+                }
+              }
+            ),
+            /* @__PURE__ */ t.jsx(a, { controller: c === !1, children: /* @__PURE__ */ t.jsx(P, { children: /* @__PURE__ */ t.jsxs($e, { children: [
+              o.codeExpiresIn,
+              " ",
+              B(v)
+            ] }) }) }),
+            /* @__PURE__ */ t.jsx(a, { controller: c === !0, children: /* @__PURE__ */ t.jsx(P, { children: /* @__PURE__ */ t.jsx(ve, { children: o.codeExpired }) }) })
+          ] }),
+          d === !0 && c === !1 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            /* @__PURE__ */ t.jsx(a, { controller: u >= 1, children: /* @__PURE__ */ t.jsx(de, { children: o.incorrectCode }) }),
+            /* @__PURE__ */ t.jsx(a, { controller: u === 2, children: /* @__PURE__ */ t.jsx(Ce, { children: /* @__PURE__ */ t.jsxs(y, { children: [
+              /* @__PURE__ */ t.jsx(Ie, {}),
+              o.accountLockWarning
+            ] }) }) })
+          ] }) : null,
+          /* @__PURE__ */ t.jsx(
+            a,
+            {
+              controller: e.resendVerifyDeviceOTPFetchState.error?.details?.application_error_code !== "OTP_RESEND_LIMIT_EXCEEDED",
+              children: /* @__PURE__ */ t.jsxs(me, { children: [
+                /* @__PURE__ */ t.jsx(ue, { children: o.codeNotReceived }),
+                /* @__PURE__ */ t.jsx(
+                  xe,
+                  {
+                    disabled: h > 0,
+                    onClick: () => {
+                      h === 0 && (e.onResendOtp(), p(!1), m(!1), x.setValue(g, ""), T(L), D(O));
+                    },
+                    children: o.resend
+                  }
+                ),
+                h > 0 && /* @__PURE__ */ t.jsxs(he, { children: [
+                  w.getLocalizedStrings().common.in.toLowerCase(),
+                  " ",
+                  h,
+                  "s"
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t.jsxs(je, { children: [
+            /* @__PURE__ */ t.jsxs(pe, { children: [
+              /* @__PURE__ */ t.jsx(
+                b,
+                {
+                  label: o.cancel,
+                  onClick: M,
+                  style: { width: 82 }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                b,
+                {
+                  variant: "primary",
+                  label: o.verify,
+                  onClick: V,
+                  style: { width: 82 },
+                  loading: s,
+                  disabled: j.trim().length !== k || c === !0
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t.jsx(fe, { children: N })
+          ] })
+        ] }) })
+      }
+    )
+  ] }) });
+}, oe = n.div`
+  display: flex;
+  flex-direction: column;
+  min-width: ${re};
+  max-width: ${ne};
+  padding: ${r.sp5} ${r.sp6};
+  background: ${(e) => e.theme.colors.grey5};
+  border-radius: ${r.sp2};
+`, ie = n(q)`
+  color: ${(e) => e.theme.colors.primary};
+  text-align: center;
+`, se = n(A)`
+  color: ${(e) => e.theme.colors.hero};
+  text-align: center;
+`, ce = n(A)`
+  color: ${(e) => e.theme.colors.primary};
+  text-align: center;
+`, le = n.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp1};
+`, ae = n.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  row-gap: ${r.sp1};
+`, de = n(I)`
+  color: ${$.important};
+  text-align: center;
+`, me = n.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: ${r.sp1};
+`, ue = n(I)`
+  color: ${(e) => e.theme.colors.hero};
+`, he = n(I)`
+  color: ${(e) => e.theme.colors.hero};
+`, xe = n.button`
+  color: ${(e) => e.disabled ? e.theme.colors.grey2 : e.theme.colors.link};
+  cursor: ${(e) => e.disabled ? "default" : "pointer"};
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+
+  &:hover {
+    color: ${(e) => e.disabled ? e.theme.colors.grey2 : e.theme.colors.primary};
+  }
+`, pe = n.div`
+  display: flex;
+  justify-content: center;
+  column-gap: ${r.sp3};
+`, fe = n(y)`
+  color: ${(e) => e.theme.colors.hero};
+  text-align: center;
+`, ge = n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: ${r.sp2};
+`, ye = n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: ${r.sp3};
+`, je = n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: ${r.sp2};
+  margin-top: ${r.sp2};
+`, P = n.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${(e) => e.theme.colors.background};
+`, $e = n(y)`
+  color: ${(e) => e.theme.colors.hero};
+  text-align: center;
+`, ve = n(y)`
+  color: ${$.important};
+  text-align: center;
+`, Ce = n.div`
+  display: flex;
+  justify-content: center;
+  background: ${$.importantLight};
+  border-radius: ${r.sp1};
+  color: ${$.important};
+  word-wrap: normal;
+  padding: ${r.sp1} ${r.sp6};
+  text-align: center;
+`, Ie = n(K)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  top: 2px;
+  position: relative;
+`, Te = n(J)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${(e) => e.theme.colors.grey1};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, De = n.a`
+  text-decoration: underline;
+  color: inherit;
+`;
+export {
+  _e as default
+};

package/dist/VideoPlayer-BgTXP1p7.js

@@ -0,0 +1,170 @@
+import { j as t, C as b } from "./vendor-.pnpm-UYinI_7q.js";
+import * as e from "react";
+import { useState as j, useEffect as A } from "react";
+import { keyframes as S } from "@emotion/react";
+import n from "@emotion/styled";
+import { createPortal as P } from "react-dom";
+import y from "react-player";
+import { u as U, C as G } from "./index-ymbrtWl5.js";
+const I = (r) => /* @__PURE__ */ e.createElement("svg", { width: 208, height: 208, viewBox: "0 0 208 208", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ e.createElement("g", { filter: "url(#filter0_f_251_38441)" }, /* @__PURE__ */ e.createElement("circle", { cx: 104, cy: 104, r: 44, fill: "url(#paint0_linear_251_38441)" }), /* @__PURE__ */ e.createElement("circle", { cx: 104, cy: 104, r: 50, stroke: "url(#paint1_linear_251_38441)", strokeWidth: 12 })), /* @__PURE__ */ e.createElement("g", { filter: "url(#filter1_d_251_38441)" }, /* @__PURE__ */ e.createElement("circle", { cx: 104, cy: 104, r: 41.1429, fill: "#FAFAFA" }), /* @__PURE__ */ e.createElement("circle", { cx: 104, cy: 104, r: 43.1429, stroke: "url(#paint2_linear_251_38441)", strokeWidth: 4 })), /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_251_38441)" }, /* @__PURE__ */ e.createElement("path", { d: "M120.16 102.411L96.2853 90.4684C96.0134 90.3343 95.7118 90.2718 95.409 90.2867C95.1062 90.3016 94.8122 90.3935 94.5548 90.5536C94.2974 90.7138 94.0851 90.9369 93.938 91.202C93.7908 91.467 93.7137 91.7652 93.7139 92.0684V115.931C93.7137 116.234 93.7908 116.533 93.938 116.798C94.0851 117.063 94.2974 117.286 94.5548 117.446C94.8122 117.606 95.1062 117.698 95.409 117.713C95.7118 117.728 96.0134 117.665 96.2853 117.531L120.16 105.588C120.456 105.442 120.706 105.216 120.88 104.935C121.055 104.654 121.147 104.33 121.147 104C121.147 103.669 121.055 103.345 120.88 103.065C120.706 102.784 120.456 102.558 120.16 102.411Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("filter", { id: "filter0_f_251_38441", x: 0, y: 0, width: 208, height: 208, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ e.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ e.createElement("feGaussianBlur", { stdDeviation: 24, result: "effect1_foregroundBlur_251_38441" })), /* @__PURE__ */ e.createElement("filter", { id: "filter1_d_251_38441", x: 54.8569, y: 58.8571, width: 98.2856, height: 98.2857, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ e.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ e.createElement("feOffset", { dy: 4 }), /* @__PURE__ */ e.createElement("feGaussianBlur", { stdDeviation: 2 }), /* @__PURE__ */ e.createElement("feComposite", { in2: "hardAlpha", operator: "out" }), /* @__PURE__ */ e.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_251_38441" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_251_38441", result: "shape" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint0_linear_251_38441", x1: 119.671, y1: 119.671, x2: 87.9755, y2: 87.9758, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#7135FF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.27204, stopColor: "#A050E4" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.364594, stopColor: "#B85ED7" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.546546, stopColor: "#CF6CC9" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.732127, stopColor: "#EE609C" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.85586, stopColor: "#EB61A0" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#EE609C" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint1_linear_251_38441", x1: 119.671, y1: 119.671, x2: 87.9755, y2: 87.9758, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#7135FF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.27204, stopColor: "#A050E4" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.364594, stopColor: "#B85ED7" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.546546, stopColor: "#CF6CC9" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.732127, stopColor: "#EE609C" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.85586, stopColor: "#EB61A0" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#EE609C" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint2_linear_251_38441", x1: 118.653, y1: 118.653, x2: 89.0159, y2: 89.0164, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#7135FF" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.27204, stopColor: "#A050E4" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.364594, stopColor: "#B85ED7" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.546546, stopColor: "#CF6CC9" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.732127, stopColor: "#EE609C" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.85586, stopColor: "#EB61A0" }), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopColor: "#EE609C" })), /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_251_38441" }, /* @__PURE__ */ e.createElement("rect", { width: 27.4286, height: 27.4286, fill: "white", transform: "translate(93.7139 90.2849)" }))));
+function N({
+  src: r,
+  autoPlay: p = !0,
+  config: d,
+  controls: m = !0,
+  height: _ = "100%",
+  isModalOpen: o,
+  loop: E = !1,
+  muted: u = !1,
+  showPlayButton: s = !1,
+  style: w,
+  thumbnail: i,
+  width: v = "100%",
+  onEnded: F,
+  onModalClose: C,
+  onPlay: h
+}) {
+  const c = U(), [a, l] = j(!1);
+  A(() => {
+    o === !0 && p ? l(!0) : o === !1 && l(!1);
+  }, [o, p]);
+  const f = {};
+  d?.youtube && (f.youtube = d.youtube);
+  const B = () => {
+    l(!0), h?.();
+  }, k = () => {
+    l(!1), C?.();
+  }, g = () => {
+    l(!1), F?.(), o != null && C?.();
+  }, x = () => {
+    l(!0), h?.();
+  };
+  return o != null ? o ? P(
+    /* @__PURE__ */ t.jsx(O, { windowSize: c, role: "presentation", children: /* @__PURE__ */ t.jsx(b, { onClickAway: k, children: /* @__PURE__ */ t.jsx(
+      W,
+      {
+        windowSize: c,
+        "data-testid": "video-player-modal",
+        children: /* @__PURE__ */ t.jsxs($, { children: [
+          s && !a && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            i != null && i !== "" && /* @__PURE__ */ t.jsx(R, { src: i, alt: "Video thumbnail" }),
+            /* @__PURE__ */ t.jsx(V, { onClick: B, children: /* @__PURE__ */ t.jsx(z, { windowSize: c }) })
+          ] }),
+          (!s || a) && /* @__PURE__ */ t.jsx(
+            y,
+            {
+              src: r,
+              playing: a,
+              controls: m,
+              muted: u,
+              loop: E,
+              width: "100%",
+              height: "100%",
+              onEnded: g,
+              onPlay: x,
+              config: f
+            }
+          )
+        ] })
+      }
+    ) }) }),
+    document.body
+  ) : null : /* @__PURE__ */ t.jsx(
+    y,
+    {
+      src: r,
+      playing: a,
+      controls: m,
+      muted: u,
+      loop: E,
+      width: v,
+      height: _,
+      style: w,
+      light: s && !a ? i ?? !0 : !1,
+      onEnded: g,
+      onPlay: x,
+      config: f
+    }
+  );
+}
+const D = S`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`, V = n.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  z-index: 1;
+
+  &:hover {
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+
+  // The code below handles play button animation effects.
+  svg {
+    display: block;
+
+    g:nth-of-type(1),
+    g:nth-of-type(2) {
+      transform-origin: 104px 104px;
+      animation: ${D} 3s linear infinite;
+    }
+
+    g:nth-of-type(3) {
+      transform-origin: 104px 104px;
+    }
+  }
+`, z = n(I)`
+  width: auto;
+  height: auto;
+`, R = n.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+`, O = n.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1300;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: ${G.overlayDark};
+`, W = n.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: ${(r) => r.theme.colors.grey3};
+  border-radius: 25px;
+  position: relative;
+  width: min(calc(100vw - 96px), calc((100vh - 96px) * 16 / 9));
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  border: 3px solid ${(r) => r.theme.colors.grey2};
+  box-sizing: content-box;
+`, $ = n.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 22px;
+  overflow: hidden;
+`;
+export {
+  I as S,
+  N as V
+};

package/dist/VideoPlayer-ZbVuqLXm.cjs

@@ -0,0 +1,77 @@
+"use strict";const r=require("./vendor-.pnpm-DLVCFIC_.cjs"),m=require("react"),S=require("@emotion/react"),s=require("@emotion/styled"),A=require("react-dom"),_=require("react-player"),j=require("./index-BSvKy2E6.cjs");function P(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,a.get?a:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const e=P(m),w=t=>e.createElement("svg",{width:208,height:208,viewBox:"0 0 208 208",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},e.createElement("g",{filter:"url(#filter0_f_251_38441)"},e.createElement("circle",{cx:104,cy:104,r:44,fill:"url(#paint0_linear_251_38441)"}),e.createElement("circle",{cx:104,cy:104,r:50,stroke:"url(#paint1_linear_251_38441)",strokeWidth:12})),e.createElement("g",{filter:"url(#filter1_d_251_38441)"},e.createElement("circle",{cx:104,cy:104,r:41.1429,fill:"#FAFAFA"}),e.createElement("circle",{cx:104,cy:104,r:43.1429,stroke:"url(#paint2_linear_251_38441)",strokeWidth:4})),e.createElement("g",{clipPath:"url(#clip0_251_38441)"},e.createElement("path",{d:"M120.16 102.411L96.2853 90.4684C96.0134 90.3343 95.7118 90.2718 95.409 90.2867C95.1062 90.3016 94.8122 90.3935 94.5548 90.5536C94.2974 90.7138 94.0851 90.9369 93.938 91.202C93.7908 91.467 93.7137 91.7652 93.7139 92.0684V115.931C93.7137 116.234 93.7908 116.533 93.938 116.798C94.0851 117.063 94.2974 117.286 94.5548 117.446C94.8122 117.606 95.1062 117.698 95.409 117.713C95.7118 117.728 96.0134 117.665 96.2853 117.531L120.16 105.588C120.456 105.442 120.706 105.216 120.88 104.935C121.055 104.654 121.147 104.33 121.147 104C121.147 103.669 121.055 103.345 120.88 103.065C120.706 102.784 120.456 102.558 120.16 102.411Z",fill:"black"})),e.createElement("defs",null,e.createElement("filter",{id:"filter0_f_251_38441",x:0,y:0,width:208,height:208,filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB"},e.createElement("feFlood",{floodOpacity:0,result:"BackgroundImageFix"}),e.createElement("feBlend",{mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),e.createElement("feGaussianBlur",{stdDeviation:24,result:"effect1_foregroundBlur_251_38441"})),e.createElement("filter",{id:"filter1_d_251_38441",x:54.8569,y:58.8571,width:98.2856,height:98.2857,filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB"},e.createElement("feFlood",{floodOpacity:0,result:"BackgroundImageFix"}),e.createElement("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),e.createElement("feOffset",{dy:4}),e.createElement("feGaussianBlur",{stdDeviation:2}),e.createElement("feComposite",{in2:"hardAlpha",operator:"out"}),e.createElement("feColorMatrix",{type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"}),e.createElement("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_251_38441"}),e.createElement("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow_251_38441",result:"shape"})),e.createElement("linearGradient",{id:"paint0_linear_251_38441",x1:119.671,y1:119.671,x2:87.9755,y2:87.9758,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"#7135FF"}),e.createElement("stop",{offset:.27204,stopColor:"#A050E4"}),e.createElement("stop",{offset:.364594,stopColor:"#B85ED7"}),e.createElement("stop",{offset:.546546,stopColor:"#CF6CC9"}),e.createElement("stop",{offset:.732127,stopColor:"#EE609C"}),e.createElement("stop",{offset:.85586,stopColor:"#EB61A0"}),e.createElement("stop",{offset:1,stopColor:"#EE609C"})),e.createElement("linearGradient",{id:"paint1_linear_251_38441",x1:119.671,y1:119.671,x2:87.9755,y2:87.9758,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"#7135FF"}),e.createElement("stop",{offset:.27204,stopColor:"#A050E4"}),e.createElement("stop",{offset:.364594,stopColor:"#B85ED7"}),e.createElement("stop",{offset:.546546,stopColor:"#CF6CC9"}),e.createElement("stop",{offset:.732127,stopColor:"#EE609C"}),e.createElement("stop",{offset:.85586,stopColor:"#EB61A0"}),e.createElement("stop",{offset:1,stopColor:"#EE609C"})),e.createElement("linearGradient",{id:"paint2_linear_251_38441",x1:118.653,y1:118.653,x2:89.0159,y2:89.0164,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"#7135FF"}),e.createElement("stop",{offset:.27204,stopColor:"#A050E4"}),e.createElement("stop",{offset:.364594,stopColor:"#B85ED7"}),e.createElement("stop",{offset:.546546,stopColor:"#CF6CC9"}),e.createElement("stop",{offset:.732127,stopColor:"#EE609C"}),e.createElement("stop",{offset:.85586,stopColor:"#EB61A0"}),e.createElement("stop",{offset:1,stopColor:"#EE609C"})),e.createElement("clipPath",{id:"clip0_251_38441"},e.createElement("rect",{width:27.4286,height:27.4286,fill:"white",transform:"translate(93.7139 90.2849)"}))));function O({src:t,autoPlay:n=!0,config:o,controls:a=!0,height:v="100%",isModalOpen:l,loop:E=!1,muted:x=!1,showPlayButton:p=!1,style:b,thumbnail:f,width:B="100%",onEnded:F,onModalClose:h,onPlay:C}){const d=j.useWindowSizeContext(),[c,i]=m.useState(!1);m.useEffect(()=>{l===!0&&n?i(!0):l===!1&&i(!1)},[l,n]);const u={};o?.youtube&&(u.youtube=o.youtube);const k=()=>{i(!0),C?.()},R=()=>{i(!1),h?.()},g=()=>{i(!1),F?.(),l!=null&&h?.()},y=()=>{i(!0),C?.()};return l!=null?l?A.createPortal(r.jsxRuntimeExports.jsx(q,{windowSize:d,role:"presentation",children:r.jsxRuntimeExports.jsx(r.ClickAwayListener,{onClickAway:R,children:r.jsxRuntimeExports.jsx(z,{windowSize:d,"data-testid":"video-player-modal",children:r.jsxRuntimeExports.jsxs(V,{children:[p&&!c&&r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[f!=null&&f!==""&&r.jsxRuntimeExports.jsx(I,{src:f,alt:"Video thumbnail"}),r.jsxRuntimeExports.jsx(D,{onClick:k,children:r.jsxRuntimeExports.jsx(G,{windowSize:d})})]}),(!p||c)&&r.jsxRuntimeExports.jsx(_,{src:t,playing:c,controls:a,muted:x,loop:E,width:"100%",height:"100%",onEnded:g,onPlay:y,config:u})]})})})}),document.body):null:r.jsxRuntimeExports.jsx(_,{src:t,playing:c,controls:a,muted:x,loop:E,width:B,height:v,style:b,light:p&&!c?f??!0:!1,onEnded:g,onPlay:y,config:u})}const U=S.keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`,D=s.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  z-index: 1;
+
+  &:hover {
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+
+  // The code below handles play button animation effects.
+  svg {
+    display: block;
+
+    g:nth-of-type(1),
+    g:nth-of-type(2) {
+      transform-origin: 104px 104px;
+      animation: ${U} 3s linear infinite;
+    }
+
+    g:nth-of-type(3) {
+      transform-origin: 104px 104px;
+    }
+  }
+`,G=s(w)`
+  width: auto;
+  height: auto;
+`,I=s.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+`,q=s.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1300;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: ${j.Colors.overlayDark};
+`,z=s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: ${t=>t.theme.colors.grey3};
+  border-radius: 25px;
+  position: relative;
+  width: min(calc(100vw - 96px), calc((100vh - 96px) * 16 / 9));
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  border: 3px solid ${t=>t.theme.colors.grey2};
+  box-sizing: content-box;
+`,V=s.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 22px;
+  overflow: hidden;
+`;exports.SvgPlayButton=w;exports.VideoPlayer=O;

package/dist/VideoPopup-BD0vmbkL.js

@@ -0,0 +1,60 @@
+import { j as i, C as a } from "./vendor-.pnpm-UYinI_7q.js";
+import t from "@emotion/styled";
+import { u as d, e as l, C as c, S as n, R as r } from "./index-ymbrtWl5.js";
+import { V as p } from "./VideoPlayer-BgTXP1p7.js";
+const s = {
+  width: new r(300, 770, 770),
+  height: new r(195, 500, 500)
+}, h = t.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${c.blackColor}CC;
+`, w = t.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  background: ${(e) => e.theme.colors.grey5};
+  border-radius: ${n.sp2};
+  position: relative;
+  top: 5%;
+  width: ${(e) => s.width.valuePx(e.windowSize)};
+  height: ${(e) => s.height.valuePx(e.windowSize)};
+  padding: ${n.sp3};
+  background: ${(e) => e.theme.colors.grey3};
+`, x = t.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+function f(e) {
+  const o = d();
+  return /* @__PURE__ */ i.jsx(h, { windowSize: o, role: "presentation", children: /* @__PURE__ */ i.jsx(a, { onClickAway: () => e.onCancelClick(), children: /* @__PURE__ */ i.jsx(
+    w,
+    {
+      windowSize: o,
+      "data-testid": l("video-popup"),
+      children: /* @__PURE__ */ i.jsx(x, { children: /* @__PURE__ */ i.jsx(
+        p,
+        {
+          src: e.videoUrl,
+          controls: !0,
+          width: "100%",
+          height: "100%"
+        }
+      ) })
+    }
+  ) }) });
+}
+export {
+  f as V
+};

package/dist/VideoPopup-Bvy2UcOe.cjs

@@ -0,0 +1,31 @@
+"use strict";const t=require("./vendor-.pnpm-DLVCFIC_.cjs"),n=require("@emotion/styled"),i=require("./index-BSvKy2E6.cjs"),s=require("./VideoPlayer-ZbVuqLXm.cjs"),r={width:new i.ResponsiveSized(300,770,770),height:new i.ResponsiveSized(195,500,500)},d=n.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${i.Colors.blackColor}CC;
+`,c=n.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  background: ${e=>e.theme.colors.grey5};
+  border-radius: ${i.Space.sp2};
+  position: relative;
+  top: 5%;
+  width: ${e=>r.width.valuePx(e.windowSize)};
+  height: ${e=>r.height.valuePx(e.windowSize)};
+  padding: ${i.Space.sp3};
+  background: ${e=>e.theme.colors.grey3};
+`,l=n.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;function a(e){const o=i.useWindowSizeContext();return t.jsxRuntimeExports.jsx(d,{windowSize:o,role:"presentation",children:t.jsxRuntimeExports.jsx(t.ClickAwayListener,{onClickAway:()=>e.onCancelClick(),children:t.jsxRuntimeExports.jsx(c,{windowSize:o,"data-testid":i.generateDataTestId("video-popup"),children:t.jsxRuntimeExports.jsx(l,{children:t.jsxRuntimeExports.jsx(s.VideoPlayer,{src:e.videoUrl,controls:!0,width:"100%",height:"100%"})})})})})}exports.VideoPopup=a;