@x-plat/design-system 0.5.20 → 0.5.22

package/dist/components/index.js

@@ -387,6 +387,21 @@ import { jsx as jsx88 } from "react/jsx-runtime";
 
 // src/tokens/svg/communication/SendIcon.tsx
 import { jsx as jsx89, jsxs as jsxs47 } from "react/jsx-runtime";
+var SendIcon = () => /* @__PURE__ */ jsxs47(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx89("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ jsx89("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3558 0.918873C18.3887 0.919879 18.4212 0.9224 18.4535 0.927663C18.4642 0.929393 18.4751 0.930348 18.4857 0.932545C18.527 0.941123 18.5675 0.953269 18.6068 0.968678C18.6178 0.972968 18.6282 0.978499 18.639 0.983327C18.6672 0.995914 18.6945 1.01021 18.7211 1.0263C18.7403 1.03794 18.7594 1.04988 18.7777 1.0634C18.7803 1.06534 18.7829 1.0673 18.7855 1.06926C18.8126 1.08979 18.839 1.11195 18.8637 1.13665C18.8872 1.16018 18.9084 1.18517 18.9281 1.21087C18.9322 1.21625 18.9359 1.22198 18.9398 1.22747C18.9501 1.24168 18.959 1.25667 18.9681 1.27141C18.9866 1.30108 19.0029 1.33154 19.017 1.36321C19.0214 1.37309 19.0267 1.38248 19.0306 1.39251C19.0461 1.43186 19.0581 1.47231 19.0668 1.5136C19.069 1.52426 19.0699 1.5351 19.0717 1.54583C19.077 1.57815 19.0794 1.61062 19.0805 1.64348C19.0808 1.65621 19.0817 1.66884 19.0814 1.68157C19.0799 1.75981 19.0681 1.83872 19.0414 1.91497L13.2074 18.581C13.1058 18.871 12.8377 19.0703 12.5306 19.0829C12.2237 19.0954 11.9398 18.9192 11.8148 18.6386L8.59706 11.4003L1.3617 8.18547C1.08085 8.06057 0.90492 7.77678 0.917368 7.46965C0.929915 7.16252 1.12827 6.89358 1.41834 6.79192L18.0853 0.958913C18.1613 0.932334 18.2398 0.919479 18.3178 0.917897C18.3305 0.91763 18.3431 0.918498 18.3558 0.918873ZM10.0609 10.999L12.4164 16.2997L16.5375 4.52239L10.0609 10.999ZM3.69862 7.58294L9.00038 9.93841L15.4808 3.45794L3.69862 7.58294Z", fill: "currentColor" }) }),
+      /* @__PURE__ */ jsx89("defs", { children: /* @__PURE__ */ jsx89("clipPath", { id: "send-clip", children: /* @__PURE__ */ jsx89("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
+    ]
+  }
+);
+var SendIcon_default = SendIcon;
 
 // src/tokens/svg/date/CalendarIcon.tsx
 import { jsx as jsx90 } from "react/jsx-runtime";
@@ -1933,30 +1948,151 @@ var Calendar = (props) => {
 Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
 
+// src/components/ChatInput/ChatInput.tsx
+import React5 from "react";
+
+// src/components/TextArea/TextArea.tsx
+import React4 from "react";
+import { jsx as jsx302 } from "react/jsx-runtime";
+var TextArea = React4.forwardRef(
+  (props, ref) => {
+    const { value, onChange, disabled, ...textareaProps } = props;
+    const localRef = React4.useRef(null);
+    const setRefs = (el) => {
+      localRef.current = el;
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref && typeof ref === "object" && "current" in ref) {
+        ref.current = el;
+      }
+    };
+    const handleOnChange = (e) => {
+      const val = e.target.value;
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: val }
+        };
+        onChange(event);
+      }
+    };
+    React4.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__ */ jsx302("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx302(
+      "div",
+      {
+        className: clsx_default(
+          "lib-xplat-textarea",
+          disabled ? "disabled" : void 0
+        ),
+        children: /* @__PURE__ */ jsx302(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: setRefs,
+            disabled,
+            value,
+            onChange: handleOnChange
+          }
+        )
+      }
+    ) });
+  }
+);
+TextArea.displayName = "TextArea";
+var TextArea_default = TextArea;
+
+// src/components/ChatInput/ChatInput.tsx
+import { jsx as jsx303, jsxs as jsxs194 } from "react/jsx-runtime";
+var ChatInput = React5.forwardRef(
+  (props, ref) => {
+    const {
+      placeholder,
+      value: valueProp,
+      disabled = false,
+      buttonType = "primary",
+      onSubmit,
+      onChange
+    } = props;
+    const isControlled = valueProp !== void 0;
+    const [internalValue, setInternalValue] = React5.useState("");
+    const value = isControlled ? valueProp : internalValue;
+    const hasText = value.trim().length > 0;
+    const handleChange = (e) => {
+      const val = e.target.value;
+      if (!isControlled) setInternalValue(val);
+      onChange?.(val);
+    };
+    const handleSubmit = () => {
+      if (!hasText || disabled) return;
+      onSubmit?.(value);
+      if (!isControlled) setInternalValue("");
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    return /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ jsx303(
+        TextArea_default,
+        {
+          ref,
+          placeholder,
+          value,
+          disabled,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx303(
+        "button",
+        {
+          type: "button",
+          className: clsx_default("chat-input-send", `btn-${buttonType}`),
+          disabled: !hasText || disabled,
+          onClick: handleSubmit,
+          "aria-label": "\uC804\uC1A1",
+          children: /* @__PURE__ */ jsx303(SendIcon_default, {})
+        }
+      )
+    ] });
+  }
+);
+ChatInput.displayName = "ChatInput";
+var ChatInput_default = ChatInput;
+
 // src/components/Box/Box.tsx
-import { jsx as jsx302, jsxs as jsxs194 } from "react/jsx-runtime";
+import { jsx as jsx304, jsxs as jsxs195 } from "react/jsx-runtime";
 var Box = ({
   children,
   title,
   variant = "outlined",
   padding = "md"
 }) => {
-  return /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
-    title && /* @__PURE__ */ jsx302("div", { className: "box-title", children: title }),
-    /* @__PURE__ */ jsx302("div", { className: "box-content", children })
+  return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ jsx304("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ jsx304("div", { className: "box-content", children })
   ] });
 };
 Box.displayName = "Box";
 var Box_default = Box;
 
 // src/components/CardTab/CardTab.tsx
-import React4 from "react";
+import React6 from "react";
 
 // src/components/CardTab/CardTabPanel.tsx
-import { jsx as jsx303 } from "react/jsx-runtime";
+import { jsx as jsx305 } from "react/jsx-runtime";
 var CardTabPanel = (props) => {
   const { children, columns = 3 } = props;
-  return /* @__PURE__ */ jsx303(
+  return /* @__PURE__ */ jsx305(
     "div",
     {
       className: "card-tab-panel",
@@ -1969,7 +2105,7 @@ CardTabPanel.displayName = "CardTab.Panel";
 var CardTabPanel_default = CardTabPanel;
 
 // src/components/CardTab/CardTab.tsx
-import { jsx as jsx304, jsxs as jsxs195 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs196 } from "react/jsx-runtime";
 var CardTabRoot = (props) => {
   const {
     tabs,
@@ -1979,7 +2115,7 @@ var CardTabRoot = (props) => {
     children
   } = props;
   const isControlled = activeValueProp !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React4.useState(tabs[0]?.value ?? "");
+  const [uncontrolledValue, setUncontrolledValue] = React6.useState(tabs[0]?.value ?? "");
   const activeValue = isControlled ? activeValueProp : uncontrolledValue;
   const handleTabClick = (tab) => {
     if (!isControlled) {
@@ -1987,16 +2123,16 @@ var CardTabRoot = (props) => {
     }
     onChange?.(tab);
   };
-  const panels = React4.Children.toArray(children).filter(
-    (child) => React4.isValidElement(child) && child.type === CardTabPanel_default
+  const panels = React6.Children.toArray(children).filter(
+    (child) => React6.isValidElement(child) && child.type === CardTabPanel_default
   );
   const activePanel = panels.find(
     (panel) => panel.props.value === activeValue
   );
-  return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
-    /* @__PURE__ */ jsx304("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+  return /* @__PURE__ */ jsxs196("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
+    /* @__PURE__ */ jsx306("div", { className: "card-tab-bar", children: tabs.map((tab) => {
       const isActive = tab.value === activeValue;
-      return /* @__PURE__ */ jsx304(
+      return /* @__PURE__ */ jsx306(
         "button",
         {
           className: clsx_default("card-tab-trigger", isActive && "active"),
@@ -2008,7 +2144,7 @@ var CardTabRoot = (props) => {
         tab.value
       );
     }) }),
-    /* @__PURE__ */ jsx304("div", { className: "card-tab-body", children: activePanel })
+    /* @__PURE__ */ jsx306("div", { className: "card-tab-body", children: activePanel })
   ] });
 };
 CardTabRoot.displayName = "CardTab";
@@ -2018,8 +2154,8 @@ var CardTab = Object.assign(CardTabRoot, {
 var CardTab_default = CardTab;
 
 // src/components/Chart/Chart.tsx
-import React5 from "react";
-import { Fragment as Fragment2, jsx as jsx305, jsxs as jsxs196 } from "react/jsx-runtime";
+import React7 from "react";
+import { Fragment as Fragment2, jsx as jsx307, jsxs as jsxs197 } from "react/jsx-runtime";
 var CATEGORICAL_COUNT2 = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
   const n = i + 1;
@@ -2065,11 +2201,11 @@ var toSmoothPath = (points) => {
 };
 var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
-  const [size, setSize] = React5.useState({ width: 0, height: 0 });
-  const settleTimer = React5.useRef(0);
-  const committedSize = React5.useRef({ width: 0, height: 0 });
-  const initialRef = React5.useRef(true);
-  React5.useEffect(() => {
+  const [size, setSize] = React7.useState({ width: 0, height: 0 });
+  const settleTimer = React7.useRef(0);
+  const committedSize = React7.useRef({ width: 0, height: 0 });
+  const initialRef = React7.useRef(true);
+  React7.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -2111,10 +2247,10 @@ var useChartSize = (ref) => {
 };
 var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 var useChartAnimation = (containerRef, dataKey) => {
-  const [animate, setAnimate] = React5.useState(false);
-  const prevDataKey = React5.useRef(dataKey);
-  const hasAnimated = React5.useRef(false);
-  React5.useEffect(() => {
+  const [animate, setAnimate] = React7.useState(false);
+  const prevDataKey = React7.useRef(dataKey);
+  const hasAnimated = React7.useRef(false);
+  React7.useEffect(() => {
     if (prefersReducedMotion()) return;
     const el = containerRef.current;
     if (!el) return;
@@ -2130,7 +2266,7 @@ var useChartAnimation = (containerRef, dataKey) => {
     observer.observe(el);
     return () => observer.disconnect();
   }, [containerRef]);
-  React5.useEffect(() => {
+  React7.useEffect(() => {
     if (dataKey !== prevDataKey.current) {
       prevDataKey.current = dataKey;
       if (prefersReducedMotion()) return;
@@ -2141,15 +2277,15 @@ var useChartAnimation = (containerRef, dataKey) => {
   return animate || prefersReducedMotion();
 };
 var useChartTooltip = (enabled) => {
-  const [tooltip, setTooltip] = React5.useState({
+  const [tooltip, setTooltip] = React7.useState({
     visible: false,
     x: 0,
     y: 0,
     content: ""
   });
-  const containerRef = React5.useRef(null);
-  const rafRef = React5.useRef(0);
-  const move = React5.useCallback((e) => {
+  const containerRef = React7.useRef(null);
+  const rafRef = React7.useRef(0);
+  const move = React7.useCallback((e) => {
     if (!enabled) return;
     const clientX = e.clientX;
     const clientY = e.clientY;
@@ -2164,7 +2300,7 @@ var useChartTooltip = (enabled) => {
       }));
     });
   }, [enabled]);
-  const show = React5.useCallback((e, content) => {
+  const show = React7.useCallback((e, content) => {
     if (!enabled) return;
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
@@ -2175,18 +2311,18 @@ var useChartTooltip = (enabled) => {
       content
     });
   }, [enabled]);
-  const hide = React5.useCallback(() => {
+  const hide = React7.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var GridLines = React5.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx305(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+var GridLines = React7.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx307(Fragment2, { 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__ */ jsxs196("g", { children: [
-    /* @__PURE__ */ jsx305("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-    /* @__PURE__ */ jsx305("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  return /* @__PURE__ */ jsxs197("g", { children: [
+    /* @__PURE__ */ jsx307("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ jsx307("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -2196,25 +2332,25 @@ var getLabelStep = (count, chartW) => {
   if (count <= maxLabels) return 1;
   return Math.ceil(count / maxLabels);
 };
-var AxisLabels = React5.memo(({ labels, count, chartW, height }) => {
+var AxisLabels = React7.memo(({ labels, count, chartW, height }) => {
   const step = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsx305(Fragment2, { children: labels.map((label, i) => {
+  return /* @__PURE__ */ jsx307(Fragment2, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ jsx305("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ jsx307("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
-var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React5.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React5.useMemo(() => {
+var LineChart = React7.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React7.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React7.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = React5.useMemo(
+  const seriesPoints = React7.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -2225,8 +2361,8 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
-  const lineRefs = React5.useRef([]);
-  React5.useEffect(() => {
+  const lineRefs = React7.useRef([]);
+  React7.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
       if (!el) return;
@@ -2239,9 +2375,9 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
       });
     });
   }, [animate, seriesPoints]);
-  return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ jsx305(AxisLabels, { labels, count, chartW, height }),
+  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ jsx307(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2250,12 +2386,12 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
       const gradientId = `line-gradient-${di}`;
       const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
       const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
-      return /* @__PURE__ */ jsxs196("g", { children: [
-        /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsxs196("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ jsx305("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-          /* @__PURE__ */ jsx305("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+      return /* @__PURE__ */ jsxs197("g", { children: [
+        /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsxs197("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+          /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
         ] }) }),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx307(
           "path",
           {
             d: areaD,
@@ -2264,7 +2400,7 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
             style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
           }
         ),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx307(
           "polyline",
           {
             ref: (el) => {
@@ -2276,7 +2412,7 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
             strokeWidth: "2"
           }
         ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ jsx305(
+        showPoints && points.map((p, i) => /* @__PURE__ */ jsx307(
           "circle",
           {
             cx: p.x,
@@ -2295,16 +2431,16 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
   ] });
 });
 LineChart.displayName = "LineChart";
-var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React5.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React5.useMemo(() => {
+var CurveChart = React7.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React7.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React7.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = React5.useMemo(
+  const seriesPoints = React7.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -2315,8 +2451,8 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
-  const lineRefs = React5.useRef([]);
-  React5.useEffect(() => {
+  const lineRefs = React7.useRef([]);
+  React7.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
       if (!el) return;
@@ -2329,9 +2465,9 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
       });
     });
   }, [animate, seriesPoints]);
-  return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ jsx305(AxisLabels, { labels, count, chartW, height }),
+  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ jsx307(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2340,12 +2476,12 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
       const gradientId = `curve-gradient-${di}`;
       const linePath = toSmoothPath(points);
       const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
-      return /* @__PURE__ */ jsxs196("g", { children: [
-        /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsxs196("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ jsx305("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-          /* @__PURE__ */ jsx305("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+      return /* @__PURE__ */ jsxs197("g", { children: [
+        /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsxs197("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+          /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
         ] }) }),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx307(
           "path",
           {
             d: areaPath,
@@ -2354,7 +2490,7 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
             style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
           }
         ),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx307(
           "path",
           {
             ref: (el) => {
@@ -2366,7 +2502,7 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
             strokeWidth: "2"
           }
         ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ jsx305(
+        showPoints && points.map((p, i) => /* @__PURE__ */ jsx307(
           "circle",
           {
             cx: p.x,
@@ -2385,9 +2521,9 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
   ] });
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React5.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React5.useMemo(() => {
+var BarChart = React7.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React7.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React7.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
@@ -2399,7 +2535,7 @@ var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onM
   const barGap = groupCount > 1 ? 2 : 0;
   const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
   const baseline = PADDING.top + chartH;
-  const bars = React5.useMemo(
+  const bars = React7.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
         const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
@@ -2412,11 +2548,11 @@ var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onM
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
+  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ jsx305("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ jsx307("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);
@@ -2425,7 +2561,7 @@ var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onM
         const r2 = Math.min(4, b.w / 2);
         const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
         const delay = 100 + i * 80;
-        return /* @__PURE__ */ jsx305(
+        return /* @__PURE__ */ jsx307(
           "path",
           {
             d,
@@ -2446,11 +2582,11 @@ var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onM
   ] });
 });
 BarChart.displayName = "BarChart";
-var PieDonutChart = React5.memo(
+var PieDonutChart = React7.memo(
   ({ data, labels, width, height, animate, isDoughnut, onHover, onMove, onLeave }) => {
-    const entries = React5.useMemo(() => Object.entries(data), [data]);
-    const values = React5.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
-    const total = React5.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
+    const entries = React7.useMemo(() => Object.entries(data), [data]);
+    const values = React7.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
+    const total = React7.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
     const size = Math.min(width, height);
     const cx = size / 2;
     const cy = size / 2;
@@ -2458,8 +2594,22 @@ var PieDonutChart = React5.memo(
     const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    const sliceData = React5.useMemo(() => {
+    const maskRef = React7.useRef(null);
+    const maskR = r2 + 10;
+    const maskCircumference = 2 * Math.PI * maskR;
+    React7.useEffect(() => {
+      if (!animate || !maskRef.current) return;
+      const el = maskRef.current;
+      el.style.strokeDasharray = `${maskCircumference}`;
+      el.style.strokeDashoffset = `${maskCircumference}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1000ms ease-out";
+        el.style.strokeDashoffset = "0";
+      });
+    }, [animate, maskCircumference]);
+    const sliceData = React7.useMemo(() => {
       let angle0 = -Math.PI / 2;
+      let cumulativeAngle = 0;
       return values.map((v, i) => {
         const angle = v / total * Math.PI * 2;
         const endAngle = angle0 + angle;
@@ -2483,45 +2633,60 @@ var PieDonutChart = React5.memo(
         const lx = cx + labelR * Math.cos(midAngle);
         const ly = cy + labelR * Math.sin(midAngle);
         const pct = Math.round(v / total * 100);
+        cumulativeAngle += angle;
+        const sliceEndRatio = cumulativeAngle / (Math.PI * 2);
+        const labelDelay = 1e3 * sliceEndRatio + 150;
         angle0 = endAngle;
-        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}`, labelDelay };
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
-    return /* @__PURE__ */ jsx305("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
-      const delay = i * 100;
-      return /* @__PURE__ */ jsxs196("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
-        /* @__PURE__ */ jsx305(
-          "path",
-          {
-            d: s.d,
-            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-            className: "chart-slice",
-            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          }
-        ),
-        s.angle > 0.2 && /* @__PURE__ */ jsx305(
-          "text",
-          {
-            x: s.lx,
-            y: s.ly,
-            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: s.v
-          }
-        )
-      ] }, i);
-    }) });
+    const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
+    return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsx307("mask", { id: maskId, children: /* @__PURE__ */ jsx307(
+        "circle",
+        {
+          ref: maskRef,
+          cx,
+          cy,
+          r: maskR,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: maskR * 2,
+          transform: `rotate(-90 ${cx} ${cy})`
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx307("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx307("g", { children: /* @__PURE__ */ jsx307(
+        "path",
+        {
+          d: s.d,
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        }
+      ) }, i)) }),
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx307(
+        "text",
+        {
+          x: s.lx,
+          y: s.ly,
+          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: s.v
+        },
+        `label-${i}`
+      ))
+    ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
 var TooltipBubble = ({ x, y, containerWidth, children }) => {
-  const ref = React5.useRef(null);
-  const [adjustedX, setAdjustedX] = React5.useState(x);
-  React5.useEffect(() => {
+  const ref = React7.useRef(null);
+  const [adjustedX, setAdjustedX] = React7.useState(x);
+  React7.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -2532,7 +2697,7 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     else if (x + half > containerWidth - margin) nx = containerWidth - half - margin;
     setAdjustedX(nx);
   }, [x, containerWidth]);
-  return /* @__PURE__ */ jsx305(
+  return /* @__PURE__ */ jsx307(
     "div",
     {
       ref,
@@ -2542,22 +2707,22 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     }
   );
 };
-var Chart = React5.memo((props) => {
+var Chart = React7.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
-  const stableData = React5.useMemo(() => data, [JSON.stringify(data)]);
-  const stableLabels = React5.useMemo(() => labels, [JSON.stringify(labels)]);
-  const dataKey = React5.useMemo(() => JSON.stringify(labels), [labels]);
+  const stableData = React7.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = React7.useMemo(() => labels, [JSON.stringify(labels)]);
+  const dataKey = React7.useMemo(() => JSON.stringify(labels), [labels]);
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
-  return /* @__PURE__ */ jsxs196("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx305(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx305(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx305(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ jsx305(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
+  return /* @__PURE__ */ jsxs197("div", { className: "lib-xplat-chart", ref: containerRef, children: [
+    ready && type === "line" && /* @__PURE__ */ jsx307(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx307(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx307(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    tooltip.visible && /* @__PURE__ */ jsx307(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -2570,7 +2735,7 @@ import { primitive, semantic } from "@x-plat/tokens-core";
 import { cssVar } from "@x-plat/tokens-core";
 
 // src/components/CheckBox/CheckBox.tsx
-import { jsx as jsx306, jsxs as jsxs197 } from "react/jsx-runtime";
+import { jsx as jsx308, jsxs as jsxs198 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
     checked,
@@ -2588,8 +2753,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs197("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
-    /* @__PURE__ */ jsx306(
+  return /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+    /* @__PURE__ */ jsx308(
       "input",
       {
         type: "checkbox",
@@ -2599,44 +2764,44 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx306("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx306("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx306(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ jsx306("span", { className: "label", children: label })
+    /* @__PURE__ */ jsx308("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx308("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx308(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ jsx308("span", { className: "label", children: label })
   ] });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx307 } from "react/jsx-runtime";
+import { jsx as jsx309 } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
     type = "primary",
     size = "md"
   } = props;
-  return /* @__PURE__ */ jsx307("div", { className: clsx_default("lib-xplat-chip", type, size), children });
+  return /* @__PURE__ */ jsx309("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-import React11 from "react";
+import React13 from "react";
 
 // src/components/Input/Input.tsx
-import React6 from "react";
+import React8 from "react";
 
 // src/components/Input/InputValidations.tsx
-import { jsx as jsx308, jsxs as jsxs198 } from "react/jsx-runtime";
+import { jsx as jsx310, jsxs as jsxs199 } from "react/jsx-runtime";
 var InputValidations = (props) => {
   const { message, status = "default" } = props;
-  return /* @__PURE__ */ jsxs198("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ jsxs198("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ jsx308(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ jsx308(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ jsx308(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ jsx308(ErrorIcon_default, {})
+  return /* @__PURE__ */ jsxs199("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ jsxs199("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ jsx310(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ jsx310(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ jsx310(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ jsx310(ErrorIcon_default, {})
     ] }),
-    /* @__PURE__ */ jsx308("div", { className: "message", children: message })
+    /* @__PURE__ */ jsx310("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -2677,7 +2842,7 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx309, jsxs as jsxs199 } from "react/jsx-runtime";
+import { jsx as jsx311, jsxs as jsxs200 } from "react/jsx-runtime";
 import { createElement } from "react";
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
@@ -2726,7 +2891,7 @@ var parseValue = (type, value) => {
       return value;
   }
 };
-var Input = React6.forwardRef((props, ref) => {
+var Input = React8.forwardRef((props, ref) => {
   const {
     value,
     onChange,
@@ -2752,13 +2917,13 @@ var Input = React6.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs199("div", { className: "lib-xplat-input-wrap", children: [
-    /* @__PURE__ */ jsxs199(
+  return /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-input-wrap", children: [
+    /* @__PURE__ */ jsxs200(
       "div",
       {
         className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ jsx309(
+          /* @__PURE__ */ jsx311(
             "input",
             {
               ...inputProps,
@@ -2769,11 +2934,11 @@ var Input = React6.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ jsx309("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ jsx311("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ jsx309("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
+    validations && /* @__PURE__ */ jsx311("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
       InputValidations_default,
       {
         ...validation,
@@ -2786,20 +2951,20 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-import React7 from "react";
-import { jsx as jsx310 } from "react/jsx-runtime";
-var PasswordInput = React7.forwardRef(
+import React9 from "react";
+import { jsx as jsx312 } from "react/jsx-runtime";
+var PasswordInput = React9.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = React7.useState(false);
+    const [isView, setIsView] = React9.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ jsx310(
+    return /* @__PURE__ */ jsx312(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ jsx310("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ jsx310(OpenEyeIcon_default, {}) : /* @__PURE__ */ jsx310(CloseEyeIcon_default, {}) }),
+        suffix: /* @__PURE__ */ jsx312("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ jsx312(OpenEyeIcon_default, {}) : /* @__PURE__ */ jsx312(CloseEyeIcon_default, {}) }),
         type: isView ? "text" : "password",
         ref
       }
@@ -2810,17 +2975,17 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
-import React9 from "react";
+import React11 from "react";
 import { createPortal } from "react-dom";
 
 // src/tokens/hooks/Portal.tsx
-import React8 from "react";
+import React10 from "react";
 import ReactDOM from "react-dom";
-import { jsx as jsx311 } from "react/jsx-runtime";
-var PortalContainerContext = React8.createContext(null);
-var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx311(PortalContainerContext.Provider, { value: container, children });
+import { jsx as jsx313 } from "react/jsx-runtime";
+var PortalContainerContext = React10.createContext(null);
+var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx313(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
-  const contextContainer = React8.useContext(PortalContainerContext);
+  const contextContainer = React10.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
   const container = contextContainer ?? document.body;
   return ReactDOM.createPortal(children, container);
@@ -2829,14 +2994,14 @@ Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx312 } from "react/jsx-runtime";
+import { jsx as jsx314 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React9.useState(false);
-  const [visible, setVisible] = React9.useState(false);
-  const boxRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const [mounted, setMounted] = React11.useState(false);
+  const [visible, setVisible] = React11.useState(false);
+  const boxRef = React11.useRef(null);
+  React11.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -2850,12 +3015,12 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return createPortal(
-    /* @__PURE__ */ jsx312(
+    /* @__PURE__ */ jsx314(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsx312(
+        children: /* @__PURE__ */ jsx314(
           "div",
           {
             ref: boxRef,
@@ -2863,7 +3028,7 @@ var Modal = (props) => {
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx312(PortalProvider, { container: boxRef.current, children })
+            children: /* @__PURE__ */ jsx314(PortalProvider, { container: boxRef.current, children })
           }
         )
       }
@@ -2875,9 +3040,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-import React10 from "react";
-import { Fragment as Fragment3, jsx as jsx313, jsxs as jsxs200 } from "react/jsx-runtime";
-var DayCell2 = React10.memo(
+import React12 from "react";
+import { Fragment as Fragment3, jsx as jsx315, jsxs as jsxs201 } from "react/jsx-runtime";
+var DayCell2 = React12.memo(
   ({
     day,
     disabled,
@@ -2887,7 +3052,7 @@ var DayCell2 = React10.memo(
     isEnd,
     inRange,
     onSelect
-  }) => /* @__PURE__ */ jsx313(
+  }) => /* @__PURE__ */ jsx315(
     "button",
     {
       type: "button",
@@ -2929,26 +3094,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = React10.useState("days");
-  const [yearRangeStart, setYearRangeStart] = React10.useState(
+  const [pickerMode, setPickerMode] = React12.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React12.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = React10.useMemo(
+  const minTime = React12.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = React10.useMemo(
+  const maxTime = React12.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = React10.useMemo(() => {
+  const highlightSet = React12.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = React10.useCallback(
+  const handleSelect = React12.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -2985,20 +3150,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__ */ jsxs200(
+  return /* @__PURE__ */ jsxs201(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
       children: [
-        /* @__PURE__ */ jsxs200("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ jsx313("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ jsx313(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ jsx313("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ jsx313("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ jsx313(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ jsxs201("div", { className: "datepicker-header", children: [
+          /* @__PURE__ */ jsx315("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ jsx315(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ jsx315("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ jsx315("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ jsx315(ChevronRightIcon_default, {}) })
         ] }),
-        /* @__PURE__ */ jsxs200("div", { className: "datepicker-body", children: [
-          pickerMode === "years" && /* @__PURE__ */ jsx313("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+        /* @__PURE__ */ jsxs201("div", { className: "datepicker-body", children: [
+          pickerMode === "years" && /* @__PURE__ */ jsx315("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
             const y = yearRangeStart + i;
-            return /* @__PURE__ */ jsx313(
+            return /* @__PURE__ */ jsx315(
               "button",
               {
                 type: "button",
@@ -3009,7 +3174,7 @@ var SingleDatePicker = (props) => {
               y
             );
           }) }),
-          pickerMode === "months" && /* @__PURE__ */ jsx313("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx313(
+          pickerMode === "months" && /* @__PURE__ */ jsx315("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx315(
             "button",
             {
               type: "button",
@@ -3019,8 +3184,8 @@ var SingleDatePicker = (props) => {
             },
             i
           )) }),
-          pickerMode === "days" && /* @__PURE__ */ jsxs200(Fragment3, { children: [
-            /* @__PURE__ */ jsx313("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx313(
+          pickerMode === "days" && /* @__PURE__ */ jsxs201(Fragment3, { children: [
+            /* @__PURE__ */ jsx315("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx315(
               "div",
               {
                 className: clsx_default(
@@ -3032,7 +3197,7 @@ var SingleDatePicker = (props) => {
               },
               label
             )) }),
-            /* @__PURE__ */ jsx313("div", { className: "datepicker-grid", children: days.map((day, idx) => {
+            /* @__PURE__ */ jsx315("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;
@@ -3042,7 +3207,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__ */ jsx313(
+              return /* @__PURE__ */ jsx315(
                 DayCell2,
                 {
                   day,
@@ -3067,7 +3232,7 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-import { jsx as jsx314, jsxs as jsxs201 } from "react/jsx-runtime";
+import { jsx as jsx316, jsxs as jsxs202 } from "react/jsx-runtime";
 var formatDate = (date) => {
   if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
@@ -3077,8 +3242,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = React11.useState(false);
-  const [tempDate, setTempDate] = React11.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = React13.useState(false);
+  const [tempDate, setTempDate] = React13.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -3094,19 +3259,19 @@ var InputDatePicker = (props) => {
   const handleClose = () => {
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs201("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
-    /* @__PURE__ */ jsx314("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ jsx314(
+  return /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
+    /* @__PURE__ */ jsx316("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ jsx316(
       Input_default,
       {
         value: formatDate(value),
         placeholder,
-        suffix: /* @__PURE__ */ jsx314(CalenderIcon_default, {}),
+        suffix: /* @__PURE__ */ jsx316(CalenderIcon_default, {}),
         disabled,
         readOnly: true
       }
     ) }),
-    /* @__PURE__ */ jsx314(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs201("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ jsx314("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ jsx314(
+    /* @__PURE__ */ jsx316(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs202("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ jsx316("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ jsx316(
         SingleDatePicker_default,
         {
           value: tempDate,
@@ -3116,9 +3281,9 @@ var InputDatePicker = (props) => {
           locale
         }
       ) }),
-      /* @__PURE__ */ jsxs201("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ jsx314(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
-        /* @__PURE__ */ jsx314(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+      /* @__PURE__ */ jsxs202("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ jsx316(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
+        /* @__PURE__ */ jsx316(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3127,20 +3292,20 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React15 from "react";
+import React17 from "react";
 
 // src/components/DatePicker/RangePicker/index.tsx
-import React14 from "react";
+import React16 from "react";
 
 // src/components/Tab/Tab.tsx
-import React13 from "react";
+import React15 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React12 from "react";
-import { jsx as jsx315 } from "react/jsx-runtime";
-var TabItem = React12.forwardRef((props, ref) => {
+import React14 from "react";
+import { jsx as jsx317 } from "react/jsx-runtime";
+var TabItem = React14.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ jsx315(
+  return /* @__PURE__ */ jsx317(
     "div",
     {
       ref,
@@ -3154,25 +3319,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-import { jsx as jsx316, jsxs as jsxs202 } from "react/jsx-runtime";
+import { jsx as jsx318, jsxs as jsxs203 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = React13.useState({
+  const [underlineStyle, setUnderlineStyle] = React15.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React13.useRef([]);
+  const itemRefs = React15.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React13.useEffect(() => {
+  React15.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ jsx316(
+  return /* @__PURE__ */ jsxs203("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ jsx318(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -3184,7 +3349,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx316(
+    type === "toggle" && /* @__PURE__ */ jsx318(
       "div",
       {
         className: "tab-toggle-underline",
@@ -3200,7 +3365,7 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/DatePicker/RangePicker/index.tsx
-import { jsx as jsx317, jsxs as jsxs203 } from "react/jsx-runtime";
+import { jsx as jsx319, jsxs as jsxs204 } from "react/jsx-runtime";
 var RangePicker = (props) => {
   const {
     startDate,
@@ -3210,7 +3375,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = React14.useState("start");
+  const [activeTab, setActiveTab] = React16.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -3223,8 +3388,8 @@ var RangePicker = (props) => {
   };
   const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
   const endMinDate = minDate && startDate > minDate ? startDate : startDate;
-  return /* @__PURE__ */ jsxs203("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
-    /* @__PURE__ */ jsx317("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ jsx317(
+  return /* @__PURE__ */ jsxs204("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
+    /* @__PURE__ */ jsx319("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ jsx319(
       Tab_default,
       {
         activeIndex: activeTab === "start" ? 0 : 1,
@@ -3237,8 +3402,8 @@ var RangePicker = (props) => {
         size: "sm"
       }
     ) }),
-    /* @__PURE__ */ jsxs203("div", { className: "datepicker-range-panels", children: [
-      /* @__PURE__ */ jsx317(
+    /* @__PURE__ */ jsxs204("div", { className: "datepicker-range-panels", children: [
+      /* @__PURE__ */ jsx319(
         SingleDatePicker_default,
         {
           value: startDate,
@@ -3250,7 +3415,7 @@ var RangePicker = (props) => {
           locale
         }
       ),
-      /* @__PURE__ */ jsx317(
+      /* @__PURE__ */ jsx319(
         SingleDatePicker_default,
         {
           value: endDate,
@@ -3263,7 +3428,7 @@ var RangePicker = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx317("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ jsx317(
+    /* @__PURE__ */ jsx319("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ jsx319(
       SingleDatePicker_default,
       {
         value: startDate,
@@ -3274,7 +3439,7 @@ var RangePicker = (props) => {
         rangeEnd: endDate,
         locale
       }
-    ) : /* @__PURE__ */ jsx317(
+    ) : /* @__PURE__ */ jsx319(
       SingleDatePicker_default,
       {
         value: endDate,
@@ -3292,10 +3457,10 @@ RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import { jsx as jsx318, jsxs as jsxs204 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs205 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = React15.useState(false);
+  const [isOpen, setIsOpen] = React17.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -3303,11 +3468,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ jsxs204("div", { className: "lib-xplat-popup-datepicker", children: [
-    React15.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ jsx318(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs204("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
-      /* @__PURE__ */ jsxs204("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ jsx318(
+  return /* @__PURE__ */ jsxs205("div", { className: "lib-xplat-popup-datepicker", children: [
+    React17.cloneElement(component, { onClick: handleClick }),
+    /* @__PURE__ */ jsx320(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs205("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
+      /* @__PURE__ */ jsxs205("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ jsx320(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -3317,7 +3482,7 @@ var PopupPicker = (props) => {
             locale
           }
         ),
-        type === "range" && /* @__PURE__ */ jsx318(
+        type === "range" && /* @__PURE__ */ jsx320(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -3329,8 +3494,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs204("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ jsx318(
+      /* @__PURE__ */ jsxs205("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ jsx320(
           Button_default,
           {
             type: "secondary",
@@ -3338,7 +3503,7 @@ var PopupPicker = (props) => {
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx318(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+        /* @__PURE__ */ jsx320(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3347,10 +3512,10 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/Divider/Divider.tsx
-import { jsx as jsx319 } from "react/jsx-runtime";
+import { jsx as jsx321 } from "react/jsx-runtime";
 var Divider = (props) => {
   const { orientation = "horizontal" } = props;
-  return /* @__PURE__ */ jsx319(
+  return /* @__PURE__ */ jsx321(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation),
@@ -3363,15 +3528,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-import React16 from "react";
+import React18 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx320, jsxs as jsxs205 } from "react/jsx-runtime";
+import { jsx as jsx322, jsxs as jsxs206 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = React16.useState(false);
-  const [visible, setVisible] = React16.useState(false);
-  React16.useEffect(() => {
+  const [mounted, setMounted] = React18.useState(false);
+  const [visible, setVisible] = React18.useState(false);
+  React18.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3385,12 +3550,12 @@ var Drawer = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return createPortal2(
-    /* @__PURE__ */ jsx320(
+    /* @__PURE__ */ jsx322(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsxs205(
+        children: /* @__PURE__ */ jsxs206(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
@@ -3398,11 +3563,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ jsxs205("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ jsx320("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ jsx320("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              title && /* @__PURE__ */ jsxs206("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ jsx322("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ jsx322("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
               ] }),
-              /* @__PURE__ */ jsx320("div", { className: "drawer-body", children })
+              /* @__PURE__ */ jsx322("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -3415,22 +3580,23 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-import React19 from "react";
+import React21 from "react";
 
 // src/tokens/hooks/useAutoPosition.ts
-import React17 from "react";
+import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React17.useState({
+  const [position, setPosition] = React19.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React17.useCallback(() => {
+  const calculatePosition = React19.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -3450,13 +3616,21 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React17.useLayoutEffect(() => {
+  React19.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
+  React19.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -3470,9 +3644,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React18 from "react";
+import React20 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -3495,17 +3669,17 @@ var useClickOutside = (refs, handler, enabled = true) => {
 var useClickOutside_default = useClickOutside;
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx321, jsxs as jsxs206 } from "react/jsx-runtime";
+import { jsx as jsx323, jsxs as jsxs207 } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React19.useState(false);
-  const [mounted, setMounted] = React19.useState(false);
-  const [visible, setVisible] = React19.useState(false);
-  const triggerRef = React19.useRef(null);
-  const menuRef = React19.useRef(null);
+  const [isOpen, setIsOpen] = React21.useState(false);
+  const [mounted, setMounted] = React21.useState(false);
+  const [visible, setVisible] = React21.useState(false);
+  const triggerRef = React21.useRef(null);
+  const menuRef = React21.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3520,8 +3694,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs206("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ jsx321(
+  return /* @__PURE__ */ jsxs207("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ jsx323(
       "div",
       {
         ref: triggerRef,
@@ -3530,14 +3704,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ jsx321(Portal_default, { children: /* @__PURE__ */ jsx321(
+    mounted && /* @__PURE__ */ jsx323(Portal_default, { children: /* @__PURE__ */ jsx323(
       "div",
       {
         ref: menuRef,
         className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ jsx321(
+        children: items.map((item) => /* @__PURE__ */ jsx323(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -3559,23 +3733,23 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx322, jsxs as jsxs207 } from "react/jsx-runtime";
+import { jsx as jsx324, jsxs as jsxs208 } from "react/jsx-runtime";
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
-  return /* @__PURE__ */ jsxs207("div", { className: "lib-xplat-empty-state", children: [
-    icon && /* @__PURE__ */ jsx322("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ jsx322("div", { className: "empty-icon", children: /* @__PURE__ */ jsx322("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx322("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__ */ jsx322("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ jsx322("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ jsx322("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ jsxs208("div", { className: "lib-xplat-empty-state", children: [
+    icon && /* @__PURE__ */ jsx324("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ jsx324("div", { className: "empty-icon", children: /* @__PURE__ */ jsx324("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx324("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ jsx324("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ jsx324("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ jsx324("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-import React20 from "react";
-import { jsx as jsx323, jsxs as jsxs208 } from "react/jsx-runtime";
+import React22 from "react";
+import { jsx as jsx325, jsxs as jsxs209 } from "react/jsx-runtime";
 var FileUpload = (props) => {
   const {
     accept,
@@ -3585,8 +3759,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] = React20.useState(false);
-  const inputRef = React20.useRef(null);
+  const [isDragOver, setIsDragOver] = React22.useState(false);
+  const inputRef = React22.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -3616,7 +3790,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ jsxs208(
+  return /* @__PURE__ */ jsxs209(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -3625,7 +3799,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ jsx323(
+        /* @__PURE__ */ jsx325(
           "input",
           {
             ref: inputRef,
@@ -3635,9 +3809,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ jsx323("div", { className: "upload-icon", children: /* @__PURE__ */ jsx323(UploadIcon_default, {}) }),
-        /* @__PURE__ */ jsx323("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ jsx323("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ jsx325("div", { className: "upload-icon", children: /* @__PURE__ */ jsx325(UploadIcon_default, {}) }),
+        /* @__PURE__ */ jsx325("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ jsx325("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -3646,10 +3820,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import React22 from "react";
+import React24 from "react";
 
 // src/components/HtmlTypeWriter/utils.ts
-import React21 from "react";
+import React23 from "react";
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -3717,41 +3891,41 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return React21.createElement(tag, props);
+    return React23.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return React21.createElement(tag, props, ...children);
+  return React23.createElement(tag, props, ...children);
 };
 var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : React21.createElement(React21.Fragment, { key: idx }, node);
+    return node == null ? null : React23.createElement(React23.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import { jsx as jsx324 } from "react/jsx-runtime";
+import { jsx as jsx326 } from "react/jsx-runtime";
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = React22.useState(0);
-  const doneCalledRef = React22.useRef(false);
-  const { doc, rangeMap, totalLength } = React22.useMemo(() => {
+  const [typedLen, setTypedLen] = React24.useState(0);
+  const doneCalledRef = React24.useRef(false);
+  const { doc, rangeMap, totalLength } = React24.useMemo(() => {
     if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -3759,33 +3933,33 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = React22.useMemo(
+  const parsed = React24.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ jsx324("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ jsx326("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-import React23 from "react";
-import { jsx as jsx325, jsxs as jsxs209 } from "react/jsx-runtime";
+import React25 from "react";
+import { jsx as jsx327, jsxs as jsxs210 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = React23.useState();
-  React23.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = React25.useState();
+  React25.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -3794,7 +3968,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = React23.useRef(null);
+  const inputRef = React25.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -3807,8 +3981,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs209("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ jsx325(
+  return /* @__PURE__ */ jsxs210("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ jsx327(
       "input",
       {
         type: "file",
@@ -3818,13 +3992,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ jsxs209("div", { className: "action-bar", children: [
-      /* @__PURE__ */ jsx325("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx325(UploadIcon_default, {}) }),
-      /* @__PURE__ */ jsx325("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx325(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ jsxs210("div", { className: "action-bar", children: [
+      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx327(UploadIcon_default, {}) }),
+      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx327(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ jsx325("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx325("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs209("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ jsx325("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx325(ImageIcon_default, {}) }),
-      /* @__PURE__ */ jsx325("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ jsx327("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx327("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs210("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx327(ImageIcon_default, {}) }),
+      /* @__PURE__ */ jsx327("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -3832,7 +4006,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx326, jsxs as jsxs210 } from "react/jsx-runtime";
+import { jsx as jsx328, jsxs as jsxs211 } from "react/jsx-runtime";
 var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -3875,19 +4049,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ jsxs210("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ jsx326(
+  return /* @__PURE__ */ jsxs211("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ jsx328(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx326(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ jsx328(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ jsx326("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx326(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx328("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx328(
         "button",
         {
           className: clsx_default("page-btn", { active: page === current }),
@@ -3898,14 +4072,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ jsx326(
+    /* @__PURE__ */ jsx328(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx326(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ jsx328(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -3914,17 +4088,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-import React24 from "react";
-import { jsx as jsx327, jsxs as jsxs211 } from "react/jsx-runtime";
+import React26 from "react";
+import { jsx as jsx329, jsxs as jsxs212 } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React24.useRef(null);
-  const triggerRef = React24.useRef(null);
-  const [localOpen, setLocalOpen] = React24.useState(false);
-  const [eventTrigger, setEventTrigger] = React24.useState(false);
+  const popRef = React26.useRef(null);
+  const triggerRef = React26.useRef(null);
+  const [localOpen, setLocalOpen] = React26.useState(false);
+  const [eventTrigger, setEventTrigger] = React26.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React24.useEffect(() => {
+  React26.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -3937,7 +4111,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs211(
+  return /* @__PURE__ */ jsxs212(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -3947,7 +4121,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx327(Portal_default, { children: /* @__PURE__ */ jsx327(
+        localOpen && /* @__PURE__ */ jsx329(Portal_default, { children: /* @__PURE__ */ jsx329(
           "div",
           {
             className: clsx_default(
@@ -3970,7 +4144,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-import { jsx as jsx328, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx330, jsxs as jsxs213 } from "react/jsx-runtime";
 var Progress = (props) => {
   const {
     value,
@@ -3980,8 +4154,8 @@ var Progress = (props) => {
     showLabel = false
   } = props;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs212("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
-    /* @__PURE__ */ jsx328(
+  return /* @__PURE__ */ jsxs213("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+    /* @__PURE__ */ jsx330(
       "div",
       {
         className: "track",
@@ -3989,7 +4163,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx328(
+        children: /* @__PURE__ */ jsx330(
           "div",
           {
             className: "bar",
@@ -3998,7 +4172,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ jsxs212("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ jsxs213("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -4008,17 +4182,17 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-import React25 from "react";
-var RadioGroupContext = React25.createContext(
+import React27 from "react";
+var RadioGroupContext = React27.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return React25.useContext(RadioGroupContext);
+  return React27.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx329, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx331, jsxs as jsxs214 } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
@@ -4036,7 +4210,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ jsxs213(
+  return /* @__PURE__ */ jsxs214(
     "label",
     {
       className: clsx_default(
@@ -4046,18 +4220,18 @@ var Radio = (props) => {
         localChecked ? "checked" : void 0
       ),
       children: [
-        /* @__PURE__ */ jsx329("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ jsx329(
+        /* @__PURE__ */ jsx331("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ jsx331(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ jsx329("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ jsx331("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ jsx329("span", { children: label })
+        label && /* @__PURE__ */ jsx331("span", { children: label })
       ]
     }
   );
@@ -4066,28 +4240,28 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-import { Fragment as Fragment4, jsx as jsx330 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx332 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx330(Fragment4, { children: /* @__PURE__ */ jsx330(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ jsx332(Fragment4, { children: /* @__PURE__ */ jsx332(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-import React28 from "react";
+import React30 from "react";
 
 // src/components/Select/context.ts
-import React26 from "react";
-var SelectContext = React26.createContext(null);
+import React28 from "react";
+var SelectContext = React28.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-import React27 from "react";
-import { jsx as jsx331 } from "react/jsx-runtime";
+import React29 from "react";
+import { jsx as jsx333 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = React27.useContext(context_default);
+  const ctx = React29.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -4096,7 +4270,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ jsx331(
+  return /* @__PURE__ */ jsx333(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled"),
@@ -4117,7 +4291,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-import { jsx as jsx332, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx334, jsxs as jsxs215 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -4129,26 +4303,26 @@ var SelectRoot = (props) => {
     error = false,
     size = "md"
   } = props;
-  const itemChildren = React28.Children.toArray(children).filter(
-    (child) => React28.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = React30.Children.toArray(children).filter(
+    (child) => React30.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = React28.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = React28.useState(null);
-  const controlledLabel = React28.useMemo(() => {
+  const [isOpen, setOpen] = React30.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = React30.useState(null);
+  const controlledLabel = React30.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
-  const triggerRef = React28.useRef(null);
-  const contentRef = React28.useRef(null);
-  const [mounted, setMounted] = React28.useState(false);
-  const [visible, setVisible] = React28.useState(false);
-  React28.useEffect(() => {
+  const triggerRef = React30.useRef(null);
+  const contentRef = React30.useRef(null);
+  const [mounted, setMounted] = React30.useState(false);
+  const [visible, setVisible] = React30.useState(false);
+  React30.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React28.useEffect(() => {
+  React30.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -4158,12 +4332,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = React28.useCallback(() => setOpen(true), []);
-  const close = React28.useCallback(() => setOpen(false), []);
-  const toggle = React28.useCallback(() => setOpen((prev) => !prev), []);
+  const open = React30.useCallback(() => setOpen(true), []);
+  const close = React30.useCallback(() => setOpen(false), []);
+  const toggle = React30.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = React28.useCallback(
+  const setSelected = React30.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -4172,7 +4346,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = React28.useMemo(
+  const ctxValue = React30.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -4193,7 +4367,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx332(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs214(
+  return /* @__PURE__ */ jsx334(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs215(
     "div",
     {
       className: clsx_default(
@@ -4204,7 +4378,7 @@ var SelectRoot = (props) => {
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ jsxs214(
+        /* @__PURE__ */ jsxs215(
           "div",
           {
             ref: triggerRef,
@@ -4228,7 +4402,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ jsx332(
+              /* @__PURE__ */ jsx334(
                 "span",
                 {
                   className: clsx_default(
@@ -4238,25 +4412,25 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ jsx332(
+              /* @__PURE__ */ jsx334(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx332(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ jsx334(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ jsx332(Portal_default, { children: /* @__PURE__ */ jsx332(
+        mounted && /* @__PURE__ */ jsx334(Portal_default, { children: /* @__PURE__ */ jsx334(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
-            children: /* @__PURE__ */ jsx332(context_default.Provider, { value: ctxValue, children: itemChildren })
+            children: /* @__PURE__ */ jsx334(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
         ) })
       ]
@@ -4270,7 +4444,7 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx335 } from "react/jsx-runtime";
 var SIZE_MAP = {
   xs: "var(--spacing-size-1)",
   sm: "var(--spacing-size-2)",
@@ -4286,7 +4460,7 @@ var Skeleton = (props) => {
     ...width != null && { width: SIZE_MAP[width] },
     ...height != null && { height: SIZE_MAP[height] }
   };
-  return /* @__PURE__ */ jsx333(
+  return /* @__PURE__ */ jsx335(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant),
@@ -4299,20 +4473,20 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx334, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx336, jsxs as jsxs216 } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
     type = "brand"
   } = props;
-  return /* @__PURE__ */ jsx334(
+  return /* @__PURE__ */ jsx336(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ jsxs215("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx334(
+      children: /* @__PURE__ */ jsxs216("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx336(
           "circle",
           {
             className: "track",
@@ -4322,7 +4496,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ jsx334(
+        /* @__PURE__ */ jsx336(
           "circle",
           {
             className: "indicator",
@@ -4341,20 +4515,20 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-import { jsx as jsx335, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx337, jsxs as jsxs217 } from "react/jsx-runtime";
 var Steps = (props) => {
   const {
     items,
     current,
     type = "brand"
   } = props;
-  return /* @__PURE__ */ jsx335("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx337("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ jsxs216("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ jsx335("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx335(CheckIcon_default, {}) : /* @__PURE__ */ jsx335("span", { children: index + 1 }) }),
-      /* @__PURE__ */ jsxs216("div", { className: "step-content", children: [
-        /* @__PURE__ */ jsx335("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ jsx335("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ jsxs217("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ jsx337("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx337(CheckIcon_default, {}) : /* @__PURE__ */ jsx337("span", { children: index + 1 }) }),
+      /* @__PURE__ */ jsxs217("div", { className: "step-content", children: [
+        /* @__PURE__ */ jsx337("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ jsx337("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -4363,8 +4537,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-import React29 from "react";
-import { jsx as jsx336, jsxs as jsxs217 } from "react/jsx-runtime";
+import React31 from "react";
+import { jsx as jsx338, jsxs as jsxs218 } from "react/jsx-runtime";
 var Swiper = (props) => {
   const {
     auto = false,
@@ -4387,23 +4561,23 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = React29.useMemo(() => {
+  const extendedItems = React31.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = React29.useState(
+  const [innerIndex, setInnerIndex] = React31.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = React29.useState(false);
-  const [dragOffset, setDragOffset] = React29.useState(0);
-  const [animated, setAnimated] = React29.useState(true);
-  const [containerWidth, setContainerWidth] = React29.useState(0);
-  const containerRef = React29.useRef(null);
-  const startXRef = React29.useRef(0);
-  const startTimeRef = React29.useRef(0);
-  const autoplayTimerRef = React29.useRef(null);
-  React29.useEffect(() => {
+  const [isDragging, setIsDragging] = React31.useState(false);
+  const [dragOffset, setDragOffset] = React31.useState(0);
+  const [animated, setAnimated] = React31.useState(true);
+  const [containerWidth, setContainerWidth] = React31.useState(0);
+  const containerRef = React31.useRef(null);
+  const startXRef = React31.useRef(0);
+  const startTimeRef = React31.useRef(0);
+  const autoplayTimerRef = React31.useRef(null);
+  React31.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -4422,7 +4596,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = React29.useCallback(
+  const moveToInner = React31.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -4450,7 +4624,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = React29.useCallback(() => {
+  const handleTransitionEnd = React31.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -4460,7 +4634,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = React29.useCallback(
+  const slideTo = React31.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -4470,7 +4644,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = React29.useCallback(() => {
+  const slideNext = React31.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -4479,7 +4653,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = React29.useCallback(() => {
+  const slidePrev = React31.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -4488,7 +4662,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -4496,12 +4670,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  React29.useImperativeHandle(swiperRef, () => ({
+  React31.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (!auto || !canSlide) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -4524,7 +4698,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -4562,8 +4736,8 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = React29.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx336(
+  const slideElements = React31.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx338(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -4582,14 +4756,14 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ jsxs217("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsxs218("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ jsx338(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
-        children: /* @__PURE__ */ jsx336(
+        children: /* @__PURE__ */ jsx338(
           "div",
           {
             className: clsx_default(
@@ -4607,7 +4781,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ jsx336("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx336("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx336(
+    showProgress && canSlide && /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx338(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -4617,7 +4791,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ jsx336("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx336(
+    canSlide && /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx338(
       "button",
       {
         className: clsx_default(
@@ -4635,8 +4809,8 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-import React30 from "react";
-import { jsx as jsx337 } from "react/jsx-runtime";
+import React32 from "react";
+import { jsx as jsx339 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -4646,9 +4820,9 @@ var Switch = (props) => {
     disabled,
     onChange
   } = props;
-  const [isAnimating, setIsAnimating] = React30.useState(false);
-  const timeoutRef = React30.useRef(null);
-  React30.useEffect(() => {
+  const [isAnimating, setIsAnimating] = React32.useState(false);
+  const timeoutRef = React32.useRef(null);
+  React32.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -4663,7 +4837,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ jsx337(
+  return /* @__PURE__ */ jsx339(
     "div",
     {
       className: clsx_default(
@@ -4676,7 +4850,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ jsx337("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ jsx339("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -4684,26 +4858,27 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-import React31 from "react";
-var TableContext = React31.createContext(null);
+import React33 from "react";
+var TableContext = React33.createContext(null);
 var useTableContext = () => {
-  const ctx = React31.useContext(TableContext);
+  const ctx = React33.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx338 } from "react/jsx-runtime";
+import { jsx as jsx340 } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     children,
+    size = "md",
     rowBorderUse = true,
     colBorderUse = true,
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx338("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ jsx338(
+  return /* @__PURE__ */ jsx340("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx340(
     TableContext_default.Provider,
     {
       value: {
@@ -4712,7 +4887,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ jsx338("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ jsx340("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -4720,41 +4895,41 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx339 } from "react/jsx-runtime";
+import { jsx as jsx341 } from "react/jsx-runtime";
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx339("tbody", { children });
+  return /* @__PURE__ */ jsx341("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-import React34 from "react";
+import React36 from "react";
 
 // src/components/Table/TableHeadContext.tsx
-import React32 from "react";
-var TableHeadContext = React32.createContext(
+import React34 from "react";
+var TableHeadContext = React34.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = React32.useContext(TableHeadContext);
+  const ctx = React34.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-import React33 from "react";
-var TableRowContext = React33.createContext(null);
+import React35 from "react";
+var TableRowContext = React35.createContext(null);
 var useTableRowContext = () => {
-  const ctx = React33.useContext(TableRowContext);
+  const ctx = React35.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-import { jsx as jsx340 } from "react/jsx-runtime";
-var TableCell = React34.memo((props) => {
+import { jsx as jsx342 } from "react/jsx-runtime";
+var TableCell = React36.memo((props) => {
   const {
     children,
     align = "center",
@@ -4766,9 +4941,9 @@ var TableCell = React34.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = React34.useState(0);
-  const cellRef = React34.useRef(null);
-  const calculateLeft = React34.useCallback(() => {
+  const [left, setLeft] = React36.useState(0);
+  const cellRef = React36.useRef(null);
+  const calculateLeft = React36.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -4777,7 +4952,7 @@ var TableCell = React34.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -4795,7 +4970,7 @@ var TableCell = React34.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__ */ jsx340(
+  return /* @__PURE__ */ jsx342(
     CellTag,
     {
       ref: cellRef,
@@ -4820,21 +4995,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-import { jsx as jsx341 } from "react/jsx-runtime";
+import { jsx as jsx343 } from "react/jsx-runtime";
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ jsx341(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx341("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ jsx343(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx343("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-import React35 from "react";
-import { jsx as jsx342 } from "react/jsx-runtime";
-var TableRow = React35.memo((props) => {
+import React37 from "react";
+import { jsx as jsx344 } from "react/jsx-runtime";
+var TableRow = React37.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -4842,14 +5017,14 @@ var TableRow = React35.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = React35.useState([]);
+  const [stickyCells, setStickyCells] = React37.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ jsx342(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx342(
+  return /* @__PURE__ */ jsx344(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx344(
     "tr",
     {
       className: clsx_default(
@@ -4867,7 +5042,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx343, jsxs as jsxs218 } from "react/jsx-runtime";
+import { jsx as jsx345, jsxs as jsxs219 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
@@ -4877,7 +5052,7 @@ var Tag = (props) => {
     disabled = false,
     colorIndex
   } = props;
-  return /* @__PURE__ */ jsxs218(
+  return /* @__PURE__ */ jsxs219(
     "span",
     {
       className: clsx_default(
@@ -4888,8 +5063,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ jsx343("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ jsx343("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx343(XIcon_default, {}) })
+        /* @__PURE__ */ jsx345("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ jsx345("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx345(XIcon_default, {}) })
       ]
     }
   );
@@ -4897,83 +5072,26 @@ var Tag = (props) => {
 Tag.displayName = "Tag";
 var Tag_default = Tag;
 
-// src/components/TextArea/TextArea.tsx
-import React36 from "react";
-import { jsx as jsx344 } from "react/jsx-runtime";
-var TextArea = React36.forwardRef(
-  (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
-    const localRef = React36.useRef(null);
-    const setRefs = (el) => {
-      localRef.current = el;
-      if (!ref) return;
-      if (typeof ref === "function") {
-        ref(el);
-      } else if (ref && typeof ref === "object" && "current" in ref) {
-        ref.current = el;
-      }
-    };
-    const handleOnChange = (e) => {
-      const val = e.target.value;
-      if (onChange) {
-        const event = {
-          ...e,
-          target: { value: val }
-        };
-        onChange(event);
-      }
-    };
-    React36.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__ */ jsx344("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx344(
-      "div",
-      {
-        className: clsx_default(
-          "lib-xplat-textarea",
-          disabled ? "disabled" : void 0
-        ),
-        children: /* @__PURE__ */ jsx344(
-          "textarea",
-          {
-            ...textareaProps,
-            ref: setRefs,
-            disabled,
-            value,
-            onChange: handleOnChange
-          }
-        )
-      }
-    ) });
-  }
-);
-TextArea.displayName = "TextArea";
-var TextArea_default = TextArea;
-
 // src/components/Toast/Toast.tsx
-import React37 from "react";
+import React38 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx345, jsxs as jsxs219 } from "react/jsx-runtime";
-var ToastContext = React37.createContext(null);
+import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
+var ToastContext = React38.createContext(null);
 var useToast = () => {
-  const ctx = React37.useContext(ToastContext);
+  const ctx = React38.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 = React37.useRef(null);
-  const [height, setHeight] = React37.useState(void 0);
-  React37.useEffect(() => {
+  const ref = React38.useRef(null);
+  const [height, setHeight] = React38.useState(void 0);
+  React38.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ jsx345(
+  return /* @__PURE__ */ jsx346(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -4981,15 +5099,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ jsxs219(
+      children: /* @__PURE__ */ jsxs220(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx345("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ jsx345("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ jsx346("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx346("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -5000,13 +5118,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = React37.useState([]);
-  const [removing, setRemoving] = React37.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = React37.useState(false);
-  React37.useEffect(() => {
+  const [toasts, setToasts] = React38.useState([]);
+  const [removing, setRemoving] = React38.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React38.useState(false);
+  React38.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = React37.useCallback((id) => {
+  const remove = React38.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -5017,7 +5135,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = React37.useCallback(
+  const toast = React38.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -5027,10 +5145,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ jsxs219(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ jsxs220(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && createPortal3(
-      /* @__PURE__ */ jsx345("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx345(
+      /* @__PURE__ */ jsx346("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx346(
         ToastItemComponent,
         {
           item: t,
@@ -5046,29 +5164,29 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import React38 from "react";
-import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
+import React39 from "react";
+import { jsx as jsx347, jsxs as jsxs221 } from "react/jsx-runtime";
 var Tooltip = (props) => {
   const {
     type = "primary",
     description,
     children
   } = props;
-  const iconRef = React38.useRef(null);
-  return /* @__PURE__ */ jsxs220("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ jsx346("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ jsx346("div", { className: clsx_default("tooltip-wrapper", type), children: description })
+  const iconRef = React39.useRef(null);
+  return /* @__PURE__ */ jsxs221("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ jsx347("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ jsx347("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-import React39 from "react";
-import { jsx as jsx347, jsxs as jsxs221 } from "react/jsx-runtime";
-var PipIcon = () => /* @__PURE__ */ jsxs221("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__ */ jsx347("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ jsx347("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+import React40 from "react";
+import { jsx as jsx348, jsxs as jsxs222 } from "react/jsx-runtime";
+var PipIcon = () => /* @__PURE__ */ jsxs222("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx348("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx348("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";
@@ -5076,7 +5194,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = React39.forwardRef((props, ref) => {
+var Video = React40.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -5100,21 +5218,21 @@ var Video = React39.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const containerRef = React39.useRef(null);
-  const videoRef = React39.useRef(null);
-  const [isPlaying, setIsPlaying] = React39.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = React39.useState(false);
-  const [currentTime, setCurrentTime] = React39.useState(0);
-  const [duration, setDuration] = React39.useState(0);
-  const [buffered, setBuffered] = React39.useState(0);
-  const [volume, setVolume] = React39.useState(1);
-  const [isMuted, setIsMuted] = React39.useState(Boolean(muted));
-  const [isFullscreen, setIsFullscreen] = React39.useState(false);
-  const [playbackRate, setPlaybackRate] = React39.useState(1);
-  const [rateMenuOpen, setRateMenuOpen] = React39.useState(false);
-  const [captionsOn, setCaptionsOn] = React39.useState(false);
-  const [isPip, setIsPip] = React39.useState(false);
-  const setRefs = React39.useCallback(
+  const containerRef = React40.useRef(null);
+  const videoRef = React40.useRef(null);
+  const [isPlaying, setIsPlaying] = React40.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React40.useState(false);
+  const [currentTime, setCurrentTime] = React40.useState(0);
+  const [duration, setDuration] = React40.useState(0);
+  const [buffered, setBuffered] = React40.useState(0);
+  const [volume, setVolume] = React40.useState(1);
+  const [isMuted, setIsMuted] = React40.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = React40.useState(false);
+  const [playbackRate, setPlaybackRate] = React40.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = React40.useState(false);
+  const [captionsOn, setCaptionsOn] = React40.useState(false);
+  const [isPip, setIsPip] = React40.useState(false);
+  const setRefs = React40.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -5122,14 +5240,14 @@ var Video = React39.forwardRef((props, ref) => {
     },
     [ref]
   );
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -5243,13 +5361,13 @@ var Video = React39.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__ */ jsxs221(
+  return /* @__PURE__ */ jsxs222(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ jsx347(
+        /* @__PURE__ */ jsx348(
           "video",
           {
             ref: setRefs,
@@ -5270,7 +5388,7 @@ var Video = React39.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ jsx347(
+        showCenterPlay && /* @__PURE__ */ jsx348(
           "button",
           {
             type: "button",
@@ -5282,11 +5400,11 @@ var Video = React39.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx347("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx347(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ jsx348("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx348(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ jsxs221("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx347(
+        showControls && /* @__PURE__ */ jsxs222("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx348(
             "input",
             {
               type: "range",
@@ -5303,29 +5421,29 @@ var Video = React39.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsxs221("div", { className: "controls-row", children: [
-            /* @__PURE__ */ jsx347(
+          /* @__PURE__ */ jsxs222("div", { className: "controls-row", children: [
+            /* @__PURE__ */ jsx348(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ jsx347(PauseIcon_default, {}) : /* @__PURE__ */ jsx347(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ jsx348(PauseIcon_default, {}) : /* @__PURE__ */ jsx348(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsxs221("div", { className: "volume-group", children: [
-              /* @__PURE__ */ jsx347(
+            /* @__PURE__ */ jsxs222("div", { className: "volume-group", children: [
+              /* @__PURE__ */ jsx348(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ jsx347(VolumeGlyph, {})
+                  children: /* @__PURE__ */ jsx348(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ jsx347(
+              /* @__PURE__ */ jsx348(
                 "input",
                 {
                   type: "range",
@@ -5340,14 +5458,14 @@ var Video = React39.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs221("span", { className: "time", children: [
+            /* @__PURE__ */ jsxs222("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ jsx347("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs221("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ jsxs221(
+            /* @__PURE__ */ jsx348("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs222("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ jsxs222(
                 "button",
                 {
                   type: "button",
@@ -5361,7 +5479,7 @@ var Video = React39.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ jsx347("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx347("li", { children: /* @__PURE__ */ jsxs221(
+              rateMenuOpen && /* @__PURE__ */ jsx348("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx348("li", { children: /* @__PURE__ */ jsxs222(
                 "button",
                 {
                   type: "button",
@@ -5375,7 +5493,7 @@ var Video = React39.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ jsx347(
+            showCaptions && /* @__PURE__ */ jsx348(
               "button",
               {
                 type: "button",
@@ -5383,37 +5501,37 @@ var Video = React39.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ jsx347(TypeIcon_default, {})
+                children: /* @__PURE__ */ jsx348(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ jsx347(
+            showPip && pipSupported && /* @__PURE__ */ jsx348(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ jsx347(PipIcon, {})
+                children: /* @__PURE__ */ jsx348(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ jsx347(
+            showDownload && /* @__PURE__ */ jsx348(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ jsx347(DownloadIcon_default, {})
+                children: /* @__PURE__ */ jsx348(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsx347(
+            /* @__PURE__ */ jsx348(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ jsx347(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx347(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ jsx348(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx348(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -5435,6 +5553,7 @@ export {
   Calendar_default as Calendar,
   CardTab_default as CardTab,
   Chart_default as Chart,
+  ChatInput_default as ChatInput,
   CheckBox_default as CheckBox,
   Chip_default as Chip,
   Divider_default as Divider,