@x-plat/design-system 0.9.0 → 0.11.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";
@@ -7255,7 +7266,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = import_react6.default.memo((props) => {
-  const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
+  const { variant, type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
+  const shape = variant ?? type ?? "line";
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
@@ -7264,11 +7276,11 @@ var Chart = import_react6.default.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "line" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "curve" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "bar" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "pie" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
@@ -7313,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;
@@ -7339,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",
@@ -7363,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";
@@ -7388,6 +7404,9 @@ var import_tokens_core = require("@x-plat/tokens-core");
 // src/tokens/index.ts
 var import_tokens_core2 = require("@x-plat/tokens-core");
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/components/CheckBox/CheckBox.tsx
 var import_jsx_runtime309 = require("react/jsx-runtime");
 var CheckBox = (props) => {
@@ -7398,10 +7417,11 @@ var CheckBox = (props) => {
     onChange,
     disabled,
     size = "md",
-    type = "brand",
+    type = "primary",
     validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
@@ -7409,7 +7429,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  const control = /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
+  const control = /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, statusType, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
       "input",
       {
@@ -7443,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);
@@ -7541,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;
@@ -7558,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",
       {
@@ -7569,6 +7593,7 @@ var Input = import_react8.default.forwardRef((props, ref) => {
             {
               ...inputProps,
               ref,
+              id: fieldId,
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
@@ -7581,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;
@@ -7611,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);
@@ -7647,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",
@@ -7663,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,
@@ -7717,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);
     },
@@ -7865,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());
@@ -7915,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
@@ -7944,45 +8054,66 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 var import_jsx_runtime317 = require("react/jsx-runtime");
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react14.default.useState({
+  const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
+  const shape = variant ?? type ?? "default";
+  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-${type}`, 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}`
-    )),
-    type === "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;
@@ -7998,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;
@@ -8083,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) => {
@@ -8092,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)(
@@ -8151,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);
@@ -8181,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",
@@ -8203,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);
@@ -8215,13 +8350,13 @@ 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"
   });
-  const calculatePosition = import_react18.default.useCallback(() => {
+  const calculatePosition = import_react19.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -8248,13 +8383,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react18.default.useLayoutEffect(() => {
+  import_react19.default.useLayoutEffect(() => {
     if (!enabled) 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();
@@ -8262,7 +8397,7 @@ 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);
@@ -8276,9 +8411,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) => {
@@ -8304,14 +8439,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 [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 } = 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);
@@ -8365,7 +8504,7 @@ 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);
 var import_jsx_runtime323 = require("react/jsx-runtime");
 var DEFAULT_TOOLBAR = [
   "bold",
@@ -8415,6 +8554,15 @@ var ALLOWED_ATTRS = {
   a: ["href", "target", "rel"],
   img: ["src", "alt"]
 };
+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;
@@ -8423,6 +8571,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);
@@ -8473,26 +8625,30 @@ 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;
+    updateEmpty();
   }, [value]);
   const updateEmpty = () => {
     const el = editorRef.current;
@@ -8508,10 +8664,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;
@@ -8540,6 +8705,96 @@ var Editor = (props) => {
   const setBlock = (tag) => {
     exec("formatBlock", tag);
   };
+  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 = () => {
+    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 insertDivider = () => {
     exec("insertHorizontalRule");
     const el = editorRef.current;
@@ -8586,7 +8841,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
@@ -8601,7 +8858,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));
@@ -8644,7 +8901,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "divider":
         insertDivider();
@@ -8662,7 +8919,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
@@ -8695,13 +8954,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)) {
@@ -8721,7 +8980,9 @@ var Editor = (props) => {
     if (composingRef.current) return;
     const el = editorRef.current;
     if (!el) return;
-    onChange?.(el.innerHTML);
+    const html = el.innerHTML;
+    lastEmittedRef.current = html;
+    onChange?.(html);
     updateEmpty();
     updateActiveFormats();
     if (slashOpen) {
@@ -8749,6 +9010,31 @@ 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 (slashOpen) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -8795,6 +9081,7 @@ var Editor = (props) => {
         return;
       }
     }
+    if (pre) return;
     if (enableSlashCommand && e.key === "/") {
       setTimeout(openSlashMenu, 0);
     }
@@ -8807,8 +9094,12 @@ var Editor = (props) => {
   const handlePaste = (e) => {
     if (readOnly) return;
     e.preventDefault();
-    const html = e.clipboardData.getData("text/html");
     const text = e.clipboardData.getData("text/plain");
+    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();
@@ -8832,6 +9123,7 @@ var Editor = (props) => {
     updateActiveFormats();
   };
   const onToolbarAction = (item) => {
+    if (closestPre() && item !== "code-block") return;
     switch (item) {
       case "bold":
         exec("bold");
@@ -8873,7 +9165,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "link":
         openLinkEditor();
@@ -8903,6 +9195,10 @@ 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,
@@ -8994,7 +9290,7 @@ var EditorToolbar = ({ items, active, onAction }) => {
   )) });
 };
 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");
@@ -9028,8 +9324,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)(
@@ -9087,7 +9383,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 {
@@ -9099,8 +9395,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) {
@@ -9162,10 +9458,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",
@@ -9233,15 +9529,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;
 };
@@ -9254,20 +9550,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(() => {
@@ -9275,18 +9571,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]
   );
@@ -9296,12 +9592,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;
@@ -9310,7 +9606,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) {
@@ -9398,11 +9694,12 @@ var NotificationBadge = (props) => {
     dot = false,
     size = "md"
   } = props;
+  const statusType = normalizeStatus(type);
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("span", { className: clsx_default("badge-indicator", statusType, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";
@@ -9443,8 +9740,9 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -9452,7 +9750,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, statusType), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
       "button",
       {
@@ -9491,17 +9789,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(() => {
@@ -9553,11 +9855,12 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    type = "brand",
+    type = "primary",
     showLabel = false
   } = props;
+  const statusType = normalizeStatus(type);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
       "div",
       {
@@ -9585,12 +9888,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;
 
@@ -9602,10 +9905,11 @@ var Radio = (props) => {
     className,
     value,
     size: sizeProp,
-    type = "brand",
+    type = "primary",
     validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const context = useRadioGroupContext();
   const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
@@ -9621,7 +9925,7 @@ var Radio = (props) => {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),
@@ -9665,19 +9969,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();
@@ -9717,32 +10021,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);
@@ -9752,22 +10061,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,
@@ -9803,6 +10132,7 @@ var SelectRoot = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
           "div",
           {
+            id: fieldId,
             ref: triggerRef,
             className: clsx_default(
               "select-trigger",
@@ -9845,20 +10175,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),
             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, {
@@ -9900,12 +10243,13 @@ var import_jsx_runtime339 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
     "div",
     {
-      className: clsx_default("lib-xplat-spinner", size, type),
+      className: clsx_default("lib-xplat-spinner", size, statusType),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
       children: /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
@@ -9937,21 +10281,58 @@ 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,
     current,
-    type = "brand"
+    type = "primary"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  const statusType = normalizeStatus(type);
+  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);
   }) });
@@ -9960,8 +10341,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,
@@ -9985,26 +10366,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) => {
@@ -10027,7 +10408,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);
@@ -10055,7 +10436,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;
@@ -10065,7 +10446,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));
@@ -10075,7 +10456,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) {
@@ -10084,7 +10465,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) {
@@ -10093,7 +10474,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;
@@ -10101,12 +10482,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 () => {
@@ -10132,7 +10513,7 @@ var Swiper = (props) => {
       resumeTimeoutRef.current = null;
     }, pauseOnInteraction);
   };
-  import_react31.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     return () => {
       if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
     };
@@ -10150,7 +10531,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);
@@ -10189,8 +10570,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",
@@ -10209,15 +10590,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(
@@ -10235,7 +10616,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",
@@ -10245,7 +10626,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(
@@ -10263,21 +10644,25 @@ 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 {
     value,
     size = "md",
-    type = "brand",
+    type = "primary",
     disabled,
     onChange,
-    validations
+    validations,
+    label,
+    required
   } = props;
-  const [isAnimating, setIsAnimating] = import_react32.default.useState(false);
-  const timeoutRef = import_react32.default.useRef(null);
-  import_react32.default.useEffect(() => {
+  const fieldId = import_react33.default.useId();
+  const statusType = normalizeStatus(type);
+  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);
     };
@@ -10292,13 +10677,14 @@ 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,
-        type,
+        statusType,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating"
@@ -10306,26 +10692,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,
@@ -10335,7 +10721,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: {
@@ -10344,7 +10730,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 })
     }
   ) });
 };
@@ -10352,41 +10738,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",
@@ -10400,9 +10786,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) {
@@ -10411,7 +10797,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());
@@ -10430,7 +10816,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,
@@ -10457,21 +10843,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",
@@ -10480,14 +10866,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(
@@ -10511,29 +10897,31 @@ 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,
-    type = "neutral",
+    variant,
+    type,
     onClose,
     size = "md",
     disabled = false,
     colorIndex
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
+  const shape = variant ?? type ?? "neutral";
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(
     "span",
     {
       className: clsx_default(
         "lib-xplat-tag",
-        type,
+        shape,
         size,
-        type === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
+        shape === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
         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, {}) })
       ]
     }
   );
@@ -10542,24 +10930,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,
@@ -10567,32 +10960,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"),
+        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 }),
@@ -10600,15 +11127,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" })
           ]
         }
       )
@@ -10619,13 +11146,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));
@@ -10636,7 +11163,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 }]);
@@ -10646,10 +11173,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,
@@ -10665,8 +11192,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;
@@ -10675,18 +11202,20 @@ var Tooltip = (props) => {
     children,
     title,
     description,
-    type = "dark",
+    variant,
+    type,
     follow = false,
     disabled = false
   } = props;
-  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 shape = variant ?? type ?? "dark";
+  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 {
@@ -10694,7 +11223,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;
@@ -10705,7 +11234,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;
@@ -10717,19 +11246,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);
@@ -10737,25 +11266,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);
@@ -10765,12 +11294,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,
@@ -10783,16 +11312,16 @@ 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,
             role: "tooltip",
-            className: clsx_default("lib-xplat-tooltip", type),
+            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 })
             ]
           }
         ) })
@@ -10804,11 +11333,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";
@@ -10816,7 +11345,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,
@@ -10840,21 +11369,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);
@@ -10862,14 +11391,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);
@@ -10983,13 +11512,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,
@@ -11010,7 +11539,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",
@@ -11022,11 +11551,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",
@@ -11043,29 +11572,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",
@@ -11080,14 +11609,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",
@@ -11101,7 +11630,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",
@@ -11115,7 +11644,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",
@@ -11123,37 +11652,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, {})
               }
             )
           ] })
@@ -11166,7 +11695,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)",
@@ -11179,13 +11708,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)",
@@ -11198,13 +11727,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;
@@ -11221,35 +11750,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
     ] })
   ] }) });
@@ -11258,31 +11787,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(
@@ -11590,6 +12119,7 @@ var SideBar_default = SideBar;
   Spinner,
   SquareIcon,
   StarIcon,
+  Stat,
   Steps,
   StopCircleIcon,
   SuccessIcon,
@@ -11614,6 +12144,7 @@ var SideBar_default = SideBar;
   ThermometerIcon,
   ThumbsDownIcon,
   ThumbsUpIcon,
+  TimePicker,
   ToastProvider,
   ToggleLeftIcon,
   ToggleRightIcon,