@x-plat/design-system 0.5.3 → 0.5.5

package/dist/components/Video/index.js

@@ -81,6 +81,18 @@ var PlayCircleIcon_default = PlayCircleIcon;
 
 // src/tokens/svg/media/PlayIcon.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
+var PlayIcon = () => /* @__PURE__ */ jsx16(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx16("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 jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -111,12 +123,263 @@ 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";
+var Volume2Icon = () => /* @__PURE__ */ jsxs22(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx26("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__ */ jsx26("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__ */ jsx26("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 jsx27 } from "react/jsx-runtime";
+var VolumeIcon = () => /* @__PURE__ */ jsx27(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx27("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 jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+var VolumeXIcon = () => /* @__PURE__ */ jsxs23(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx28("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__ */ jsx28("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/layout/ColumnsIcon.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/GridIcon.tsx
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/LayoutIcon.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/ListIcon.tsx
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/Maximize2Icon.tsx
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/MaximizeIcon.tsx
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+var MaximizeIcon = () => /* @__PURE__ */ jsxs27(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx34("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__ */ jsx34("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__ */ jsx34("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__ */ jsx34("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 jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/Minimize2Icon.tsx
+import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/MinimizeIcon.tsx
+import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+var MinimizeIcon = () => /* @__PURE__ */ jsxs30(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx37("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__ */ jsx37("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__ */ jsx37("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__ */ jsx37("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 jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/MoreVerticalIcon.tsx
+import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+
+// src/tokens/svg/layout/SidebarIcon.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/CopyIcon.tsx
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/CropIcon.tsx
+import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/DeleteIcon.tsx
+import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/DownloadCloudIcon.tsx
+import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/DownloadIcon.tsx
+import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
+var DownloadIcon = () => /* @__PURE__ */ jsxs37(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx45("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__ */ jsx45("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 jsx46 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/Edit3Icon.tsx
+import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/EditIcon.tsx
+import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/ExternalLinkIcon.tsx
+import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/FilterIcon.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/Link2Icon.tsx
+import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/LinkIcon.tsx
+import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/MoveIcon.tsx
+import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/RefreshCcwIcon.tsx
+import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/RefreshCwIcon.tsx
+import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/RotateCcwIcon.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/RotateCwIcon.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/SaveIcon.tsx
+import { jsx as jsx58 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/ScissorsIcon.tsx
+import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/SearchIcon.tsx
+import { jsx as jsx60 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/Share2Icon.tsx
+import { jsx as jsx61 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/ShareIcon.tsx
+import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/Trash2Icon.tsx
+import { jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/TrashIcon.tsx
+import { jsx as jsx64 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/UploadCloudIcon.tsx
+import { jsx as jsx65, jsxs as jsxs49 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/UploadIcon.tsx
+import { jsx as jsx66, jsxs as jsxs50 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/ZoomInIcon.tsx
+import { jsx as jsx67, jsxs as jsxs51 } from "react/jsx-runtime";
+
+// src/tokens/svg/action/ZoomOutIcon.tsx
+import { jsx as jsx68, jsxs as jsxs52 } from "react/jsx-runtime";
+
+// src/tokens/svg/edit/AlignCenterIcon.tsx
+import { jsx as jsx69, jsxs as jsxs53 } from "react/jsx-runtime";
+
+// src/tokens/svg/edit/AlignJustifyIcon.tsx
+import { jsx as jsx70, jsxs as jsxs54 } from "react/jsx-runtime";
+
+// src/tokens/svg/edit/AlignLeftIcon.tsx
+import { jsx as jsx71, jsxs as jsxs55 } from "react/jsx-runtime";
+
+// src/tokens/svg/edit/AlignRightIcon.tsx
+import { jsx as jsx72, jsxs as jsxs56 } from "react/jsx-runtime";
+
+// src/tokens/svg/edit/BoldIcon.tsx
+import { jsx as jsx73 } from "react/jsx-runtime";
+
+// src/tokens/svg/edit/ItalicIcon.tsx
+import { jsx as jsx74 } from "react/jsx-runtime";
+
+// src/tokens/svg/edit/PenToolIcon.tsx
+import { jsx as jsx75, jsxs as jsxs57 } from "react/jsx-runtime";
+
+// src/tokens/svg/edit/TypeIcon.tsx
+import { jsx as jsx76 } from "react/jsx-runtime";
+var TypeIcon = () => /* @__PURE__ */ jsx76(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx76("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 jsx77, jsxs as jsxs58 } from "react/jsx-runtime";
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -135,7 +398,17 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Video/Video.tsx
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs59 } from "react/jsx-runtime";
+var PipIcon = () => /* @__PURE__ */ jsxs59("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__ */ jsx78("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx78("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 = React.forwardRef((props, ref) => {
   const {
     src,
@@ -144,13 +417,36 @@ var Video = React.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 = React.useRef(null);
   const videoRef = React.useRef(null);
   const [isPlaying, setIsPlaying] = React.useState(Boolean(autoPlay));
   const [isLoaded, setIsLoaded] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(0);
+  const [buffered, setBuffered] = React.useState(0);
+  const [volume, setVolume] = React.useState(1);
+  const [isMuted, setIsMuted] = React.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  const [playbackRate, setPlaybackRate] = React.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = React.useState(false);
+  const [captionsOn, setCaptionsOn] = React.useState(false);
+  const [isPip, setIsPip] = React.useState(false);
   const setRefs = React.useCallback(
     (el) => {
       videoRef.current = el;
@@ -159,6 +455,25 @@ var Video = React.forwardRef((props, ref) => {
     },
     [ref]
   );
+  React.useEffect(() => {
+    const onFsChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
+  React.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);
@@ -167,50 +482,278 @@ var Video = React.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__ */ jsxs24("div", { className: "lib-xplat-video custom-overlay", children: [
-    /* @__PURE__ */ jsx29(
-      "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__ */ 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, {}) })
+    } 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__ */ jsxs59(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx_default("lib-xplat-video", showControls && "has-controls"),
+      children: [
+        /* @__PURE__ */ jsx78(
+          "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__ */ jsx78(
+          "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__ */ jsx78("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx78(PlayCircleIcon_default, {}) })
+          }
+        ),
+        showControls && /* @__PURE__ */ jsxs59("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx78(
+            "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__ */ jsxs59("div", { className: "controls-row", children: [
+            /* @__PURE__ */ jsx78(
+              "button",
+              {
+                type: "button",
+                className: "control-btn",
+                onClick: togglePlay,
+                "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+                children: isPlaying ? /* @__PURE__ */ jsx78(PauseIcon_default, {}) : /* @__PURE__ */ jsx78(PlayIcon_default, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs59("div", { className: "volume-group", children: [
+              /* @__PURE__ */ jsx78(
+                "button",
+                {
+                  type: "button",
+                  className: "control-btn",
+                  onClick: toggleMute,
+                  "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
+                  children: /* @__PURE__ */ jsx78(VolumeGlyph, {})
+                }
+              ),
+              /* @__PURE__ */ jsx78(
+                "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__ */ jsxs59("span", { className: "time", children: [
+              formatTime(currentTime),
+              " / ",
+              formatTime(duration)
+            ] }),
+            /* @__PURE__ */ jsx78("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs59("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ jsxs59(
+                "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__ */ jsx78("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx78("li", { children: /* @__PURE__ */ jsxs59(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: clsx_default("rate-item", r2 === playbackRate && "is-active"),
+                  onClick: () => selectRate(r2),
+                  children: [
+                    r2,
+                    "x"
+                  ]
+                }
+              ) }, r2)) })
+            ] }),
+            showCaptions && /* @__PURE__ */ jsx78(
+              "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__ */ jsx78(TypeIcon_default, {})
+              }
+            ),
+            showPip && pipSupported && /* @__PURE__ */ jsx78(
+              "button",
+              {
+                type: "button",
+                className: clsx_default("control-btn", isPip && "is-active"),
+                onClick: togglePip,
+                "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
+                children: /* @__PURE__ */ jsx78(PipIcon, {})
+              }
+            ),
+            showDownload && /* @__PURE__ */ jsx78(
+              "a",
+              {
+                className: "control-btn",
+                href: src,
+                download: downloadFileName ?? true,
+                "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
+                children: /* @__PURE__ */ jsx78(DownloadIcon_default, {})
+              }
+            ),
+            /* @__PURE__ */ jsx78(
+              "button",
+              {
+                type: "button",
+                className: "control-btn",
+                onClick: toggleFullscreen,
+                "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
+                children: isFullscreen ? /* @__PURE__ */ jsx78(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx78(MaximizeIcon_default, {})
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 });
 Video.displayName = "Video";
 var Video_default = Video;