@x-plat/design-system 0.5.4 → 0.5.6

package/dist/components/index.js

@@ -51,6 +51,21 @@ import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/DownloadIcon.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var DownloadIcon = () => /* @__PURE__ */ jsxs5(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx5("path", { d: "M17.5 11.75C17.9142 11.75 18.25 12.0858 18.25 12.5V15.833C18.25 16.4739 17.9952 17.0888 17.542 17.542C17.0888 17.9952 16.4739 18.25 15.833 18.25H4.16699C3.52605 18.25 2.91122 17.9952 2.45801 17.542C2.00479 17.0888 1.75 16.4739 1.75 15.833V12.5C1.75 12.0858 2.08579 11.75 2.5 11.75C2.91421 11.75 3.25 12.0858 3.25 12.5V15.833C3.25 16.0761 3.34665 16.3095 3.51855 16.4814C3.69046 16.6534 3.92388 16.75 4.16699 16.75H15.833C16.0761 16.75 16.3095 16.6534 16.4814 16.4814C16.6534 16.3095 16.75 16.0761 16.75 15.833V12.5C16.75 12.0858 17.0858 11.75 17.5 11.75Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx5("path", { d: "M10 1.75C10.4142 1.75 10.75 2.08579 10.75 2.5V10.6885L13.6367 7.80273C13.9296 7.51026 14.4045 7.51013 14.6973 7.80273C14.9899 8.09552 14.9898 8.5704 14.6973 8.86328L10.5312 13.0303C10.4709 13.0906 10.4007 13.1354 10.3281 13.1709C10.3146 13.1776 10.3021 13.1865 10.2881 13.1924C10.253 13.207 10.2163 13.2156 10.1797 13.2246C10.1691 13.2272 10.1592 13.2322 10.1484 13.2344C10.1429 13.2355 10.1374 13.2363 10.1318 13.2373C10.0896 13.2448 10.0463 13.2489 10.002 13.249L10 13.25C9.95423 13.25 9.90972 13.2442 9.86621 13.2363C9.86168 13.2355 9.85706 13.2353 9.85254 13.2344C9.82836 13.2295 9.80551 13.221 9.78223 13.2139C9.76008 13.2071 9.73738 13.2022 9.71582 13.1934C9.68772 13.1818 9.66201 13.1661 9.63574 13.1514C9.5804 13.1204 9.52713 13.0842 9.47949 13.0381C9.47469 13.0334 9.46952 13.0292 9.46484 13.0244L5.30371 8.86328C5.01082 8.57039 5.01082 8.09563 5.30371 7.80273C5.59663 7.51021 6.07149 7.50996 6.36426 7.80273L9.25 10.6885V2.5C9.25 2.08579 9.58579 1.75 10 1.75Z", fill: "currentColor" })
+    ]
+  }
+);
+var DownloadIcon_default = DownloadIcon;
 
 // src/tokens/svg/action/Edit2Icon.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -497,6 +512,18 @@ import { jsx as jsx123, jsxs as jsxs70 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/TypeIcon.tsx
 import { jsx as jsx124 } from "react/jsx-runtime";
+var TypeIcon = () => /* @__PURE__ */ jsx124(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx124("path", { d: "M16.667 2.58301C17.0809 2.58327 17.4169 2.91907 17.417 3.33301V5.83301C17.417 6.24706 17.081 6.58274 16.667 6.58301C16.2529 6.58283 15.917 6.24711 15.917 5.83301V4.08301H10.75V15.917H12.5C12.9142 15.917 13.25 16.2528 13.25 16.667C13.2499 17.0811 12.9141 17.417 12.5 17.417H7.5C7.08587 17.417 6.75013 17.0811 6.75 16.667C6.75 16.2528 7.08579 15.917 7.5 15.917H9.25V4.08301H4.08398V5.83301C4.08398 6.24706 3.74797 6.58274 3.33398 6.58301C2.91977 6.58301 2.58301 6.24722 2.58301 5.83301V3.33301C2.58314 2.91891 2.91985 2.58301 3.33398 2.58301H16.667Z", fill: "currentColor" })
+  }
+);
+var TypeIcon_default = TypeIcon;
 
 // src/tokens/svg/edit/UnderlineIcon.tsx
 import { jsx as jsx125, jsxs as jsxs71 } from "react/jsx-runtime";
@@ -644,6 +671,23 @@ import { jsx as jsx152, jsxs as jsxs89 } from "react/jsx-runtime";
 
 // src/tokens/svg/layout/MaximizeIcon.tsx
 import { jsx as jsx153, jsxs as jsxs90 } from "react/jsx-runtime";
+var MaximizeIcon = () => /* @__PURE__ */ jsxs90(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx153("path", { d: "M2.5 12.583C2.91411 12.583 3.24982 12.9189 3.25 13.333V15.833C3.25 16.0761 3.34665 16.3095 3.51855 16.4814C3.69046 16.6534 3.92388 16.75 4.16699 16.75H6.66699C7.08106 16.7502 7.41699 17.0859 7.41699 17.5C7.41699 17.9141 7.08106 18.2498 6.66699 18.25H4.16699C3.52605 18.25 2.91122 17.9952 2.45801 17.542C2.00479 17.0888 1.75 16.4739 1.75 15.833V13.333C1.75018 12.9189 2.08589 12.583 2.5 12.583Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx153("path", { d: "M17.5 12.583C17.9141 12.583 18.2498 12.9189 18.25 13.333V15.833C18.25 16.4739 17.9952 17.0888 17.542 17.542C17.0888 17.9952 16.4739 18.25 15.833 18.25H13.333C12.9189 18.2498 12.583 17.9141 12.583 17.5C12.583 17.0859 12.9189 16.7502 13.333 16.75H15.833C16.0761 16.75 16.3095 16.6534 16.4814 16.4814C16.6534 16.3095 16.75 16.0761 16.75 15.833V13.333C16.7502 12.9189 17.0859 12.583 17.5 12.583Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx153("path", { d: "M6.66699 1.75C7.08106 1.75018 7.41699 2.08589 7.41699 2.5C7.41699 2.91411 7.08106 3.24982 6.66699 3.25H4.16699C3.92388 3.25 3.69046 3.34665 3.51855 3.51855C3.34665 3.69046 3.25 3.92388 3.25 4.16699V6.66699C3.24982 7.08106 2.91411 7.41699 2.5 7.41699C2.08589 7.41699 1.75018 7.08106 1.75 6.66699V4.16699C1.75 3.52605 2.00479 2.91122 2.45801 2.45801C2.91122 2.00479 3.52605 1.75 4.16699 1.75H6.66699Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx153("path", { d: "M15.833 1.75C16.4739 1.75 17.0888 2.00479 17.542 2.45801C17.9952 2.91122 18.25 3.52605 18.25 4.16699V6.66699C18.2498 7.08106 17.9141 7.41699 17.5 7.41699C17.0859 7.41699 16.7502 7.08106 16.75 6.66699V4.16699C16.75 3.92388 16.6534 3.69046 16.4814 3.51855C16.3095 3.34665 16.0761 3.25 15.833 3.25H13.333C12.9189 3.24982 12.583 2.91411 12.583 2.5C12.583 2.08589 12.9189 1.75018 13.333 1.75H15.833Z", fill: "currentColor" })
+    ]
+  }
+);
+var MaximizeIcon_default = MaximizeIcon;
 
 // src/tokens/svg/layout/MenuIcon.tsx
 import { jsx as jsx154, jsxs as jsxs91 } from "react/jsx-runtime";
@@ -653,6 +697,23 @@ import { jsx as jsx155, jsxs as jsxs92 } from "react/jsx-runtime";
 
 // src/tokens/svg/layout/MinimizeIcon.tsx
 import { jsx as jsx156, jsxs as jsxs93 } from "react/jsx-runtime";
+var MinimizeIcon = () => /* @__PURE__ */ jsxs93(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx156("path", { d: "M5 12.583C5.64094 12.583 6.25577 12.8378 6.70898 13.291C7.1622 13.7442 7.41699 14.3591 7.41699 15V17.5C7.41699 17.9141 7.08106 18.2498 6.66699 18.25C6.25278 18.25 5.91699 17.9142 5.91699 17.5V15C5.91699 14.7569 5.82035 14.5235 5.64844 14.3516C5.47653 14.1797 5.24311 14.083 5 14.083H2.5C2.08579 14.083 1.75 13.7472 1.75 13.333C1.75018 12.9189 2.08589 12.583 2.5 12.583H5Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx156("path", { d: "M17.5 12.583C17.9141 12.583 18.2498 12.9189 18.25 13.333C18.25 13.7472 17.9142 14.083 17.5 14.083H15C14.7569 14.083 14.5235 14.1797 14.3516 14.3516C14.1797 14.5235 14.083 14.7569 14.083 15V17.5C14.083 17.9142 13.7472 18.25 13.333 18.25C12.9189 18.2498 12.583 17.9141 12.583 17.5V15C12.583 14.3591 12.8378 13.7442 13.291 13.291C13.7442 12.8378 14.3591 12.583 15 12.583H17.5Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx156("path", { d: "M6.66699 1.75C7.08106 1.75018 7.41699 2.08589 7.41699 2.5V5C7.41699 5.64094 7.1622 6.25577 6.70898 6.70898C6.25577 7.1622 5.64094 7.41699 5 7.41699H2.5C2.08589 7.41699 1.75018 7.08106 1.75 6.66699C1.75 6.25278 2.08579 5.91699 2.5 5.91699H5C5.24312 5.91699 5.47653 5.82035 5.64844 5.64844C5.82035 5.47653 5.91699 5.24312 5.91699 5V2.5C5.91699 2.08579 6.25278 1.75 6.66699 1.75Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx156("path", { d: "M13.333 1.75C13.7472 1.75 14.083 2.08579 14.083 2.5V5C14.083 5.24311 14.1797 5.47653 14.3516 5.64844C14.5235 5.82035 14.7569 5.91699 15 5.91699H17.5C17.9142 5.91699 18.25 6.25278 18.25 6.66699C18.2498 7.08106 17.9141 7.41699 17.5 7.41699H15C14.3591 7.41699 13.7442 7.1622 13.291 6.70898C12.8378 6.25577 12.583 5.64094 12.583 5V2.5C12.583 2.08589 12.9189 1.75018 13.333 1.75Z", fill: "currentColor" })
+    ]
+  }
+);
+var MinimizeIcon_default = MinimizeIcon;
 
 // src/tokens/svg/layout/MoreHorizontalIcon.tsx
 import { jsx as jsx157, jsxs as jsxs94 } from "react/jsx-runtime";
@@ -774,6 +835,18 @@ var PlayCircleIcon_default = PlayCircleIcon;
 
 // src/tokens/svg/media/PlayIcon.tsx
 import { jsx as jsx175 } from "react/jsx-runtime";
+var PlayIcon = () => /* @__PURE__ */ jsx175(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx175("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.80762 1.84203C4.0483 1.71076 4.3416 1.72119 4.57227 1.86937L16.2393 9.36937C16.4536 9.50742 16.584 9.74522 16.584 10.0002C16.5839 10.2552 16.4537 10.4931 16.2393 10.6311L4.57227 18.1311C4.34166 18.2792 4.04826 18.2896 3.80762 18.1584C3.56689 18.027 3.4161 17.7745 3.41602 17.5002V2.50023C3.41602 2.22588 3.56682 1.9735 3.80762 1.84203ZM4.91699 16.1262L14.4463 10.0002L4.91699 3.87328V16.1262Z", fill: "currentColor" })
+  }
+);
+var PlayIcon_default = PlayIcon;
 
 // src/tokens/svg/media/RepeatIcon.tsx
 import { jsx as jsx176, jsxs as jsxs109 } from "react/jsx-runtime";
@@ -804,12 +877,55 @@ import { jsx as jsx184, jsxs as jsxs116 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/Volume2Icon.tsx
 import { jsx as jsx185, jsxs as jsxs117 } from "react/jsx-runtime";
+var Volume2Icon = () => /* @__PURE__ */ jsxs117(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx185("path", { d: "M15.3613 3.57827C15.6542 3.28549 16.129 3.28554 16.4219 3.57827C18.1247 5.28162 19.082 7.59163 19.082 10.0001C19.082 12.4087 18.1247 14.7187 16.4219 16.422C16.129 16.7147 15.6542 16.7147 15.3613 16.422C15.0687 16.1292 15.0687 15.6543 15.3613 15.3615C16.7829 13.9394 17.582 12.0109 17.582 10.0001C17.582 7.98938 16.7829 6.06088 15.3613 4.63882C15.0686 4.34597 15.0687 3.87112 15.3613 3.57827Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx185("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.69824 3.5812C8.92336 3.40117 9.23238 3.36648 9.49219 3.49135C9.75153 3.61641 9.91699 3.87916 9.91699 4.16714V15.8341C9.91671 16.122 9.75157 16.385 9.49219 16.5099C9.23253 16.6347 8.92333 16.5988 8.69824 16.4191L4.7373 13.2501H1.66699C1.25291 13.2501 0.916235 12.9142 0.916016 12.5001V7.50014C0.916192 7.08608 1.25289 6.75014 1.66699 6.75014H4.73828L8.69824 3.5812ZM5.46875 8.08608C5.3359 8.19235 5.17011 8.25003 5 8.25014H2.41699V11.7501H5C5.17013 11.7503 5.33589 11.8089 5.46875 11.9152L8.41699 14.2726V5.72768L5.46875 8.08608Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx185("path", { d: "M12.4199 6.51967C12.7128 6.22695 13.1876 6.22696 13.4805 6.51967C14.4022 7.44168 14.9199 8.69255 14.9199 9.99624C14.9198 11.2998 14.4021 12.5499 13.4805 13.4718C13.1876 13.7647 12.7128 13.7646 12.4199 13.4718C12.1273 13.179 12.1272 12.7041 12.4199 12.4113C13.0602 11.7707 13.4198 10.902 13.4199 9.99624C13.4199 9.0903 13.0604 8.22093 12.4199 7.58022C12.1271 7.28731 12.1271 6.81251 12.4199 6.51967Z", fill: "currentColor" })
+    ]
+  }
+);
+var Volume2Icon_default = Volume2Icon;
 
 // src/tokens/svg/media/VolumeIcon.tsx
 import { jsx as jsx186 } from "react/jsx-runtime";
+var VolumeIcon = () => /* @__PURE__ */ jsx186(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx186("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.69824 3.58112C8.92336 3.40111 9.23239 3.36641 9.49219 3.49127C9.75155 3.61632 9.91699 3.87906 9.91699 4.16705V15.834C9.91675 16.1219 9.75157 16.3849 9.49219 16.5098C9.23251 16.6346 8.92333 16.5988 8.69824 16.419L4.7373 13.2501H1.66699C1.25288 13.2501 0.916186 12.9141 0.916016 12.5001V7.50006C0.916192 7.086 1.25289 6.75006 1.66699 6.75006H4.73828L8.69824 3.58112ZM5.46875 8.086C5.3359 8.19226 5.17011 8.24995 5 8.25006H2.41699V11.7501H5C5.17013 11.7502 5.33589 11.8088 5.46875 11.9151L8.41699 14.2725V5.7276L5.46875 8.086Z", fill: "currentColor" })
+  }
+);
+var VolumeIcon_default = VolumeIcon;
 
 // src/tokens/svg/media/VolumeXIcon.tsx
 import { jsx as jsx187, jsxs as jsxs118 } from "react/jsx-runtime";
+var VolumeXIcon = () => /* @__PURE__ */ jsxs118(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx187("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.69824 3.58112C8.92336 3.40111 9.23239 3.36641 9.49219 3.49127C9.75155 3.61632 9.91699 3.87906 9.91699 4.16705V15.834C9.91675 16.1219 9.75157 16.3849 9.49219 16.5098C9.23251 16.6346 8.92333 16.5988 8.69824 16.419L4.7373 13.2501H1.66699C1.25288 13.2501 0.916186 12.9141 0.916016 12.5001V7.50006C0.916192 7.086 1.25289 6.75006 1.66699 6.75006H4.73828L8.69824 3.58112ZM5.46875 8.086C5.3359 8.19226 5.17011 8.24995 5 8.25006H2.41699V11.7501H5C5.17013 11.7502 5.33589 11.8088 5.46875 11.9151L8.41699 14.2725V5.7276L5.46875 8.086Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx187("path", { d: "M18.6367 6.96979C18.9296 6.6771 19.4044 6.67696 19.6973 6.96979C19.9898 7.26263 19.9899 7.73752 19.6973 8.03033L17.7275 10.0001L19.6973 11.9698C19.9898 12.2626 19.9899 12.7375 19.6973 13.0303C19.4045 13.3231 18.9296 13.3229 18.6367 13.0303L16.667 11.0606L14.6973 13.0303C14.4045 13.3231 13.9296 13.3229 13.6367 13.0303C13.3438 12.7374 13.3438 12.2627 13.6367 11.9698L15.6064 10.0001L13.6367 8.03033C13.3438 7.73744 13.3438 7.26268 13.6367 6.96979C13.9296 6.6771 14.4044 6.67696 14.6973 6.96979L16.667 8.93951L18.6367 6.96979Z", fill: "currentColor" })
+    ]
+  }
+);
+var VolumeXIcon_default = VolumeXIcon;
 
 // src/tokens/svg/misc/AnchorIcon.tsx
 import { jsx as jsx188, jsxs as jsxs119 } from "react/jsx-runtime";
@@ -4346,6 +4462,8 @@ var TableCell = React33.memo((props) => {
     children,
     align = "center",
     isSticky = false,
+    width,
+    nowrap = false,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -4389,9 +4507,13 @@ var TableCell = React33.memo((props) => {
         isSticky && "table-sticky",
         isLastSticky && stickyShadow && "right-shadow",
         onClick && "clickable",
-        enableHover && "cell-hover"
+        enableHover && "cell-hover",
+        nowrap && "nowrap"
       ),
-      style: isSticky ? { left } : void 0,
+      style: {
+        ...isSticky ? { left } : null,
+        ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null
+      },
       onClick,
       children
     }
@@ -4647,6 +4769,16 @@ var Tooltip_default = Tooltip;
 // src/components/Video/Video.tsx
 import React38 from "react";
 import { jsx as jsx346, jsxs as jsxs221 } from "react/jsx-runtime";
+var PipIcon = () => /* @__PURE__ */ jsxs221("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx346("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx346("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+] });
+var formatTime = (sec) => {
+  if (!Number.isFinite(sec) || sec < 0) return "0:00";
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
 var Video = React38.forwardRef((props, ref) => {
   const {
     src,
@@ -4655,13 +4787,36 @@ var Video = React38.forwardRef((props, ref) => {
     muted,
     loop,
     playsInline,
+    showControls = true,
+    showCenterPlay = true,
+    playbackRates,
+    showCaptions = false,
+    showPip = false,
+    showDownload = false,
+    downloadFileName,
     onPlay,
     onPause,
+    onTimeUpdate,
+    onVolumeChange,
+    onLoadedMetadata,
+    onRateChange,
+    children,
     ...rest
   } = props;
+  const containerRef = React38.useRef(null);
   const videoRef = React38.useRef(null);
   const [isPlaying, setIsPlaying] = React38.useState(Boolean(autoPlay));
   const [isLoaded, setIsLoaded] = React38.useState(false);
+  const [currentTime, setCurrentTime] = React38.useState(0);
+  const [duration, setDuration] = React38.useState(0);
+  const [buffered, setBuffered] = React38.useState(0);
+  const [volume, setVolume] = React38.useState(1);
+  const [isMuted, setIsMuted] = React38.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = React38.useState(false);
+  const [playbackRate, setPlaybackRate] = React38.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = React38.useState(false);
+  const [captionsOn, setCaptionsOn] = React38.useState(false);
+  const [isPip, setIsPip] = React38.useState(false);
   const setRefs = React38.useCallback(
     (el) => {
       videoRef.current = el;
@@ -4670,6 +4825,25 @@ var Video = React38.forwardRef((props, ref) => {
     },
     [ref]
   );
+  React38.useEffect(() => {
+    const onFsChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
+  React38.useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    const onEnter = () => setIsPip(true);
+    const onLeave = () => setIsPip(false);
+    v.addEventListener("enterpictureinpicture", onEnter);
+    v.addEventListener("leavepictureinpicture", onLeave);
+    return () => {
+      v.removeEventListener("enterpictureinpicture", onEnter);
+      v.removeEventListener("leavepictureinpicture", onLeave);
+    };
+  }, []);
   const handlePlay = (e) => {
     setIsPlaying(true);
     onPlay?.(e);
@@ -4678,50 +4852,278 @@ var Video = React38.forwardRef((props, ref) => {
     setIsPlaying(false);
     onPause?.(e);
   };
-  const handleLoadedData = () => {
+  const handleLoadedMetadata = (e) => {
+    const v = e.currentTarget;
+    setDuration(v.duration);
     setIsLoaded(true);
+    onLoadedMetadata?.(e);
+  };
+  const handleTimeUpdate = (e) => {
+    const v = e.currentTarget;
+    setCurrentTime(v.currentTime);
+    if (v.buffered.length > 0) {
+      setBuffered(v.buffered.end(v.buffered.length - 1));
+    }
+    onTimeUpdate?.(e);
+  };
+  const handleVolumeChange = (e) => {
+    const v = e.currentTarget;
+    setVolume(v.volume);
+    setIsMuted(v.muted);
+    onVolumeChange?.(e);
+  };
+  const handleRateChange = (e) => {
+    setPlaybackRate(e.currentTarget.playbackRate);
+    onRateChange?.(e);
   };
   const togglePlay = () => {
-    if (!videoRef.current) return;
-    if (isPlaying) {
-      videoRef.current.pause();
+    const v = videoRef.current;
+    if (!v) return;
+    if (v.paused) v.play();
+    else v.pause();
+  };
+  const toggleMute = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.muted = !v.muted;
+  };
+  const toggleFullscreen = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (document.fullscreenElement === el) {
+      document.exitFullscreen();
     } else {
-      videoRef.current.play();
+      el.requestFullscreen?.();
     }
   };
-  return /* @__PURE__ */ jsxs221("div", { className: "lib-xplat-video custom-overlay", children: [
-    /* @__PURE__ */ jsx346(
-      "video",
-      {
-        ref: setRefs,
-        src,
-        poster,
-        autoPlay,
-        muted,
-        loop,
-        playsInline: playsInline ?? true,
-        onPlay: handlePlay,
-        onPause: handlePause,
-        onLoadedData: handleLoadedData,
-        onClick: togglePlay,
-        ...rest
+  const togglePip = async () => {
+    const v = videoRef.current;
+    if (!v) return;
+    try {
+      if (document.pictureInPictureElement === v) {
+        await document.exitPictureInPicture?.();
+      } else {
+        await v.requestPictureInPicture?.();
       }
-    ),
-    /* @__PURE__ */ jsx346(
-      "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__ */ jsx346(PauseIcon_default, {}) : /* @__PURE__ */ jsx346("span", { className: "play-icon", children: /* @__PURE__ */ jsx346(PlayCircleIcon_default, {}) })
+    } catch {
+    }
+  };
+  const toggleCaptions = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    const next = !captionsOn;
+    for (let i = 0; i < v.textTracks.length; i++) {
+      const t = v.textTracks[i];
+      if (t.kind === "captions" || t.kind === "subtitles") {
+        t.mode = next ? "showing" : "hidden";
       }
-    )
-  ] });
+    }
+    setCaptionsOn(next);
+  };
+  const selectRate = (rate) => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.playbackRate = rate;
+    setRateMenuOpen(false);
+  };
+  const handleSeek = (e) => {
+    const v = videoRef.current;
+    if (!v) return;
+    const next = Number(e.target.value);
+    v.currentTime = next;
+    setCurrentTime(next);
+  };
+  const handleVolumeSlider = (e) => {
+    const v = videoRef.current;
+    if (!v) return;
+    const next = Number(e.target.value);
+    v.volume = next;
+    if (next > 0 && v.muted) v.muted = false;
+    if (next === 0) v.muted = true;
+  };
+  const progressPct = duration > 0 ? currentTime / duration * 100 : 0;
+  const bufferedPct = duration > 0 ? buffered / duration * 100 : 0;
+  const volumePct = (isMuted ? 0 : volume) * 100;
+  const VolumeGlyph = isMuted || volume === 0 ? VolumeXIcon_default : volume < 0.5 ? VolumeIcon_default : Volume2Icon_default;
+  const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
+  return /* @__PURE__ */ jsxs221(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx_default("lib-xplat-video", showControls && "has-controls"),
+      children: [
+        /* @__PURE__ */ jsx346(
+          "video",
+          {
+            ref: setRefs,
+            src,
+            poster,
+            autoPlay,
+            muted,
+            loop,
+            playsInline: playsInline ?? true,
+            onPlay: handlePlay,
+            onPause: handlePause,
+            onLoadedMetadata: handleLoadedMetadata,
+            onTimeUpdate: handleTimeUpdate,
+            onVolumeChange: handleVolumeChange,
+            onRateChange: handleRateChange,
+            onClick: togglePlay,
+            ...rest,
+            children
+          }
+        ),
+        showCenterPlay && /* @__PURE__ */ jsx346(
+          "button",
+          {
+            type: "button",
+            className: clsx_default(
+              "center-play",
+              isPlaying && "is-playing",
+              !isLoaded && "is-loading"
+            ),
+            onClick: togglePlay,
+            "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx346("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx346(PlayCircleIcon_default, {}) })
+          }
+        ),
+        showControls && /* @__PURE__ */ jsxs221("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx346(
+            "input",
+            {
+              type: "range",
+              className: "seekbar",
+              min: 0,
+              max: duration || 0,
+              step: 0.1,
+              value: currentTime,
+              onChange: handleSeek,
+              "aria-label": "\uC7AC\uC0DD \uC704\uCE58",
+              style: {
+                ["--progress"]: `${progressPct}%`,
+                ["--buffered"]: `${bufferedPct}%`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs221("div", { className: "controls-row", children: [
+            /* @__PURE__ */ jsx346(
+              "button",
+              {
+                type: "button",
+                className: "control-btn",
+                onClick: togglePlay,
+                "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+                children: isPlaying ? /* @__PURE__ */ jsx346(PauseIcon_default, {}) : /* @__PURE__ */ jsx346(PlayIcon_default, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs221("div", { className: "volume-group", children: [
+              /* @__PURE__ */ jsx346(
+                "button",
+                {
+                  type: "button",
+                  className: "control-btn",
+                  onClick: toggleMute,
+                  "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
+                  children: /* @__PURE__ */ jsx346(VolumeGlyph, {})
+                }
+              ),
+              /* @__PURE__ */ jsx346(
+                "input",
+                {
+                  type: "range",
+                  className: "volume-slider",
+                  min: 0,
+                  max: 1,
+                  step: 0.05,
+                  value: isMuted ? 0 : volume,
+                  onChange: handleVolumeSlider,
+                  "aria-label": "\uBCFC\uB968",
+                  style: { ["--volume"]: `${volumePct}%` }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs221("span", { className: "time", children: [
+              formatTime(currentTime),
+              " / ",
+              formatTime(duration)
+            ] }),
+            /* @__PURE__ */ jsx346("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs221("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ jsxs221(
+                "button",
+                {
+                  type: "button",
+                  className: "control-btn rate-btn",
+                  onClick: () => setRateMenuOpen((o) => !o),
+                  "aria-label": "\uC7AC\uC0DD \uC18D\uB3C4",
+                  "aria-expanded": rateMenuOpen,
+                  children: [
+                    playbackRate,
+                    "x"
+                  ]
+                }
+              ),
+              rateMenuOpen && /* @__PURE__ */ jsx346("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx346("li", { children: /* @__PURE__ */ jsxs221(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: clsx_default("rate-item", r2 === playbackRate && "is-active"),
+                  onClick: () => selectRate(r2),
+                  children: [
+                    r2,
+                    "x"
+                  ]
+                }
+              ) }, r2)) })
+            ] }),
+            showCaptions && /* @__PURE__ */ jsx346(
+              "button",
+              {
+                type: "button",
+                className: clsx_default("control-btn", captionsOn && "is-active"),
+                onClick: toggleCaptions,
+                "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
+                "aria-pressed": captionsOn,
+                children: /* @__PURE__ */ jsx346(TypeIcon_default, {})
+              }
+            ),
+            showPip && pipSupported && /* @__PURE__ */ jsx346(
+              "button",
+              {
+                type: "button",
+                className: clsx_default("control-btn", isPip && "is-active"),
+                onClick: togglePip,
+                "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
+                children: /* @__PURE__ */ jsx346(PipIcon, {})
+              }
+            ),
+            showDownload && /* @__PURE__ */ jsx346(
+              "a",
+              {
+                className: "control-btn",
+                href: src,
+                download: downloadFileName ?? true,
+                "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
+                children: /* @__PURE__ */ jsx346(DownloadIcon_default, {})
+              }
+            ),
+            /* @__PURE__ */ jsx346(
+              "button",
+              {
+                type: "button",
+                className: "control-btn",
+                onClick: toggleFullscreen,
+                "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
+                children: isFullscreen ? /* @__PURE__ */ jsx346(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx346(MaximizeIcon_default, {})
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 });
 Video.displayName = "Video";
 var Video_default = Video;