@x-plat/design-system 0.5.49 → 0.5.51

package/dist/index.js

@@ -6097,14 +6097,14 @@ var CardTabRoot = (props) => {
   );
   return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
     /* @__PURE__ */ jsx304("div", { className: "card-tab-bar", children: tabs.map((tab) => {
-      const isActive = tab.value === activeValue;
+      const isActive2 = tab.value === activeValue;
       return /* @__PURE__ */ jsx304(
         "button",
         {
-          className: clsx_default("card-tab-trigger", isActive && "active"),
+          className: clsx_default("card-tab-trigger", isActive2 && "active"),
           onClick: () => handleTabClick(tab),
           role: "tab",
-          "aria-selected": isActive,
+          "aria-selected": isActive2,
           children: tab.title
         },
         tab.value
@@ -7479,12 +7479,12 @@ import React14 from "react";
 import React13 from "react";
 import { jsx as jsx317 } from "react/jsx-runtime";
 var TabItem = React13.forwardRef((props, ref) => {
-  const { isActive, title, onClick } = props;
+  const { isActive: isActive2, title, onClick } = props;
   return /* @__PURE__ */ jsx317(
     "div",
     {
       ref,
-      className: clsx_default("tab-item", isActive ? "active" : null),
+      className: clsx_default("tab-item", isActive2 ? "active" : null),
       onClick,
       children: title
     }
@@ -7907,24 +7907,731 @@ var Dropdown = (props) => {
 Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
-// src/components/EmptyState/EmptyState.tsx
+// src/components/Editor/Editor.tsx
+import React21 from "react";
 import { jsx as jsx324, jsxs as jsxs208 } from "react/jsx-runtime";
+var DEFAULT_TOOLBAR = [
+  "bold",
+  "italic",
+  "underline",
+  "strikethrough",
+  "code",
+  "heading",
+  "list",
+  "ordered-list",
+  "blockquote",
+  "code-block",
+  "link",
+  "image",
+  "divider"
+];
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "br",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "code",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "strike",
+  "del",
+  "a",
+  "img",
+  "hr",
+  "span",
+  "div"
+]);
+var ALLOWED_ATTRS = {
+  a: ["href", "target", "rel"],
+  img: ["src", "alt"]
+};
+var sanitizeHtml = (input) => {
+  const doc = new DOMParser().parseFromString(`<div>${input}</div>`, "text/html");
+  const root = doc.body.firstElementChild;
+  if (!root) return "";
+  const walk = (node) => {
+    const children = Array.from(node.children);
+    for (const child of children) {
+      const tag = child.tagName.toLowerCase();
+      if (!ALLOWED_TAGS.has(tag)) {
+        while (child.firstChild) node.insertBefore(child.firstChild, child);
+        node.removeChild(child);
+        continue;
+      }
+      const allowed = ALLOWED_ATTRS[tag] || [];
+      for (const attr of Array.from(child.attributes)) {
+        if (!allowed.includes(attr.name)) {
+          child.removeAttribute(attr.name);
+        }
+        if (attr.name === "href" || attr.name === "src") {
+          const val = attr.value.trim().toLowerCase();
+          if (val.startsWith("javascript:") || val.startsWith("data:text/html")) {
+            child.removeAttribute(attr.name);
+          }
+        }
+      }
+      walk(child);
+    }
+  };
+  walk(root);
+  return root.innerHTML;
+};
+var escapeHtml = (text) => {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML.replace(/\n/g, "<br>");
+};
+var SLASH_ITEMS = [
+  { key: "paragraph", label: "\uB2E8\uB77D", hint: "\uAE30\uBCF8 \uD14D\uC2A4\uD2B8" },
+  { key: "heading", label: "\uC81C\uBAA9 1", hint: "\uD070 \uC81C\uBAA9" },
+  { key: "list", label: "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D", hint: "\u2022 \uD56D\uBAA9" },
+  { key: "ordered-list", label: "\uBC88\uD638 \uB9E4\uAE30\uAE30 \uBAA9\uB85D", hint: "1. \uD56D\uBAA9" },
+  { key: "blockquote", label: "\uC778\uC6A9", hint: "" },
+  { key: "code-block", label: "\uCF54\uB4DC \uBE14\uB85D", hint: "" },
+  { key: "divider", label: "\uAD6C\uBD84\uC120", hint: "\u2500" },
+  { key: "image", label: "\uC774\uBBF8\uC9C0", hint: "" }
+];
+var Editor = (props) => {
+  const {
+    value = "",
+    onChange,
+    placeholder = "\uB0B4\uC6A9\uC744 \uC785\uB825\uD558\uC138\uC694",
+    readOnly = false,
+    toolbar = DEFAULT_TOOLBAR,
+    enableSlashCommand = true,
+    enableMarkdownShortcuts = true,
+    onImageUpload,
+    minHeight = 200
+  } = props;
+  const editorRef = React21.useRef(null);
+  const lastRangeRef = React21.useRef(null);
+  const composingRef = React21.useRef(false);
+  const [isFocused, setIsFocused] = React21.useState(false);
+  const [isEmpty, setIsEmpty] = React21.useState(!value);
+  const [activeFormats, setActiveFormats] = React21.useState(/* @__PURE__ */ new Set());
+  const [slashOpen, setSlashOpen] = React21.useState(false);
+  const [slashFilter, setSlashFilter] = React21.useState("");
+  const [slashIdx, setSlashIdx] = React21.useState(0);
+  const [slashPos, setSlashPos] = React21.useState({ top: 0, left: 0 });
+  const slashStartRangeRef = React21.useRef(null);
+  const [linkOpen, setLinkOpen] = React21.useState(false);
+  const [linkValue, setLinkValue] = React21.useState("");
+  const [linkPos, setLinkPos] = React21.useState({ top: 0, left: 0 });
+  React21.useEffect(() => {
+    if (!editorRef.current) return;
+    if (editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = sanitizeHtml(value || "");
+      updateEmpty();
+    }
+  }, [value]);
+  const updateEmpty = () => {
+    const el = editorRef.current;
+    if (!el) return;
+    const text = el.textContent || "";
+    const childCount = el.children.length;
+    setIsEmpty(text.length === 0 && childCount <= 1);
+  };
+  const saveSelection = () => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0 && editorRef.current?.contains(sel.anchorNode)) {
+      lastRangeRef.current = sel.getRangeAt(0).cloneRange();
+    }
+  };
+  const restoreSelection = () => {
+    if (!lastRangeRef.current) return;
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(lastRangeRef.current);
+  };
+  const updateActiveFormats = () => {
+    if (!editorRef.current) return;
+    const sel = window.getSelection();
+    if (!sel || !editorRef.current.contains(sel.anchorNode)) return;
+    const next = /* @__PURE__ */ new Set();
+    try {
+      if (document.queryCommandState("bold")) next.add("bold");
+      if (document.queryCommandState("italic")) next.add("italic");
+      if (document.queryCommandState("underline")) next.add("underline");
+      if (document.queryCommandState("strikethrough")) next.add("strikethrough");
+      if (document.queryCommandState("insertUnorderedList")) next.add("list");
+      if (document.queryCommandState("insertOrderedList")) next.add("ordered-list");
+      const block = String(document.queryCommandValue("formatBlock") || "").toLowerCase();
+      if (block) next.add(`block:${block}`);
+    } catch {
+    }
+    setActiveFormats(next);
+  };
+  const exec = (cmd, val) => {
+    document.execCommand(cmd, false, val);
+    editorRef.current?.focus();
+    updateActiveFormats();
+    handleInput();
+  };
+  const setBlock = (tag) => {
+    exec("formatBlock", tag);
+  };
+  const insertDivider = () => {
+    exec("insertHorizontalRule");
+    const el = editorRef.current;
+    if (el && el.lastElementChild?.tagName === "HR") {
+      const p = document.createElement("p");
+      p.innerHTML = "<br>";
+      el.appendChild(p);
+      handleInput();
+    }
+  };
+  const insertImageByUrl = (url) => {
+    if (!url) return;
+    exec("insertImage", url);
+  };
+  const triggerImageUpload = async () => {
+    if (!onImageUpload) {
+      const url = window.prompt("\uC774\uBBF8\uC9C0 URL");
+      if (url) {
+        restoreSelection();
+        insertImageByUrl(url);
+      }
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      try {
+        const url = await onImageUpload(file);
+        restoreSelection();
+        insertImageByUrl(url);
+      } catch (err) {
+        console.error("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC \uC2E4\uD328:", err);
+      }
+    };
+    input.click();
+  };
+  const openSlashMenu = () => {
+    if (!enableSlashCommand) return;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    slashStartRangeRef.current = range.cloneRange();
+    const rect = range.getBoundingClientRect();
+    const editorRect = editorRef.current.getBoundingClientRect();
+    setSlashPos({
+      top: rect.bottom - editorRect.top + 4,
+      left: rect.left - editorRect.left
+    });
+    setSlashFilter("");
+    setSlashIdx(0);
+    setSlashOpen(true);
+  };
+  const closeSlashMenu = () => {
+    setSlashOpen(false);
+    setSlashFilter("");
+    setSlashIdx(0);
+    slashStartRangeRef.current = null;
+  };
+  const filteredSlashItems = React21.useMemo(() => {
+    if (!slashFilter) return SLASH_ITEMS;
+    const f = slashFilter.toLowerCase();
+    return SLASH_ITEMS.filter((it) => it.label.toLowerCase().includes(f) || it.key.includes(f));
+  }, [slashFilter]);
+  const removeSlashTrigger = () => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const node = range.startContainer;
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || "";
+      const idx = text.lastIndexOf("/");
+      if (idx >= 0) {
+        node.textContent = text.slice(0, idx) + text.slice(range.startOffset);
+        const newRange = document.createRange();
+        newRange.setStart(node, idx);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+      }
+    }
+  };
+  const applySlashItem = (item) => {
+    removeSlashTrigger();
+    closeSlashMenu();
+    switch (item.key) {
+      case "paragraph":
+        setBlock("p");
+        break;
+      case "heading":
+        setBlock("h2");
+        break;
+      case "list":
+        exec("insertUnorderedList");
+        break;
+      case "ordered-list":
+        exec("insertOrderedList");
+        break;
+      case "blockquote":
+        setBlock("blockquote");
+        break;
+      case "code-block":
+        setBlock("pre");
+        break;
+      case "divider":
+        insertDivider();
+        break;
+      case "image":
+        triggerImageUpload();
+        break;
+      default:
+        break;
+    }
+  };
+  const openLinkEditor = () => {
+    saveSelection();
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const editorRect = editorRef.current.getBoundingClientRect();
+    setLinkPos({
+      top: rect.bottom - editorRect.top + 4,
+      left: rect.left - editorRect.left
+    });
+    const anchor = sel.anchorNode?.parentElement?.closest("a");
+    setLinkValue(anchor?.getAttribute("href") || "");
+    setLinkOpen(true);
+  };
+  const applyLink = () => {
+    restoreSelection();
+    if (linkValue) {
+      exec("createLink", linkValue);
+      const sel = window.getSelection();
+      const anchor = sel?.anchorNode?.parentElement?.closest("a");
+      if (anchor) {
+        anchor.setAttribute("target", "_blank");
+        anchor.setAttribute("rel", "noopener noreferrer");
+      }
+    } else {
+      exec("unlink");
+    }
+    setLinkOpen(false);
+  };
+  const tryMarkdownShortcut = () => {
+    if (!enableMarkdownShortcuts) return false;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    const range = sel.getRangeAt(0);
+    const node = range.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) return false;
+    const text = (node.textContent || "").slice(0, range.startOffset);
+    const patterns = [
+      [/^###\s$/, () => setBlock("h3")],
+      [/^##\s$/, () => setBlock("h2")],
+      [/^#\s$/, () => setBlock("h1")],
+      [/^-\s$/, () => exec("insertUnorderedList")],
+      [/^\*\s$/, () => exec("insertUnorderedList")],
+      [/^1\.\s$/, () => exec("insertOrderedList")],
+      [/^>\s$/, () => setBlock("blockquote")]
+    ];
+    for (const [re, fn] of patterns) {
+      if (re.test(text)) {
+        node.textContent = (node.textContent || "").slice(range.startOffset);
+        const newRange = document.createRange();
+        newRange.setStart(node, 0);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+        fn();
+        return true;
+      }
+    }
+    return false;
+  };
+  const handleInput = () => {
+    if (composingRef.current) return;
+    const el = editorRef.current;
+    if (!el) return;
+    onChange?.(el.innerHTML);
+    updateEmpty();
+    updateActiveFormats();
+    if (slashOpen) {
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        const node = range.startContainer;
+        if (node.nodeType === Node.TEXT_NODE) {
+          const text = node.textContent || "";
+          const lastSlash = text.lastIndexOf("/", range.startOffset - 1);
+          if (lastSlash >= 0) {
+            const filter = text.slice(lastSlash + 1, range.startOffset);
+            if (filter.includes(" ") || filter.includes("\n")) {
+              closeSlashMenu();
+            } else {
+              setSlashFilter(filter);
+              setSlashIdx(0);
+            }
+          } else {
+            closeSlashMenu();
+          }
+        }
+      }
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (readOnly) return;
+    if (slashOpen) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSlashIdx((i) => Math.min(i + 1, filteredSlashItems.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSlashIdx((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const item = filteredSlashItems[slashIdx];
+        if (item) applySlashItem(item);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeSlashMenu();
+        return;
+      }
+    }
+    if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
+      const k = e.key.toLowerCase();
+      if (k === "b") {
+        e.preventDefault();
+        exec("bold");
+        return;
+      }
+      if (k === "i") {
+        e.preventDefault();
+        exec("italic");
+        return;
+      }
+      if (k === "u") {
+        e.preventDefault();
+        exec("underline");
+        return;
+      }
+      if (k === "k") {
+        e.preventDefault();
+        openLinkEditor();
+        return;
+      }
+    }
+    if (enableSlashCommand && e.key === "/") {
+      setTimeout(openSlashMenu, 0);
+    }
+    if (enableMarkdownShortcuts && e.key === " ") {
+      if (tryMarkdownShortcut()) {
+        e.preventDefault();
+      }
+    }
+  };
+  const handlePaste = (e) => {
+    if (readOnly) return;
+    e.preventDefault();
+    const html = e.clipboardData.getData("text/html");
+    const text = e.clipboardData.getData("text/plain");
+    const clean = html ? sanitizeHtml(html) : escapeHtml(text);
+    document.execCommand("insertHTML", false, clean);
+    handleInput();
+  };
+  const handleCompositionStart = () => {
+    composingRef.current = true;
+  };
+  const handleCompositionEnd = () => {
+    composingRef.current = false;
+    handleInput();
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    updateActiveFormats();
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    saveSelection();
+  };
+  const handleSelectionUpdate = () => {
+    updateActiveFormats();
+  };
+  const onToolbarAction = (item) => {
+    switch (item) {
+      case "bold":
+        exec("bold");
+        break;
+      case "italic":
+        exec("italic");
+        break;
+      case "underline":
+        exec("underline");
+        break;
+      case "strikethrough":
+        exec("strikethrough");
+        break;
+      case "code": {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+        const range = sel.getRangeAt(0);
+        const code = document.createElement("code");
+        try {
+          range.surroundContents(code);
+        } catch {
+          const frag = range.extractContents();
+          code.appendChild(frag);
+          range.insertNode(code);
+        }
+        handleInput();
+        break;
+      }
+      case "heading":
+        setBlock("h2");
+        break;
+      case "list":
+        exec("insertUnorderedList");
+        break;
+      case "ordered-list":
+        exec("insertOrderedList");
+        break;
+      case "blockquote":
+        setBlock("blockquote");
+        break;
+      case "code-block":
+        setBlock("pre");
+        break;
+      case "link":
+        openLinkEditor();
+        break;
+      case "image":
+        triggerImageUpload();
+        break;
+      case "divider":
+        insertDivider();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs208("div", { className: clsx_default("lib-xplat-editor", isFocused && "focused", readOnly && "readonly"), children: [
+    !readOnly && /* @__PURE__ */ jsx324(
+      EditorToolbar,
+      {
+        items: toolbar,
+        active: activeFormats,
+        onAction: onToolbarAction
+      }
+    ),
+    /* @__PURE__ */ jsxs208("div", { className: "lib-xplat-editor__content", style: { minHeight }, children: [
+      isEmpty && !isFocused && /* @__PURE__ */ jsx324("div", { className: "lib-xplat-editor__placeholder", children: placeholder }),
+      /* @__PURE__ */ jsx324(
+        "div",
+        {
+          ref: editorRef,
+          contentEditable: !readOnly,
+          suppressContentEditableWarning: true,
+          className: "lib-xplat-editor__editable",
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          onKeyUp: handleSelectionUpdate,
+          onMouseUp: handleSelectionUpdate,
+          onPaste: handlePaste,
+          onCompositionStart: handleCompositionStart,
+          onCompositionEnd: handleCompositionEnd,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          spellCheck: true
+        }
+      ),
+      slashOpen && filteredSlashItems.length > 0 && /* @__PURE__ */ jsx324(
+        SlashMenu,
+        {
+          position: slashPos,
+          items: filteredSlashItems,
+          activeIndex: slashIdx,
+          onSelect: applySlashItem,
+          onClose: closeSlashMenu
+        }
+      ),
+      linkOpen && /* @__PURE__ */ jsx324(
+        LinkPopover,
+        {
+          position: linkPos,
+          value: linkValue,
+          onChange: setLinkValue,
+          onConfirm: applyLink,
+          onClose: () => setLinkOpen(false)
+        }
+      )
+    ] })
+  ] });
+};
+Editor.displayName = "Editor";
+var Editor_default = Editor;
+var TOOLBAR_LABEL = {
+  bold: "B",
+  italic: "I",
+  underline: "U",
+  strikethrough: "S",
+  code: "<>",
+  heading: "H",
+  list: "\u2022",
+  "ordered-list": "1.",
+  blockquote: "\u275D",
+  "code-block": "[ ]",
+  link: "\u{1F517}",
+  image: "\u{1F5BC}",
+  divider: "\u2014"
+};
+var TOOLBAR_TITLE = {
+  bold: "\uAD75\uAC8C (\u2318B)",
+  italic: "\uAE30\uC6B8\uC784 (\u2318I)",
+  underline: "\uBC11\uC904 (\u2318U)",
+  strikethrough: "\uCDE8\uC18C\uC120",
+  code: "\uC778\uB77C\uC778 \uCF54\uB4DC",
+  heading: "\uC81C\uBAA9",
+  list: "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D",
+  "ordered-list": "\uBC88\uD638 \uB9E4\uAE30\uAE30 \uBAA9\uB85D",
+  blockquote: "\uC778\uC6A9",
+  "code-block": "\uCF54\uB4DC \uBE14\uB85D",
+  link: "\uB9C1\uD06C (\u2318K)",
+  image: "\uC774\uBBF8\uC9C0",
+  divider: "\uAD6C\uBD84\uC120"
+};
+var isActive = (item, active) => {
+  if (item === "heading") return active.has("block:h1") || active.has("block:h2") || active.has("block:h3");
+  if (item === "blockquote") return active.has("block:blockquote");
+  if (item === "code-block") return active.has("block:pre");
+  return active.has(item);
+};
+var EditorToolbar = ({ items, active, onAction }) => {
+  return /* @__PURE__ */ jsx324("div", { className: "lib-xplat-editor__toolbar", children: items.map((item) => /* @__PURE__ */ jsx324(
+    "button",
+    {
+      type: "button",
+      className: clsx_default("lib-xplat-editor__toolbar-btn", isActive(item, active) && "active"),
+      title: TOOLBAR_TITLE[item],
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onAction(item);
+      },
+      children: TOOLBAR_LABEL[item]
+    },
+    item
+  )) });
+};
+var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
+  React21.useEffect(() => {
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      const menu = document.querySelector(".lib-xplat-editor__slash-menu");
+      if (menu && !menu.contains(target)) onClose();
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx324(
+    "div",
+    {
+      className: "lib-xplat-editor__slash-menu",
+      style: { top: position.top, left: position.left },
+      children: items.map((item, i) => /* @__PURE__ */ jsxs208(
+        "button",
+        {
+          type: "button",
+          className: clsx_default("lib-xplat-editor__slash-item", i === activeIndex && "active"),
+          onMouseDown: (e) => {
+            e.preventDefault();
+            onSelect(item);
+          },
+          children: [
+            /* @__PURE__ */ jsx324("span", { className: "label", children: item.label }),
+            item.hint && /* @__PURE__ */ jsx324("span", { className: "hint", children: item.hint })
+          ]
+        },
+        item.key
+      ))
+    }
+  );
+};
+var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
+  const inputRef = React21.useRef(null);
+  React21.useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs208(
+    "div",
+    {
+      className: "lib-xplat-editor__link-popover",
+      style: { top: position.top, left: position.left },
+      children: [
+        /* @__PURE__ */ jsx324(
+          "input",
+          {
+            ref: inputRef,
+            type: "url",
+            placeholder: "https://",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onConfirm();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx324("button", { type: "button", onMouseDown: (e) => {
+          e.preventDefault();
+          onConfirm();
+        }, children: "\uC801\uC6A9" }),
+        /* @__PURE__ */ jsx324("button", { type: "button", onMouseDown: (e) => {
+          e.preventDefault();
+          onClose();
+        }, children: "\uCDE8\uC18C" })
+      ]
+    }
+  );
+};
+
+// src/components/EmptyState/EmptyState.tsx
+import { jsx as jsx325, jsxs as jsxs209 } from "react/jsx-runtime";
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
-  return /* @__PURE__ */ jsxs208("div", { className: "lib-xplat-empty-state", children: [
-    icon && /* @__PURE__ */ jsx324("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ jsx324("div", { className: "empty-icon", children: /* @__PURE__ */ jsx324("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx324("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
-    /* @__PURE__ */ jsx324("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ jsx324("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ jsx324("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ jsxs209("div", { className: "lib-xplat-empty-state", children: [
+    icon && /* @__PURE__ */ jsx325("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ jsx325("div", { className: "empty-icon", children: /* @__PURE__ */ jsx325("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx325("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ jsx325("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ jsx325("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ jsx325("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-import React21 from "react";
-import { jsx as jsx325, jsxs as jsxs209 } from "react/jsx-runtime";
+import React22 from "react";
+import { jsx as jsx326, jsxs as jsxs210 } from "react/jsx-runtime";
 var FileUpload = (props) => {
   const {
     accept,
@@ -7934,8 +8641,8 @@ var FileUpload = (props) => {
     label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description
   } = props;
-  const [isDragOver, setIsDragOver] = React21.useState(false);
-  const inputRef = React21.useRef(null);
+  const [isDragOver, setIsDragOver] = React22.useState(false);
+  const inputRef = React22.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -7965,7 +8672,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ jsxs209(
+  return /* @__PURE__ */ jsxs210(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -7974,7 +8681,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ jsx325(
+        /* @__PURE__ */ jsx326(
           "input",
           {
             ref: inputRef,
@@ -7984,9 +8691,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ jsx325("div", { className: "upload-icon", children: /* @__PURE__ */ jsx325(UploadIcon_default, {}) }),
-        /* @__PURE__ */ jsx325("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ jsx325("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ jsx326("div", { className: "upload-icon", children: /* @__PURE__ */ jsx326(UploadIcon_default, {}) }),
+        /* @__PURE__ */ jsx326("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ jsx326("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -7995,10 +8702,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import React23 from "react";
+import React24 from "react";
 
 // src/components/HtmlTypeWriter/utils.ts
-import React22 from "react";
+import React23 from "react";
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -8066,41 +8773,41 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return React22.createElement(tag, props);
+    return React23.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return React22.createElement(tag, props, ...children);
+  return React23.createElement(tag, props, ...children);
 };
 var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : React22.createElement(React22.Fragment, { key: idx }, node);
+    return node == null ? null : React23.createElement(React23.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import { jsx as jsx326 } from "react/jsx-runtime";
+import { jsx as jsx327 } from "react/jsx-runtime";
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = React23.useState(0);
-  const doneCalledRef = React23.useRef(false);
-  const { doc, rangeMap, totalLength } = React23.useMemo(() => {
+  const [typedLen, setTypedLen] = React24.useState(0);
+  const doneCalledRef = React24.useRef(false);
+  const { doc, rangeMap, totalLength } = React24.useMemo(() => {
     if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -8108,33 +8815,33 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = React23.useMemo(
+  const parsed = React24.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ jsx326("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ jsx327("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-import React24 from "react";
-import { jsx as jsx327, jsxs as jsxs210 } from "react/jsx-runtime";
+import React25 from "react";
+import { jsx as jsx328, jsxs as jsxs211 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = React24.useState();
-  React24.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = React25.useState();
+  React25.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -8143,7 +8850,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = React24.useRef(null);
+  const inputRef = React25.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -8156,8 +8863,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs210("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ jsx327(
+  return /* @__PURE__ */ jsxs211("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ jsx328(
       "input",
       {
         type: "file",
@@ -8167,13 +8874,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ jsxs210("div", { className: "action-bar", children: [
-      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx327(UploadIcon_default, {}) }),
-      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx327(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ jsxs211("div", { className: "action-bar", children: [
+      /* @__PURE__ */ jsx328("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx328(UploadIcon_default, {}) }),
+      /* @__PURE__ */ jsx328("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx328(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ jsx327("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx327("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs210("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx327(ImageIcon_default, {}) }),
-      /* @__PURE__ */ jsx327("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ jsx328("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx328("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs211("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ jsx328("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx328(ImageIcon_default, {}) }),
+      /* @__PURE__ */ jsx328("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -8181,7 +8888,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx328, jsxs as jsxs211 } from "react/jsx-runtime";
+import { jsx as jsx329, jsxs as jsxs212 } from "react/jsx-runtime";
 var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -8224,19 +8931,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ jsxs211("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ jsx328(
+  return /* @__PURE__ */ jsxs212("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ jsx329(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx328(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ jsx329(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ jsx328("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx328(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx329("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx329(
         "button",
         {
           className: clsx_default("page-btn", { active: page === current }),
@@ -8247,14 +8954,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ jsx328(
+    /* @__PURE__ */ jsx329(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx328(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ jsx329(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -8263,17 +8970,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-import React25 from "react";
-import { jsx as jsx329, jsxs as jsxs212 } from "react/jsx-runtime";
+import React26 from "react";
+import { jsx as jsx330, jsxs as jsxs213 } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React25.useRef(null);
-  const triggerRef = React25.useRef(null);
-  const [localOpen, setLocalOpen] = React25.useState(false);
-  const [eventTrigger, setEventTrigger] = React25.useState(false);
+  const popRef = React26.useRef(null);
+  const triggerRef = React26.useRef(null);
+  const [localOpen, setLocalOpen] = React26.useState(false);
+  const [eventTrigger, setEventTrigger] = React26.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -8286,7 +8993,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs212(
+  return /* @__PURE__ */ jsxs213(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -8296,7 +9003,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx329(Portal_default, { children: /* @__PURE__ */ jsx329(
+        localOpen && /* @__PURE__ */ jsx330(Portal_default, { children: /* @__PURE__ */ jsx330(
           "div",
           {
             className: clsx_default(
@@ -8319,7 +9026,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-import { jsx as jsx330, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx331, jsxs as jsxs214 } from "react/jsx-runtime";
 var Progress = (props) => {
   const {
     value,
@@ -8329,8 +9036,8 @@ var Progress = (props) => {
     showLabel = false
   } = props;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs213("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
-    /* @__PURE__ */ jsx330(
+  return /* @__PURE__ */ jsxs214("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+    /* @__PURE__ */ jsx331(
       "div",
       {
         className: "track",
@@ -8338,7 +9045,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx330(
+        children: /* @__PURE__ */ jsx331(
           "div",
           {
             className: "bar",
@@ -8347,7 +9054,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ jsxs213("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ jsxs214("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -8357,17 +9064,17 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-import React26 from "react";
-var RadioGroupContext = React26.createContext(
+import React27 from "react";
+var RadioGroupContext = React27.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return React26.useContext(RadioGroupContext);
+  return React27.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx331, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx332, jsxs as jsxs215 } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
@@ -8385,7 +9092,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ jsxs214(
+  return /* @__PURE__ */ jsxs215(
     "label",
     {
       className: clsx_default(
@@ -8395,18 +9102,18 @@ var Radio = (props) => {
         localChecked ? "checked" : void 0
       ),
       children: [
-        /* @__PURE__ */ jsx331("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ jsx331(
+        /* @__PURE__ */ jsx332("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ jsx332(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ jsx331("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ jsx332("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ jsx331("span", { children: label })
+        label && /* @__PURE__ */ jsx332("span", { children: label })
       ]
     }
   );
@@ -8415,28 +9122,28 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-import { Fragment as Fragment4, jsx as jsx332 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx333 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx332(Fragment4, { children: /* @__PURE__ */ jsx332(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ jsx333(Fragment4, { children: /* @__PURE__ */ jsx333(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-import React29 from "react";
+import React30 from "react";
 
 // src/components/Select/context.ts
-import React27 from "react";
-var SelectContext = React27.createContext(null);
+import React28 from "react";
+var SelectContext = React28.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-import React28 from "react";
-import { jsx as jsx333 } from "react/jsx-runtime";
+import React29 from "react";
+import { jsx as jsx334 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = React28.useContext(context_default);
+  const ctx = React29.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -8445,7 +9152,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ jsx333(
+  return /* @__PURE__ */ jsx334(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled"),
@@ -8466,7 +9173,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-import { jsx as jsx334, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx335, jsxs as jsxs216 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -8478,26 +9185,26 @@ var SelectRoot = (props) => {
     error = false,
     size = "md"
   } = props;
-  const itemChildren = React29.Children.toArray(children).filter(
-    (child) => React29.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = React30.Children.toArray(children).filter(
+    (child) => React30.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = React29.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = React29.useState(null);
-  const controlledLabel = React29.useMemo(() => {
+  const [isOpen, setOpen] = React30.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = React30.useState(null);
+  const controlledLabel = React30.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
-  const triggerRef = React29.useRef(null);
-  const contentRef = React29.useRef(null);
-  const [mounted, setMounted] = React29.useState(false);
-  const [visible, setVisible] = React29.useState(false);
-  React29.useEffect(() => {
+  const triggerRef = React30.useRef(null);
+  const contentRef = React30.useRef(null);
+  const [mounted, setMounted] = React30.useState(false);
+  const [visible, setVisible] = React30.useState(false);
+  React30.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -8507,12 +9214,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = React29.useCallback(() => setOpen(true), []);
-  const close = React29.useCallback(() => setOpen(false), []);
-  const toggle = React29.useCallback(() => setOpen((prev) => !prev), []);
+  const open = React30.useCallback(() => setOpen(true), []);
+  const close = React30.useCallback(() => setOpen(false), []);
+  const toggle = React30.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = React29.useCallback(
+  const setSelected = React30.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -8521,7 +9228,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = React29.useMemo(
+  const ctxValue = React30.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -8542,7 +9249,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx334(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs215(
+  return /* @__PURE__ */ jsx335(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
     "div",
     {
       className: clsx_default(
@@ -8553,7 +9260,7 @@ var SelectRoot = (props) => {
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ jsxs215(
+        /* @__PURE__ */ jsxs216(
           "div",
           {
             ref: triggerRef,
@@ -8577,7 +9284,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ jsx334(
+              /* @__PURE__ */ jsx335(
                 "span",
                 {
                   className: clsx_default(
@@ -8587,25 +9294,25 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ jsx334(
+              /* @__PURE__ */ jsx335(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx334(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ jsx335(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ jsx334(Portal_default, { children: /* @__PURE__ */ jsx334(
+        mounted && /* @__PURE__ */ jsx335(Portal_default, { children: /* @__PURE__ */ jsx335(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
-            children: /* @__PURE__ */ jsx334(context_default.Provider, { value: ctxValue, children: itemChildren })
+            children: /* @__PURE__ */ jsx335(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
         ) })
       ]
@@ -8619,7 +9326,7 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx335 } from "react/jsx-runtime";
+import { jsx as jsx336 } from "react/jsx-runtime";
 var SIZE_MAP = {
   xs: "var(--spacing-size-1)",
   sm: "var(--spacing-size-2)",
@@ -8635,7 +9342,7 @@ var Skeleton = (props) => {
     ...width != null && { width: SIZE_MAP[width] },
     ...height != null && { height: SIZE_MAP[height] }
   };
-  return /* @__PURE__ */ jsx335(
+  return /* @__PURE__ */ jsx336(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant),
@@ -8648,20 +9355,20 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx336, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx337, jsxs as jsxs217 } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
     type = "brand"
   } = props;
-  return /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsx337(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ jsxs216("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx336(
+      children: /* @__PURE__ */ jsxs217("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx337(
           "circle",
           {
             className: "track",
@@ -8671,7 +9378,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ jsx336(
+        /* @__PURE__ */ jsx337(
           "circle",
           {
             className: "indicator",
@@ -8690,20 +9397,20 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-import { jsx as jsx337, jsxs as jsxs217 } from "react/jsx-runtime";
+import { jsx as jsx338, jsxs as jsxs218 } from "react/jsx-runtime";
 var Steps = (props) => {
   const {
     items,
     current,
     type = "brand"
   } = props;
-  return /* @__PURE__ */ jsx337("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx338("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ jsxs217("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ jsx337("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx337(CheckIcon_default, {}) : /* @__PURE__ */ jsx337("span", { children: index + 1 }) }),
-      /* @__PURE__ */ jsxs217("div", { className: "step-content", children: [
-        /* @__PURE__ */ jsx337("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ jsx337("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ jsxs218("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ jsx338("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx338(CheckIcon_default, {}) : /* @__PURE__ */ jsx338("span", { children: index + 1 }) }),
+      /* @__PURE__ */ jsxs218("div", { className: "step-content", children: [
+        /* @__PURE__ */ jsx338("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ jsx338("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -8712,8 +9419,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-import React30 from "react";
-import { jsx as jsx338, jsxs as jsxs218 } from "react/jsx-runtime";
+import React31 from "react";
+import { jsx as jsx339, jsxs as jsxs219 } from "react/jsx-runtime";
 var Swiper = (props) => {
   const {
     auto = false,
@@ -8737,25 +9444,25 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = React30.useMemo(() => {
+  const extendedItems = React31.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = React30.useState(
+  const [innerIndex, setInnerIndex] = React31.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = React30.useState(false);
-  const [dragOffset, setDragOffset] = React30.useState(0);
-  const [animated, setAnimated] = React30.useState(true);
-  const [containerWidth, setContainerWidth] = React30.useState(0);
-  const containerRef = React30.useRef(null);
-  const startXRef = React30.useRef(0);
-  const startTimeRef = React30.useRef(0);
-  const autoplayTimerRef = React30.useRef(null);
-  const resumeTimeoutRef = React30.useRef(null);
-  const [paused, setPaused] = React30.useState(false);
-  React30.useEffect(() => {
+  const [isDragging, setIsDragging] = React31.useState(false);
+  const [dragOffset, setDragOffset] = React31.useState(0);
+  const [animated, setAnimated] = React31.useState(true);
+  const [containerWidth, setContainerWidth] = React31.useState(0);
+  const containerRef = React31.useRef(null);
+  const startXRef = React31.useRef(0);
+  const startTimeRef = React31.useRef(0);
+  const autoplayTimerRef = React31.useRef(null);
+  const resumeTimeoutRef = React31.useRef(null);
+  const [paused, setPaused] = React31.useState(false);
+  React31.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -8774,7 +9481,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = React30.useCallback(
+  const moveToInner = React31.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -8802,7 +9509,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = React30.useCallback(() => {
+  const handleTransitionEnd = React31.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -8812,7 +9519,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = React30.useCallback(
+  const slideTo = React31.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -8822,7 +9529,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = React30.useCallback(() => {
+  const slideNext = React31.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -8831,7 +9538,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = React30.useCallback(() => {
+  const slidePrev = React31.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -8840,7 +9547,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -8848,12 +9555,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  React30.useImperativeHandle(swiperRef, () => ({
+  React31.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (!auto || !canSlide || paused) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -8879,7 +9586,7 @@ var Swiper = (props) => {
       resumeTimeoutRef.current = null;
     }, pauseOnInteraction);
   };
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     return () => {
       if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
     };
@@ -8897,7 +9604,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -8936,8 +9643,8 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = React30.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx338(
+  const slideElements = React31.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx339(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -8956,14 +9663,14 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ jsxs218("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ jsx338(
+  return /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ jsx339(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
-        children: /* @__PURE__ */ jsx338(
+        children: /* @__PURE__ */ jsx339(
           "div",
           {
             className: clsx_default(
@@ -8981,7 +9688,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx338(
+    showProgress && canSlide && /* @__PURE__ */ jsx339("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx339("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx339(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -8991,7 +9698,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx338(
+    canSlide && /* @__PURE__ */ jsx339("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx339(
       "button",
       {
         className: clsx_default(
@@ -9009,8 +9716,8 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-import React31 from "react";
-import { jsx as jsx339 } from "react/jsx-runtime";
+import React32 from "react";
+import { jsx as jsx340 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -9020,9 +9727,9 @@ var Switch = (props) => {
     disabled,
     onChange
   } = props;
-  const [isAnimating, setIsAnimating] = React31.useState(false);
-  const timeoutRef = React31.useRef(null);
-  React31.useEffect(() => {
+  const [isAnimating, setIsAnimating] = React32.useState(false);
+  const timeoutRef = React32.useRef(null);
+  React32.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -9037,7 +9744,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ jsx339(
+  return /* @__PURE__ */ jsx340(
     "div",
     {
       className: clsx_default(
@@ -9050,7 +9757,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ jsx339("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ jsx340("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -9058,17 +9765,17 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-import React32 from "react";
-var TableContext = React32.createContext(null);
+import React33 from "react";
+var TableContext = React33.createContext(null);
 var useTableContext = () => {
-  const ctx = React32.useContext(TableContext);
+  const ctx = React33.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx340 } from "react/jsx-runtime";
+import { jsx as jsx341 } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     children,
@@ -9078,7 +9785,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx340("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx340(
+  return /* @__PURE__ */ jsx341("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx341(
     TableContext_default.Provider,
     {
       value: {
@@ -9087,7 +9794,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ jsx340("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ jsx341("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -9095,41 +9802,41 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx341 } from "react/jsx-runtime";
+import { jsx as jsx342 } from "react/jsx-runtime";
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx341("tbody", { children });
+  return /* @__PURE__ */ jsx342("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-import React35 from "react";
+import React36 from "react";
 
 // src/components/Table/TableHeadContext.tsx
-import React33 from "react";
-var TableHeadContext = React33.createContext(
+import React34 from "react";
+var TableHeadContext = React34.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = React33.useContext(TableHeadContext);
+  const ctx = React34.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-import React34 from "react";
-var TableRowContext = React34.createContext(null);
+import React35 from "react";
+var TableRowContext = React35.createContext(null);
 var useTableRowContext = () => {
-  const ctx = React34.useContext(TableRowContext);
+  const ctx = React35.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-import { jsx as jsx342 } from "react/jsx-runtime";
-var TableCell = React35.memo((props) => {
+import { jsx as jsx343 } from "react/jsx-runtime";
+var TableCell = React36.memo((props) => {
   const {
     children,
     align = "center",
@@ -9141,9 +9848,9 @@ var TableCell = React35.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = React35.useState(0);
-  const cellRef = React35.useRef(null);
-  const calculateLeft = React35.useCallback(() => {
+  const [left, setLeft] = React36.useState(0);
+  const cellRef = React36.useRef(null);
+  const calculateLeft = React36.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -9152,7 +9859,7 @@ var TableCell = React35.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -9170,7 +9877,7 @@ var TableCell = React35.memo((props) => {
   const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ jsx342(
+  return /* @__PURE__ */ jsx343(
     CellTag,
     {
       ref: cellRef,
@@ -9195,21 +9902,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-import { jsx as jsx343 } from "react/jsx-runtime";
+import { jsx as jsx344 } from "react/jsx-runtime";
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ jsx343(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx343("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ jsx344(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx344("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-import React36 from "react";
-import { jsx as jsx344 } from "react/jsx-runtime";
-var TableRow = React36.memo((props) => {
+import React37 from "react";
+import { jsx as jsx345 } from "react/jsx-runtime";
+var TableRow = React37.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -9218,14 +9925,14 @@ var TableRow = React36.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = React36.useState([]);
+  const [stickyCells, setStickyCells] = React37.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ jsx344(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx344(
+  return /* @__PURE__ */ jsx345(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx345(
     "tr",
     {
       className: clsx_default(
@@ -9249,7 +9956,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx345, jsxs as jsxs219 } from "react/jsx-runtime";
+import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
@@ -9259,7 +9966,7 @@ var Tag = (props) => {
     disabled = false,
     colorIndex
   } = props;
-  return /* @__PURE__ */ jsxs219(
+  return /* @__PURE__ */ jsxs220(
     "span",
     {
       className: clsx_default(
@@ -9270,8 +9977,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ jsx345("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ jsx345("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx345(XIcon_default, {}) })
+        /* @__PURE__ */ jsx346("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ jsx346("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx346(XIcon_default, {}) })
       ]
     }
   );
@@ -9280,12 +9987,12 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-import React37 from "react";
-import { jsx as jsx346 } from "react/jsx-runtime";
-var TextArea = React37.forwardRef(
+import React38 from "react";
+import { jsx as jsx347 } from "react/jsx-runtime";
+var TextArea = React38.forwardRef(
   (props, ref) => {
     const { value, onChange, disabled, ...textareaProps } = props;
-    const localRef = React37.useRef(null);
+    const localRef = React38.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -9305,21 +10012,21 @@ var TextArea = React37.forwardRef(
         onChange(event);
       }
     };
-    React37.useEffect(() => {
+    React38.useEffect(() => {
       const el = localRef.current;
       if (!el) return;
       el.style.height = "0px";
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ jsx346("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx346(
+    return /* @__PURE__ */ jsx347("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx347(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ jsx346(
+        children: /* @__PURE__ */ jsx347(
           "textarea",
           {
             ...textareaProps,
@@ -9337,25 +10044,25 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-import React38 from "react";
+import React39 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx347, jsxs as jsxs220 } from "react/jsx-runtime";
-var ToastContext = React38.createContext(null);
+import { jsx as jsx348, jsxs as jsxs221 } from "react/jsx-runtime";
+var ToastContext = React39.createContext(null);
 var useToast = () => {
-  const ctx = React38.useContext(ToastContext);
+  const ctx = React39.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 };
 var EXIT_DURATION = 300;
 var ToastItemComponent = ({ item, isExiting, onClose }) => {
-  const ref = React38.useRef(null);
-  const [height, setHeight] = React38.useState(void 0);
-  React38.useEffect(() => {
+  const ref = React39.useRef(null);
+  const [height, setHeight] = React39.useState(void 0);
+  React39.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ jsx347(
+  return /* @__PURE__ */ jsx348(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -9363,15 +10070,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ jsxs220(
+      children: /* @__PURE__ */ jsxs221(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx347("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ jsx347("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ jsx348("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx348("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -9382,13 +10089,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = React38.useState([]);
-  const [removing, setRemoving] = React38.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = React38.useState(false);
-  React38.useEffect(() => {
+  const [toasts, setToasts] = React39.useState([]);
+  const [removing, setRemoving] = React39.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React39.useState(false);
+  React39.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = React38.useCallback((id) => {
+  const remove = React39.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -9399,7 +10106,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = React38.useCallback(
+  const toast = React39.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -9409,10 +10116,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ jsxs220(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ jsxs221(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && createPortal3(
-      /* @__PURE__ */ jsx347("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx347(
+      /* @__PURE__ */ jsx348("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx348(
         ToastItemComponent,
         {
           item: t,
@@ -9428,8 +10135,8 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import React39 from "react";
-import { Fragment as Fragment5, jsx as jsx348, jsxs as jsxs221 } from "react/jsx-runtime";
+import React40 from "react";
+import { Fragment as Fragment5, jsx as jsx349, jsxs as jsxs222 } from "react/jsx-runtime";
 var OFFSET = 12;
 var SHOW_DELAY = 300;
 var Tooltip = (props) => {
@@ -9440,12 +10147,12 @@ var Tooltip = (props) => {
     children,
     disabled = false
   } = props;
-  const triggerRef = React39.useRef(null);
-  const tooltipRef = React39.useRef(null);
-  const [visible, setVisible] = React39.useState(false);
-  const [pos, setPos] = React39.useState({ left: 0, top: 0 });
-  const delayTimer = React39.useRef(0);
-  const calculatePos = React39.useCallback((clientX, clientY) => {
+  const triggerRef = React40.useRef(null);
+  const tooltipRef = React40.useRef(null);
+  const [visible, setVisible] = React40.useState(false);
+  const [pos, setPos] = React40.useState({ left: 0, top: 0 });
+  const delayTimer = React40.useRef(0);
+  const calculatePos = React40.useCallback((clientX, clientY) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -9458,38 +10165,38 @@ var Tooltip = (props) => {
     if (left < 8) left = 8;
     setPos({ left, top });
   }, []);
-  const handleMouseEnter = React39.useCallback(() => {
+  const handleMouseEnter = React40.useCallback(() => {
     if (disabled) return;
     delayTimer.current = window.setTimeout(() => {
       setVisible(true);
     }, SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = React39.useCallback((e) => {
+  const handleMouseMove = React40.useCallback((e) => {
     if (!visible) return;
     calculatePos(e.clientX, e.clientY);
   }, [visible, calculatePos]);
-  const handleMouseLeave = React39.useCallback(() => {
+  const handleMouseLeave = React40.useCallback(() => {
     window.clearTimeout(delayTimer.current);
     setVisible(false);
   }, []);
-  const handleClick = React39.useCallback(() => {
+  const handleClick = React40.useCallback(() => {
     window.clearTimeout(delayTimer.current);
     setVisible(false);
   }, []);
-  const handleFocus = React39.useCallback(() => {
+  const handleFocus = React40.useCallback(() => {
     if (disabled) return;
     setVisible(true);
   }, [disabled]);
-  const handleBlur = React39.useCallback(() => {
+  const handleBlur = React40.useCallback(() => {
     setVisible(false);
   }, []);
-  React39.useLayoutEffect(() => {
+  React40.useLayoutEffect(() => {
     if (!visible || !triggerRef.current) return;
     const rect = triggerRef.current.getBoundingClientRect();
     calculatePos(rect.right, rect.top);
   }, [visible, calculatePos]);
-  if (!title && !description) return /* @__PURE__ */ jsx348(Fragment5, { children });
-  return /* @__PURE__ */ jsxs221(
+  if (!title && !description) return /* @__PURE__ */ jsx349(Fragment5, { children });
+  return /* @__PURE__ */ jsxs222(
     "div",
     {
       ref: triggerRef,
@@ -9502,15 +10209,15 @@ var Tooltip = (props) => {
       onBlur: handleBlur,
       children: [
         children,
-        visible && /* @__PURE__ */ jsx348(Portal_default, { children: /* @__PURE__ */ jsxs221(
+        visible && /* @__PURE__ */ jsx349(Portal_default, { children: /* @__PURE__ */ jsxs222(
           "div",
           {
             ref: tooltipRef,
             className: clsx_default("lib-xplat-tooltip", type),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ jsx348("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ jsx348("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ jsx349("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx349("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })
@@ -9522,11 +10229,11 @@ Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-import React40 from "react";
-import { jsx as jsx349, jsxs as jsxs222 } from "react/jsx-runtime";
-var PipIcon = () => /* @__PURE__ */ jsxs222("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__ */ jsx349("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ jsx349("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+import React41 from "react";
+import { jsx as jsx350, jsxs as jsxs223 } from "react/jsx-runtime";
+var PipIcon = () => /* @__PURE__ */ jsxs223("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__ */ jsx350("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx350("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";
@@ -9534,7 +10241,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = React40.forwardRef((props, ref) => {
+var Video = React41.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -9558,21 +10265,21 @@ var Video = React40.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const containerRef = React40.useRef(null);
-  const videoRef = React40.useRef(null);
-  const [isPlaying, setIsPlaying] = React40.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = React40.useState(false);
-  const [currentTime, setCurrentTime] = React40.useState(0);
-  const [duration, setDuration] = React40.useState(0);
-  const [buffered, setBuffered] = React40.useState(0);
-  const [volume, setVolume] = React40.useState(1);
-  const [isMuted, setIsMuted] = React40.useState(Boolean(muted));
-  const [isFullscreen, setIsFullscreen] = React40.useState(false);
-  const [playbackRate, setPlaybackRate] = React40.useState(1);
-  const [rateMenuOpen, setRateMenuOpen] = React40.useState(false);
-  const [captionsOn, setCaptionsOn] = React40.useState(false);
-  const [isPip, setIsPip] = React40.useState(false);
-  const setRefs = React40.useCallback(
+  const containerRef = React41.useRef(null);
+  const videoRef = React41.useRef(null);
+  const [isPlaying, setIsPlaying] = React41.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React41.useState(false);
+  const [currentTime, setCurrentTime] = React41.useState(0);
+  const [duration, setDuration] = React41.useState(0);
+  const [buffered, setBuffered] = React41.useState(0);
+  const [volume, setVolume] = React41.useState(1);
+  const [isMuted, setIsMuted] = React41.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = React41.useState(false);
+  const [playbackRate, setPlaybackRate] = React41.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = React41.useState(false);
+  const [captionsOn, setCaptionsOn] = React41.useState(false);
+  const [isPip, setIsPip] = React41.useState(false);
+  const setRefs = React41.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -9580,14 +10287,14 @@ var Video = React40.forwardRef((props, ref) => {
     },
     [ref]
   );
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -9701,13 +10408,13 @@ var Video = React40.forwardRef((props, ref) => {
   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__ */ jsxs222(
+  return /* @__PURE__ */ jsxs223(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ jsx349(
+        /* @__PURE__ */ jsx350(
           "video",
           {
             ref: setRefs,
@@ -9728,7 +10435,7 @@ var Video = React40.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ jsx349(
+        showCenterPlay && /* @__PURE__ */ jsx350(
           "button",
           {
             type: "button",
@@ -9740,11 +10447,11 @@ var Video = React40.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx349("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx349(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ jsx350("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx350(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ jsxs222("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx349(
+        showControls && /* @__PURE__ */ jsxs223("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx350(
             "input",
             {
               type: "range",
@@ -9761,29 +10468,29 @@ var Video = React40.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsxs222("div", { className: "controls-row", children: [
-            /* @__PURE__ */ jsx349(
+          /* @__PURE__ */ jsxs223("div", { className: "controls-row", children: [
+            /* @__PURE__ */ jsx350(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ jsx349(PauseIcon_default, {}) : /* @__PURE__ */ jsx349(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ jsx350(PauseIcon_default, {}) : /* @__PURE__ */ jsx350(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsxs222("div", { className: "volume-group", children: [
-              /* @__PURE__ */ jsx349(
+            /* @__PURE__ */ jsxs223("div", { className: "volume-group", children: [
+              /* @__PURE__ */ jsx350(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ jsx349(VolumeGlyph, {})
+                  children: /* @__PURE__ */ jsx350(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ jsx349(
+              /* @__PURE__ */ jsx350(
                 "input",
                 {
                   type: "range",
@@ -9798,14 +10505,14 @@ var Video = React40.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs222("span", { className: "time", children: [
+            /* @__PURE__ */ jsxs223("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ jsx349("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs222("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ jsxs222(
+            /* @__PURE__ */ jsx350("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs223("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ jsxs223(
                 "button",
                 {
                   type: "button",
@@ -9819,7 +10526,7 @@ var Video = React40.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ jsx349("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx349("li", { children: /* @__PURE__ */ jsxs222(
+              rateMenuOpen && /* @__PURE__ */ jsx350("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx350("li", { children: /* @__PURE__ */ jsxs223(
                 "button",
                 {
                   type: "button",
@@ -9833,7 +10540,7 @@ var Video = React40.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ jsx349(
+            showCaptions && /* @__PURE__ */ jsx350(
               "button",
               {
                 type: "button",
@@ -9841,37 +10548,37 @@ var Video = React40.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ jsx349(TypeIcon_default, {})
+                children: /* @__PURE__ */ jsx350(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ jsx349(
+            showPip && pipSupported && /* @__PURE__ */ jsx350(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ jsx349(PipIcon, {})
+                children: /* @__PURE__ */ jsx350(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ jsx349(
+            showDownload && /* @__PURE__ */ jsx350(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ jsx349(DownloadIcon_default, {})
+                children: /* @__PURE__ */ jsx350(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsx349(
+            /* @__PURE__ */ jsx350(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ jsx349(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx349(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ jsx350(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx350(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -9884,7 +10591,7 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-import { jsx as jsx350 } from "react/jsx-runtime";
+import { jsx as jsx351 } from "react/jsx-runtime";
 var GAP_MAP = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -9897,13 +10604,13 @@ var GAP_MAP = {
 var FullGrid = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
-  return /* @__PURE__ */ jsx350("div", { className: "lib-xplat-full-grid", style, children });
+  return /* @__PURE__ */ jsx351("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-import { jsx as jsx351 } from "react/jsx-runtime";
+import { jsx as jsx352 } from "react/jsx-runtime";
 var GAP_MAP2 = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -9916,13 +10623,13 @@ var GAP_MAP2 = {
 var FullScreen = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
-  return /* @__PURE__ */ jsx351("div", { className: "lib-xplat-full-screen", style, children });
+  return /* @__PURE__ */ jsx352("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-import { jsx as jsx352 } from "react/jsx-runtime";
+import { jsx as jsx353 } from "react/jsx-runtime";
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -9939,35 +10646,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ jsx352("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ jsx353("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-import { jsx as jsx353, jsxs as jsxs223 } from "react/jsx-runtime";
+import { jsx as jsx354, jsxs as jsxs224 } from "react/jsx-runtime";
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ jsxs223("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ jsx353("div", { children: logo }),
-    /* @__PURE__ */ jsx353("div", { children: centerContent }),
-    /* @__PURE__ */ jsx353("div", { children: rightContent })
+  return /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ jsx354("div", { children: logo }),
+    /* @__PURE__ */ jsx354("div", { children: centerContent }),
+    /* @__PURE__ */ jsx354("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-import { Fragment as Fragment6, jsx as jsx354, jsxs as jsxs224 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx355, jsxs as jsxs225 } from "react/jsx-runtime";
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ jsx354("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ jsx354(Fragment6, { children: sideBar }),
-    /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ jsx354("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ jsx355("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ jsx355(Fragment6, { children: sideBar }),
+    /* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ jsx355("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -9976,31 +10683,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-import React42 from "react";
+import React43 from "react";
 
 // src/layout/SideBar/SideBarContext.tsx
-import React41 from "react";
-var SideBarContext = React41.createContext(null);
+import React42 from "react";
+var SideBarContext = React42.createContext(null);
 var useSideBarContext = () => {
-  const ctx = React41.useContext(SideBarContext);
+  const ctx = React42.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-import { jsx as jsx355 } from "react/jsx-runtime";
+import { jsx as jsx356 } from "react/jsx-runtime";
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = React42.useState(true);
+  const [isOpen, setIsOpen] = React43.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ jsx355(
+  return /* @__PURE__ */ jsx356(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ jsx355(
+      children: /* @__PURE__ */ jsx356(
         "div",
         {
           className: clsx_default(
@@ -10142,6 +10849,7 @@ export {
   Edit2Icon_default as Edit2Icon,
   Edit3Icon_default as Edit3Icon,
   EditIcon_default as EditIcon,
+  Editor_default as Editor,
   EmptyState_default as EmptyState,
   ErrorIcon_default as ErrorIcon,
   ExternalLinkIcon_default as ExternalLinkIcon,