@x-plat/design-system 0.1.1

package/dist/components/Video/index.cjs

@@ -0,0 +1,269 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Video/index.ts
+var Video_exports = {};
+__export(Video_exports, {
+  Video: () => Video_default
+});
+module.exports = __toCommonJS(Video_exports);
+
+// src/components/Video/Video.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/tokens/svg/media/AirplayIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/tokens/svg/media/CameraIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/CameraOffIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/CastIcon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/DiscIcon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/FastForwardIcon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/FilmIcon.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/HeadphonesIcon.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/ImageIcon.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/MicIcon.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/MicOffIcon.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/MusicIcon.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/PauseCircleIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/PauseIcon.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var PauseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.33301 2.58301C8.74714 2.58301 9.08288 2.91891 9.08301 3.33301V16.666C9.08301 17.0802 8.74722 17.416 8.33301 17.416H5C4.58579 17.416 4.25 17.0802 4.25 16.666V3.33301C4.25013 2.91891 4.58587 2.58301 5 2.58301H8.33301ZM5.75 15.916H7.58301V4.08301H5.75V15.916Z", fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 2.58301C15.4139 2.58327 15.7499 2.91907 15.75 3.33301V16.666C15.75 17.0801 15.414 17.4158 15 17.416H11.667C11.2528 17.416 10.917 17.0802 10.917 16.666V3.33301C10.9171 2.91891 11.2529 2.58301 11.667 2.58301H15ZM12.417 15.916H14.25V4.08301H12.417V15.916Z", fill: "currentColor" })
+    ]
+  }
+);
+var PauseIcon_default = PauseIcon;
+
+// src/tokens/svg/media/PlayCircleIcon.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var PlayCircleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { clipPath: "url(#playcircle-clip)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.98047 6.00586C8.22424 5.87564 8.52002 5.88965 8.75 6.04297L13.75 9.37598C13.9583 9.51505 14.0839 9.74954 14.084 10C14.0839 10.2505 13.9584 10.4849 13.75 10.624L8.75 13.958C8.52015 14.1112 8.22412 14.1251 7.98047 13.9951C7.73677 13.8647 7.58419 13.6104 7.58398 13.334V6.66699L7.59082 6.56445C7.6233 6.32874 7.7671 6.12005 7.98047 6.00586ZM9.08398 11.9316L11.9814 10L9.08398 8.06738V11.9316Z", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 0.916992C15.0163 0.917256 19.0838 4.98373 19.084 10C19.0839 15.0163 15.0163 19.0837 10 19.084C4.98364 19.0838 0.916148 15.0164 0.916016 10C0.916191 4.98367 4.98367 0.917168 10 0.916992ZM10 2.41699C5.8121 2.41717 2.41717 5.8121 2.41699 10C2.41712 14.1879 5.81207 17.5838 10 17.584C14.1879 17.5837 17.5839 14.1879 17.584 10C17.5838 5.81215 14.1878 2.41726 10 2.41699Z", fill: "currentColor" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("clipPath", { id: "playcircle-clip", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
+    ]
+  }
+);
+var PlayCircleIcon_default = PlayCircleIcon;
+
+// src/tokens/svg/media/PlayIcon.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/RepeatIcon.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/RewindIcon.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/SkipBackIcon.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/SkipForwardIcon.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/SpeakerIcon.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/StopCircleIcon.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/VideoIcon.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/VideoOffIcon.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/Volume1Icon.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/Volume2Icon.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/VolumeIcon.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/VolumeXIcon.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Video/Video.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Video = import_react.default.forwardRef((props, ref) => {
+  const {
+    src,
+    poster,
+    controls = true,
+    autoPlay,
+    muted,
+    loop,
+    playsInline,
+    className,
+    onPlay,
+    onPause,
+    ...rest
+  } = props;
+  const videoRef = import_react.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react.default.useState(false);
+  const setRefs = import_react.default.useCallback(
+    (el) => {
+      videoRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  const handlePlay = (e) => {
+    setIsPlaying(true);
+    onPlay?.(e);
+  };
+  const handlePause = (e) => {
+    setIsPlaying(false);
+    onPause?.(e);
+  };
+  const handleLoadedData = () => {
+    setIsLoaded(true);
+  };
+  const togglePlay = () => {
+    if (!videoRef.current) return;
+    if (isPlaying) {
+      videoRef.current.pause();
+    } else {
+      videoRef.current.play();
+    }
+  };
+  const showCustomOverlay = !controls;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      className: clsx_default(
+        "lib-xplat-video",
+        showCustomOverlay && "custom-overlay",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "video",
+          {
+            ref: setRefs,
+            src,
+            poster,
+            controls,
+            autoPlay,
+            muted,
+            loop,
+            playsInline: playsInline ?? true,
+            onPlay: handlePlay,
+            onPause: handlePause,
+            onLoadedData: handleLoadedData,
+            ...rest
+          }
+        ),
+        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            className: clsx_default(
+              "play-overlay",
+              isPlaying && "is-playing",
+              !isLoaded && "is-loading"
+            ),
+            onClick: togglePlay,
+            "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlayCircleIcon_default, {}) })
+          }
+        )
+      ]
+    }
+  );
+});
+Video.displayName = "Video";
+var Video_default = Video;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Video
+});

package/dist/components/Video/index.css

@@ -0,0 +1,71 @@
+/* src/components/Video/video.scss */
+.lib-xplat-video {
+  position: relative;
+  width: 100%;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: #171717;
+}
+.lib-xplat-video > video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  vertical-align: middle;
+}
+.lib-xplat-video.custom-overlay > video {
+  cursor: pointer;
+}
+.lib-xplat-video.custom-overlay > .play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  color: #FFFFFF;
+  transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+.lib-xplat-video.custom-overlay > .play-overlay::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.lib-xplat-video.custom-overlay > .play-overlay:hover::before,
+.lib-xplat-video.custom-overlay > .play-overlay:focus-visible::before {
+  opacity: 1;
+}
+.lib-xplat-video.custom-overlay > .play-overlay:focus-visible {
+  outline: 2px solid #4D6DE3;
+  outline-offset: 2px;
+}
+.lib-xplat-video.custom-overlay > .play-overlay > .play-icon {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 4rem;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
+}
+.lib-xplat-video.custom-overlay > .play-overlay.is-playing {
+  opacity: 0;
+  pointer-events: none;
+}
+.lib-xplat-video.custom-overlay > .play-overlay.is-playing:hover {
+  opacity: 1;
+  pointer-events: auto;
+}
+.lib-xplat-video.custom-overlay > .play-overlay.is-loading .play-icon {
+  opacity: 0.6;
+}

package/dist/components/Video/index.d.cts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className"> {
+    /** 비디오 소스 URL */
+    src: string;
+    /** 재생 전 썸네일 이미지 URL */
+    poster?: string;
+    /** 네이티브 컨트롤 표시 여부. false면 커스텀 재생/일시정지 오버레이만 표시 */
+    controls?: boolean;
+    /** 추가 스타일링용 클래스 */
+    className?: string;
+}
+declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
+
+export { Video, type VideoProps };

package/dist/components/Video/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className"> {
+    /** 비디오 소스 URL */
+    src: string;
+    /** 재생 전 썸네일 이미지 URL */
+    poster?: string;
+    /** 네이티브 컨트롤 표시 여부. false면 커스텀 재생/일시정지 오버레이만 표시 */
+    controls?: boolean;
+    /** 추가 스타일링용 클래스 */
+    className?: string;
+}
+declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
+
+export { Video, type VideoProps };

package/dist/components/Video/index.js

@@ -0,0 +1,232 @@
+// src/components/Video/Video.tsx
+import React from "react";
+
+// src/tokens/svg/media/AirplayIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/tokens/svg/media/CameraIcon.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/CameraOffIcon.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/CastIcon.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/DiscIcon.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/FastForwardIcon.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/FilmIcon.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/HeadphonesIcon.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/ImageIcon.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/MicIcon.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/MicOffIcon.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/MusicIcon.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/PauseCircleIcon.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/PauseIcon.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var PauseIcon = () => /* @__PURE__ */ jsxs12(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx14("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.33301 2.58301C8.74714 2.58301 9.08288 2.91891 9.08301 3.33301V16.666C9.08301 17.0802 8.74722 17.416 8.33301 17.416H5C4.58579 17.416 4.25 17.0802 4.25 16.666V3.33301C4.25013 2.91891 4.58587 2.58301 5 2.58301H8.33301ZM5.75 15.916H7.58301V4.08301H5.75V15.916Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx14("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 2.58301C15.4139 2.58327 15.7499 2.91907 15.75 3.33301V16.666C15.75 17.0801 15.414 17.4158 15 17.416H11.667C11.2528 17.416 10.917 17.0802 10.917 16.666V3.33301C10.9171 2.91891 11.2529 2.58301 11.667 2.58301H15ZM12.417 15.916H14.25V4.08301H12.417V15.916Z", fill: "currentColor" })
+    ]
+  }
+);
+var PauseIcon_default = PauseIcon;
+
+// src/tokens/svg/media/PlayCircleIcon.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var PlayCircleIcon = () => /* @__PURE__ */ jsxs13(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs13("g", { clipPath: "url(#playcircle-clip)", children: [
+        /* @__PURE__ */ jsx15("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.98047 6.00586C8.22424 5.87564 8.52002 5.88965 8.75 6.04297L13.75 9.37598C13.9583 9.51505 14.0839 9.74954 14.084 10C14.0839 10.2505 13.9584 10.4849 13.75 10.624L8.75 13.958C8.52015 14.1112 8.22412 14.1251 7.98047 13.9951C7.73677 13.8647 7.58419 13.6104 7.58398 13.334V6.66699L7.59082 6.56445C7.6233 6.32874 7.7671 6.12005 7.98047 6.00586ZM9.08398 11.9316L11.9814 10L9.08398 8.06738V11.9316Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx15("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 0.916992C15.0163 0.917256 19.0838 4.98373 19.084 10C19.0839 15.0163 15.0163 19.0837 10 19.084C4.98364 19.0838 0.916148 15.0164 0.916016 10C0.916191 4.98367 4.98367 0.917168 10 0.916992ZM10 2.41699C5.8121 2.41717 2.41717 5.8121 2.41699 10C2.41712 14.1879 5.81207 17.5838 10 17.584C14.1879 17.5837 17.5839 14.1879 17.584 10C17.5838 5.81215 14.1878 2.41726 10 2.41699Z", fill: "currentColor" })
+      ] }),
+      /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "playcircle-clip", children: /* @__PURE__ */ jsx15("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
+    ]
+  }
+);
+var PlayCircleIcon_default = PlayCircleIcon;
+
+// src/tokens/svg/media/PlayIcon.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/RepeatIcon.tsx
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/RewindIcon.tsx
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/SkipBackIcon.tsx
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/SkipForwardIcon.tsx
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/SpeakerIcon.tsx
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/StopCircleIcon.tsx
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/VideoIcon.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/VideoOffIcon.tsx
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/Volume1Icon.tsx
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/Volume2Icon.tsx
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/VolumeIcon.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+
+// src/tokens/svg/media/VolumeXIcon.tsx
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Video/Video.tsx
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+var Video = React.forwardRef((props, ref) => {
+  const {
+    src,
+    poster,
+    controls = true,
+    autoPlay,
+    muted,
+    loop,
+    playsInline,
+    className,
+    onPlay,
+    onPause,
+    ...rest
+  } = props;
+  const videoRef = React.useRef(null);
+  const [isPlaying, setIsPlaying] = React.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const setRefs = React.useCallback(
+    (el) => {
+      videoRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  const handlePlay = (e) => {
+    setIsPlaying(true);
+    onPlay?.(e);
+  };
+  const handlePause = (e) => {
+    setIsPlaying(false);
+    onPause?.(e);
+  };
+  const handleLoadedData = () => {
+    setIsLoaded(true);
+  };
+  const togglePlay = () => {
+    if (!videoRef.current) return;
+    if (isPlaying) {
+      videoRef.current.pause();
+    } else {
+      videoRef.current.play();
+    }
+  };
+  const showCustomOverlay = !controls;
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      className: clsx_default(
+        "lib-xplat-video",
+        showCustomOverlay && "custom-overlay",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx29(
+          "video",
+          {
+            ref: setRefs,
+            src,
+            poster,
+            controls,
+            autoPlay,
+            muted,
+            loop,
+            playsInline: playsInline ?? true,
+            onPlay: handlePlay,
+            onPause: handlePause,
+            onLoadedData: handleLoadedData,
+            ...rest
+          }
+        ),
+        showCustomOverlay && /* @__PURE__ */ jsx29(
+          "button",
+          {
+            type: "button",
+            className: clsx_default(
+              "play-overlay",
+              isPlaying && "is-playing",
+              !isLoaded && "is-loading"
+            ),
+            onClick: togglePlay,
+            "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+            children: isPlaying ? /* @__PURE__ */ jsx29(PauseIcon_default, {}) : /* @__PURE__ */ jsx29("span", { className: "play-icon", children: /* @__PURE__ */ jsx29(PlayCircleIcon_default, {}) })
+          }
+        )
+      ]
+    }
+  );
+});
+Video.displayName = "Video";
+var Video_default = Video;
+export {
+  Video_default as Video
+};