@x-plat/design-system 0.10.0 → 0.12.0

package/dist/index.cjs

@@ -320,6 +320,7 @@ __export(index_exports, {
   Spinner: () => Spinner_default,
   SquareIcon: () => SquareIcon_default,
   StarIcon: () => StarIcon_default,
+  Stat: () => Stat_default,
   Steps: () => Steps_default,
   StopCircleIcon: () => StopCircleIcon_default,
   SuccessIcon: () => SuccessIcon_default,
@@ -344,6 +345,7 @@ __export(index_exports, {
   ThermometerIcon: () => ThermometerIcon_default,
   ThumbsDownIcon: () => ThumbsDownIcon_default,
   ThumbsUpIcon: () => ThumbsUpIcon_default,
+  TimePicker: () => TimePicker_default,
   ToastProvider: () => ToastProvider,
   ToggleLeftIcon: () => ToggleLeftIcon_default,
   ToggleRightIcon: () => ToggleRightIcon_default,
@@ -6029,11 +6031,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__ */ (0, import_jsx_runtime297.jsx)(import_jsx_runtime297.Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(import_jsx_runtime297.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -6044,7 +6051,9 @@ var import_jsx_runtime298 = require("react/jsx-runtime");
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = import_react2.default.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 = import_react2.default.useId();
+    const fieldId = props.id ?? autoId;
     const localRef = import_react2.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -6078,6 +6087,7 @@ var AutoResizeTextArea = import_react2.default.forwardRef(
           "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
+          id: fieldId,
           className,
           disabled,
           value,
@@ -6091,12 +6101,13 @@ var AutoResizeTextArea = import_react2.default.forwardRef(
         "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
+        id: fieldId,
         disabled,
         value,
         onChange: handleChange
       }
     ) }) });
-    return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(Field, { validations, children: control });
+    return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";
@@ -7314,8 +7325,11 @@ var ChatInput = import_react7.default.forwardRef(
       buttonType = "primary",
       onSubmit,
       onChange,
-      validations
+      validations,
+      label,
+      required
     } = props;
+    const fieldId = import_react7.default.useId();
     const isControlled = valueProp !== void 0;
     const [internalValue, setInternalValue] = import_react7.default.useState("");
     const value = isControlled ? valueProp : internalValue;
@@ -7340,6 +7354,7 @@ var ChatInput = import_react7.default.forwardRef(
       /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
         AutoResizeTextArea_default,
         {
+          id: fieldId,
           ref,
           bare: true,
           className: "chat-input-textarea",
@@ -7364,7 +7379,7 @@ var ChatInput = import_react7.default.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Field, { validations, children: control });
+    return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 ChatInput.displayName = "ChatInput";
@@ -7448,7 +7463,7 @@ Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 
 // src/components/Input/Input.tsx
 var import_react8 = __toESM(require("react"), 1);
@@ -7546,8 +7561,12 @@ var Input = import_react8.default.forwardRef((props, ref) => {
     suffix,
     disabled,
     validations,
+    label,
+    required,
     ...inputProps
   } = props;
+  const autoId = import_react8.default.useId();
+  const fieldId = inputProps.id ?? autoId;
   const localValue = formatValue(type, value);
   const handleChange = (e) => {
     let val = e.target.value;
@@ -7563,7 +7582,7 @@ var Input = import_react8.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(Field, { label, required, htmlFor: fieldId, children: /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
@@ -7574,6 +7593,7 @@ var Input = import_react8.default.forwardRef((props, ref) => {
             {
               ...inputProps,
               ref,
+              id: fieldId,
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
@@ -7586,7 +7606,7 @@ var Input = import_react8.default.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(FieldMessage_default, { validations })
-  ] });
+  ] }) });
 });
 Input.displayName = "Input";
 var Input_default = Input;
@@ -7616,16 +7636,96 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
+
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react10 = __toESM(require("react"), 1);
+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) => {
+  import_react10.default.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 = import_react10.default.useRef(null);
+  import_react10.default.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]);
+  import_react10.default.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
 var import_jsx_runtime313 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react10.default.useState(false);
-  const [visible, setVisible] = import_react10.default.useState(false);
-  const [settled, setSettled] = import_react10.default.useState(false);
-  import_react10.default.useEffect(() => {
+  const [mounted, setMounted] = import_react11.default.useState(false);
+  const [visible, setVisible] = import_react11.default.useState(false);
+  const [settled, setSettled] = import_react11.default.useState(false);
+  const boxRef = import_react11.default.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(boxRef, isOpen && mounted, { trap: true });
+  import_react11.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -7652,6 +7752,7 @@ var Modal = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
           "div",
           {
+            ref: boxRef,
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass, settled && "settled"),
             role: "dialog",
             "aria-modal": "true",
@@ -7668,9 +7769,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_jsx_runtime314 = require("react/jsx-runtime");
-var DayCell2 = import_react11.default.memo(
+var DayCell2 = import_react12.default.memo(
   ({
     day,
     disabled,
@@ -7722,26 +7823,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = import_react11.default.useState("days");
-  const [yearRangeStart, setYearRangeStart] = import_react11.default.useState(
+  const [pickerMode, setPickerMode] = import_react12.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react12.default.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = import_react11.default.useMemo(
+  const minTime = import_react12.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = import_react11.default.useMemo(
+  const maxTime = import_react12.default.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = import_react11.default.useMemo(() => {
+  const highlightSet = import_react12.default.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = import_react11.default.useCallback(
+  const handleSelect = import_react12.default.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -7870,8 +7971,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = import_react12.default.useState(false);
-  const [tempDate, setTempDate] = import_react12.default.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = import_react13.default.useState(false);
+  const [tempDate, setTempDate] = import_react13.default.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -7920,23 +8021,27 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 
 // src/components/Tab/Tab.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 var import_jsx_runtime316 = require("react/jsx-runtime");
-var TabItem = import_react13.default.forwardRef((props, ref) => {
+var TabItem = import_react14.default.forwardRef((props, ref) => {
   const { isActive: isActive2, title, onClick } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
-    "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
@@ -7951,44 +8056,64 @@ var import_jsx_runtime317 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
   const shape = variant ?? type ?? "default";
-  const [underlineStyle, setUnderlineStyle] = import_react14.default.useState({
+  const [underlineStyle, setUnderlineStyle] = import_react15.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react14.default.useRef([]);
+  const itemRefs = import_react15.default.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);
   };
-  import_react14.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
-      TabItem_default,
-      {
-        onClick: () => handleChangeActiveTab(tab, idx),
-        isActive: activeIndex === idx,
-        ref: (el) => {
-          itemRefs.current[idx] = el;
-        },
-        title: tab.title
-      },
-      `${tab.value}_${idx}`
-    )),
-    shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
-      "div",
-      {
-        className: "tab-toggle-underline",
-        style: {
-          left: underlineStyle.left,
-          width: underlineStyle.width
-        }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-tab", `type-${shape}`, size),
+      role: "tablist",
+      onKeyDown: handleKeyDown,
+      children: [
+        tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+          TabItem_default,
+          {
+            onClick: () => handleChangeActiveTab(tab, idx),
+            isActive: activeIndex === idx,
+            ref: (el) => {
+              itemRefs.current[idx] = el;
+            },
+            title: tab.title
+          },
+          `${tab.value}_${idx}`
+        )),
+        shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+          "div",
+          {
+            className: "tab-toggle-underline",
+            style: {
+              left: underlineStyle.left,
+              width: underlineStyle.width
+            }
+          }
+        )
+      ]
+    }
+  );
 };
 Tab.displayName = "Tab";
 var Tab_default = Tab;
@@ -8004,7 +8129,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = import_react15.default.useState("start");
+  const [activeTab, setActiveTab] = import_react16.default.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -8089,7 +8214,7 @@ var RangePicker_default = RangePicker;
 var import_jsx_runtime319 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react16.default.useState(false);
+  const [isOpen, setIsOpen] = import_react17.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -8098,7 +8223,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react16.default.cloneElement(component, { onClick: handleClick }),
+    import_react17.default.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
@@ -8157,15 +8282,18 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime321 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = import_react17.default.useState(false);
-  const [visible, setVisible] = import_react17.default.useState(false);
-  import_react17.default.useEffect(() => {
+  const [mounted, setMounted] = import_react18.default.useState(false);
+  const [visible, setVisible] = import_react18.default.useState(false);
+  const panelRef = import_react18.default.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(panelRef, isOpen && mounted, { trap: true });
+  import_react18.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -8187,6 +8315,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)(
           "div",
           {
+            ref: panelRef,
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",
@@ -8209,7 +8338,7 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react20 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom3 = __toESM(require("react-dom"), 1);
@@ -8221,13 +8350,15 @@ Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react18.default.useState({
+  const [position, setPosition] = import_react19.default.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
-  const calculatePosition = import_react18.default.useCallback(() => {
+  const placedRef = import_react19.default.useRef(false);
+  const calculatePosition = import_react19.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -8251,16 +8382,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]);
-  import_react18.default.useLayoutEffect(() => {
-    if (!enabled) return;
+  import_react19.default.useLayoutEffect(() => {
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react18.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -8268,13 +8404,19 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  import_react18.default.useEffect(() => {
+  import_react19.default.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;
@@ -8282,9 +8424,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react19 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react19.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -8310,14 +8452,18 @@ var useClickOutside_default = useClickOutside;
 var import_jsx_runtime322 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react20.default.useState(false);
-  const [mounted, setMounted] = import_react20.default.useState(false);
-  const [visible, setVisible] = import_react20.default.useState(false);
-  const triggerRef = import_react20.default.useRef(null);
-  const menuRef = import_react20.default.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const [isOpen, setIsOpen] = import_react21.default.useState(false);
+  const [mounted, setMounted] = import_react21.default.useState(false);
+  const [visible, setVisible] = import_react21.default.useState(false);
+  const triggerRef = import_react21.default.useRef(null);
+  const menuRef = import_react21.default.useRef(null);
+  const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  import_react20.default.useEffect(() => {
+  useEscapeKey(isOpen, () => {
+    setIsOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  import_react21.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -8346,7 +8492,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__ */ (0, import_jsx_runtime322.jsx)(
@@ -8371,7 +8517,112 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/Editor/Editor.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
+
+// 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
 var import_jsx_runtime323 = require("react/jsx-runtime");
 var DEFAULT_TOOLBAR = [
   "bold",
@@ -8379,14 +8630,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",
@@ -8415,12 +8679,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;
@@ -8429,6 +8732,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);
@@ -8459,7 +8766,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: "" },
@@ -8479,26 +8788,32 @@ var Editor = (props) => {
     onImageUpload,
     minHeight = 200
   } = props;
-  const editorRef = import_react21.default.useRef(null);
-  const lastRangeRef = import_react21.default.useRef(null);
-  const composingRef = import_react21.default.useRef(false);
-  const [isFocused, setIsFocused] = import_react21.default.useState(false);
-  const [isEmpty, setIsEmpty] = import_react21.default.useState(!value);
-  const [activeFormats, setActiveFormats] = import_react21.default.useState(/* @__PURE__ */ new Set());
-  const [slashOpen, setSlashOpen] = import_react21.default.useState(false);
-  const [slashFilter, setSlashFilter] = import_react21.default.useState("");
-  const [slashIdx, setSlashIdx] = import_react21.default.useState(0);
-  const [slashPos, setSlashPos] = import_react21.default.useState({ top: 0, left: 0 });
-  const slashStartRangeRef = import_react21.default.useRef(null);
-  const [linkOpen, setLinkOpen] = import_react21.default.useState(false);
-  const [linkValue, setLinkValue] = import_react21.default.useState("");
-  const [linkPos, setLinkPos] = import_react21.default.useState({ top: 0, left: 0 });
-  import_react21.default.useEffect(() => {
-    if (!editorRef.current) return;
-    if (editorRef.current.innerHTML !== value) {
-      editorRef.current.innerHTML = sanitizeHtml(value || "");
-      updateEmpty();
-    }
+  const editorRef = import_react22.default.useRef(null);
+  const lastRangeRef = import_react22.default.useRef(null);
+  const composingRef = import_react22.default.useRef(false);
+  const [isFocused, setIsFocused] = import_react22.default.useState(false);
+  const [isEmpty, setIsEmpty] = import_react22.default.useState(!value);
+  const [activeFormats, setActiveFormats] = import_react22.default.useState(/* @__PURE__ */ new Set());
+  const [slashOpen, setSlashOpen] = import_react22.default.useState(false);
+  const [slashFilter, setSlashFilter] = import_react22.default.useState("");
+  const [slashIdx, setSlashIdx] = import_react22.default.useState(0);
+  const [slashPos, setSlashPos] = import_react22.default.useState({ top: 0, left: 0 });
+  const slashStartRangeRef = import_react22.default.useRef(null);
+  const [linkOpen, setLinkOpen] = import_react22.default.useState(false);
+  const [linkValue, setLinkValue] = import_react22.default.useState("");
+  const [linkPos, setLinkPos] = import_react22.default.useState({ top: 0, left: 0 });
+  const lastEmittedRef = import_react22.default.useRef(null);
+  import_react22.default.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;
@@ -8514,10 +8829,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;
@@ -8533,6 +8857,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);
@@ -8546,7 +8881,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 = import_react22.default.useRef([]);
+  const historyIdxRef = import_react22.default.useRef(-1);
+  const lastPushAtRef = import_react22.default.useRef(0);
+  const isRestoringRef = import_react22.default.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] = import_react22.default.useState("plain");
+  const highlightRafRef = import_react22.default.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") {
@@ -8592,7 +9294,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
@@ -8607,7 +9311,7 @@ var Editor = (props) => {
     setSlashIdx(0);
     slashStartRangeRef.current = null;
   };
-  const filteredSlashItems = import_react21.default.useMemo(() => {
+  const filteredSlashItems = import_react22.default.useMemo(() => {
     if (!slashFilter) return SLASH_ITEMS;
     const f = slashFilter.toLowerCase();
     return SLASH_ITEMS.filter((it) => it.label.toLowerCase().includes(f) || it.key.includes(f));
@@ -8637,8 +9341,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");
@@ -8650,7 +9360,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "divider":
         insertDivider();
@@ -8668,7 +9378,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
@@ -8701,13 +9413,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)) {
@@ -8727,7 +9439,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) {
@@ -8755,6 +9471,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();
@@ -8778,6 +9528,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") {
@@ -8801,6 +9566,7 @@ var Editor = (props) => {
         return;
       }
     }
+    if (pre) return;
     if (enableSlashCommand && e.key === "/") {
       setTimeout(openSlashMenu, 0);
     }
@@ -8810,11 +9576,21 @@ var Editor = (props) => {
       }
     }
   };
+  const plainPasteRef = import_react22.default.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();
@@ -8836,8 +9612,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");
@@ -8866,8 +9645,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");
@@ -8879,7 +9664,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "link":
         openLinkEditor();
@@ -8890,6 +9675,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__ */ (0, import_jsx_runtime323.jsxs)("div", { className: clsx_default("lib-xplat-editor", isFocused && "focused", readOnly && "readonly"), children: [
@@ -8898,7 +9716,10 @@ var Editor = (props) => {
       {
         items: toolbar,
         active: activeFormats,
-        onAction: onToolbarAction
+        onAction: onToolbarAction,
+        codeLang,
+        inCodeBlock: activeFormats.has("block:pre"),
+        onCodeLangChange: changeCodeLang
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "lib-xplat-editor__content", style: { minHeight }, children: [
@@ -8909,9 +9730,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,
@@ -8953,14 +9779,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)",
@@ -8968,39 +9807,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__ */ (0, import_jsx_runtime323.jsx)("div", { className: "lib-xplat-editor__toolbar", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
-    "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__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "lib-xplat-editor__toolbar", children: [
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
+      "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__ */ (0, import_jsx_runtime323.jsx)(
+      "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__ */ (0, import_jsx_runtime323.jsx)("option", { value: l.value, children: l.label }, l.value))
+      }
+    )
+  ] });
 };
 var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       const menu = document.querySelector(".lib-xplat-editor__slash-menu");
@@ -9034,8 +9911,8 @@ var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
   );
 };
 var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
-  const inputRef = import_react21.default.useRef(null);
-  import_react21.default.useEffect(() => {
+  const inputRef = import_react22.default.useRef(null);
+  import_react22.default.useEffect(() => {
     inputRef.current?.focus();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(
@@ -9093,7 +9970,7 @@ EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react22 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 var import_jsx_runtime325 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
@@ -9105,8 +9982,8 @@ var FileUpload = (props) => {
     description,
     validations
   } = props;
-  const [isDragOver, setIsDragOver] = import_react22.default.useState(false);
-  const inputRef = import_react22.default.useRef(null);
+  const [isDragOver, setIsDragOver] = import_react23.default.useState(false);
+  const inputRef = import_react23.default.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -9168,10 +10045,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_react24 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 
 // src/components/HtmlTypeWriter/utils.ts
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -9239,15 +10116,15 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return import_react23.default.createElement(tag, props);
+    return import_react24.default.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return import_react23.default.createElement(tag, props, ...children);
+  return import_react24.default.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 : import_react23.default.createElement(import_react23.default.Fragment, { key: idx }, node);
+    return node == null ? null : import_react24.default.createElement(import_react24.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
@@ -9260,20 +10137,20 @@ var HtmlTypeWriter = ({
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = import_react24.default.useState(0);
-  const doneCalledRef = import_react24.default.useRef(false);
-  const { doc, rangeMap, totalLength } = import_react24.default.useMemo(() => {
+  const [typedLen, setTypedLen] = import_react25.default.useState(0);
+  const doneCalledRef = import_react25.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react25.default.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]);
-  import_react24.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  import_react24.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -9281,18 +10158,18 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  import_react24.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  import_react24.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = import_react24.default.useMemo(
+  const parsed = import_react25.default.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
@@ -9302,12 +10179,12 @@ HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 var import_jsx_runtime327 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange, validations } = props;
-  const [previewUrl, setPreviewUrl] = import_react25.default.useState();
-  import_react25.default.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = import_react26.default.useState();
+  import_react26.default.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -9316,7 +10193,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = import_react25.default.useRef(null);
+  const inputRef = import_react26.default.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -9499,17 +10376,21 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-var import_react26 = __toESM(require("react"), 1);
+var import_react27 = __toESM(require("react"), 1);
 var import_jsx_runtime332 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react26.default.useRef(null);
-  const triggerRef = import_react26.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react26.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react26.default.useState(false);
+  const popRef = import_react27.default.useRef(null);
+  const triggerRef = import_react27.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react27.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react27.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
+  useEscapeKey(isOpen, () => {
+    onClose();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react26.default.useEffect(() => {
+  import_react27.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -9538,6 +10419,7 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
+              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -9594,12 +10476,12 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-var import_react27 = __toESM(require("react"), 1);
-var RadioGroupContext = import_react27.default.createContext(
+var import_react28 = __toESM(require("react"), 1);
+var RadioGroupContext = import_react28.default.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return import_react27.default.useContext(RadioGroupContext);
+  return import_react28.default.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
@@ -9675,19 +10557,19 @@ RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-var import_react30 = __toESM(require("react"), 1);
+var import_react31 = __toESM(require("react"), 1);
 
 // src/components/Select/context.ts
-var import_react28 = __toESM(require("react"), 1);
-var SelectContext = import_react28.default.createContext(null);
+var import_react29 = __toESM(require("react"), 1);
+var SelectContext = import_react29.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react29 = __toESM(require("react"), 1);
+var import_react30 = __toESM(require("react"), 1);
 var import_jsx_runtime336 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = import_react29.default.useContext(context_default);
+  const ctx = import_react30.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -9727,32 +10609,37 @@ var SelectRoot = (props) => {
     onChange,
     children,
     disabled = false,
+    searchable = false,
+    searchPlaceholder = "\uAC80\uC0C9",
     error = false,
     validations,
+    label,
+    required,
     size = "md"
   } = props;
-  const itemChildren = import_react30.default.Children.toArray(children).filter(
-    (child) => import_react30.default.isValidElement(child) && child.type === SelectItem_default
+  const fieldId = import_react31.default.useId();
+  const itemChildren = import_react31.default.Children.toArray(children).filter(
+    (child) => import_react31.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react30.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react30.default.useState(null);
-  const [uncontrolledValue, setUncontrolledValue] = import_react30.default.useState(void 0);
-  const controlledLabel = import_react30.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react31.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react31.default.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = import_react31.default.useState(void 0);
+  const controlledLabel = import_react31.default.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 = import_react30.default.useRef(null);
-  const contentRef = import_react30.default.useRef(null);
-  const [mounted, setMounted] = import_react30.default.useState(false);
-  const [visible, setVisible] = import_react30.default.useState(false);
-  import_react30.default.useEffect(() => {
+  const triggerRef = import_react31.default.useRef(null);
+  const contentRef = import_react31.default.useRef(null);
+  const [mounted, setMounted] = import_react31.default.useState(false);
+  const [visible, setVisible] = import_react31.default.useState(false);
+  import_react31.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react30.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -9762,22 +10649,42 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = import_react30.default.useCallback(() => setOpen(true), []);
-  const close = import_react30.default.useCallback(() => setOpen(false), []);
-  const toggle = import_react30.default.useCallback(() => setOpen((prev) => !prev), []);
+  const [query, setQuery] = import_react31.default.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 (import_react31.default.isValidElement(node)) return textOf(node.props.children);
+    return "";
+  };
+  const visibleItems = import_react31.default.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 = import_react31.default.useCallback(() => setOpen(true), []);
+  const close = import_react31.default.useCallback(() => {
+    setOpen(false);
+    setQuery("");
+  }, []);
+  const toggle = import_react31.default.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 = import_react30.default.useCallback(
-    (label, itemValue) => {
+  const setSelected = import_react31.default.useCallback(
+    (label2, itemValue) => {
       if (!isControlled) {
-        setUncontrolledLabel(label);
+        setUncontrolledLabel(label2);
         setUncontrolledValue(itemValue);
       }
-      onChange?.(itemValue, label);
+      onChange?.(itemValue, label2);
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react30.default.useMemo(
+  const ctxValue = import_react31.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -9813,6 +10720,7 @@ var SelectRoot = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
           "div",
           {
+            id: fieldId,
             ref: triggerRef,
             className: clsx_default(
               "select-trigger",
@@ -9855,20 +10763,33 @@ var SelectRoot = (props) => {
             ]
           }
         ),
-        mounted && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+        mounted && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
           "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__ */ (0, import_jsx_runtime337.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
+            children: [
+              searchable && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "select-search", children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+                "input",
+                {
+                  type: "text",
+                  value: query,
+                  placeholder: searchPlaceholder,
+                  onChange: (e) => setQuery(e.target.value),
+                  autoFocus: true,
+                  "aria-label": searchPlaceholder
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(context_default.Provider, { value: ctxValue, children: visibleItems.length > 0 ? visibleItems : /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "select-empty", children: "\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) })
+            ]
           }
         ) })
       ]
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
 };
 SelectRoot.displayName = "Select";
 var Select = Object.assign(SelectRoot, {
@@ -9948,8 +10869,44 @@ var Spinner = (props) => {
 Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
-// src/components/Steps/Steps.tsx
+// src/components/Stat/Stat.tsx
 var import_jsx_runtime340 = require("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__ */ (0, import_jsx_runtime340.jsxs)("div", { className: clsx_default("lib-xplat-stat", size, statusType), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: "stat-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)("div", { className: "stat-value-row", children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { className: "stat-icon", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { className: "stat-value", children: value }),
+      unit && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { className: "stat-unit", children: unit }),
+      trend && /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)("span", { className: clsx_default("stat-trend", trend.direction), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { "aria-hidden": "true", children: ARROW[trend.direction] }),
+        trend.value
+      ] })
+    ] }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: "stat-description", children: description })
+  ] });
+};
+Stat.displayName = "Stat";
+var Stat_default = Stat;
+
+// src/components/Steps/Steps.tsx
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var Steps = (props) => {
   const {
     items,
@@ -9957,13 +10914,13 @@ var Steps = (props) => {
     type = "primary"
   } = props;
   const statusType = normalizeStatus(type);
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: clsx_default("lib-xplat-steps", statusType), children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: clsx_default("lib-xplat-steps", statusType), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { children: index + 1 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)("div", { className: "step-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("span", { children: index + 1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)("div", { className: "step-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -9972,8 +10929,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-var import_react31 = __toESM(require("react"), 1);
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_react32 = __toESM(require("react"), 1);
+var import_jsx_runtime342 = require("react/jsx-runtime");
 var Swiper = (props) => {
   const {
     auto = false,
@@ -9997,26 +10954,26 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = import_react31.default.useMemo(() => {
+  const extendedItems = import_react32.default.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = import_react31.default.useState(
+  const [innerIndex, setInnerIndex] = import_react32.default.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = import_react31.default.useState(false);
-  const [dragOffset, setDragOffset] = import_react31.default.useState(0);
-  const [animated, setAnimated] = import_react31.default.useState(false);
-  const [containerWidth, setContainerWidth] = import_react31.default.useState(0);
-  const containerRef = import_react31.default.useRef(null);
-  const startXRef = import_react31.default.useRef(0);
-  const startTimeRef = import_react31.default.useRef(0);
-  const autoplayTimerRef = import_react31.default.useRef(null);
-  const resumeTimeoutRef = import_react31.default.useRef(null);
-  const [paused, setPaused] = import_react31.default.useState(false);
-  const initializedRef = import_react31.default.useRef(false);
-  import_react31.default.useEffect(() => {
+  const [isDragging, setIsDragging] = import_react32.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react32.default.useState(0);
+  const [animated, setAnimated] = import_react32.default.useState(false);
+  const [containerWidth, setContainerWidth] = import_react32.default.useState(0);
+  const containerRef = import_react32.default.useRef(null);
+  const startXRef = import_react32.default.useRef(0);
+  const startTimeRef = import_react32.default.useRef(0);
+  const autoplayTimerRef = import_react32.default.useRef(null);
+  const resumeTimeoutRef = import_react32.default.useRef(null);
+  const [paused, setPaused] = import_react32.default.useState(false);
+  const initializedRef = import_react32.default.useRef(false);
+  import_react32.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -10039,7 +10996,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = import_react31.default.useCallback(
+  const moveToInner = import_react32.default.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -10067,7 +11024,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = import_react31.default.useCallback(() => {
+  const handleTransitionEnd = import_react32.default.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -10077,7 +11034,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = import_react31.default.useCallback(
+  const slideTo = import_react32.default.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -10087,7 +11044,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = import_react31.default.useCallback(() => {
+  const slideNext = import_react32.default.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -10096,7 +11053,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = import_react31.default.useCallback(() => {
+  const slidePrev = import_react32.default.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -10105,7 +11062,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  import_react31.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -10113,12 +11070,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  import_react31.default.useImperativeHandle(swiperRef, () => ({
+  import_react32.default.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  import_react31.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (!auto || !canSlide || paused) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -10144,7 +11101,7 @@ var Swiper = (props) => {
       resumeTimeoutRef.current = null;
     }, pauseOnInteraction);
   };
-  import_react31.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     return () => {
       if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
     };
@@ -10162,7 +11119,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  import_react31.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -10201,8 +11158,8 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = import_react31.default.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+  const slideElements = import_react32.default.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -10221,15 +11178,15 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
         onDragStart: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
           "div",
           {
             className: clsx_default(
@@ -10247,7 +11204,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -10257,7 +11214,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+    canSlide && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
       "button",
       {
         className: clsx_default(
@@ -10275,8 +11232,8 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-var import_react32 = __toESM(require("react"), 1);
-var import_jsx_runtime342 = require("react/jsx-runtime");
+var import_react33 = __toESM(require("react"), 1);
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -10285,12 +11242,15 @@ var Switch = (props) => {
     type = "primary",
     disabled,
     onChange,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = import_react33.default.useId();
   const statusType = normalizeStatus(type);
-  const [isAnimating, setIsAnimating] = import_react32.default.useState(false);
-  const timeoutRef = import_react32.default.useRef(null);
-  import_react32.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react33.default.useState(false);
+  const timeoutRef = import_react33.default.useRef(null);
+  import_react33.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -10305,9 +11265,10 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const control = /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
     "div",
     {
+      id: fieldId,
       className: clsx_default(
         "lib-xplat-switch",
         size,
@@ -10319,26 +11280,26 @@ var Switch = (props) => {
       onClick: handleClick,
       "aria-invalid": hasError(validations) || void 0,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
 };
 Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-var import_react33 = __toESM(require("react"), 1);
-var TableContext = import_react33.default.createContext(null);
+var import_react34 = __toESM(require("react"), 1);
+var TableContext = import_react34.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react33.default.useContext(TableContext);
+  const ctx = import_react34.default.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
-var import_jsx_runtime343 = require("react/jsx-runtime");
+var import_jsx_runtime344 = require("react/jsx-runtime");
 var Table = (props) => {
   const {
     children,
@@ -10348,7 +11309,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
     TableContext_default.Provider,
     {
       value: {
@@ -10357,7 +11318,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -10365,41 +11326,41 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime344 = require("react/jsx-runtime");
+var import_jsx_runtime345 = require("react/jsx-runtime");
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("tbody", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react36 = __toESM(require("react"), 1);
+var import_react37 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react34 = __toESM(require("react"), 1);
-var TableHeadContext = import_react34.default.createContext(
+var import_react35 = __toESM(require("react"), 1);
+var TableHeadContext = import_react35.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react34.default.useContext(TableHeadContext);
+  const ctx = import_react35.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react35 = __toESM(require("react"), 1);
-var TableRowContext = import_react35.default.createContext(null);
+var import_react36 = __toESM(require("react"), 1);
+var TableRowContext = import_react36.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react35.default.useContext(TableRowContext);
+  const ctx = import_react36.default.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
-var import_jsx_runtime345 = require("react/jsx-runtime");
-var TableCell = import_react36.default.memo((props) => {
+var import_jsx_runtime346 = require("react/jsx-runtime");
+var TableCell = import_react37.default.memo((props) => {
   const {
     children,
     align = "center",
@@ -10413,9 +11374,9 @@ var TableCell = import_react36.default.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react36.default.useState(0);
-  const cellRef = import_react36.default.useRef(null);
-  const calculateLeft = import_react36.default.useCallback(() => {
+  const [left, setLeft] = import_react37.default.useState(0);
+  const cellRef = import_react37.default.useRef(null);
+  const calculateLeft = import_react37.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -10424,7 +11385,7 @@ var TableCell = import_react36.default.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react36.default.useEffect(() => {
+  import_react37.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -10443,7 +11404,7 @@ var TableCell = import_react36.default.memo((props) => {
   const CellTag = isHeaderCell ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
     CellTag,
     {
       ref: cellRef,
@@ -10470,21 +11431,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-var import_jsx_runtime346 = require("react/jsx-runtime");
+var import_jsx_runtime347 = require("react/jsx-runtime");
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-var import_react37 = __toESM(require("react"), 1);
-var import_jsx_runtime347 = require("react/jsx-runtime");
-var TableRow = import_react37.default.memo((props) => {
+var import_react38 = __toESM(require("react"), 1);
+var import_jsx_runtime348 = require("react/jsx-runtime");
+var TableRow = import_react38.default.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -10493,14 +11454,14 @@ var TableRow = import_react37.default.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react37.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react38.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
     "tr",
     {
       className: clsx_default(
@@ -10524,7 +11485,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime348 = require("react/jsx-runtime");
+var import_jsx_runtime349 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
@@ -10536,7 +11497,7 @@ var Tag = (props) => {
     colorIndex
   } = props;
   const shape = variant ?? type ?? "neutral";
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(
     "span",
     {
       className: clsx_default(
@@ -10547,8 +11508,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(XIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(XIcon_default, {}) })
       ]
     }
   );
@@ -10557,24 +11518,29 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-var import_react38 = __toESM(require("react"), 1);
-var import_jsx_runtime349 = require("react/jsx-runtime");
-var TextArea = import_react38.default.forwardRef(
+var import_react39 = __toESM(require("react"), 1);
+var import_jsx_runtime350 = require("react/jsx-runtime");
+var TextArea = import_react39.default.forwardRef(
   (props, ref) => {
     const {
       className,
       size = "md",
       validations,
+      label,
+      required,
       resize = "vertical",
       rows = 3,
       disabled,
       ...textareaProps
     } = props;
-    const control = /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
+    const autoId = import_react39.default.useId();
+    const fieldId = props.id ?? autoId;
+    const control = /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
       "textarea",
       {
         ...textareaProps,
         ref,
+        id: fieldId,
         rows,
         disabled,
         "aria-invalid": hasError(validations) || void 0,
@@ -10582,32 +11548,166 @@ var TextArea = import_react38.default.forwardRef(
         style: { resize }
       }
     ) });
-    return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(Field, { validations, children: control });
+    return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
+// src/components/TimePicker/TimePicker.tsx
+var import_react40 = __toESM(require("react"), 1);
+var import_jsx_runtime351 = require("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 = import_react40.default.useId();
+  const triggerRef = import_react40.default.useRef(null);
+  const contentRef = import_react40.default.useRef(null);
+  const [isOpen, setOpen] = import_react40.default.useState(false);
+  const [mounted, setMounted] = import_react40.default.useState(false);
+  const [visible, setVisible] = import_react40.default.useState(false);
+  const options = import_react40.default.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 = import_react40.default.useCallback(() => setOpen(false), []);
+  useClickOutside_default([triggerRef, contentRef], close, isOpen);
+  useEscapeKey(isOpen, () => {
+    close();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  import_react40.default.useEffect(() => {
+    if (disabled && isOpen) setOpen(false);
+  }, [disabled, isOpen]);
+  import_react40.default.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__ */ (0, import_jsx_runtime351.jsxs)("div", { className: clsx_default("lib-xplat-time-picker", size, disabled && "disabled"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(
+      "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__ */ (0, import_jsx_runtime351.jsx)("span", { className: clsx_default("time-picker-value", !value && "placeholder"), children: value ? display(value, use12Hours) : placeholder })
+      }
+    ),
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(
+      "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__ */ (0, import_jsx_runtime351.jsx)(
+          "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__ */ (0, import_jsx_runtime351.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
+};
+TimePicker.displayName = "TimePicker";
+var TimePicker_default = TimePicker;
+
 // src/components/Toast/Toast.tsx
-var import_react39 = __toESM(require("react"), 1);
+var import_react41 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
-var import_jsx_runtime350 = require("react/jsx-runtime");
-var ToastContext = import_react39.default.createContext(null);
+var import_jsx_runtime352 = require("react/jsx-runtime");
+var ToastContext = import_react41.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react39.default.useContext(ToastContext);
+  const ctx = import_react41.default.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 = import_react39.default.useRef(null);
-  const [height, setHeight] = import_react39.default.useState(void 0);
-  import_react39.default.useEffect(() => {
+  const ref = import_react41.default.useRef(null);
+  const [height, setHeight] = import_react41.default.useState(void 0);
+  import_react41.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -10615,15 +11715,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -10634,13 +11734,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react39.default.useState([]);
-  const [removing, setRemoving] = import_react39.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react39.default.useState(false);
-  import_react39.default.useEffect(() => {
+  const [toasts, setToasts] = import_react41.default.useState([]);
+  const [removing, setRemoving] = import_react41.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react41.default.useState(false);
+  import_react41.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react39.default.useCallback((id) => {
+  const remove = import_react41.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -10651,7 +11751,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react39.default.useCallback(
+  const toast = import_react41.default.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -10661,10 +11761,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
         ToastItemComponent,
         {
           item: t,
@@ -10680,8 +11780,8 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react40 = __toESM(require("react"), 1);
-var import_jsx_runtime351 = require("react/jsx-runtime");
+var import_react42 = __toESM(require("react"), 1);
+var import_jsx_runtime353 = require("react/jsx-runtime");
 var OFFSET = 12;
 var GAP = 8;
 var SHOW_DELAY = 300;
@@ -10696,14 +11796,14 @@ var Tooltip = (props) => {
     disabled = false
   } = props;
   const shape = variant ?? type ?? "dark";
-  const triggerRef = import_react40.default.useRef(null);
-  const tooltipRef = import_react40.default.useRef(null);
-  const [visible, setVisible] = import_react40.default.useState(false);
-  const [pos, setPos] = import_react40.default.useState({ left: 0, top: 0 });
-  const delayTimer = import_react40.default.useRef(0);
-  const rafRef = import_react40.default.useRef(0);
-  const cursor = import_react40.default.useRef(null);
-  const clamp = import_react40.default.useCallback((left, top, w, h) => {
+  const triggerRef = import_react42.default.useRef(null);
+  const tooltipRef = import_react42.default.useRef(null);
+  const [visible, setVisible] = import_react42.default.useState(false);
+  const [pos, setPos] = import_react42.default.useState({ left: 0, top: 0 });
+  const delayTimer = import_react42.default.useRef(0);
+  const rafRef = import_react42.default.useRef(0);
+  const cursor = import_react42.default.useRef(null);
+  const clamp = import_react42.default.useCallback((left, top, w, h) => {
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     return {
@@ -10711,7 +11811,7 @@ var Tooltip = (props) => {
       top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
     };
   }, []);
-  const placeAtCursor = import_react40.default.useCallback((x, y) => {
+  const placeAtCursor = import_react42.default.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -10722,7 +11822,7 @@ var Tooltip = (props) => {
     if (top < GAP) top = y + OFFSET;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const placeAtTrigger = import_react40.default.useCallback(() => {
+  const placeAtTrigger = import_react42.default.useCallback(() => {
     const el = tooltipRef.current;
     const trigger = triggerRef.current;
     if (!el || !trigger) return;
@@ -10734,19 +11834,19 @@ var Tooltip = (props) => {
     const left = rect.left + rect.width / 2 - w / 2;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const reposition = import_react40.default.useCallback(() => {
+  const reposition = import_react42.default.useCallback(() => {
     if (follow && cursor.current) {
       placeAtCursor(cursor.current.x, cursor.current.y);
     } else {
       placeAtTrigger();
     }
   }, [follow, placeAtCursor, placeAtTrigger]);
-  const handleMouseEnter = import_react40.default.useCallback((e) => {
+  const handleMouseEnter = import_react42.default.useCallback((e) => {
     if (disabled) return;
     cursor.current = { x: e.clientX, y: e.clientY };
     delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = import_react40.default.useCallback((e) => {
+  const handleMouseMove = import_react42.default.useCallback((e) => {
     cursor.current = { x: e.clientX, y: e.clientY };
     if (!visible || !follow) return;
     cancelAnimationFrame(rafRef.current);
@@ -10754,25 +11854,25 @@ var Tooltip = (props) => {
       if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
     });
   }, [visible, follow, placeAtCursor]);
-  const close = import_react40.default.useCallback(() => {
+  const close = import_react42.default.useCallback(() => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
-  const handleMouseLeave = import_react40.default.useCallback(() => {
+  const handleMouseLeave = import_react42.default.useCallback(() => {
     cursor.current = null;
     close();
   }, [close]);
-  const handleFocus = import_react40.default.useCallback(() => {
+  const handleFocus = import_react42.default.useCallback(() => {
     if (disabled) return;
     cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  import_react40.default.useLayoutEffect(() => {
+  import_react42.default.useLayoutEffect(() => {
     if (!visible) return;
     reposition();
   }, [visible, reposition]);
-  import_react40.default.useEffect(() => {
+  import_react42.default.useEffect(() => {
     if (!visible || follow) return;
     const onChange = () => placeAtTrigger();
     window.addEventListener("scroll", onChange, true);
@@ -10782,12 +11882,12 @@ var Tooltip = (props) => {
       window.removeEventListener("resize", onChange);
     };
   }, [visible, follow, placeAtTrigger]);
-  import_react40.default.useEffect(() => () => {
+  import_react42.default.useEffect(() => () => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
-  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(import_jsx_runtime351.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(
+  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(import_jsx_runtime353.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime353.jsxs)(
     "div",
     {
       ref: triggerRef,
@@ -10800,7 +11900,7 @@ var Tooltip = (props) => {
       onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(
+        visible && /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime353.jsxs)(
           "div",
           {
             ref: tooltipRef,
@@ -10808,8 +11908,8 @@ var Tooltip = (props) => {
             className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ (0, import_jsx_runtime353.jsx)("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime353.jsx)("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })
@@ -10821,11 +11921,11 @@ Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-var import_react41 = __toESM(require("react"), 1);
-var import_jsx_runtime352 = require("react/jsx-runtime");
-var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("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__ */ (0, import_jsx_runtime352.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+var import_react43 = __toESM(require("react"), 1);
+var import_jsx_runtime354 = require("react/jsx-runtime");
+var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("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__ */ (0, import_jsx_runtime354.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("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";
@@ -10833,7 +11933,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = import_react41.default.forwardRef((props, ref) => {
+var Video = import_react43.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -10857,21 +11957,21 @@ var Video = import_react41.default.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const containerRef = import_react41.default.useRef(null);
-  const videoRef = import_react41.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react41.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react41.default.useState(false);
-  const [currentTime, setCurrentTime] = import_react41.default.useState(0);
-  const [duration, setDuration] = import_react41.default.useState(0);
-  const [buffered, setBuffered] = import_react41.default.useState(0);
-  const [volume, setVolume] = import_react41.default.useState(1);
-  const [isMuted, setIsMuted] = import_react41.default.useState(Boolean(muted));
-  const [isFullscreen, setIsFullscreen] = import_react41.default.useState(false);
-  const [playbackRate, setPlaybackRate] = import_react41.default.useState(1);
-  const [rateMenuOpen, setRateMenuOpen] = import_react41.default.useState(false);
-  const [captionsOn, setCaptionsOn] = import_react41.default.useState(false);
-  const [isPip, setIsPip] = import_react41.default.useState(false);
-  const setRefs = import_react41.default.useCallback(
+  const containerRef = import_react43.default.useRef(null);
+  const videoRef = import_react43.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react43.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react43.default.useState(false);
+  const [currentTime, setCurrentTime] = import_react43.default.useState(0);
+  const [duration, setDuration] = import_react43.default.useState(0);
+  const [buffered, setBuffered] = import_react43.default.useState(0);
+  const [volume, setVolume] = import_react43.default.useState(1);
+  const [isMuted, setIsMuted] = import_react43.default.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = import_react43.default.useState(false);
+  const [playbackRate, setPlaybackRate] = import_react43.default.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = import_react43.default.useState(false);
+  const [captionsOn, setCaptionsOn] = import_react43.default.useState(false);
+  const [isPip, setIsPip] = import_react43.default.useState(false);
+  const setRefs = import_react43.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -10879,14 +11979,14 @@ var Video = import_react41.default.forwardRef((props, ref) => {
     },
     [ref]
   );
-  import_react41.default.useEffect(() => {
+  import_react43.default.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  import_react41.default.useEffect(() => {
+  import_react43.default.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -11000,13 +12100,13 @@ var Video = import_react41.default.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__ */ (0, import_jsx_runtime352.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
           "video",
           {
             ref: setRefs,
@@ -11027,7 +12127,7 @@ var Video = import_react41.default.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
           "button",
           {
             type: "button",
@@ -11039,11 +12139,11 @@ var Video = import_react41.default.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
             "input",
             {
               type: "range",
@@ -11060,29 +12160,29 @@ var Video = import_react41.default.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("div", { className: "controls-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("div", { className: "controls-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("div", { className: "volume-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("div", { className: "volume-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(VolumeGlyph, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
                 "input",
                 {
                   type: "range",
@@ -11097,14 +12197,14 @@ var Video = import_react41.default.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("span", { className: "time", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -11118,7 +12218,7 @@ var Video = import_react41.default.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)(
+              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -11132,7 +12232,7 @@ var Video = import_react41.default.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
               "button",
               {
                 type: "button",
@@ -11140,37 +12240,37 @@ var Video = import_react41.default.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(TypeIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(PipIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+            showDownload && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(DownloadIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -11183,7 +12283,7 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-var import_jsx_runtime353 = require("react/jsx-runtime");
+var import_jsx_runtime355 = require("react/jsx-runtime");
 var GAP_MAP = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -11196,13 +12296,13 @@ var GAP_MAP = {
 var FullGrid = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime353.jsx)("div", { className: "lib-xplat-full-grid", style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-var import_jsx_runtime354 = require("react/jsx-runtime");
+var import_jsx_runtime356 = require("react/jsx-runtime");
 var GAP_MAP2 = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -11215,13 +12315,13 @@ var GAP_MAP2 = {
 var FullScreen = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("div", { className: "lib-xplat-full-screen", style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-var import_jsx_runtime355 = require("react/jsx-runtime");
+var import_jsx_runtime357 = require("react/jsx-runtime");
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -11238,35 +12338,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime357.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-var import_jsx_runtime356 = require("react/jsx-runtime");
+var import_jsx_runtime358 = require("react/jsx-runtime");
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime356.jsxs)("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { children: logo }),
-    /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { children: centerContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { children: rightContent })
+  return /* @__PURE__ */ (0, import_jsx_runtime358.jsxs)("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime358.jsx)("div", { children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime358.jsx)("div", { children: centerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime358.jsx)("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-var import_jsx_runtime357 = require("react/jsx-runtime");
+var import_jsx_runtime359 = require("react/jsx-runtime");
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime357.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime357.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ (0, import_jsx_runtime357.jsx)(import_jsx_runtime357.Fragment, { children: sideBar }),
-    /* @__PURE__ */ (0, import_jsx_runtime357.jsxs)("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime357.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime359.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ (0, import_jsx_runtime359.jsx)(import_jsx_runtime359.Fragment, { children: sideBar }),
+    /* @__PURE__ */ (0, import_jsx_runtime359.jsxs)("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -11275,31 +12375,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-var import_react43 = __toESM(require("react"), 1);
+var import_react45 = __toESM(require("react"), 1);
 
 // src/layout/SideBar/SideBarContext.tsx
-var import_react42 = __toESM(require("react"), 1);
-var SideBarContext = import_react42.default.createContext(null);
+var import_react44 = __toESM(require("react"), 1);
+var SideBarContext = import_react44.default.createContext(null);
 var useSideBarContext = () => {
-  const ctx = import_react42.default.useContext(SideBarContext);
+  const ctx = import_react44.default.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-var import_jsx_runtime358 = require("react/jsx-runtime");
+var import_jsx_runtime360 = require("react/jsx-runtime");
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = import_react43.default.useState(true);
+  const [isOpen, setIsOpen] = import_react45.default.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime358.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ (0, import_jsx_runtime358.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(
         "div",
         {
           className: clsx_default(
@@ -11607,6 +12707,7 @@ var SideBar_default = SideBar;
   Spinner,
   SquareIcon,
   StarIcon,
+  Stat,
   Steps,
   StopCircleIcon,
   SuccessIcon,
@@ -11631,6 +12732,7 @@ var SideBar_default = SideBar;
   ThermometerIcon,
   ThumbsDownIcon,
   ThumbsUpIcon,
+  TimePicker,
   ToastProvider,
   ToggleLeftIcon,
   ToggleRightIcon,