@x-plat/design-system 0.5.11 → 0.5.13

package/dist/components/index.cjs

@@ -2156,14 +2156,23 @@ var useChartSize = (ref) => {
   import_react5.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
+    let rafId = 0;
     const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      const { width, height } = entry.contentRect;
-      setSize({ width: Math.floor(width), height: Math.floor(height) });
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const entry = entries[0];
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        const w = Math.floor(width);
+        const h = Math.floor(height);
+        setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
+      });
     });
     observer.observe(el);
-    return () => observer.disconnect();
+    return () => {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
   }, [ref]);
   return size;
 };
@@ -2175,15 +2184,21 @@ var useChartTooltip = (enabled) => {
     content: ""
   });
   const containerRef = import_react5.default.useRef(null);
+  const rafRef = import_react5.default.useRef(0);
   const move = import_react5.default.useCallback((e) => {
     if (!enabled) return;
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    setTooltip((prev) => ({
-      ...prev,
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top - 12
-    }));
+    const clientX = e.clientX;
+    const clientY = e.clientY;
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setTooltip((prev) => ({
+        ...prev,
+        x: clientX - rect.left,
+        y: clientY - rect.top - 12
+      }));
+    });
   }, [enabled]);
   const show = import_react5.default.useCallback((e, content) => {
     if (!enabled) return;
@@ -2197,10 +2212,35 @@ var useChartTooltip = (enabled) => {
     });
   }, [enabled]);
   const hide = import_react5.default.useCallback(() => {
+    cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
+var GridLines = import_react5.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(import_jsx_runtime305.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+  const y = PADDING.top + (1 - ratio) * chartH;
+  const val = Math.round(maxVal * ratio);
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  ] }, ratio);
+}) }));
+GridLines.displayName = "GridLines";
+var getLabelStep = (count, chartW) => {
+  const minLabelWidth = 40;
+  const maxLabels = Math.floor(chartW / minLabelWidth);
+  if (count <= maxLabels) return 1;
+  return Math.ceil(count / maxLabels);
+};
+var AxisLabels = import_react5.default.memo(({ labels, count, chartW, height }) => {
+  const step = getLabelStep(count, chartW);
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(import_jsx_runtime305.Fragment, { children: labels.map((label, i) => {
+    if (i % step !== 0) return null;
+    const x = PADDING.left + i / (count - 1 || 1) * chartW;
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+  }) });
+});
+AxisLabels.displayName = "AxisLabels";
 var LineChart = import_react5.default.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
   const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react5.default.useMemo(() => {
@@ -2220,19 +2260,10 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, onHov
     ),
     [entries, count, chartW, chartH, maxVal]
   );
+  const showPoints = count <= 100;
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
-    }),
-    labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * chartW;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
-    }),
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2247,7 +2278,7 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, onHov
             strokeWidth: "2"
           }
         ),
-        points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "circle",
           {
             cx: p.x,
@@ -2285,19 +2316,10 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, onHo
     ),
     [entries, count, chartW, chartH, maxVal]
   );
+  const showPoints = count <= 100;
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
-    }),
-    labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * chartW;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
-    }),
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2313,7 +2335,7 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, onHo
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
         /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" }),
-        points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "circle",
           {
             cx: p.x,
@@ -2343,11 +2365,11 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
-  const barW = Math.min(32, groupW * 0.7 / groupCount);
+  const barW = Math.max(1, Math.min(32, groupW * 0.7 / groupCount));
   const bars = import_react5.default.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
-        const h = v / maxVal * chartH;
+        const h = Math.max(0, v / maxVal * chartH);
         const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
         const y = PADDING.top + chartH - h;
         return { x, y, w: barW, h, v };
@@ -2355,16 +2377,13 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
     ),
     [entries, maxVal, chartH, groupW, barW, groupCount]
   );
+  const barLabelStep = getLabelStep(count, chartW);
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
+    labels.map((label, i) => {
+      if (i % barLabelStep !== 0) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
-    labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2544,7 +2563,7 @@ Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 
 // src/components/Input/Input.tsx
 var import_react6 = __toESM(require("react"), 1);
@@ -2734,15 +2753,33 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
+
+// src/tokens/hooks/Portal.tsx
 var import_react9 = __toESM(require("react"), 1);
-var import_react_dom = require("react-dom");
+var import_react_dom = __toESM(require("react-dom"), 1);
 var import_jsx_runtime311 = require("react/jsx-runtime");
+var PortalContainerContext = import_react9.default.createContext(null);
+var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(PortalContainerContext.Provider, { value: container, children });
+var Portal = ({ children }) => {
+  const contextContainer = import_react9.default.useContext(PortalContainerContext);
+  if (typeof document === "undefined") return null;
+  const container = contextContainer ?? document.body;
+  return import_react_dom.default.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/components/Modal/Modal.tsx
+var import_jsx_runtime312 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react9.default.useState(false);
-  const [visible, setVisible] = import_react9.default.useState(false);
-  import_react9.default.useEffect(() => {
+  const [mounted, setMounted] = import_react10.default.useState(false);
+  const [visible, setVisible] = import_react10.default.useState(false);
+  const boxRef = import_react10.default.useRef(null);
+  import_react10.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -2755,20 +2792,21 @@ var Modal = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
           "div",
           {
+            ref: boxRef,
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children
+            children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(PortalProvider, { container: boxRef.current, children })
           }
         )
       }
@@ -2780,9 +2818,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_jsx_runtime312 = require("react/jsx-runtime");
-var DayCell2 = import_react10.default.memo(
+var import_react11 = __toESM(require("react"), 1);
+var import_jsx_runtime313 = require("react/jsx-runtime");
+var DayCell2 = import_react11.default.memo(
   ({
     day,
     disabled,
@@ -2792,7 +2830,7 @@ var DayCell2 = import_react10.default.memo(
     isEnd,
     inRange,
     onSelect
-  }) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
     "button",
     {
       type: "button",
@@ -2834,26 +2872,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = import_react10.default.useState("days");
-  const [yearRangeStart, setYearRangeStart] = import_react10.default.useState(
+  const [pickerMode, setPickerMode] = import_react11.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react11.default.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = import_react10.default.useMemo(
+  const minTime = import_react11.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = import_react10.default.useMemo(
+  const maxTime = import_react11.default.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = import_react10.default.useMemo(() => {
+  const highlightSet = import_react11.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_react10.default.useCallback(
+  const handleSelect = import_react11.default.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -2890,20 +2928,20 @@ var SingleDatePicker = (props) => {
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
   const hasRange = rangeStart != null && rangeEnd != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "datepicker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(ChevronRightIcon_default, {}) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "datepicker-body", children: [
-          pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "datepicker-body", children: [
+          pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
             const y = yearRangeStart + i;
-            return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
               "button",
               {
                 type: "button",
@@ -2914,7 +2952,7 @@ var SingleDatePicker = (props) => {
               y
             );
           }) }),
-          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
             "button",
             {
               type: "button",
@@ -2924,8 +2962,8 @@ var SingleDatePicker = (props) => {
             },
             i
           )) }),
-          pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+          pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(import_jsx_runtime313.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
               "div",
               {
                 className: clsx_default(
@@ -2937,7 +2975,7 @@ var SingleDatePicker = (props) => {
               },
               label
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
+            /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
               const t = day.date.getTime();
               const disabled = t < minTime || t > maxTime;
               const selected = value ? isSameDay(day.date, value) : false;
@@ -2947,7 +2985,7 @@ var SingleDatePicker = (props) => {
               const isStart = hasRange ? isSameDay(day.date, rangeStart) : false;
               const isEnd = hasRange ? isSameDay(day.date, rangeEnd) : false;
               const inRangeVal = hasRange ? isInRange(day.date, rangeStart, rangeEnd) : false;
-              return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                 DayCell2,
                 {
                   day,
@@ -2972,7 +3010,7 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_jsx_runtime313 = require("react/jsx-runtime");
+var import_jsx_runtime314 = require("react/jsx-runtime");
 var formatDate = (date) => {
   if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
@@ -2982,8 +3020,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = import_react11.default.useState(false);
-  const [tempDate, setTempDate] = import_react11.default.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = import_react12.default.useState(false);
+  const [tempDate, setTempDate] = import_react12.default.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -2999,19 +3037,19 @@ var InputDatePicker = (props) => {
   const handleClose = () => {
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
       Input_default,
       {
         value: formatDate(value),
         placeholder,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(CalenderIcon_default, {}),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(CalenderIcon_default, {}),
         disabled,
         readOnly: true
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
         SingleDatePicker_default,
         {
           value: tempDate,
@@ -3021,9 +3059,9 @@ var InputDatePicker = (props) => {
           locale
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+      /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3032,20 +3070,20 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/Tab/Tab.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react12 = __toESM(require("react"), 1);
-var import_jsx_runtime314 = require("react/jsx-runtime");
-var TabItem = import_react12.default.forwardRef((props, ref) => {
+var import_react13 = __toESM(require("react"), 1);
+var import_jsx_runtime315 = require("react/jsx-runtime");
+var TabItem = import_react13.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
     "div",
     {
       ref,
@@ -3059,25 +3097,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-var import_jsx_runtime315 = require("react/jsx-runtime");
+var import_jsx_runtime316 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react13.default.useState({
+  const [underlineStyle, setUnderlineStyle] = import_react14.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react13.default.useRef([]);
+  const itemRefs = import_react14.default.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react13.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -3089,7 +3127,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -3105,7 +3143,7 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_jsx_runtime316 = require("react/jsx-runtime");
+var import_jsx_runtime317 = require("react/jsx-runtime");
 var RangePicker = (props) => {
   const {
     startDate,
@@ -3115,7 +3153,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = import_react14.default.useState("start");
+  const [activeTab, setActiveTab] = import_react15.default.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -3128,8 +3166,8 @@ var RangePicker = (props) => {
   };
   const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
   const endMinDate = minDate && startDate > minDate ? startDate : startDate;
-  return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
       Tab_default,
       {
         activeIndex: activeTab === "start" ? 0 : 1,
@@ -3142,8 +3180,8 @@ var RangePicker = (props) => {
         size: "sm"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "datepicker-range-panels", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "datepicker-range-panels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
         SingleDatePicker_default,
         {
           value: startDate,
@@ -3155,7 +3193,7 @@ var RangePicker = (props) => {
           locale
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
         SingleDatePicker_default,
         {
           value: endDate,
@@ -3168,7 +3206,7 @@ var RangePicker = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
       SingleDatePicker_default,
       {
         value: startDate,
@@ -3179,7 +3217,7 @@ var RangePicker = (props) => {
         rangeEnd: endDate,
         locale
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
       SingleDatePicker_default,
       {
         value: endDate,
@@ -3197,10 +3235,10 @@ RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_jsx_runtime317 = require("react/jsx-runtime");
+var import_jsx_runtime318 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react15.default.useState(false);
+  const [isOpen, setIsOpen] = import_react16.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -3208,11 +3246,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react15.default.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
+    import_react16.default.cloneElement(component, { onClick: handleClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -3222,7 +3260,7 @@ var PopupPicker = (props) => {
             locale
           }
         ),
-        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -3234,8 +3272,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
           Button_default,
           {
             type: "secondary",
@@ -3243,7 +3281,7 @@ var PopupPicker = (props) => {
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+        /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3252,10 +3290,10 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/Divider/Divider.tsx
-var import_jsx_runtime318 = require("react/jsx-runtime");
+var import_jsx_runtime319 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { orientation = "horizontal" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation),
@@ -3268,15 +3306,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-var import_react16 = __toESM(require("react"), 1);
-var import_react_dom2 = require("react-dom");
-var import_jsx_runtime319 = require("react/jsx-runtime");
+var import_react17 = __toESM(require("react"), 1);
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime320 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
-  const [mounted, setMounted] = import_react16.default.useState(false);
-  const [visible, setVisible] = import_react16.default.useState(false);
-  import_react16.default.useEffect(() => {
+  const [mounted, setMounted] = import_react17.default.useState(false);
+  const [visible, setVisible] = import_react17.default.useState(false);
+  import_react17.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3290,13 +3328,13 @@ var Drawer = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   const widthValue = typeof width === "number" ? `${width}px` : width;
-  return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, stateClass),
@@ -3305,11 +3343,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              title && /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "drawer-body", children })
+              /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -3322,16 +3360,16 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react19 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react17 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react17.default.useState({
+  const [position, setPosition] = import_react18.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react17.default.useCallback(() => {
+  const calculatePosition = import_react18.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
@@ -3355,9 +3393,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react17.default.useEffect(() => {
+  import_react18.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
+  }, [calculatePosition, enabled]);
+  import_react18.default.useEffect(() => {
+    if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
     return () => {
@@ -3370,9 +3411,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react18.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -3395,17 +3436,17 @@ var useClickOutside = (refs, handler, enabled = true) => {
 var useClickOutside_default = useClickOutside;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime320 = require("react/jsx-runtime");
+var import_jsx_runtime321 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react19.default.useState(false);
-  const [mounted, setMounted] = import_react19.default.useState(false);
-  const [visible, setVisible] = import_react19.default.useState(false);
-  const triggerRef = import_react19.default.useRef(null);
-  const menuRef = import_react19.default.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
-  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
-  import_react19.default.useEffect(() => {
+  const [isOpen, setIsOpen] = import_react20.default.useState(false);
+  const [mounted, setMounted] = import_react20.default.useState(false);
+  const [visible, setVisible] = import_react20.default.useState(false);
+  const triggerRef = import_react20.default.useRef(null);
+  const menuRef = import_react20.default.useRef(null);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
+  import_react20.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3420,8 +3461,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -3430,14 +3471,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
       "div",
       {
         ref: menuRef,
-        className: clsx_default("dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -3452,30 +3493,30 @@ var Dropdown = (props) => {
           item.key
         ))
       }
-    )
+    ) })
   ] });
 };
 Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/EmptyState/EmptyState.tsx
-var import_jsx_runtime321 = require("react/jsx-runtime");
+var import_jsx_runtime322 = require("react/jsx-runtime");
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "lib-xplat-empty-state", children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: "lib-xplat-empty-state", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react20 = __toESM(require("react"), 1);
-var import_jsx_runtime322 = require("react/jsx-runtime");
+var import_react21 = __toESM(require("react"), 1);
+var import_jsx_runtime323 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
     accept,
@@ -3485,8 +3526,8 @@ var FileUpload = (props) => {
     label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description
   } = props;
-  const [isDragOver, setIsDragOver] = import_react20.default.useState(false);
-  const inputRef = import_react20.default.useRef(null);
+  const [isDragOver, setIsDragOver] = import_react21.default.useState(false);
+  const inputRef = import_react21.default.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -3516,7 +3557,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -3525,7 +3566,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
           "input",
           {
             ref: inputRef,
@@ -3535,9 +3576,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(UploadIcon_default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -3546,10 +3587,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_react22 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 
 // src/components/HtmlTypeWriter/utils.ts
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -3617,41 +3658,41 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return import_react21.default.createElement(tag, props);
+    return import_react22.default.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return import_react21.default.createElement(tag, props, ...children);
+  return import_react22.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_react21.default.createElement(import_react21.default.Fragment, { key: idx }, node);
+    return node == null ? null : import_react22.default.createElement(import_react22.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_jsx_runtime323 = require("react/jsx-runtime");
+var import_jsx_runtime324 = require("react/jsx-runtime");
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = import_react22.default.useState(0);
-  const doneCalledRef = import_react22.default.useRef(false);
-  const { doc, rangeMap, totalLength } = import_react22.default.useMemo(() => {
+  const [typedLen, setTypedLen] = import_react23.default.useState(0);
+  const doneCalledRef = import_react23.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react23.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_react22.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  import_react22.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -3659,33 +3700,33 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  import_react22.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  import_react22.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = import_react22.default.useMemo(
+  const parsed = import_react23.default.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-var import_react23 = __toESM(require("react"), 1);
-var import_jsx_runtime324 = require("react/jsx-runtime");
+var import_react24 = __toESM(require("react"), 1);
+var import_jsx_runtime325 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = import_react23.default.useState();
-  import_react23.default.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = import_react24.default.useState();
+  import_react24.default.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -3694,7 +3735,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = import_react23.default.useRef(null);
+  const inputRef = import_react24.default.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -3707,8 +3748,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
       "input",
       {
         type: "file",
@@ -3718,13 +3759,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: "action-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(UploadIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: "action-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(UploadIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ImageIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -3732,7 +3773,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime325 = require("react/jsx-runtime");
+var import_jsx_runtime326 = require("react/jsx-runtime");
 var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -3775,19 +3816,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
         "button",
         {
           className: clsx_default("page-btn", { active: page === current }),
@@ -3798,14 +3839,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -3814,17 +3855,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-var import_react24 = __toESM(require("react"), 1);
-var import_jsx_runtime326 = require("react/jsx-runtime");
+var import_react25 = __toESM(require("react"), 1);
+var import_jsx_runtime327 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react24.default.useRef(null);
-  const triggerRef = import_react24.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react24.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react24.default.useState(false);
+  const popRef = import_react25.default.useRef(null);
+  const triggerRef = import_react25.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react25.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react25.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react24.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -3837,7 +3878,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -3847,11 +3888,11 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
           "div",
           {
             className: clsx_default(
-              "content-wrap",
+              "lib-xplat-pop-over-content",
               position.direction,
               eventTrigger && "visible"
             ),
@@ -3861,7 +3902,7 @@ var PopOver = (props) => {
             },
             children: PopOverEl
           }
-        )
+        ) })
       ]
     }
   );
@@ -3870,7 +3911,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-var import_jsx_runtime327 = require("react/jsx-runtime");
+var import_jsx_runtime328 = require("react/jsx-runtime");
 var Progress = (props) => {
   const {
     value,
@@ -3880,8 +3921,8 @@ var Progress = (props) => {
     showLabel = false
   } = props;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
       "div",
       {
         className: "track",
@@ -3889,7 +3930,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
           "div",
           {
             className: "bar",
@@ -3898,7 +3939,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -3908,17 +3949,17 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-var import_react25 = __toESM(require("react"), 1);
-var RadioGroupContext = import_react25.default.createContext(
+var import_react26 = __toESM(require("react"), 1);
+var RadioGroupContext = import_react26.default.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return import_react25.default.useContext(RadioGroupContext);
+  return import_react26.default.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime328 = require("react/jsx-runtime");
+var import_jsx_runtime329 = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
@@ -3936,7 +3977,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
     "label",
     {
       className: clsx_default(
@@ -3946,18 +3987,18 @@ var Radio = (props) => {
         localChecked ? "checked" : void 0
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("span", { children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("span", { children: label })
       ]
     }
   );
@@ -3966,28 +4007,28 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-var import_jsx_runtime329 = require("react/jsx-runtime");
+var import_jsx_runtime330 = require("react/jsx-runtime");
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(import_jsx_runtime329.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(import_jsx_runtime330.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-var import_react28 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 
 // src/components/Select/context.ts
-var import_react26 = __toESM(require("react"), 1);
-var SelectContext = import_react26.default.createContext(null);
+var import_react27 = __toESM(require("react"), 1);
+var SelectContext = import_react27.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react27 = __toESM(require("react"), 1);
-var import_jsx_runtime330 = require("react/jsx-runtime");
+var import_react28 = __toESM(require("react"), 1);
+var import_jsx_runtime331 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = import_react27.default.useContext(context_default);
+  const ctx = import_react28.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -3996,7 +4037,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled"),
@@ -4017,7 +4058,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime331 = require("react/jsx-runtime");
+var import_jsx_runtime332 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -4029,26 +4070,26 @@ var SelectRoot = (props) => {
     error = false,
     size = "md"
   } = props;
-  const itemChildren = import_react28.default.Children.toArray(children).filter(
-    (child) => import_react28.default.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = import_react29.default.Children.toArray(children).filter(
+    (child) => import_react29.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react28.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react28.default.useState(null);
-  const controlledLabel = import_react28.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react29.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react29.default.useState(null);
+  const controlledLabel = import_react29.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 triggerRef = import_react28.default.useRef(null);
-  const contentRef = import_react28.default.useRef(null);
-  const [mounted, setMounted] = import_react28.default.useState(false);
-  const [visible, setVisible] = import_react28.default.useState(false);
-  import_react28.default.useEffect(() => {
+  const triggerRef = import_react29.default.useRef(null);
+  const contentRef = import_react29.default.useRef(null);
+  const [mounted, setMounted] = import_react29.default.useState(false);
+  const [visible, setVisible] = import_react29.default.useState(false);
+  import_react29.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react28.default.useEffect(() => {
+  import_react29.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -4058,12 +4099,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = import_react28.default.useCallback(() => setOpen(true), []);
-  const close = import_react28.default.useCallback(() => setOpen(false), []);
-  const toggle = import_react28.default.useCallback(() => setOpen((prev) => !prev), []);
+  const open = import_react29.default.useCallback(() => setOpen(true), []);
+  const close = import_react29.default.useCallback(() => setOpen(false), []);
+  const toggle = import_react29.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = import_react28.default.useCallback(
+  const setSelected = import_react29.default.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -4072,7 +4113,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react28.default.useMemo(
+  const ctxValue = import_react29.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -4093,7 +4134,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -4104,7 +4145,7 @@ var SelectRoot = (props) => {
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(
           "div",
           {
             ref: triggerRef,
@@ -4128,7 +4169,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
                 "span",
                 {
                   className: clsx_default(
@@ -4138,27 +4179,27 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+        mounted && /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
           "div",
           {
-            className: clsx_default("select-content", position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, minWidth: position.position.width },
             role: "listbox",
-            children: itemChildren
+            children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
-        )
+        ) })
       ]
     }
   ) });
@@ -4170,14 +4211,14 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime332 = require("react/jsx-runtime");
+var import_jsx_runtime333 = require("react/jsx-runtime");
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
     width: typeof width === "number" ? `${width}px` : width,
     height: typeof height === "number" ? `${height}px` : height
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant),
@@ -4190,20 +4231,20 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime333 = require("react/jsx-runtime");
+var import_jsx_runtime334 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
     type = "brand"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
           "circle",
           {
             className: "track",
@@ -4213,7 +4254,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
           "circle",
           {
             className: "indicator",
@@ -4232,20 +4273,20 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-var import_jsx_runtime334 = require("react/jsx-runtime");
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var Steps = (props) => {
   const {
     items,
     current,
     type = "brand"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("span", { children: index + 1 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("div", { className: "step-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("span", { children: index + 1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)("div", { className: "step-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -4254,8 +4295,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-var import_react29 = __toESM(require("react"), 1);
-var import_jsx_runtime335 = require("react/jsx-runtime");
+var import_react30 = __toESM(require("react"), 1);
+var import_jsx_runtime336 = require("react/jsx-runtime");
 var Swiper = (props) => {
   const {
     auto = false,
@@ -4278,23 +4319,23 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = import_react29.default.useMemo(() => {
+  const extendedItems = import_react30.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_react29.default.useState(
+  const [innerIndex, setInnerIndex] = import_react30.default.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = import_react29.default.useState(false);
-  const [dragOffset, setDragOffset] = import_react29.default.useState(0);
-  const [animated, setAnimated] = import_react29.default.useState(true);
-  const [containerWidth, setContainerWidth] = import_react29.default.useState(0);
-  const containerRef = import_react29.default.useRef(null);
-  const startXRef = import_react29.default.useRef(0);
-  const startTimeRef = import_react29.default.useRef(0);
-  const autoplayTimerRef = import_react29.default.useRef(null);
-  import_react29.default.useEffect(() => {
+  const [isDragging, setIsDragging] = import_react30.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react30.default.useState(0);
+  const [animated, setAnimated] = import_react30.default.useState(true);
+  const [containerWidth, setContainerWidth] = import_react30.default.useState(0);
+  const containerRef = import_react30.default.useRef(null);
+  const startXRef = import_react30.default.useRef(0);
+  const startTimeRef = import_react30.default.useRef(0);
+  const autoplayTimerRef = import_react30.default.useRef(null);
+  import_react30.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -4313,7 +4354,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = import_react29.default.useCallback(
+  const moveToInner = import_react30.default.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -4341,7 +4382,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = import_react29.default.useCallback(() => {
+  const handleTransitionEnd = import_react30.default.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -4351,7 +4392,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = import_react29.default.useCallback(
+  const slideTo = import_react30.default.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -4361,7 +4402,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = import_react29.default.useCallback(() => {
+  const slideNext = import_react30.default.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -4370,7 +4411,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = import_react29.default.useCallback(() => {
+  const slidePrev = import_react30.default.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -4379,7 +4420,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  import_react29.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -4387,12 +4428,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  import_react29.default.useImperativeHandle(swiperRef, () => ({
+  import_react30.default.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  import_react29.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     if (!auto || !canSlide) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -4415,7 +4456,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  import_react29.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -4453,8 +4494,8 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = import_react29.default.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+  const slideElements = import_react30.default.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -4473,14 +4514,14 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
-        children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
           "div",
           {
             className: clsx_default(
@@ -4498,7 +4539,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -4508,7 +4549,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+    canSlide && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
       "button",
       {
         className: clsx_default(
@@ -4526,8 +4567,8 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-var import_react30 = __toESM(require("react"), 1);
-var import_jsx_runtime336 = require("react/jsx-runtime");
+var import_react31 = __toESM(require("react"), 1);
+var import_jsx_runtime337 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -4537,9 +4578,9 @@ var Switch = (props) => {
     disabled,
     onChange
   } = props;
-  const [isAnimating, setIsAnimating] = import_react30.default.useState(false);
-  const timeoutRef = import_react30.default.useRef(null);
-  import_react30.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react31.default.useState(false);
+  const timeoutRef = import_react31.default.useRef(null);
+  import_react31.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -4554,7 +4595,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
     "div",
     {
       className: clsx_default(
@@ -4567,7 +4608,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -4575,17 +4616,17 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-var import_react31 = __toESM(require("react"), 1);
-var TableContext = import_react31.default.createContext(null);
+var import_react32 = __toESM(require("react"), 1);
+var TableContext = import_react32.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react31.default.useContext(TableContext);
+  const ctx = import_react32.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_runtime337 = require("react/jsx-runtime");
+var import_jsx_runtime338 = require("react/jsx-runtime");
 var Table = (props) => {
   const {
     children,
@@ -4594,7 +4635,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
     TableContext_default.Provider,
     {
       value: {
@@ -4603,7 +4644,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -4611,41 +4652,41 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_jsx_runtime339 = require("react/jsx-runtime");
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("tbody", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react34 = __toESM(require("react"), 1);
+var import_react35 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react32 = __toESM(require("react"), 1);
-var TableHeadContext = import_react32.default.createContext(
+var import_react33 = __toESM(require("react"), 1);
+var TableHeadContext = import_react33.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react32.default.useContext(TableHeadContext);
+  const ctx = import_react33.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react33 = __toESM(require("react"), 1);
-var TableRowContext = import_react33.default.createContext(null);
+var import_react34 = __toESM(require("react"), 1);
+var TableRowContext = import_react34.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react33.default.useContext(TableRowContext);
+  const ctx = import_react34.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_runtime339 = require("react/jsx-runtime");
-var TableCell = import_react34.default.memo((props) => {
+var import_jsx_runtime340 = require("react/jsx-runtime");
+var TableCell = import_react35.default.memo((props) => {
   const {
     children,
     align = "center",
@@ -4657,9 +4698,9 @@ var TableCell = import_react34.default.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react34.default.useState(0);
-  const cellRef = import_react34.default.useRef(null);
-  const calculateLeft = import_react34.default.useCallback(() => {
+  const [left, setLeft] = import_react35.default.useState(0);
+  const cellRef = import_react35.default.useRef(null);
+  const calculateLeft = import_react35.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -4668,7 +4709,7 @@ var TableCell = import_react34.default.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react34.default.useEffect(() => {
+  import_react35.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -4686,7 +4727,7 @@ var TableCell = import_react34.default.memo((props) => {
   const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
     CellTag,
     {
       ref: cellRef,
@@ -4711,21 +4752,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-var import_jsx_runtime340 = require("react/jsx-runtime");
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-var import_react35 = __toESM(require("react"), 1);
-var import_jsx_runtime341 = require("react/jsx-runtime");
-var TableRow = import_react35.default.memo((props) => {
+var import_react36 = __toESM(require("react"), 1);
+var import_jsx_runtime342 = require("react/jsx-runtime");
+var TableRow = import_react36.default.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -4733,14 +4774,14 @@ var TableRow = import_react35.default.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react35.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react36.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
     "tr",
     {
       className: clsx_default(
@@ -4758,7 +4799,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime342 = require("react/jsx-runtime");
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
@@ -4768,7 +4809,7 @@ var Tag = (props) => {
     disabled = false,
     colorIndex
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(
     "span",
     {
       className: clsx_default(
@@ -4779,8 +4820,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(XIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(XIcon_default, {}) })
       ]
     }
   );
@@ -4789,12 +4830,12 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-var import_react36 = __toESM(require("react"), 1);
-var import_jsx_runtime343 = require("react/jsx-runtime");
-var TextArea = import_react36.default.forwardRef(
+var import_react37 = __toESM(require("react"), 1);
+var import_jsx_runtime344 = require("react/jsx-runtime");
+var TextArea = import_react37.default.forwardRef(
   (props, ref) => {
     const { value, onChange, disabled, ...textareaProps } = props;
-    const localRef = import_react36.default.useRef(null);
+    const localRef = import_react37.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -4814,21 +4855,21 @@ var TextArea = import_react36.default.forwardRef(
         onChange(event);
       }
     };
-    import_react36.default.useEffect(() => {
+    import_react37.default.useEffect(() => {
       const el = localRef.current;
       if (!el) return;
       el.style.height = "0px";
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
           "textarea",
           {
             ...textareaProps,
@@ -4846,25 +4887,25 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-var import_react37 = __toESM(require("react"), 1);
-var import_react_dom3 = require("react-dom");
-var import_jsx_runtime344 = require("react/jsx-runtime");
-var ToastContext = import_react37.default.createContext(null);
+var import_react38 = __toESM(require("react"), 1);
+var import_react_dom4 = require("react-dom");
+var import_jsx_runtime345 = require("react/jsx-runtime");
+var ToastContext = import_react38.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react37.default.useContext(ToastContext);
+  const ctx = import_react38.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_react37.default.useRef(null);
-  const [height, setHeight] = import_react37.default.useState(void 0);
-  import_react37.default.useEffect(() => {
+  const ref = import_react38.default.useRef(null);
+  const [height, setHeight] = import_react38.default.useState(void 0);
+  import_react38.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -4872,15 +4913,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -4891,13 +4932,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react37.default.useState([]);
-  const [removing, setRemoving] = import_react37.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react37.default.useState(false);
-  import_react37.default.useEffect(() => {
+  const [toasts, setToasts] = import_react38.default.useState([]);
+  const [removing, setRemoving] = import_react38.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react38.default.useState(false);
+  import_react38.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react37.default.useCallback((id) => {
+  const remove = import_react38.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -4908,7 +4949,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react37.default.useCallback(
+  const toast = import_react38.default.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -4918,10 +4959,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(ToastContext.Provider, { value: { toast }, children: [
     children,
-    mounted && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+    mounted && (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
         ToastItemComponent,
         {
           item: t,
@@ -4937,29 +4978,29 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react38 = __toESM(require("react"), 1);
-var import_jsx_runtime345 = require("react/jsx-runtime");
+var import_react39 = __toESM(require("react"), 1);
+var import_jsx_runtime346 = require("react/jsx-runtime");
 var Tooltip = (props) => {
   const {
     type = "primary",
     description,
     children
   } = props;
-  const iconRef = import_react38.default.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
+  const iconRef = import_react39.default.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-var import_react39 = __toESM(require("react"), 1);
-var import_jsx_runtime346 = require("react/jsx-runtime");
-var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime346.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_runtime346.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+var import_react40 = __toESM(require("react"), 1);
+var import_jsx_runtime347 = require("react/jsx-runtime");
+var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime347.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_runtime347.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime347.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";
@@ -4967,7 +5008,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = import_react39.default.forwardRef((props, ref) => {
+var Video = import_react40.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -4991,21 +5032,21 @@ var Video = import_react39.default.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const containerRef = import_react39.default.useRef(null);
-  const videoRef = import_react39.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react39.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react39.default.useState(false);
-  const [currentTime, setCurrentTime] = import_react39.default.useState(0);
-  const [duration, setDuration] = import_react39.default.useState(0);
-  const [buffered, setBuffered] = import_react39.default.useState(0);
-  const [volume, setVolume] = import_react39.default.useState(1);
-  const [isMuted, setIsMuted] = import_react39.default.useState(Boolean(muted));
-  const [isFullscreen, setIsFullscreen] = import_react39.default.useState(false);
-  const [playbackRate, setPlaybackRate] = import_react39.default.useState(1);
-  const [rateMenuOpen, setRateMenuOpen] = import_react39.default.useState(false);
-  const [captionsOn, setCaptionsOn] = import_react39.default.useState(false);
-  const [isPip, setIsPip] = import_react39.default.useState(false);
-  const setRefs = import_react39.default.useCallback(
+  const containerRef = import_react40.default.useRef(null);
+  const videoRef = import_react40.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react40.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react40.default.useState(false);
+  const [currentTime, setCurrentTime] = import_react40.default.useState(0);
+  const [duration, setDuration] = import_react40.default.useState(0);
+  const [buffered, setBuffered] = import_react40.default.useState(0);
+  const [volume, setVolume] = import_react40.default.useState(1);
+  const [isMuted, setIsMuted] = import_react40.default.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = import_react40.default.useState(false);
+  const [playbackRate, setPlaybackRate] = import_react40.default.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = import_react40.default.useState(false);
+  const [captionsOn, setCaptionsOn] = import_react40.default.useState(false);
+  const [isPip, setIsPip] = import_react40.default.useState(false);
+  const setRefs = import_react40.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -5013,14 +5054,14 @@ var Video = import_react39.default.forwardRef((props, ref) => {
     },
     [ref]
   );
-  import_react39.default.useEffect(() => {
+  import_react40.default.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  import_react39.default.useEffect(() => {
+  import_react40.default.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -5134,13 +5175,13 @@ var Video = import_react39.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_runtime346.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
           "video",
           {
             ref: setRefs,
@@ -5161,7 +5202,7 @@ var Video = import_react39.default.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
           "button",
           {
             type: "button",
@@ -5173,11 +5214,11 @@ var Video = import_react39.default.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
             "input",
             {
               type: "range",
@@ -5194,29 +5235,29 @@ var Video = import_react39.default.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "controls-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "controls-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "volume-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "volume-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime347.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_runtime346.jsx)(VolumeGlyph, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
                 "input",
                 {
                   type: "range",
@@ -5231,14 +5272,14 @@ var Video = import_react39.default.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("span", { className: "time", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -5252,7 +5293,7 @@ var Video = import_react39.default.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -5266,7 +5307,7 @@ var Video = import_react39.default.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
               "button",
               {
                 type: "button",
@@ -5274,37 +5315,37 @@ var Video = import_react39.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_runtime346.jsx)(TypeIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime347.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_runtime346.jsx)(PipIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+            showDownload && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(DownloadIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime347.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_runtime346.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(MaximizeIcon_default, {})
               }
             )
           ] })