@x-plat/design-system 0.10.0 → 0.12.0

package/dist/index.js

@@ -5622,11 +5622,16 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx297(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx297(Fragment, { children });
   return /* @__PURE__ */ jsxs191("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs191("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx297("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx297(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx297(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -5637,7 +5642,9 @@ import { jsx as jsx298 } from "react/jsx-runtime";
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = React2.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, bare = false, validations, ...textareaProps } = props;
+    const { value, className, onChange, disabled, bare = false, validations, label, required, ...textareaProps } = props;
+    const autoId = React2.useId();
+    const fieldId = props.id ?? autoId;
     const localRef = React2.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -5671,6 +5678,7 @@ var AutoResizeTextArea = React2.forwardRef(
           "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
+          id: fieldId,
           className,
           disabled,
           value,
@@ -5684,12 +5692,13 @@ var AutoResizeTextArea = React2.forwardRef(
         "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
+        id: fieldId,
         disabled,
         value,
         onChange: handleChange
       }
     ) }) });
-    return /* @__PURE__ */ jsx298(Field, { validations, children: control });
+    return /* @__PURE__ */ jsx298(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";
@@ -6907,8 +6916,11 @@ var ChatInput = React7.forwardRef(
       buttonType = "primary",
       onSubmit,
       onChange,
-      validations
+      validations,
+      label,
+      required
     } = props;
+    const fieldId = React7.useId();
     const isControlled = valueProp !== void 0;
     const [internalValue, setInternalValue] = React7.useState("");
     const value = isControlled ? valueProp : internalValue;
@@ -6933,6 +6945,7 @@ var ChatInput = React7.forwardRef(
       /* @__PURE__ */ jsx308(
         AutoResizeTextArea_default,
         {
+          id: fieldId,
           ref,
           bare: true,
           className: "chat-input-textarea",
@@ -6957,7 +6970,7 @@ var ChatInput = React7.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ jsx308(Field, { validations, children: control });
+    return /* @__PURE__ */ jsx308(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 ChatInput.displayName = "ChatInput";
@@ -7041,7 +7054,7 @@ Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-import React12 from "react";
+import React13 from "react";
 
 // src/components/Input/Input.tsx
 import React8 from "react";
@@ -7139,8 +7152,12 @@ var Input = React8.forwardRef((props, ref) => {
     suffix,
     disabled,
     validations,
+    label,
+    required,
     ...inputProps
   } = props;
+  const autoId = React8.useId();
+  const fieldId = inputProps.id ?? autoId;
   const localValue = formatValue(type, value);
   const handleChange = (e) => {
     let val = e.target.value;
@@ -7156,7 +7173,7 @@ var Input = React8.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs199("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+  return /* @__PURE__ */ jsx311(Field, { label, required, htmlFor: fieldId, children: /* @__PURE__ */ jsxs199("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ jsxs199(
       "div",
       {
@@ -7167,6 +7184,7 @@ var Input = React8.forwardRef((props, ref) => {
             {
               ...inputProps,
               ref,
+              id: fieldId,
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
@@ -7179,7 +7197,7 @@ var Input = React8.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsx311(FieldMessage_default, { validations })
-  ] });
+  ] }) });
 });
 Input.displayName = "Input";
 var Input_default = Input;
@@ -7209,16 +7227,96 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
-import React10 from "react";
+import React11 from "react";
 import { createPortal } from "react-dom";
+
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React10 from "react";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
+  // 화면에 없는 것은 제외 (display:none 등)
+  (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
+);
+var useEscapeKey = (enabled, onEscape) => {
+  React10.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+var useFocusTrap = (containerRef, enabled, options = {}) => {
+  const { trap = false, initialFocus } = options;
+  const restoreRef = React10.useRef(null);
+  React10.useEffect(() => {
+    if (!enabled) return;
+    restoreRef.current = document.activeElement;
+    const raf = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const target = initialFocus?.current ?? focusableIn(el)[0] ?? el;
+      if (!target.hasAttribute("tabindex") && !focusableIn(el).includes(target)) {
+        target.setAttribute("tabindex", "-1");
+      }
+      target.focus({ preventScroll: true });
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      const prev = restoreRef.current;
+      if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
+    };
+  }, [enabled, containerRef, initialFocus]);
+  React10.useEffect(() => {
+    if (!enabled || !trap) return;
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const items = focusableIn(el);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !el.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !el.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, trap, containerRef]);
+};
+
+// src/components/Modal/Modal.tsx
 import { jsx as jsx313 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React10.useState(false);
-  const [visible, setVisible] = React10.useState(false);
-  const [settled, setSettled] = React10.useState(false);
-  React10.useEffect(() => {
+  const [mounted, setMounted] = React11.useState(false);
+  const [visible, setVisible] = React11.useState(false);
+  const [settled, setSettled] = React11.useState(false);
+  const boxRef = React11.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(boxRef, isOpen && mounted, { trap: true });
+  React11.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -7245,6 +7343,7 @@ var Modal = (props) => {
         children: /* @__PURE__ */ jsx313(
           "div",
           {
+            ref: boxRef,
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass, settled && "settled"),
             role: "dialog",
             "aria-modal": "true",
@@ -7261,9 +7360,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-import React11 from "react";
+import React12 from "react";
 import { Fragment as Fragment4, jsx as jsx314, jsxs as jsxs200 } from "react/jsx-runtime";
-var DayCell2 = React11.memo(
+var DayCell2 = React12.memo(
   ({
     day,
     disabled,
@@ -7315,26 +7414,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = React11.useState("days");
-  const [yearRangeStart, setYearRangeStart] = React11.useState(
+  const [pickerMode, setPickerMode] = React12.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React12.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = React11.useMemo(
+  const minTime = React12.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = React11.useMemo(
+  const maxTime = React12.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = React11.useMemo(() => {
+  const highlightSet = React12.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = React11.useCallback(
+  const handleSelect = React12.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -7463,8 +7562,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = React12.useState(false);
-  const [tempDate, setTempDate] = React12.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = React13.useState(false);
+  const [tempDate, setTempDate] = React13.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -7513,23 +7612,27 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React16 from "react";
+import React17 from "react";
 
 // src/components/DatePicker/RangePicker/index.tsx
-import React15 from "react";
+import React16 from "react";
 
 // src/components/Tab/Tab.tsx
-import React14 from "react";
+import React15 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React13 from "react";
+import React14 from "react";
 import { jsx as jsx316 } from "react/jsx-runtime";
-var TabItem = React13.forwardRef((props, ref) => {
+var TabItem = React14.forwardRef((props, ref) => {
   const { isActive: isActive2, title, onClick } = props;
   return /* @__PURE__ */ jsx316(
-    "div",
+    "button",
     {
       ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive2,
+      tabIndex: isActive2 ? 0 : -1,
       className: clsx_default("tab-item", isActive2 ? "active" : null),
       onClick,
       children: title
@@ -7544,44 +7647,64 @@ import { jsx as jsx317, jsxs as jsxs202 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
   const shape = variant ?? type ?? "default";
-  const [underlineStyle, setUnderlineStyle] = React14.useState({
+  const [underlineStyle, setUnderlineStyle] = React15.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React14.useRef([]);
+  const itemRefs = React15.useRef([]);
+  const handleKeyDown = (e) => {
+    const last = tabs.length - 1;
+    let next = null;
+    if (e.key === "ArrowRight") next = activeIndex >= last ? 0 : activeIndex + 1;
+    else if (e.key === "ArrowLeft") next = activeIndex <= 0 ? last : activeIndex - 1;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = last;
+    if (next === null) return;
+    e.preventDefault();
+    onChange(tabs[next], next);
+    itemRefs.current[next]?.focus();
+  };
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ jsx317(
-      TabItem_default,
-      {
-        onClick: () => handleChangeActiveTab(tab, idx),
-        isActive: activeIndex === idx,
-        ref: (el) => {
-          itemRefs.current[idx] = el;
-        },
-        title: tab.title
-      },
-      `${tab.value}_${idx}`
-    )),
-    shape === "toggle" && /* @__PURE__ */ jsx317(
-      "div",
-      {
-        className: "tab-toggle-underline",
-        style: {
-          left: underlineStyle.left,
-          width: underlineStyle.width
-        }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs202(
+    "div",
+    {
+      className: clsx_default("lib-xplat-tab", `type-${shape}`, size),
+      role: "tablist",
+      onKeyDown: handleKeyDown,
+      children: [
+        tabs.map((tab, idx) => /* @__PURE__ */ jsx317(
+          TabItem_default,
+          {
+            onClick: () => handleChangeActiveTab(tab, idx),
+            isActive: activeIndex === idx,
+            ref: (el) => {
+              itemRefs.current[idx] = el;
+            },
+            title: tab.title
+          },
+          `${tab.value}_${idx}`
+        )),
+        shape === "toggle" && /* @__PURE__ */ jsx317(
+          "div",
+          {
+            className: "tab-toggle-underline",
+            style: {
+              left: underlineStyle.left,
+              width: underlineStyle.width
+            }
+          }
+        )
+      ]
+    }
+  );
 };
 Tab.displayName = "Tab";
 var Tab_default = Tab;
@@ -7597,7 +7720,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = React15.useState("start");
+  const [activeTab, setActiveTab] = React16.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -7682,7 +7805,7 @@ var RangePicker_default = RangePicker;
 import { jsx as jsx319, jsxs as jsxs204 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = React16.useState(false);
+  const [isOpen, setIsOpen] = React17.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -7691,7 +7814,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ jsxs204("div", { className: "lib-xplat-popup-datepicker", children: [
-    React16.cloneElement(component, { onClick: handleClick }),
+    React17.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ jsx319(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs204("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ jsxs204("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ jsx319(
@@ -7750,15 +7873,18 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-import React17 from "react";
+import React18 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx321, jsxs as jsxs205 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = React17.useState(false);
-  const [visible, setVisible] = React17.useState(false);
-  React17.useEffect(() => {
+  const [mounted, setMounted] = React18.useState(false);
+  const [visible, setVisible] = React18.useState(false);
+  const panelRef = React18.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(panelRef, isOpen && mounted, { trap: true });
+  React18.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -7780,6 +7906,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ jsxs205(
           "div",
           {
+            ref: panelRef,
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",
@@ -7802,7 +7929,7 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-import React20 from "react";
+import React21 from "react";
 
 // src/tokens/hooks/Portal.tsx
 import ReactDOM from "react-dom";
@@ -7814,13 +7941,15 @@ Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-import React18 from "react";
+import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React18.useState({
+  const [position, setPosition] = React19.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
-  const calculatePosition = React18.useCallback(() => {
+  const placedRef = React19.useRef(false);
+  const calculatePosition = React19.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -7844,16 +7973,21 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
-  React18.useLayoutEffect(() => {
-    if (!enabled) return;
+  React19.useLayoutEffect(() => {
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -7861,13 +7995,19 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -7875,9 +8015,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React19 from "react";
+import React20 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -7903,14 +8043,18 @@ var useClickOutside_default = useClickOutside;
 import { jsx as jsx322, jsxs as jsxs206 } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React20.useState(false);
-  const [mounted, setMounted] = React20.useState(false);
-  const [visible, setVisible] = React20.useState(false);
-  const triggerRef = React20.useRef(null);
-  const menuRef = React20.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const [isOpen, setIsOpen] = React21.useState(false);
+  const [mounted, setMounted] = React21.useState(false);
+  const [visible, setVisible] = React21.useState(false);
+  const triggerRef = React21.useRef(null);
+  const menuRef = React21.useRef(null);
+  const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  React20.useEffect(() => {
+  useEscapeKey(isOpen, () => {
+    setIsOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  React21.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -7939,7 +8083,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ jsx322(
@@ -7964,7 +8108,112 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/Editor/Editor.tsx
-import React21 from "react";
+import React22 from "react";
+
+// src/components/Editor/highlight.ts
+var CODE_LANGUAGES = [
+  { value: "plain", label: "\uC5C6\uC74C" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "json", label: "JSON" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "python", label: "Python" },
+  { value: "sql", label: "SQL" },
+  { value: "bash", label: "Bash" }
+];
+var KEYWORDS = {
+  plain: [],
+  javascript: "const let var function return if else for while class new this import export from default async await try catch throw typeof instanceof null undefined true false break continue switch case do delete in of yield".split(" "),
+  typescript: "const let var function return if else for while class new this import export from default async await try catch throw typeof instanceof null undefined true false break continue switch case do delete in of yield interface type enum implements extends public private protected readonly as satisfies keyof infer never unknown any".split(" "),
+  json: ["true", "false", "null"],
+  html: [],
+  css: [],
+  python: "def class return if elif else for while import from as try except finally raise with lambda None True False and or not in is pass break continue global nonlocal yield async await".split(" "),
+  sql: "SELECT FROM WHERE INSERT INTO VALUES UPDATE SET DELETE CREATE TABLE ALTER DROP JOIN LEFT RIGHT INNER OUTER ON GROUP BY ORDER HAVING LIMIT OFFSET AS AND OR NOT NULL DISTINCT UNION INDEX PRIMARY KEY FOREIGN REFERENCES DEFAULT".split(" "),
+  bash: "if then else fi for while do done case esac function return export local echo cd ls rm cp mv mkdir sudo source set unset exit".split(" ")
+};
+var LINE_COMMENT = {
+  javascript: "//",
+  typescript: "//",
+  css: "",
+  python: "#",
+  sql: "--",
+  bash: "#"
+};
+var escape = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var wrap = (cls, text) => `<span class="tok-${cls}">${escape(text)}</span>`;
+var highlight = (code, lang) => {
+  if (lang === "plain" || !code) return escape(code);
+  const keywords = new Set(KEYWORDS[lang]);
+  const lineComment = LINE_COMMENT[lang];
+  const caseInsensitive = lang === "sql";
+  let out = "";
+  let i = 0;
+  while (i < code.length) {
+    const rest = code.slice(i);
+    if ((lang === "javascript" || lang === "typescript" || lang === "css") && rest.startsWith("/*")) {
+      const end = code.indexOf("*/", i + 2);
+      const stop = end === -1 ? code.length : end + 2;
+      out += wrap("comment", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    if (lineComment && rest.startsWith(lineComment)) {
+      const nl = code.indexOf("\n", i);
+      const stop = nl === -1 ? code.length : nl;
+      out += wrap("comment", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    const q = rest[0];
+    if (q === '"' || q === "'" || q === "`") {
+      let j = 1;
+      while (j < rest.length) {
+        if (rest[j] === "\\") {
+          j += 2;
+          continue;
+        }
+        if (rest[j] === q) {
+          j += 1;
+          break;
+        }
+        if (rest[j] === "\n" && q !== "`") break;
+        j += 1;
+      }
+      out += wrap("string", rest.slice(0, j));
+      i += j;
+      continue;
+    }
+    const num = /^\d+(\.\d+)?/.exec(rest);
+    if (num && !/[\w$]/.test(code[i - 1] ?? "")) {
+      out += wrap("number", num[0]);
+      i += num[0].length;
+      continue;
+    }
+    const word = /^[A-Za-z_$][\w$]*/.exec(rest);
+    if (word) {
+      const w = word[0];
+      const hit = caseInsensitive ? keywords.has(w.toUpperCase()) : keywords.has(w);
+      out += hit ? wrap("keyword", w) : escape(w);
+      i += w.length;
+      continue;
+    }
+    if (lang === "html" && rest.startsWith("<")) {
+      const tag = /^<\/?[A-Za-z][\w-]*/.exec(rest);
+      if (tag) {
+        out += wrap("keyword", tag[0]);
+        i += tag[0].length;
+        continue;
+      }
+    }
+    out += escape(code[i]);
+    i += 1;
+  }
+  return out;
+};
+
+// src/components/Editor/Editor.tsx
 import { jsx as jsx323, jsxs as jsxs207 } from "react/jsx-runtime";
 var DEFAULT_TOOLBAR = [
   "bold",
@@ -7972,14 +8221,27 @@ var DEFAULT_TOOLBAR = [
   "underline",
   "strikethrough",
   "code",
-  "heading",
+  "heading-1",
+  "heading-2",
+  "heading-3",
   "list",
   "ordered-list",
   "blockquote",
   "code-block",
   "link",
   "image",
-  "divider"
+  "divider",
+  "checklist",
+  "table",
+  "align-left",
+  "align-center",
+  "align-right",
+  "highlight",
+  "superscript",
+  "subscript",
+  "clear-format",
+  "undo",
+  "redo"
 ];
 var ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "p",
@@ -8008,12 +8270,51 @@ var ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "img",
   "hr",
   "span",
-  "div"
+  "div",
+  "sub",
+  "sup",
+  "mark",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td"
 ]);
 var ALLOWED_ATTRS = {
   a: ["href", "target", "rel"],
-  img: ["src", "alt"]
+  img: ["src", "alt", "width"],
+  // 정렬·체크리스트는 클래스로만 표현한다. style 을 열면 붙여넣기로 아무 CSS 나 들어온다
+  p: ["class"],
+  h1: ["class"],
+  h2: ["class"],
+  h3: ["class"],
+  h4: ["class"],
+  h5: ["class"],
+  h6: ["class"],
+  ul: ["class"],
+  ol: ["class"],
+  li: ["class", "data-checked"],
+  blockquote: ["class"],
+  div: ["class"],
+  span: ["class"],
+  pre: ["class"],
+  code: ["class"],
+  mark: ["class"],
+  table: ["class"],
+  td: ["class"],
+  th: ["class"],
+  tr: ["class"]
 };
+var DROP_WITH_CONTENT = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "noscript",
+  "iframe",
+  "object",
+  "embed",
+  "template"
+]);
 var sanitizeHtml = (input) => {
   const doc = new DOMParser().parseFromString(`<div>${input}</div>`, "text/html");
   const root = doc.body.firstElementChild;
@@ -8022,6 +8323,10 @@ var sanitizeHtml = (input) => {
     const children = Array.from(node.children);
     for (const child of children) {
       const tag = child.tagName.toLowerCase();
+      if (DROP_WITH_CONTENT.has(tag)) {
+        node.removeChild(child);
+        continue;
+      }
       if (!ALLOWED_TAGS.has(tag)) {
         while (child.firstChild) node.insertBefore(child.firstChild, child);
         node.removeChild(child);
@@ -8052,7 +8357,9 @@ var escapeHtml = (text) => {
 };
 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: "heading-1", label: "\uC81C\uBAA9 1", hint: "\uAC00\uC7A5 \uD070 \uC81C\uBAA9" },
+  { key: "heading-2", label: "\uC81C\uBAA9 2", hint: "" },
+  { key: "heading-3", label: "\uC81C\uBAA9 3", hint: "" },
   { 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: "" },
@@ -8072,26 +8379,32 @@ var Editor = (props) => {
     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();
-    }
+  const editorRef = React22.useRef(null);
+  const lastRangeRef = React22.useRef(null);
+  const composingRef = React22.useRef(false);
+  const [isFocused, setIsFocused] = React22.useState(false);
+  const [isEmpty, setIsEmpty] = React22.useState(!value);
+  const [activeFormats, setActiveFormats] = React22.useState(/* @__PURE__ */ new Set());
+  const [slashOpen, setSlashOpen] = React22.useState(false);
+  const [slashFilter, setSlashFilter] = React22.useState("");
+  const [slashIdx, setSlashIdx] = React22.useState(0);
+  const [slashPos, setSlashPos] = React22.useState({ top: 0, left: 0 });
+  const slashStartRangeRef = React22.useRef(null);
+  const [linkOpen, setLinkOpen] = React22.useState(false);
+  const [linkValue, setLinkValue] = React22.useState("");
+  const [linkPos, setLinkPos] = React22.useState({ top: 0, left: 0 });
+  const lastEmittedRef = React22.useRef(null);
+  React22.useEffect(() => {
+    const el = editorRef.current;
+    if (!el) return;
+    if (value === lastEmittedRef.current) return;
+    if (el.innerHTML === value) return;
+    el.innerHTML = sanitizeHtml(value || "");
+    if (!el.firstChild) el.innerHTML = "<p><br></p>";
+    lastEmittedRef.current = null;
+    historyRef.current = [{ html: el.innerHTML, caret: 0 }];
+    historyIdxRef.current = 0;
+    updateEmpty();
   }, [value]);
   const updateEmpty = () => {
     const el = editorRef.current;
@@ -8107,10 +8420,19 @@ var Editor = (props) => {
     }
   };
   const restoreSelection = () => {
-    if (!lastRangeRef.current) return;
+    const range = lastRangeRef.current;
+    if (!range) return;
+    if (!editorRef.current?.contains(range.startContainer)) {
+      lastRangeRef.current = null;
+      return;
+    }
     const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(lastRangeRef.current);
+    try {
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+    } catch {
+      lastRangeRef.current = null;
+    }
   };
   const updateActiveFormats = () => {
     if (!editorRef.current) return;
@@ -8126,6 +8448,17 @@ var Editor = (props) => {
       if (document.queryCommandState("insertOrderedList")) next.add("ordered-list");
       const block = String(document.queryCommandValue("formatBlock") || "").toLowerCase();
       if (block) next.add(`block:${block}`);
+      if (document.queryCommandState("superscript")) next.add("superscript");
+      if (document.queryCommandState("subscript")) next.add("subscript");
+    } catch {
+    }
+    try {
+      const blockEl = currentBlock();
+      if (blockEl?.classList.contains("align-center")) next.add("align:center");
+      else if (blockEl?.classList.contains("align-right")) next.add("align:right");
+      else if (blockEl) next.add("align:left");
+      if (blockEl?.closest("mark")) next.add("highlight");
+      if (blockEl?.closest("ul.checklist")) next.add("checklist");
     } catch {
     }
     setActiveFormats(next);
@@ -8139,7 +8472,374 @@ var Editor = (props) => {
   const setBlock = (tag) => {
     exec("formatBlock", tag);
   };
+  const toggleBlock = (tag) => {
+    const current = String(document.queryCommandValue("formatBlock") || "").toLowerCase();
+    setBlock(current === tag ? "p" : tag);
+  };
+  const historyRef = React22.useRef([]);
+  const historyIdxRef = React22.useRef(-1);
+  const lastPushAtRef = React22.useRef(0);
+  const isRestoringRef = React22.useRef(false);
+  const caretOffset = (rootEl) => {
+    const el = rootEl ?? editorRef.current;
+    const sel = window.getSelection();
+    if (!el || !sel || sel.rangeCount === 0 || !el.contains(sel.anchorNode)) return 0;
+    const range = sel.getRangeAt(0).cloneRange();
+    range.selectNodeContents(el);
+    range.setEnd(sel.getRangeAt(0).endContainer, sel.getRangeAt(0).endOffset);
+    return range.toString().length;
+  };
+  const setCaretOffset = (offset, rootEl) => {
+    const el = rootEl ?? editorRef.current;
+    if (!el) return;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let remaining = offset;
+    let node = null;
+    while (node = walker.nextNode()) {
+      const len = node.textContent?.length ?? 0;
+      if (remaining <= len) {
+        const range = document.createRange();
+        range.setStart(node, remaining);
+        range.collapse(true);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+        return;
+      }
+      remaining -= len;
+    }
+    placeCaretAtEnd(el);
+  };
+  const pushHistory = (force = false) => {
+    const el = editorRef.current;
+    if (!el || isRestoringRef.current) return;
+    const html = el.innerHTML;
+    const hist = historyRef.current;
+    const cur = hist[historyIdxRef.current];
+    if (cur && cur.html === html) return;
+    const now = Date.now();
+    const coalesce = !force && cur && now - lastPushAtRef.current < 500;
+    lastPushAtRef.current = now;
+    if (coalesce) {
+      hist[historyIdxRef.current] = { html, caret: caretOffset() };
+      return;
+    }
+    hist.length = historyIdxRef.current + 1;
+    hist.push({ html, caret: caretOffset() });
+    if (hist.length > 200) hist.shift();
+    historyIdxRef.current = hist.length - 1;
+  };
+  const applySnapshot = (snap) => {
+    const el = editorRef.current;
+    if (!el) return;
+    isRestoringRef.current = true;
+    el.innerHTML = snap.html;
+    setCaretOffset(snap.caret);
+    isRestoringRef.current = false;
+    lastEmittedRef.current = el.innerHTML;
+    onChange?.(el.innerHTML);
+    updateEmpty();
+    updateActiveFormats();
+  };
+  const undo = () => {
+    pushHistory(true);
+    if (historyIdxRef.current <= 0) return;
+    historyIdxRef.current -= 1;
+    applySnapshot(historyRef.current[historyIdxRef.current]);
+  };
+  const redo = () => {
+    if (historyIdxRef.current >= historyRef.current.length - 1) return;
+    historyIdxRef.current += 1;
+    applySnapshot(historyRef.current[historyIdxRef.current]);
+  };
+  const langOf = (pre) => {
+    const cls = Array.from(pre.classList).find((c) => c.startsWith("lang-"));
+    return cls?.slice(5) ?? "plain";
+  };
+  const [codeLang, setCodeLang] = React22.useState("plain");
+  const highlightRafRef = React22.useRef(0);
+  const rehighlight = (pre) => {
+    if (composingRef.current) return;
+    const code = pre.querySelector("code");
+    if (!code) return;
+    const lang = langOf(pre);
+    const text = code.textContent || "";
+    const next = highlight(text, lang);
+    if (code.innerHTML === next) return;
+    const caret = caretOffset(code);
+    isRestoringRef.current = true;
+    code.innerHTML = next;
+    setCaretOffset(caret, code);
+    isRestoringRef.current = false;
+  };
+  const scheduleHighlight = () => {
+    const pre = closestPre();
+    if (!pre) return;
+    cancelAnimationFrame(highlightRafRef.current);
+    highlightRafRef.current = requestAnimationFrame(() => rehighlight(pre));
+  };
+  const changeCodeLang = (lang) => {
+    const pre = closestPre();
+    if (!pre) return;
+    pushHistory(true);
+    Array.from(pre.classList).filter((c) => c.startsWith("lang-")).forEach((c) => pre.classList.remove(c));
+    if (lang !== "plain") pre.classList.add(`lang-${lang}`);
+    setCodeLang(lang);
+    rehighlight(pre);
+    handleInput();
+  };
+  const closestPre = () => {
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    if (!node || !editorRef.current?.contains(node)) return null;
+    const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    return el?.closest("pre") ?? null;
+  };
+  const insertCodeBlock = () => {
+    pushHistory(true);
+    const el = editorRef.current;
+    const sel = window.getSelection();
+    if (!el || !sel || sel.rangeCount === 0) return;
+    const existing = closestPre();
+    if (existing) {
+      const p = document.createElement("p");
+      p.textContent = existing.textContent || "";
+      if (!p.textContent) p.innerHTML = "<br>";
+      existing.replaceWith(p);
+      placeCaretAtEnd(p);
+      handleInput();
+      return;
+    }
+    const range = sel.getRangeAt(0);
+    const frag = range.cloneContents();
+    const holder = document.createElement("div");
+    holder.appendChild(frag);
+    const BLOCK = /^(p|div|h[1-6]|li|blockquote|pre|tr)$/i;
+    const linesOf = (node) => {
+      const out = [];
+      let cur = "";
+      for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+          cur += child.textContent || "";
+        } else if (child.nodeName === "BR") {
+          out.push(cur);
+          cur = "";
+        } else if (BLOCK.test(child.nodeName)) {
+          if (cur) {
+            out.push(cur);
+            cur = "";
+          }
+          const sub = linesOf(child);
+          out.push(...sub.length > 0 ? sub : [""]);
+        } else {
+          cur += linesOf(child).join("\n");
+        }
+      }
+      if (cur) out.push(cur);
+      return out;
+    };
+    const text = linesOf(holder).join("\n").replace(/\n+$/, "");
+    const pre = document.createElement("pre");
+    const code = document.createElement("code");
+    code.textContent = text || "";
+    pre.appendChild(code);
+    range.deleteContents();
+    range.insertNode(pre);
+    ensureParagraphAfter(pre);
+    placeCaretAtEnd(code);
+    handleInput();
+  };
+  const insertTextAtCaret = (text) => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    range.deleteContents();
+    const node = document.createTextNode(text);
+    range.insertNode(node);
+    range.setStartAfter(node);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+    handleInput();
+  };
+  const ensureParagraphAfter = (node) => {
+    const next = node.nextElementSibling;
+    if (next && next.tagName === "P") return;
+    const p = document.createElement("p");
+    p.innerHTML = "<br>";
+    node.after(p);
+  };
+  const placeCaretAtEnd = (node) => {
+    const sel = window.getSelection();
+    if (!sel) return;
+    const r2 = document.createRange();
+    r2.selectNodeContents(node);
+    r2.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(r2);
+    editorRef.current?.focus();
+  };
+  const clearFormat = () => {
+    exec("removeFormat");
+    exec("unlink");
+    setBlock("p");
+  };
+  const indentList = (outdent) => {
+    exec(outdent ? "outdent" : "indent");
+  };
+  const inListItem = () => {
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    if (!node || !editorRef.current?.contains(node)) return false;
+    const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    return !!el?.closest("li");
+  };
+  const currentBlock = () => {
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    const root = editorRef.current;
+    if (!node || !root?.contains(node)) return null;
+    let el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    while (el && el !== root && !/^(P|H[1-6]|LI|BLOCKQUOTE|PRE|DIV|TD|TH)$/.test(el.tagName)) {
+      el = el.parentElement;
+    }
+    return el && el !== root ? el : null;
+  };
+  const setAlign = (align) => {
+    const block = currentBlock();
+    if (!block) return;
+    pushHistory(true);
+    block.classList.remove("align-left", "align-center", "align-right");
+    if (align !== "left") block.classList.add(`align-${align}`);
+    handleInput();
+  };
+  const toggleChecklist = () => {
+    pushHistory(true);
+    const block = currentBlock();
+    const list = block?.closest("ul");
+    if (list?.classList.contains("checklist")) {
+      list.classList.remove("checklist");
+      list.querySelectorAll("li").forEach((li) => li.removeAttribute("data-checked"));
+      handleInput();
+      return;
+    }
+    if (list) {
+      list.classList.add("checklist");
+      list.querySelectorAll("li").forEach((li) => li.setAttribute("data-checked", "false"));
+      handleInput();
+      return;
+    }
+    exec("insertUnorderedList");
+    const made = currentBlock()?.closest("ul");
+    if (made) {
+      made.classList.add("checklist");
+      made.querySelectorAll("li").forEach((li) => li.setAttribute("data-checked", "false"));
+    }
+    handleInput();
+  };
+  const handleEditorClick = (e) => {
+    if (readOnly) return;
+    const target = e.target;
+    const li = target.closest?.("li");
+    if (!li || !li.closest("ul.checklist")) return;
+    const rect = li.getBoundingClientRect();
+    if (e.clientX - rect.left > 20) return;
+    e.preventDefault();
+    pushHistory(true);
+    li.setAttribute("data-checked", li.getAttribute("data-checked") === "true" ? "false" : "true");
+    handleInput();
+  };
+  const toggleHighlight = () => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+    pushHistory(true);
+    const range = sel.getRangeAt(0);
+    const node = sel.anchorNode;
+    const el = node?.nodeType === Node.ELEMENT_NODE ? node : node?.parentElement;
+    const existing = el?.closest("mark");
+    if (existing) {
+      const parent = existing.parentNode;
+      while (existing.firstChild) parent?.insertBefore(existing.firstChild, existing);
+      parent?.removeChild(existing);
+      handleInput();
+      return;
+    }
+    const mark = document.createElement("mark");
+    try {
+      range.surroundContents(mark);
+    } catch {
+      const frag = range.extractContents();
+      mark.appendChild(frag);
+      range.insertNode(mark);
+    }
+    handleInput();
+  };
+  const insertTable = (cols = 3, rows = 2) => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    pushHistory(true);
+    const table = document.createElement("table");
+    const thead = document.createElement("thead");
+    const headRow = document.createElement("tr");
+    for (let c = 0; c < cols; c++) {
+      const th = document.createElement("th");
+      th.innerHTML = "<br>";
+      headRow.appendChild(th);
+    }
+    thead.appendChild(headRow);
+    table.appendChild(thead);
+    const tbody = document.createElement("tbody");
+    for (let r2 = 0; r2 < rows; r2++) {
+      const tr = document.createElement("tr");
+      for (let c = 0; c < cols; c++) {
+        const td = document.createElement("td");
+        td.innerHTML = "<br>";
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    const range = sel.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(table);
+    ensureParagraphAfter(table);
+    const first = table.querySelector("th");
+    if (first) placeCaretAtEnd(first);
+    handleInput();
+  };
+  const moveTableCell = (backwards) => {
+    const block = currentBlock();
+    const cell = block?.closest("td, th");
+    if (!cell) return false;
+    const table = cell.closest("table");
+    if (!table) return false;
+    const cells = Array.from(table.querySelectorAll("td, th"));
+    const i = cells.indexOf(cell);
+    const next = cells[i + (backwards ? -1 : 1)];
+    if (next) {
+      placeCaretAtEnd(next);
+      return true;
+    }
+    if (!backwards) {
+      pushHistory(true);
+      const lastRow = table.querySelector("tbody")?.lastElementChild;
+      if (lastRow) {
+        const tr = document.createElement("tr");
+        for (let c = 0; c < lastRow.children.length; c++) {
+          const td = document.createElement("td");
+          td.innerHTML = "<br>";
+          tr.appendChild(td);
+        }
+        lastRow.after(tr);
+        placeCaretAtEnd(tr.firstElementChild);
+        handleInput();
+        return true;
+      }
+    }
+    return false;
+  };
   const insertDivider = () => {
+    pushHistory(true);
     exec("insertHorizontalRule");
     const el = editorRef.current;
     if (el && el.lastElementChild?.tagName === "HR") {
@@ -8185,7 +8885,9 @@ var Editor = (props) => {
     const range = sel.getRangeAt(0);
     slashStartRangeRef.current = range.cloneRange();
     const rect = range.getBoundingClientRect();
-    const editorRect = editorRef.current.getBoundingClientRect();
+    const editorEl = editorRef.current;
+    if (!editorEl) return;
+    const editorRect = editorEl.getBoundingClientRect();
     setSlashPos({
       top: rect.bottom - editorRect.top + 4,
       left: rect.left - editorRect.left
@@ -8200,7 +8902,7 @@ var Editor = (props) => {
     setSlashIdx(0);
     slashStartRangeRef.current = null;
   };
-  const filteredSlashItems = React21.useMemo(() => {
+  const filteredSlashItems = React22.useMemo(() => {
     if (!slashFilter) return SLASH_ITEMS;
     const f = slashFilter.toLowerCase();
     return SLASH_ITEMS.filter((it) => it.label.toLowerCase().includes(f) || it.key.includes(f));
@@ -8230,8 +8932,14 @@ var Editor = (props) => {
       case "paragraph":
         setBlock("p");
         break;
-      case "heading":
-        setBlock("h2");
+      case "heading-1":
+        toggleBlock("h1");
+        break;
+      case "heading-2":
+        toggleBlock("h2");
+        break;
+      case "heading-3":
+        toggleBlock("h3");
         break;
       case "list":
         exec("insertUnorderedList");
@@ -8243,7 +8951,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "divider":
         insertDivider();
@@ -8261,7 +8969,9 @@ var Editor = (props) => {
     if (!sel || sel.rangeCount === 0) return;
     const range = sel.getRangeAt(0);
     const rect = range.getBoundingClientRect();
-    const editorRect = editorRef.current.getBoundingClientRect();
+    const editorEl2 = editorRef.current;
+    if (!editorEl2) return;
+    const editorRect = editorEl2.getBoundingClientRect();
     setLinkPos({
       top: rect.bottom - editorRect.top + 4,
       left: rect.left - editorRect.left
@@ -8294,13 +9004,13 @@ var Editor = (props) => {
     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")]
+      [/^###$/, () => setBlock("h3")],
+      [/^##$/, () => setBlock("h2")],
+      [/^#$/, () => setBlock("h1")],
+      [/^-$/, () => exec("insertUnorderedList")],
+      [/^\*$/, () => exec("insertUnorderedList")],
+      [/^1\.$/, () => exec("insertOrderedList")],
+      [/^>$/, () => setBlock("blockquote")]
     ];
     for (const [re, fn] of patterns) {
       if (re.test(text)) {
@@ -8320,7 +9030,11 @@ var Editor = (props) => {
     if (composingRef.current) return;
     const el = editorRef.current;
     if (!el) return;
-    onChange?.(el.innerHTML);
+    const html = el.innerHTML;
+    lastEmittedRef.current = html;
+    pushHistory();
+    scheduleHighlight();
+    onChange?.(html);
     updateEmpty();
     updateActiveFormats();
     if (slashOpen) {
@@ -8348,6 +9062,40 @@ var Editor = (props) => {
   };
   const handleKeyDown = (e) => {
     if (readOnly) return;
+    if (composingRef.current || e.nativeEvent.isComposing || e.keyCode === 229) return;
+    const pre = closestPre();
+    if (pre && !slashOpen) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        const text = pre.textContent || "";
+        if (text.endsWith("\n\n")) {
+          e.preventDefault();
+          const code = pre.querySelector("code") ?? pre;
+          code.textContent = text.replace(/\n\n$/, "");
+          ensureParagraphAfter(pre);
+          const next = pre.nextElementSibling;
+          if (next) placeCaretAtEnd(next);
+          handleInput();
+          return;
+        }
+        e.preventDefault();
+        insertTextAtCaret("\n");
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        insertTextAtCaret("  ");
+        return;
+      }
+    }
+    if (e.key === "Tab" && moveTableCell(e.shiftKey)) {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Tab" && inListItem()) {
+      e.preventDefault();
+      indentList(e.shiftKey);
+      return;
+    }
     if (slashOpen) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -8371,6 +9119,21 @@ var Editor = (props) => {
         return;
       }
     }
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
+      e.preventDefault();
+      if (e.shiftKey) redo();
+      else undo();
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "v") {
+      plainPasteRef.current = true;
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "y") {
+      e.preventDefault();
+      redo();
+      return;
+    }
     if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
       const k = e.key.toLowerCase();
       if (k === "b") {
@@ -8394,6 +9157,7 @@ var Editor = (props) => {
         return;
       }
     }
+    if (pre) return;
     if (enableSlashCommand && e.key === "/") {
       setTimeout(openSlashMenu, 0);
     }
@@ -8403,11 +9167,21 @@ var Editor = (props) => {
       }
     }
   };
+  const plainPasteRef = React22.useRef(false);
   const handlePaste = (e) => {
     if (readOnly) return;
     e.preventDefault();
-    const html = e.clipboardData.getData("text/html");
     const text = e.clipboardData.getData("text/plain");
+    if (plainPasteRef.current) {
+      plainPasteRef.current = false;
+      insertTextAtCaret(text);
+      return;
+    }
+    if (closestPre()) {
+      insertTextAtCaret(text);
+      return;
+    }
+    const html = e.clipboardData.getData("text/html");
     const clean = html ? sanitizeHtml(html) : escapeHtml(text);
     document.execCommand("insertHTML", false, clean);
     handleInput();
@@ -8429,8 +9203,11 @@ var Editor = (props) => {
   };
   const handleSelectionUpdate = () => {
     updateActiveFormats();
+    const pre = closestPre();
+    setCodeLang(pre ? langOf(pre) : "plain");
   };
   const onToolbarAction = (item) => {
+    if (closestPre() && !["code-block", "undo", "redo"].includes(item)) return;
     switch (item) {
       case "bold":
         exec("bold");
@@ -8459,8 +9236,14 @@ var Editor = (props) => {
         handleInput();
         break;
       }
-      case "heading":
-        setBlock("h2");
+      case "heading-1":
+        toggleBlock("h1");
+        break;
+      case "heading-2":
+        toggleBlock("h2");
+        break;
+      case "heading-3":
+        toggleBlock("h3");
         break;
       case "list":
         exec("insertUnorderedList");
@@ -8472,7 +9255,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "link":
         openLinkEditor();
@@ -8483,6 +9266,39 @@ var Editor = (props) => {
       case "divider":
         insertDivider();
         break;
+      case "checklist":
+        toggleChecklist();
+        break;
+      case "align-left":
+        setAlign("left");
+        break;
+      case "align-center":
+        setAlign("center");
+        break;
+      case "align-right":
+        setAlign("right");
+        break;
+      case "highlight":
+        toggleHighlight();
+        break;
+      case "superscript":
+        exec("superscript");
+        break;
+      case "subscript":
+        exec("subscript");
+        break;
+      case "table":
+        insertTable();
+        break;
+      case "clear-format":
+        clearFormat();
+        break;
+      case "undo":
+        undo();
+        break;
+      case "redo":
+        redo();
+        break;
     }
   };
   return /* @__PURE__ */ jsxs207("div", { className: clsx_default("lib-xplat-editor", isFocused && "focused", readOnly && "readonly"), children: [
@@ -8491,7 +9307,10 @@ var Editor = (props) => {
       {
         items: toolbar,
         active: activeFormats,
-        onAction: onToolbarAction
+        onAction: onToolbarAction,
+        codeLang,
+        inCodeBlock: activeFormats.has("block:pre"),
+        onCodeLangChange: changeCodeLang
       }
     ),
     /* @__PURE__ */ jsxs207("div", { className: "lib-xplat-editor__content", style: { minHeight }, children: [
@@ -8502,9 +9321,14 @@ var Editor = (props) => {
           ref: editorRef,
           contentEditable: !readOnly,
           suppressContentEditableWarning: true,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-readonly": readOnly || void 0,
+          "aria-label": placeholder,
           className: "lib-xplat-editor__editable",
           onInput: handleInput,
           onKeyDown: handleKeyDown,
+          onClick: handleEditorClick,
           onKeyUp: handleSelectionUpdate,
           onMouseUp: handleSelectionUpdate,
           onPaste: handlePaste,
@@ -8546,14 +9370,27 @@ var TOOLBAR_LABEL = {
   underline: "U",
   strikethrough: "S",
   code: "<>",
-  heading: "H",
+  "heading-1": "H1",
+  "heading-2": "H2",
+  "heading-3": "H3",
   list: "\u2022",
   "ordered-list": "1.",
   blockquote: "\u275D",
   "code-block": "[ ]",
   link: "\u{1F517}",
   image: "\u{1F5BC}",
-  divider: "\u2014"
+  divider: "\u2014",
+  checklist: "\u2611",
+  "align-left": "\u21E4",
+  "align-center": "\u2194",
+  "align-right": "\u21E5",
+  highlight: "\u{1F58D}",
+  superscript: "x\xB2",
+  subscript: "x\u2082",
+  table: "\u25A6",
+  "clear-format": "\u232B",
+  undo: "\u21B6",
+  redo: "\u21B7"
 };
 var TOOLBAR_TITLE = {
   bold: "\uAD75\uAC8C (\u2318B)",
@@ -8561,39 +9398,77 @@ var TOOLBAR_TITLE = {
   underline: "\uBC11\uC904 (\u2318U)",
   strikethrough: "\uCDE8\uC18C\uC120",
   code: "\uC778\uB77C\uC778 \uCF54\uB4DC",
-  heading: "\uC81C\uBAA9",
+  "heading-1": "\uC81C\uBAA9 1",
+  "heading-2": "\uC81C\uBAA9 2",
+  "heading-3": "\uC81C\uBAA9 3",
   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"
+  divider: "\uAD6C\uBD84\uC120",
+  checklist: "\uCCB4\uD06C\uB9AC\uC2A4\uD2B8",
+  "align-left": "\uC67C\uCABD \uC815\uB82C",
+  "align-center": "\uAC00\uC6B4\uB370 \uC815\uB82C",
+  "align-right": "\uC624\uB978\uCABD \uC815\uB82C",
+  highlight: "\uD615\uAD11\uD39C",
+  superscript: "\uC704 \uCCA8\uC790",
+  subscript: "\uC544\uB798 \uCCA8\uC790",
+  table: "\uD45C \uC0BD\uC785",
+  "clear-format": "\uC11C\uC2DD \uC9C0\uC6B0\uAE30",
+  undo: "\uB418\uB3CC\uB9AC\uAE30 (\u2318Z)",
+  redo: "\uB2E4\uC2DC\uD558\uAE30 (\u2318\u21E7Z)"
 };
 var isActive = (item, active) => {
-  if (item === "heading") return active.has("block:h1") || active.has("block:h2") || active.has("block:h3");
+  if (item === "heading-1") return active.has("block:h1");
+  if (item === "heading-2") return active.has("block:h2");
+  if (item === "heading-3") return active.has("block:h3");
   if (item === "blockquote") return active.has("block:blockquote");
   if (item === "code-block") return active.has("block:pre");
+  if (item === "align-left") return active.has("align:left");
+  if (item === "align-center") return active.has("align:center");
+  if (item === "align-right") return active.has("align:right");
   return active.has(item);
 };
-var EditorToolbar = ({ items, active, onAction }) => {
-  return /* @__PURE__ */ jsx323("div", { className: "lib-xplat-editor__toolbar", children: items.map((item) => /* @__PURE__ */ jsx323(
-    "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);
+var EditorToolbar = ({
+  items,
+  active,
+  onAction,
+  codeLang,
+  inCodeBlock,
+  onCodeLangChange
+}) => {
+  return /* @__PURE__ */ jsxs207("div", { className: "lib-xplat-editor__toolbar", children: [
+    items.map((item) => /* @__PURE__ */ jsx323(
+      "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]
       },
-      children: TOOLBAR_LABEL[item]
-    },
-    item
-  )) });
+      item
+    )),
+    inCodeBlock && /* @__PURE__ */ jsx323(
+      "select",
+      {
+        className: "lib-xplat-editor__lang",
+        value: codeLang,
+        "aria-label": "\uCF54\uB4DC \uC5B8\uC5B4",
+        onMouseDown: (e) => e.stopPropagation(),
+        onChange: (e) => onCodeLangChange(e.target.value),
+        children: CODE_LANGUAGES.map((l) => /* @__PURE__ */ jsx323("option", { value: l.value, children: l.label }, l.value))
+      }
+    )
+  ] });
 };
 var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       const menu = document.querySelector(".lib-xplat-editor__slash-menu");
@@ -8627,8 +9502,8 @@ var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
   );
 };
 var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
-  const inputRef = React21.useRef(null);
-  React21.useEffect(() => {
+  const inputRef = React22.useRef(null);
+  React22.useEffect(() => {
     inputRef.current?.focus();
   }, []);
   return /* @__PURE__ */ jsxs207(
@@ -8686,7 +9561,7 @@ EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-import React22 from "react";
+import React23 from "react";
 import { jsx as jsx325, jsxs as jsxs209 } from "react/jsx-runtime";
 var FileUpload = (props) => {
   const {
@@ -8698,8 +9573,8 @@ var FileUpload = (props) => {
     description,
     validations
   } = props;
-  const [isDragOver, setIsDragOver] = React22.useState(false);
-  const inputRef = React22.useRef(null);
+  const [isDragOver, setIsDragOver] = React23.useState(false);
+  const inputRef = React23.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -8761,10 +9636,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import React24 from "react";
+import React25 from "react";
 
 // src/components/HtmlTypeWriter/utils.ts
-import React23 from "react";
+import React24 from "react";
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -8832,15 +9707,15 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return React23.createElement(tag, props);
+    return React24.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return React23.createElement(tag, props, ...children);
+  return React24.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 : React23.createElement(React23.Fragment, { key: idx }, node);
+    return node == null ? null : React24.createElement(React24.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
@@ -8853,20 +9728,20 @@ var HtmlTypeWriter = ({
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = React24.useState(0);
-  const doneCalledRef = React24.useRef(false);
-  const { doc, rangeMap, totalLength } = React24.useMemo(() => {
+  const [typedLen, setTypedLen] = React25.useState(0);
+  const doneCalledRef = React25.useRef(false);
+  const { doc, rangeMap, totalLength } = React25.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]);
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -8874,18 +9749,18 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = React24.useMemo(
+  const parsed = React25.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
@@ -8895,12 +9770,12 @@ HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-import React25 from "react";
+import React26 from "react";
 import { jsx as jsx327, jsxs as jsxs210 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
   const { value, label, onChange, validations } = props;
-  const [previewUrl, setPreviewUrl] = React25.useState();
-  React25.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = React26.useState();
+  React26.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -8909,7 +9784,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = React25.useRef(null);
+  const inputRef = React26.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -9092,17 +9967,21 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-import React26 from "react";
+import React27 from "react";
 import { jsx as jsx332, jsxs as jsxs213 } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React26.useRef(null);
-  const triggerRef = React26.useRef(null);
-  const [localOpen, setLocalOpen] = React26.useState(false);
-  const [eventTrigger, setEventTrigger] = React26.useState(false);
+  const popRef = React27.useRef(null);
+  const triggerRef = React27.useRef(null);
+  const [localOpen, setLocalOpen] = React27.useState(false);
+  const [eventTrigger, setEventTrigger] = React27.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
+  useEscapeKey(isOpen, () => {
+    onClose();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -9131,6 +10010,7 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
+              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -9187,12 +10067,12 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-import React27 from "react";
-var RadioGroupContext = React27.createContext(
+import React28 from "react";
+var RadioGroupContext = React28.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return React27.useContext(RadioGroupContext);
+  return React28.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
@@ -9268,19 +10148,19 @@ RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-import React30 from "react";
+import React31 from "react";
 
 // src/components/Select/context.ts
-import React28 from "react";
-var SelectContext = React28.createContext(null);
+import React29 from "react";
+var SelectContext = React29.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-import React29 from "react";
+import React30 from "react";
 import { jsx as jsx336 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = React29.useContext(context_default);
+  const ctx = React30.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -9320,32 +10200,37 @@ var SelectRoot = (props) => {
     onChange,
     children,
     disabled = false,
+    searchable = false,
+    searchPlaceholder = "\uAC80\uC0C9",
     error = false,
     validations,
+    label,
+    required,
     size = "md"
   } = props;
-  const itemChildren = React30.Children.toArray(children).filter(
-    (child) => React30.isValidElement(child) && child.type === SelectItem_default
+  const fieldId = React31.useId();
+  const itemChildren = React31.Children.toArray(children).filter(
+    (child) => React31.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = React30.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = React30.useState(null);
-  const [uncontrolledValue, setUncontrolledValue] = React30.useState(void 0);
-  const controlledLabel = React30.useMemo(() => {
+  const [isOpen, setOpen] = React31.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = React31.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = React31.useState(void 0);
+  const controlledLabel = React31.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 selectedValue = isControlled ? valueProp : uncontrolledValue;
-  const triggerRef = React30.useRef(null);
-  const contentRef = React30.useRef(null);
-  const [mounted, setMounted] = React30.useState(false);
-  const [visible, setVisible] = React30.useState(false);
-  React30.useEffect(() => {
+  const triggerRef = React31.useRef(null);
+  const contentRef = React31.useRef(null);
+  const [mounted, setMounted] = React31.useState(false);
+  const [visible, setVisible] = React31.useState(false);
+  React31.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -9355,22 +10240,42 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = React30.useCallback(() => setOpen(true), []);
-  const close = React30.useCallback(() => setOpen(false), []);
-  const toggle = React30.useCallback(() => setOpen((prev) => !prev), []);
+  const [query, setQuery] = React31.useState("");
+  const textOf = (node) => {
+    if (node === null || node === void 0 || typeof node === "boolean") return "";
+    if (typeof node === "string" || typeof node === "number") return String(node);
+    if (Array.isArray(node)) return node.map(textOf).join("");
+    if (React31.isValidElement(node)) return textOf(node.props.children);
+    return "";
+  };
+  const visibleItems = React31.useMemo(() => {
+    if (!searchable || !query.trim()) return itemChildren;
+    const q = query.trim().toLowerCase();
+    return itemChildren.filter((c) => textOf(c.props.children).toLowerCase().includes(q));
+  }, [searchable, query, itemChildren]);
+  const open = React31.useCallback(() => setOpen(true), []);
+  const close = React31.useCallback(() => {
+    setOpen(false);
+    setQuery("");
+  }, []);
+  const toggle = React31.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
+  useEscapeKey(isOpen, () => {
+    close();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = React30.useCallback(
-    (label, itemValue) => {
+  const setSelected = React31.useCallback(
+    (label2, itemValue) => {
       if (!isControlled) {
-        setUncontrolledLabel(label);
+        setUncontrolledLabel(label2);
         setUncontrolledValue(itemValue);
       }
-      onChange?.(itemValue, label);
+      onChange?.(itemValue, label2);
     },
     [isControlled, onChange]
   );
-  const ctxValue = React30.useMemo(
+  const ctxValue = React31.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -9406,6 +10311,7 @@ var SelectRoot = (props) => {
         /* @__PURE__ */ jsxs216(
           "div",
           {
+            id: fieldId,
             ref: triggerRef,
             className: clsx_default(
               "select-trigger",
@@ -9448,20 +10354,33 @@ var SelectRoot = (props) => {
             ]
           }
         ),
-        mounted && /* @__PURE__ */ jsx337(Portal_default, { children: /* @__PURE__ */ jsx337(
+        mounted && /* @__PURE__ */ jsx337(Portal_default, { children: /* @__PURE__ */ jsxs216(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass, position.repositioning && "repositioning"),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
-            children: /* @__PURE__ */ jsx337(context_default.Provider, { value: ctxValue, children: itemChildren })
+            children: [
+              searchable && /* @__PURE__ */ jsx337("div", { className: "select-search", children: /* @__PURE__ */ jsx337(
+                "input",
+                {
+                  type: "text",
+                  value: query,
+                  placeholder: searchPlaceholder,
+                  onChange: (e) => setQuery(e.target.value),
+                  autoFocus: true,
+                  "aria-label": searchPlaceholder
+                }
+              ) }),
+              /* @__PURE__ */ jsx337(context_default.Provider, { value: ctxValue, children: visibleItems.length > 0 ? visibleItems : /* @__PURE__ */ jsx337("div", { className: "select-empty", children: "\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) })
+            ]
           }
         ) })
       ]
     }
   ) });
-  return /* @__PURE__ */ jsx337(Field, { validations, children: control });
+  return /* @__PURE__ */ jsx337(Field, { validations, label, required, htmlFor: fieldId, children: control });
 };
 SelectRoot.displayName = "Select";
 var Select = Object.assign(SelectRoot, {
@@ -9541,8 +10460,44 @@ var Spinner = (props) => {
 Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
-// src/components/Steps/Steps.tsx
+// src/components/Stat/Stat.tsx
 import { jsx as jsx340, jsxs as jsxs218 } from "react/jsx-runtime";
+var ARROW = {
+  up: "\u25B2",
+  down: "\u25BC",
+  flat: "\u2014"
+};
+var Stat = (props) => {
+  const {
+    label,
+    value,
+    unit,
+    description,
+    trend,
+    icon,
+    size = "md",
+    type = "primary"
+  } = props;
+  const statusType = normalizeStatus(type);
+  return /* @__PURE__ */ jsxs218("div", { className: clsx_default("lib-xplat-stat", size, statusType), children: [
+    /* @__PURE__ */ jsx340("div", { className: "stat-label", children: label }),
+    /* @__PURE__ */ jsxs218("div", { className: "stat-value-row", children: [
+      icon && /* @__PURE__ */ jsx340("span", { className: "stat-icon", children: icon }),
+      /* @__PURE__ */ jsx340("span", { className: "stat-value", children: value }),
+      unit && /* @__PURE__ */ jsx340("span", { className: "stat-unit", children: unit }),
+      trend && /* @__PURE__ */ jsxs218("span", { className: clsx_default("stat-trend", trend.direction), children: [
+        /* @__PURE__ */ jsx340("span", { "aria-hidden": "true", children: ARROW[trend.direction] }),
+        trend.value
+      ] })
+    ] }),
+    description && /* @__PURE__ */ jsx340("div", { className: "stat-description", children: description })
+  ] });
+};
+Stat.displayName = "Stat";
+var Stat_default = Stat;
+
+// src/components/Steps/Steps.tsx
+import { jsx as jsx341, jsxs as jsxs219 } from "react/jsx-runtime";
 var Steps = (props) => {
   const {
     items,
@@ -9550,13 +10505,13 @@ var Steps = (props) => {
     type = "primary"
   } = props;
   const statusType = normalizeStatus(type);
-  return /* @__PURE__ */ jsx340("div", { className: clsx_default("lib-xplat-steps", statusType), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx341("div", { className: clsx_default("lib-xplat-steps", statusType), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ jsxs218("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ jsx340("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx340(CheckIcon_default, {}) : /* @__PURE__ */ jsx340("span", { children: index + 1 }) }),
-      /* @__PURE__ */ jsxs218("div", { className: "step-content", children: [
-        /* @__PURE__ */ jsx340("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ jsx340("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ jsxs219("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ jsx341("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx341(CheckIcon_default, {}) : /* @__PURE__ */ jsx341("span", { children: index + 1 }) }),
+      /* @__PURE__ */ jsxs219("div", { className: "step-content", children: [
+        /* @__PURE__ */ jsx341("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ jsx341("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -9565,8 +10520,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-import React31 from "react";
-import { jsx as jsx341, jsxs as jsxs219 } from "react/jsx-runtime";
+import React32 from "react";
+import { jsx as jsx342, jsxs as jsxs220 } from "react/jsx-runtime";
 var Swiper = (props) => {
   const {
     auto = false,
@@ -9590,26 +10545,26 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = React31.useMemo(() => {
+  const extendedItems = React32.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = React31.useState(
+  const [innerIndex, setInnerIndex] = React32.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = React31.useState(false);
-  const [dragOffset, setDragOffset] = React31.useState(0);
-  const [animated, setAnimated] = React31.useState(false);
-  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);
-  const initializedRef = React31.useRef(false);
-  React31.useEffect(() => {
+  const [isDragging, setIsDragging] = React32.useState(false);
+  const [dragOffset, setDragOffset] = React32.useState(0);
+  const [animated, setAnimated] = React32.useState(false);
+  const [containerWidth, setContainerWidth] = React32.useState(0);
+  const containerRef = React32.useRef(null);
+  const startXRef = React32.useRef(0);
+  const startTimeRef = React32.useRef(0);
+  const autoplayTimerRef = React32.useRef(null);
+  const resumeTimeoutRef = React32.useRef(null);
+  const [paused, setPaused] = React32.useState(false);
+  const initializedRef = React32.useRef(false);
+  React32.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -9632,7 +10587,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = React31.useCallback(
+  const moveToInner = React32.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -9660,7 +10615,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = React31.useCallback(() => {
+  const handleTransitionEnd = React32.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -9670,7 +10625,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = React31.useCallback(
+  const slideTo = React32.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -9680,7 +10635,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = React31.useCallback(() => {
+  const slideNext = React32.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -9689,7 +10644,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = React31.useCallback(() => {
+  const slidePrev = React32.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -9698,7 +10653,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -9706,12 +10661,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  React31.useImperativeHandle(swiperRef, () => ({
+  React32.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (!auto || !canSlide || paused) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -9737,7 +10692,7 @@ var Swiper = (props) => {
       resumeTimeoutRef.current = null;
     }, pauseOnInteraction);
   };
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     return () => {
       if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
     };
@@ -9755,7 +10710,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -9794,8 +10749,8 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = React31.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx341(
+  const slideElements = React32.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx342(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -9814,15 +10769,15 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsxs220("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ jsx342(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
         onDragStart: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsx341(
+        children: /* @__PURE__ */ jsx342(
           "div",
           {
             className: clsx_default(
@@ -9840,7 +10795,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ jsx341("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx341("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx341(
+    showProgress && canSlide && /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx342(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -9850,7 +10805,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ jsx341("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx341(
+    canSlide && /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx342(
       "button",
       {
         className: clsx_default(
@@ -9868,8 +10823,8 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-import React32 from "react";
-import { jsx as jsx342 } from "react/jsx-runtime";
+import React33 from "react";
+import { jsx as jsx343 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -9878,12 +10833,15 @@ var Switch = (props) => {
     type = "primary",
     disabled,
     onChange,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = React33.useId();
   const statusType = normalizeStatus(type);
-  const [isAnimating, setIsAnimating] = React32.useState(false);
-  const timeoutRef = React32.useRef(null);
-  React32.useEffect(() => {
+  const [isAnimating, setIsAnimating] = React33.useState(false);
+  const timeoutRef = React33.useRef(null);
+  React33.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -9898,9 +10856,10 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const control = /* @__PURE__ */ jsx342(
+  const control = /* @__PURE__ */ jsx343(
     "div",
     {
+      id: fieldId,
       className: clsx_default(
         "lib-xplat-switch",
         size,
@@ -9912,26 +10871,26 @@ var Switch = (props) => {
       onClick: handleClick,
       "aria-invalid": hasError(validations) || void 0,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ jsx342("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ jsx343("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
-  return /* @__PURE__ */ jsx342(Field, { validations, children: control });
+  return /* @__PURE__ */ jsx343(Field, { validations, label, required, htmlFor: fieldId, children: control });
 };
 Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-import React33 from "react";
-var TableContext = React33.createContext(null);
+import React34 from "react";
+var TableContext = React34.createContext(null);
 var useTableContext = () => {
-  const ctx = React33.useContext(TableContext);
+  const ctx = React34.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 jsx343 } from "react/jsx-runtime";
+import { jsx as jsx344 } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     children,
@@ -9941,7 +10900,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx343("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx343(
+  return /* @__PURE__ */ jsx344("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx344(
     TableContext_default.Provider,
     {
       value: {
@@ -9950,7 +10909,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ jsx343("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ jsx344("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -9958,41 +10917,41 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx344 } from "react/jsx-runtime";
+import { jsx as jsx345 } from "react/jsx-runtime";
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx344("tbody", { children });
+  return /* @__PURE__ */ jsx345("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-import React36 from "react";
+import React37 from "react";
 
 // src/components/Table/TableHeadContext.tsx
-import React34 from "react";
-var TableHeadContext = React34.createContext(
+import React35 from "react";
+var TableHeadContext = React35.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = React34.useContext(TableHeadContext);
+  const ctx = React35.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-import React35 from "react";
-var TableRowContext = React35.createContext(null);
+import React36 from "react";
+var TableRowContext = React36.createContext(null);
 var useTableRowContext = () => {
-  const ctx = React35.useContext(TableRowContext);
+  const ctx = React36.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 jsx345 } from "react/jsx-runtime";
-var TableCell = React36.memo((props) => {
+import { jsx as jsx346 } from "react/jsx-runtime";
+var TableCell = React37.memo((props) => {
   const {
     children,
     align = "center",
@@ -10006,9 +10965,9 @@ var TableCell = React36.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = React36.useState(0);
-  const cellRef = React36.useRef(null);
-  const calculateLeft = React36.useCallback(() => {
+  const [left, setLeft] = React37.useState(0);
+  const cellRef = React37.useRef(null);
+  const calculateLeft = React37.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -10017,7 +10976,7 @@ var TableCell = React36.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React36.useEffect(() => {
+  React37.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -10036,7 +10995,7 @@ var TableCell = React36.memo((props) => {
   const CellTag = isHeaderCell ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ jsx345(
+  return /* @__PURE__ */ jsx346(
     CellTag,
     {
       ref: cellRef,
@@ -10063,21 +11022,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-import { jsx as jsx346 } from "react/jsx-runtime";
+import { jsx as jsx347 } from "react/jsx-runtime";
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ jsx346(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx346("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ jsx347(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx347("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-import React37 from "react";
-import { jsx as jsx347 } from "react/jsx-runtime";
-var TableRow = React37.memo((props) => {
+import React38 from "react";
+import { jsx as jsx348 } from "react/jsx-runtime";
+var TableRow = React38.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -10086,14 +11045,14 @@ var TableRow = React37.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = React37.useState([]);
+  const [stickyCells, setStickyCells] = React38.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ jsx347(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx347(
+  return /* @__PURE__ */ jsx348(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx348(
     "tr",
     {
       className: clsx_default(
@@ -10117,7 +11076,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx348, jsxs as jsxs220 } from "react/jsx-runtime";
+import { jsx as jsx349, jsxs as jsxs221 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
@@ -10129,7 +11088,7 @@ var Tag = (props) => {
     colorIndex
   } = props;
   const shape = variant ?? type ?? "neutral";
-  return /* @__PURE__ */ jsxs220(
+  return /* @__PURE__ */ jsxs221(
     "span",
     {
       className: clsx_default(
@@ -10140,8 +11099,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ jsx348("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ jsx348("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx348(XIcon_default, {}) })
+        /* @__PURE__ */ jsx349("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ jsx349("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx349(XIcon_default, {}) })
       ]
     }
   );
@@ -10150,24 +11109,29 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-import React38 from "react";
-import { jsx as jsx349 } from "react/jsx-runtime";
-var TextArea = React38.forwardRef(
+import React39 from "react";
+import { jsx as jsx350 } from "react/jsx-runtime";
+var TextArea = React39.forwardRef(
   (props, ref) => {
     const {
       className,
       size = "md",
       validations,
+      label,
+      required,
       resize = "vertical",
       rows = 3,
       disabled,
       ...textareaProps
     } = props;
-    const control = /* @__PURE__ */ jsx349("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx349(
+    const autoId = React39.useId();
+    const fieldId = props.id ?? autoId;
+    const control = /* @__PURE__ */ jsx350("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx350(
       "textarea",
       {
         ...textareaProps,
         ref,
+        id: fieldId,
         rows,
         disabled,
         "aria-invalid": hasError(validations) || void 0,
@@ -10175,32 +11139,166 @@ var TextArea = React38.forwardRef(
         style: { resize }
       }
     ) });
-    return /* @__PURE__ */ jsx349(Field, { validations, children: control });
+    return /* @__PURE__ */ jsx350(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
+// src/components/TimePicker/TimePicker.tsx
+import React40 from "react";
+import { jsx as jsx351, jsxs as jsxs222 } from "react/jsx-runtime";
+var ANIMATION_DURATION_MS4 = 200;
+var toMinutes = (hhmm) => {
+  if (!hhmm) return null;
+  const m = /^(\d{1,2}):(\d{2})$/.exec(hhmm.trim());
+  if (!m) return null;
+  const h = Number(m[1]);
+  const min = Number(m[2]);
+  if (h > 23 || min > 59) return null;
+  return h * 60 + min;
+};
+var toHHmm = (minutes) => `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+var display = (hhmm, use12Hours) => {
+  if (!use12Hours) return hhmm;
+  const total = toMinutes(hhmm);
+  if (total === null) return hhmm;
+  const h24 = Math.floor(total / 60);
+  const mm = String(total % 60).padStart(2, "0");
+  const period = h24 < 12 ? "\uC624\uC804" : "\uC624\uD6C4";
+  const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
+  return `${period} ${h12}:${mm}`;
+};
+var TimePicker = (props) => {
+  const {
+    value,
+    onChange,
+    step = 30,
+    min,
+    max,
+    use12Hours = false,
+    placeholder = "\uC2DC\uAC01 \uC120\uD0DD",
+    disabled = false,
+    size = "md",
+    label,
+    required,
+    validations
+  } = props;
+  const fieldId = React40.useId();
+  const triggerRef = React40.useRef(null);
+  const contentRef = React40.useRef(null);
+  const [isOpen, setOpen] = React40.useState(false);
+  const [mounted, setMounted] = React40.useState(false);
+  const [visible, setVisible] = React40.useState(false);
+  const options = React40.useMemo(() => {
+    const safeStep = step > 0 && step <= 720 ? step : 30;
+    const lo = toMinutes(min) ?? 0;
+    const hi = toMinutes(max) ?? 24 * 60 - 1;
+    const out = [];
+    for (let t = lo; t <= hi; t += safeStep) out.push(toHHmm(t));
+    return out;
+  }, [step, min, max]);
+  const close = React40.useCallback(() => setOpen(false), []);
+  useClickOutside_default([triggerRef, contentRef], close, isOpen);
+  useEscapeKey(isOpen, () => {
+    close();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  React40.useEffect(() => {
+    if (disabled && isOpen) setOpen(false);
+  }, [disabled, isOpen]);
+  React40.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS4);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  const pick = (hhmm) => {
+    onChange?.(hhmm);
+    close();
+    triggerRef.current?.focus({ preventScroll: true });
+  };
+  const control = /* @__PURE__ */ jsxs222("div", { className: clsx_default("lib-xplat-time-picker", size, disabled && "disabled"), children: [
+    /* @__PURE__ */ jsx351(
+      "div",
+      {
+        id: fieldId,
+        ref: triggerRef,
+        className: clsx_default("time-picker-trigger", hasError(validations) && "error"),
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-invalid": hasError(validations) || void 0,
+        tabIndex: disabled ? void 0 : 0,
+        onClick: () => !disabled && setOpen((p) => !p),
+        onKeyDown: (e) => {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        children: /* @__PURE__ */ jsx351("span", { className: clsx_default("time-picker-value", !value && "placeholder"), children: value ? display(value, use12Hours) : placeholder })
+      }
+    ),
+    mounted && /* @__PURE__ */ jsx351(Portal_default, { children: /* @__PURE__ */ jsx351(
+      "div",
+      {
+        ref: contentRef,
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        style: { ...position.position, width: triggerRef.current?.offsetWidth },
+        role: "listbox",
+        children: options.map((t) => /* @__PURE__ */ jsx351(
+          "div",
+          {
+            className: clsx_default("time-picker-item", t === value && "is-selected"),
+            role: "option",
+            "aria-selected": t === value,
+            tabIndex: 0,
+            onClick: () => pick(t),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                pick(t);
+              }
+            },
+            children: display(t, use12Hours)
+          },
+          t
+        ))
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsx351(Field, { validations, label, required, htmlFor: fieldId, children: control });
+};
+TimePicker.displayName = "TimePicker";
+var TimePicker_default = TimePicker;
+
 // src/components/Toast/Toast.tsx
-import React39 from "react";
+import React41 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx350, jsxs as jsxs221 } from "react/jsx-runtime";
-var ToastContext = React39.createContext(null);
+import { jsx as jsx352, jsxs as jsxs223 } from "react/jsx-runtime";
+var ToastContext = React41.createContext(null);
 var useToast = () => {
-  const ctx = React39.useContext(ToastContext);
+  const ctx = React41.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 = React39.useRef(null);
-  const [height, setHeight] = React39.useState(void 0);
-  React39.useEffect(() => {
+  const ref = React41.useRef(null);
+  const [height, setHeight] = React41.useState(void 0);
+  React41.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ jsx350(
+  return /* @__PURE__ */ jsx352(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -10208,15 +11306,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ jsxs221(
+      children: /* @__PURE__ */ jsxs223(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx350("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ jsx350("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ jsx352("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx352("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -10227,13 +11325,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = React39.useState([]);
-  const [removing, setRemoving] = React39.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = React39.useState(false);
-  React39.useEffect(() => {
+  const [toasts, setToasts] = React41.useState([]);
+  const [removing, setRemoving] = React41.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React41.useState(false);
+  React41.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = React39.useCallback((id) => {
+  const remove = React41.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -10244,7 +11342,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = React39.useCallback(
+  const toast = React41.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -10254,10 +11352,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ jsxs221(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ jsxs223(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && createPortal3(
-      /* @__PURE__ */ jsx350("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx350(
+      /* @__PURE__ */ jsx352("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx352(
         ToastItemComponent,
         {
           item: t,
@@ -10273,8 +11371,8 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import React40 from "react";
-import { Fragment as Fragment6, jsx as jsx351, jsxs as jsxs222 } from "react/jsx-runtime";
+import React42 from "react";
+import { Fragment as Fragment6, jsx as jsx353, jsxs as jsxs224 } from "react/jsx-runtime";
 var OFFSET = 12;
 var GAP = 8;
 var SHOW_DELAY = 300;
@@ -10289,14 +11387,14 @@ var Tooltip = (props) => {
     disabled = false
   } = props;
   const shape = variant ?? type ?? "dark";
-  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 rafRef = React40.useRef(0);
-  const cursor = React40.useRef(null);
-  const clamp = React40.useCallback((left, top, w, h) => {
+  const triggerRef = React42.useRef(null);
+  const tooltipRef = React42.useRef(null);
+  const [visible, setVisible] = React42.useState(false);
+  const [pos, setPos] = React42.useState({ left: 0, top: 0 });
+  const delayTimer = React42.useRef(0);
+  const rafRef = React42.useRef(0);
+  const cursor = React42.useRef(null);
+  const clamp = React42.useCallback((left, top, w, h) => {
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     return {
@@ -10304,7 +11402,7 @@ var Tooltip = (props) => {
       top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
     };
   }, []);
-  const placeAtCursor = React40.useCallback((x, y) => {
+  const placeAtCursor = React42.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -10315,7 +11413,7 @@ var Tooltip = (props) => {
     if (top < GAP) top = y + OFFSET;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const placeAtTrigger = React40.useCallback(() => {
+  const placeAtTrigger = React42.useCallback(() => {
     const el = tooltipRef.current;
     const trigger = triggerRef.current;
     if (!el || !trigger) return;
@@ -10327,19 +11425,19 @@ var Tooltip = (props) => {
     const left = rect.left + rect.width / 2 - w / 2;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const reposition = React40.useCallback(() => {
+  const reposition = React42.useCallback(() => {
     if (follow && cursor.current) {
       placeAtCursor(cursor.current.x, cursor.current.y);
     } else {
       placeAtTrigger();
     }
   }, [follow, placeAtCursor, placeAtTrigger]);
-  const handleMouseEnter = React40.useCallback((e) => {
+  const handleMouseEnter = React42.useCallback((e) => {
     if (disabled) return;
     cursor.current = { x: e.clientX, y: e.clientY };
     delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = React40.useCallback((e) => {
+  const handleMouseMove = React42.useCallback((e) => {
     cursor.current = { x: e.clientX, y: e.clientY };
     if (!visible || !follow) return;
     cancelAnimationFrame(rafRef.current);
@@ -10347,25 +11445,25 @@ var Tooltip = (props) => {
       if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
     });
   }, [visible, follow, placeAtCursor]);
-  const close = React40.useCallback(() => {
+  const close = React42.useCallback(() => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
-  const handleMouseLeave = React40.useCallback(() => {
+  const handleMouseLeave = React42.useCallback(() => {
     cursor.current = null;
     close();
   }, [close]);
-  const handleFocus = React40.useCallback(() => {
+  const handleFocus = React42.useCallback(() => {
     if (disabled) return;
     cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  React40.useLayoutEffect(() => {
+  React42.useLayoutEffect(() => {
     if (!visible) return;
     reposition();
   }, [visible, reposition]);
-  React40.useEffect(() => {
+  React42.useEffect(() => {
     if (!visible || follow) return;
     const onChange = () => placeAtTrigger();
     window.addEventListener("scroll", onChange, true);
@@ -10375,12 +11473,12 @@ var Tooltip = (props) => {
       window.removeEventListener("resize", onChange);
     };
   }, [visible, follow, placeAtTrigger]);
-  React40.useEffect(() => () => {
+  React42.useEffect(() => () => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
-  if (!title && !description) return /* @__PURE__ */ jsx351(Fragment6, { children });
-  return /* @__PURE__ */ jsxs222(
+  if (!title && !description) return /* @__PURE__ */ jsx353(Fragment6, { children });
+  return /* @__PURE__ */ jsxs224(
     "div",
     {
       ref: triggerRef,
@@ -10393,7 +11491,7 @@ var Tooltip = (props) => {
       onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ jsx351(Portal_default, { children: /* @__PURE__ */ jsxs222(
+        visible && /* @__PURE__ */ jsx353(Portal_default, { children: /* @__PURE__ */ jsxs224(
           "div",
           {
             ref: tooltipRef,
@@ -10401,8 +11499,8 @@ var Tooltip = (props) => {
             className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ jsx351("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ jsx351("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ jsx353("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx353("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })
@@ -10414,11 +11512,11 @@ Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-import React41 from "react";
-import { jsx as jsx352, 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__ */ jsx352("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ jsx352("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+import React43 from "react";
+import { jsx as jsx354, jsxs as jsxs225 } from "react/jsx-runtime";
+var PipIcon = () => /* @__PURE__ */ jsxs225("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__ */ jsx354("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx354("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";
@@ -10426,7 +11524,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = React41.forwardRef((props, ref) => {
+var Video = React43.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -10450,21 +11548,21 @@ var Video = React41.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  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(
+  const containerRef = React43.useRef(null);
+  const videoRef = React43.useRef(null);
+  const [isPlaying, setIsPlaying] = React43.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React43.useState(false);
+  const [currentTime, setCurrentTime] = React43.useState(0);
+  const [duration, setDuration] = React43.useState(0);
+  const [buffered, setBuffered] = React43.useState(0);
+  const [volume, setVolume] = React43.useState(1);
+  const [isMuted, setIsMuted] = React43.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = React43.useState(false);
+  const [playbackRate, setPlaybackRate] = React43.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = React43.useState(false);
+  const [captionsOn, setCaptionsOn] = React43.useState(false);
+  const [isPip, setIsPip] = React43.useState(false);
+  const setRefs = React43.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -10472,14 +11570,14 @@ var Video = React41.forwardRef((props, ref) => {
     },
     [ref]
   );
-  React41.useEffect(() => {
+  React43.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  React41.useEffect(() => {
+  React43.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -10593,13 +11691,13 @@ var Video = React41.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__ */ jsxs223(
+  return /* @__PURE__ */ jsxs225(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ jsx352(
+        /* @__PURE__ */ jsx354(
           "video",
           {
             ref: setRefs,
@@ -10620,7 +11718,7 @@ var Video = React41.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ jsx352(
+        showCenterPlay && /* @__PURE__ */ jsx354(
           "button",
           {
             type: "button",
@@ -10632,11 +11730,11 @@ var Video = React41.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx352("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx352(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ jsx354("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx354(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ jsxs223("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx352(
+        showControls && /* @__PURE__ */ jsxs225("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx354(
             "input",
             {
               type: "range",
@@ -10653,29 +11751,29 @@ var Video = React41.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsxs223("div", { className: "controls-row", children: [
-            /* @__PURE__ */ jsx352(
+          /* @__PURE__ */ jsxs225("div", { className: "controls-row", children: [
+            /* @__PURE__ */ jsx354(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ jsx352(PauseIcon_default, {}) : /* @__PURE__ */ jsx352(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ jsx354(PauseIcon_default, {}) : /* @__PURE__ */ jsx354(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsxs223("div", { className: "volume-group", children: [
-              /* @__PURE__ */ jsx352(
+            /* @__PURE__ */ jsxs225("div", { className: "volume-group", children: [
+              /* @__PURE__ */ jsx354(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ jsx352(VolumeGlyph, {})
+                  children: /* @__PURE__ */ jsx354(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ jsx352(
+              /* @__PURE__ */ jsx354(
                 "input",
                 {
                   type: "range",
@@ -10690,14 +11788,14 @@ var Video = React41.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs223("span", { className: "time", children: [
+            /* @__PURE__ */ jsxs225("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ jsx352("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs223("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ jsxs223(
+            /* @__PURE__ */ jsx354("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs225("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ jsxs225(
                 "button",
                 {
                   type: "button",
@@ -10711,7 +11809,7 @@ var Video = React41.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ jsx352("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx352("li", { children: /* @__PURE__ */ jsxs223(
+              rateMenuOpen && /* @__PURE__ */ jsx354("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx354("li", { children: /* @__PURE__ */ jsxs225(
                 "button",
                 {
                   type: "button",
@@ -10725,7 +11823,7 @@ var Video = React41.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ jsx352(
+            showCaptions && /* @__PURE__ */ jsx354(
               "button",
               {
                 type: "button",
@@ -10733,37 +11831,37 @@ var Video = React41.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ jsx352(TypeIcon_default, {})
+                children: /* @__PURE__ */ jsx354(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ jsx352(
+            showPip && pipSupported && /* @__PURE__ */ jsx354(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ jsx352(PipIcon, {})
+                children: /* @__PURE__ */ jsx354(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ jsx352(
+            showDownload && /* @__PURE__ */ jsx354(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ jsx352(DownloadIcon_default, {})
+                children: /* @__PURE__ */ jsx354(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsx352(
+            /* @__PURE__ */ jsx354(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ jsx352(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx352(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ jsx354(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx354(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -10776,7 +11874,7 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-import { jsx as jsx353 } from "react/jsx-runtime";
+import { jsx as jsx355 } from "react/jsx-runtime";
 var GAP_MAP = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -10789,13 +11887,13 @@ var GAP_MAP = {
 var FullGrid = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
-  return /* @__PURE__ */ jsx353("div", { className: "lib-xplat-full-grid", style, children });
+  return /* @__PURE__ */ jsx355("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-import { jsx as jsx354 } from "react/jsx-runtime";
+import { jsx as jsx356 } from "react/jsx-runtime";
 var GAP_MAP2 = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -10808,13 +11906,13 @@ var GAP_MAP2 = {
 var FullScreen = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
-  return /* @__PURE__ */ jsx354("div", { className: "lib-xplat-full-screen", style, children });
+  return /* @__PURE__ */ jsx356("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-import { jsx as jsx355 } from "react/jsx-runtime";
+import { jsx as jsx357 } from "react/jsx-runtime";
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -10831,35 +11929,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ jsx355("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ jsx357("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 jsx356, jsxs as jsxs224 } from "react/jsx-runtime";
+import { jsx as jsx358, jsxs as jsxs226 } from "react/jsx-runtime";
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ jsx356("div", { children: logo }),
-    /* @__PURE__ */ jsx356("div", { children: centerContent }),
-    /* @__PURE__ */ jsx356("div", { children: rightContent })
+  return /* @__PURE__ */ jsxs226("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ jsx358("div", { children: logo }),
+    /* @__PURE__ */ jsx358("div", { children: centerContent }),
+    /* @__PURE__ */ jsx358("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-import { Fragment as Fragment7, jsx as jsx357, jsxs as jsxs225 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx359, jsxs as jsxs227 } from "react/jsx-runtime";
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ jsx357("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ jsx357(Fragment7, { children: sideBar }),
-    /* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ jsx357("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ jsx359("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs227("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ jsx359(Fragment7, { children: sideBar }),
+    /* @__PURE__ */ jsxs227("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ jsx359("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -10868,31 +11966,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-import React43 from "react";
+import React45 from "react";
 
 // src/layout/SideBar/SideBarContext.tsx
-import React42 from "react";
-var SideBarContext = React42.createContext(null);
+import React44 from "react";
+var SideBarContext = React44.createContext(null);
 var useSideBarContext = () => {
-  const ctx = React42.useContext(SideBarContext);
+  const ctx = React44.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-import { jsx as jsx358 } from "react/jsx-runtime";
+import { jsx as jsx360 } from "react/jsx-runtime";
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = React43.useState(true);
+  const [isOpen, setIsOpen] = React45.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ jsx358(
+  return /* @__PURE__ */ jsx360(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ jsx358(
+      children: /* @__PURE__ */ jsx360(
         "div",
         {
           className: clsx_default(
@@ -11199,6 +12297,7 @@ export {
   Spinner_default as Spinner,
   SquareIcon_default as SquareIcon,
   StarIcon_default as StarIcon,
+  Stat_default as Stat,
   Steps_default as Steps,
   StopCircleIcon_default as StopCircleIcon,
   SuccessIcon_default as SuccessIcon,
@@ -11223,6 +12322,7 @@ export {
   ThermometerIcon_default as ThermometerIcon,
   ThumbsDownIcon_default as ThumbsDownIcon,
   ThumbsUpIcon_default as ThumbsUpIcon,
+  TimePicker_default as TimePicker,
   ToastProvider,
   ToggleLeftIcon_default as ToggleLeftIcon,
   ToggleRightIcon_default as ToggleRightIcon,