@x-plat/design-system 0.5.20 → 0.5.22

package/dist/components/index.cjs

@@ -40,6 +40,7 @@ __export(components_exports, {
   Calendar: () => Calendar_default,
   CardTab: () => CardTab_default,
   Chart: () => Chart_default,
+  ChatInput: () => ChatInput_default,
   CheckBox: () => CheckBox_default,
   Chip: () => Chip_default,
   Divider: () => Divider_default,
@@ -475,6 +476,21 @@ var import_jsx_runtime88 = require("react/jsx-runtime");
 
 // src/tokens/svg/communication/SendIcon.tsx
 var import_jsx_runtime89 = require("react/jsx-runtime");
+var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("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__ */ (0, import_jsx_runtime89.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("clipPath", { id: "send-clip", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
+    ]
+  }
+);
+var SendIcon_default = SendIcon;
 
 // src/tokens/svg/date/CalendarIcon.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
@@ -2021,30 +2037,151 @@ var Calendar = (props) => {
 Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
 
-// src/components/Box/Box.tsx
+// src/components/ChatInput/ChatInput.tsx
+var import_react5 = __toESM(require("react"), 1);
+
+// src/components/TextArea/TextArea.tsx
+var import_react4 = __toESM(require("react"), 1);
 var import_jsx_runtime302 = require("react/jsx-runtime");
+var TextArea = import_react4.default.forwardRef(
+  (props, ref) => {
+    const { value, onChange, disabled, ...textareaProps } = props;
+    const localRef = import_react4.default.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);
+      }
+    };
+    import_react4.default.useEffect(() => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      const nextHeight = Math.min(el.scrollHeight, 400);
+      el.style.height = `${nextHeight}px`;
+    }, [value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+      "div",
+      {
+        className: clsx_default(
+          "lib-xplat-textarea",
+          disabled ? "disabled" : void 0
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: setRefs,
+            disabled,
+            value,
+            onChange: handleOnChange
+          }
+        )
+      }
+    ) });
+  }
+);
+TextArea.displayName = "TextArea";
+var TextArea_default = TextArea;
+
+// src/components/ChatInput/ChatInput.tsx
+var import_jsx_runtime303 = require("react/jsx-runtime");
+var ChatInput = import_react5.default.forwardRef(
+  (props, ref) => {
+    const {
+      placeholder,
+      value: valueProp,
+      disabled = false,
+      buttonType = "primary",
+      onSubmit,
+      onChange
+    } = props;
+    const isControlled = valueProp !== void 0;
+    const [internalValue, setInternalValue] = import_react5.default.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__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        TextArea_default,
+        {
+          ref,
+          placeholder,
+          value,
+          disabled,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        "button",
+        {
+          type: "button",
+          className: clsx_default("chat-input-send", `btn-${buttonType}`),
+          disabled: !hasText || disabled,
+          onClick: handleSubmit,
+          "aria-label": "\uC804\uC1A1",
+          children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(SendIcon_default, {})
+        }
+      )
+    ] });
+  }
+);
+ChatInput.displayName = "ChatInput";
+var ChatInput_default = ChatInput;
+
+// src/components/Box/Box.tsx
+var import_jsx_runtime304 = require("react/jsx-runtime");
 var Box = ({
   children,
   title,
   variant = "outlined",
   padding = "md"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "box-title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "box-content", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "box-content", children })
   ] });
 };
 Box.displayName = "Box";
 var Box_default = Box;
 
 // src/components/CardTab/CardTab.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 
 // src/components/CardTab/CardTabPanel.tsx
-var import_jsx_runtime303 = require("react/jsx-runtime");
+var import_jsx_runtime305 = require("react/jsx-runtime");
 var CardTabPanel = (props) => {
   const { children, columns = 3 } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
     "div",
     {
       className: "card-tab-panel",
@@ -2057,7 +2194,7 @@ CardTabPanel.displayName = "CardTab.Panel";
 var CardTabPanel_default = CardTabPanel;
 
 // src/components/CardTab/CardTab.tsx
-var import_jsx_runtime304 = require("react/jsx-runtime");
+var import_jsx_runtime306 = require("react/jsx-runtime");
 var CardTabRoot = (props) => {
   const {
     tabs,
@@ -2067,7 +2204,7 @@ var CardTabRoot = (props) => {
     children
   } = props;
   const isControlled = activeValueProp !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = import_react4.default.useState(tabs[0]?.value ?? "");
+  const [uncontrolledValue, setUncontrolledValue] = import_react6.default.useState(tabs[0]?.value ?? "");
   const activeValue = isControlled ? activeValueProp : uncontrolledValue;
   const handleTabClick = (tab) => {
     if (!isControlled) {
@@ -2075,16 +2212,16 @@ var CardTabRoot = (props) => {
     }
     onChange?.(tab);
   };
-  const panels = import_react4.default.Children.toArray(children).filter(
-    (child) => import_react4.default.isValidElement(child) && child.type === CardTabPanel_default
+  const panels = import_react6.default.Children.toArray(children).filter(
+    (child) => import_react6.default.isValidElement(child) && child.type === CardTabPanel_default
   );
   const activePanel = panels.find(
     (panel) => panel.props.value === activeValue
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "card-tab-bar", children: tabs.map((tab) => {
       const isActive = tab.value === activeValue;
-      return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
         "button",
         {
           className: clsx_default("card-tab-trigger", isActive && "active"),
@@ -2096,7 +2233,7 @@ var CardTabRoot = (props) => {
         tab.value
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "card-tab-body", children: activePanel })
+    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "card-tab-body", children: activePanel })
   ] });
 };
 CardTabRoot.displayName = "CardTab";
@@ -2106,8 +2243,8 @@ var CardTab = Object.assign(CardTabRoot, {
 var CardTab_default = CardTab;
 
 // src/components/Chart/Chart.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_jsx_runtime305 = require("react/jsx-runtime");
+var import_react7 = __toESM(require("react"), 1);
+var import_jsx_runtime307 = require("react/jsx-runtime");
 var CATEGORICAL_COUNT2 = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
   const n = i + 1;
@@ -2153,11 +2290,11 @@ var toSmoothPath = (points) => {
 };
 var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
-  const [size, setSize] = import_react5.default.useState({ width: 0, height: 0 });
-  const settleTimer = import_react5.default.useRef(0);
-  const committedSize = import_react5.default.useRef({ width: 0, height: 0 });
-  const initialRef = import_react5.default.useRef(true);
-  import_react5.default.useEffect(() => {
+  const [size, setSize] = import_react7.default.useState({ width: 0, height: 0 });
+  const settleTimer = import_react7.default.useRef(0);
+  const committedSize = import_react7.default.useRef({ width: 0, height: 0 });
+  const initialRef = import_react7.default.useRef(true);
+  import_react7.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -2199,10 +2336,10 @@ var useChartSize = (ref) => {
 };
 var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 var useChartAnimation = (containerRef, dataKey) => {
-  const [animate, setAnimate] = import_react5.default.useState(false);
-  const prevDataKey = import_react5.default.useRef(dataKey);
-  const hasAnimated = import_react5.default.useRef(false);
-  import_react5.default.useEffect(() => {
+  const [animate, setAnimate] = import_react7.default.useState(false);
+  const prevDataKey = import_react7.default.useRef(dataKey);
+  const hasAnimated = import_react7.default.useRef(false);
+  import_react7.default.useEffect(() => {
     if (prefersReducedMotion()) return;
     const el = containerRef.current;
     if (!el) return;
@@ -2218,7 +2355,7 @@ var useChartAnimation = (containerRef, dataKey) => {
     observer.observe(el);
     return () => observer.disconnect();
   }, [containerRef]);
-  import_react5.default.useEffect(() => {
+  import_react7.default.useEffect(() => {
     if (dataKey !== prevDataKey.current) {
       prevDataKey.current = dataKey;
       if (prefersReducedMotion()) return;
@@ -2229,15 +2366,15 @@ var useChartAnimation = (containerRef, dataKey) => {
   return animate || prefersReducedMotion();
 };
 var useChartTooltip = (enabled) => {
-  const [tooltip, setTooltip] = import_react5.default.useState({
+  const [tooltip, setTooltip] = import_react7.default.useState({
     visible: false,
     x: 0,
     y: 0,
     content: ""
   });
-  const containerRef = import_react5.default.useRef(null);
-  const rafRef = import_react5.default.useRef(0);
-  const move = import_react5.default.useCallback((e) => {
+  const containerRef = import_react7.default.useRef(null);
+  const rafRef = import_react7.default.useRef(0);
+  const move = import_react7.default.useCallback((e) => {
     if (!enabled) return;
     const clientX = e.clientX;
     const clientY = e.clientY;
@@ -2252,7 +2389,7 @@ var useChartTooltip = (enabled) => {
       }));
     });
   }, [enabled]);
-  const show = import_react5.default.useCallback((e, content) => {
+  const show = import_react7.default.useCallback((e, content) => {
     if (!enabled) return;
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
@@ -2263,18 +2400,18 @@ var useChartTooltip = (enabled) => {
       content
     });
   }, [enabled]);
-  const hide = import_react5.default.useCallback(() => {
+  const hide = import_react7.default.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var GridLines = import_react5.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(import_jsx_runtime305.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+var GridLines = import_react7.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_jsx_runtime307.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
   const val = Math.round(maxVal * ratio);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -2284,25 +2421,25 @@ var getLabelStep = (count, chartW) => {
   if (count <= maxLabels) return 1;
   return Math.ceil(count / maxLabels);
 };
-var AxisLabels = import_react5.default.memo(({ labels, count, chartW, height }) => {
+var AxisLabels = import_react7.default.memo(({ labels, count, chartW, height }) => {
   const step = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(import_jsx_runtime305.Fragment, { children: labels.map((label, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_jsx_runtime307.Fragment, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
-var LineChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react5.default.useMemo(() => {
+var LineChart = import_react7.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = import_react7.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react7.default.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 = import_react5.default.useMemo(
+  const seriesPoints = import_react7.default.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -2313,8 +2450,8 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
-  const lineRefs = import_react5.default.useRef([]);
-  import_react5.default.useEffect(() => {
+  const lineRefs = import_react7.default.useRef([]);
+  import_react7.default.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
       if (!el) return;
@@ -2327,9 +2464,9 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
       });
     });
   }, [animate, seriesPoints]);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(AxisLabels, { labels, count, chartW, height }),
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2338,12 +2475,12 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
       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__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+      return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             d: areaD,
@@ -2352,7 +2489,7 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
             style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "polyline",
           {
             ref: (el) => {
@@ -2364,7 +2501,7 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
             strokeWidth: "2"
           }
         ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "circle",
           {
             cx: p.x,
@@ -2383,16 +2520,16 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
   ] });
 });
 LineChart.displayName = "LineChart";
-var CurveChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react5.default.useMemo(() => {
+var CurveChart = import_react7.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = import_react7.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react7.default.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 = import_react5.default.useMemo(
+  const seriesPoints = import_react7.default.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -2403,8 +2540,8 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
-  const lineRefs = import_react5.default.useRef([]);
-  import_react5.default.useEffect(() => {
+  const lineRefs = import_react7.default.useRef([]);
+  import_react7.default.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
       if (!el) return;
@@ -2417,9 +2554,9 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
       });
     });
   }, [animate, seriesPoints]);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(AxisLabels, { labels, count, chartW, height }),
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2428,12 +2565,12 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
       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__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+      return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             d: areaPath,
@@ -2442,7 +2579,7 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
             style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             ref: (el) => {
@@ -2454,7 +2591,7 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
             strokeWidth: "2"
           }
         ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "circle",
           {
             cx: p.x,
@@ -2473,9 +2610,9 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
   ] });
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react5.default.useMemo(() => {
+var BarChart = import_react7.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = import_react7.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react7.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
@@ -2487,7 +2624,7 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, animat
   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 = import_react5.default.useMemo(
+  const bars = import_react7.default.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
         const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
@@ -2500,11 +2637,11 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, animat
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
@@ -2513,7 +2650,7 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, animat
         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__ */ (0, import_jsx_runtime305.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             d,
@@ -2534,11 +2671,11 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, animat
   ] });
 });
 BarChart.displayName = "BarChart";
-var PieDonutChart = import_react5.default.memo(
+var PieDonutChart = import_react7.default.memo(
   ({ data, labels, width, height, animate, isDoughnut, onHover, onMove, onLeave }) => {
-    const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
-    const values = import_react5.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
-    const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
+    const entries = import_react7.default.useMemo(() => Object.entries(data), [data]);
+    const values = import_react7.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
+    const total = import_react7.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
     const size = Math.min(width, height);
     const cx = size / 2;
     const cy = size / 2;
@@ -2546,8 +2683,22 @@ var PieDonutChart = import_react5.default.memo(
     const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    const sliceData = import_react5.default.useMemo(() => {
+    const maskRef = import_react7.default.useRef(null);
+    const maskR = r2 + 10;
+    const maskCircumference = 2 * Math.PI * maskR;
+    import_react7.default.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 = import_react7.default.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;
@@ -2571,45 +2722,60 @@ var PieDonutChart = import_react5.default.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__ */ (0, import_jsx_runtime305.jsx)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
-      const delay = i * 100;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
-          "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__ */ (0, import_jsx_runtime305.jsx)(
-          "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__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("mask", { id: maskId, children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+        "circle",
+        {
+          ref: maskRef,
+          cx,
+          cy,
+          r: maskR,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: maskR * 2,
+          transform: `rotate(-90 ${cx} ${cy})`
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+        "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__ */ (0, import_jsx_runtime307.jsx)(
+        "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 = import_react5.default.useRef(null);
-  const [adjustedX, setAdjustedX] = import_react5.default.useState(x);
-  import_react5.default.useEffect(() => {
+  const ref = import_react7.default.useRef(null);
+  const [adjustedX, setAdjustedX] = import_react7.default.useState(x);
+  import_react7.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -2620,7 +2786,7 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     else if (x + half > containerWidth - margin) nx = containerWidth - half - margin;
     setAdjustedX(nx);
   }, [x, containerWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
     "div",
     {
       ref,
@@ -2630,22 +2796,22 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     }
   );
 };
-var Chart = import_react5.default.memo((props) => {
+var Chart = import_react7.default.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 = import_react5.default.useMemo(() => data, [JSON.stringify(data)]);
-  const stableLabels = import_react5.default.useMemo(() => labels, [JSON.stringify(labels)]);
-  const dataKey = import_react5.default.useMemo(() => JSON.stringify(labels), [labels]);
+  const stableData = import_react7.default.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = import_react7.default.useMemo(() => labels, [JSON.stringify(labels)]);
+  const dataKey = import_react7.default.useMemo(() => JSON.stringify(labels), [labels]);
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -2658,7 +2824,7 @@ var import_tokens_core = require("@x-plat/tokens-core");
 var import_tokens_core2 = require("@x-plat/tokens-core");
 
 // src/components/CheckBox/CheckBox.tsx
-var import_jsx_runtime306 = require("react/jsx-runtime");
+var import_jsx_runtime308 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     checked,
@@ -2676,8 +2842,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
       "input",
       {
         type: "checkbox",
@@ -2687,44 +2853,44 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: "label", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: "label", children: label })
   ] });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-var import_jsx_runtime307 = require("react/jsx-runtime");
+var import_jsx_runtime309 = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
     type = "primary",
     size = "md"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // src/components/Input/Input.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
 // src/components/Input/InputValidations.tsx
-var import_jsx_runtime308 = require("react/jsx-runtime");
+var import_jsx_runtime310 = require("react/jsx-runtime");
 var InputValidations = (props) => {
   const { message, status = "default" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(ErrorIcon_default, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(ErrorIcon_default, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "message", children: message })
+    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -2765,8 +2931,8 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime309 = require("react/jsx-runtime");
-var import_react7 = require("react");
+var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_react9 = require("react");
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -2814,7 +2980,7 @@ var parseValue = (type, value) => {
       return value;
   }
 };
-var Input = import_react6.default.forwardRef((props, ref) => {
+var Input = import_react8.default.forwardRef((props, ref) => {
   const {
     value,
     onChange,
@@ -2840,13 +3006,13 @@ var Input = import_react6.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
         className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
             "input",
             {
               ...inputProps,
@@ -2857,11 +3023,11 @@ var Input = import_react6.default.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react7.createElement)(
+    validations && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react9.createElement)(
       InputValidations_default,
       {
         ...validation,
@@ -2874,20 +3040,20 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_jsx_runtime310 = require("react/jsx-runtime");
-var PasswordInput = import_react8.default.forwardRef(
+var import_react10 = __toESM(require("react"), 1);
+var import_jsx_runtime312 = require("react/jsx-runtime");
+var PasswordInput = import_react10.default.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = import_react8.default.useState(false);
+    const [isView, setIsView] = import_react10.default.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(CloseEyeIcon_default, {}) }),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CloseEyeIcon_default, {}) }),
         type: isView ? "text" : "password",
         ref
       }
@@ -2898,17 +3064,17 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 
 // src/tokens/hooks/Portal.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime311 = require("react/jsx-runtime");
-var PortalContainerContext = import_react9.default.createContext(null);
-var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(PortalContainerContext.Provider, { value: container, children });
+var import_jsx_runtime313 = require("react/jsx-runtime");
+var PortalContainerContext = import_react11.default.createContext(null);
+var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
-  const contextContainer = import_react9.default.useContext(PortalContainerContext);
+  const contextContainer = import_react11.default.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
   const container = contextContainer ?? document.body;
   return import_react_dom.default.createPortal(children, container);
@@ -2917,14 +3083,14 @@ Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime312 = require("react/jsx-runtime");
+var import_jsx_runtime314 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react10.default.useState(false);
-  const [visible, setVisible] = import_react10.default.useState(false);
-  const boxRef = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  const [mounted, setMounted] = import_react12.default.useState(false);
+  const [visible, setVisible] = import_react12.default.useState(false);
+  const boxRef = import_react12.default.useRef(null);
+  import_react12.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -2938,12 +3104,12 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
           "div",
           {
             ref: boxRef,
@@ -2951,7 +3117,7 @@ var Modal = (props) => {
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(PortalProvider, { container: boxRef.current, children })
+            children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(PortalProvider, { container: boxRef.current, children })
           }
         )
       }
@@ -2963,9 +3129,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_jsx_runtime313 = require("react/jsx-runtime");
-var DayCell2 = import_react11.default.memo(
+var import_react13 = __toESM(require("react"), 1);
+var import_jsx_runtime315 = require("react/jsx-runtime");
+var DayCell2 = import_react13.default.memo(
   ({
     day,
     disabled,
@@ -2975,7 +3141,7 @@ var DayCell2 = import_react11.default.memo(
     isEnd,
     inRange,
     onSelect
-  }) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
     "button",
     {
       type: "button",
@@ -3017,26 +3183,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = import_react11.default.useState("days");
-  const [yearRangeStart, setYearRangeStart] = import_react11.default.useState(
+  const [pickerMode, setPickerMode] = import_react13.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react13.default.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = import_react11.default.useMemo(
+  const minTime = import_react13.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = import_react11.default.useMemo(
+  const maxTime = import_react13.default.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = import_react11.default.useMemo(() => {
+  const highlightSet = import_react13.default.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = import_react11.default.useCallback(
+  const handleSelect = import_react13.default.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -3073,20 +3239,20 @@ var SingleDatePicker = (props) => {
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
   const hasRange = rangeStart != null && rangeEnd != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "datepicker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(ChevronRightIcon_default, {}) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "datepicker-body", children: [
-          pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "datepicker-body", children: [
+          pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
             const y = yearRangeStart + i;
-            return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
               "button",
               {
                 type: "button",
@@ -3097,7 +3263,7 @@ var SingleDatePicker = (props) => {
               y
             );
           }) }),
-          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
             "button",
             {
               type: "button",
@@ -3107,8 +3273,8 @@ var SingleDatePicker = (props) => {
             },
             i
           )) }),
-          pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(import_jsx_runtime313.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+          pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)(import_jsx_runtime315.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
               "div",
               {
                 className: clsx_default(
@@ -3120,7 +3286,7 @@ var SingleDatePicker = (props) => {
               },
               label
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
+            /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
               const t = day.date.getTime();
               const disabled = t < minTime || t > maxTime;
               const selected = value ? isSameDay(day.date, value) : false;
@@ -3130,7 +3296,7 @@ var SingleDatePicker = (props) => {
               const isStart = hasRange ? isSameDay(day.date, rangeStart) : false;
               const isEnd = hasRange ? isSameDay(day.date, rangeEnd) : false;
               const inRangeVal = hasRange ? isInRange(day.date, rangeStart, rangeEnd) : false;
-              return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
                 DayCell2,
                 {
                   day,
@@ -3155,7 +3321,7 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_jsx_runtime314 = require("react/jsx-runtime");
+var import_jsx_runtime316 = require("react/jsx-runtime");
 var formatDate = (date) => {
   if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
@@ -3165,8 +3331,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = import_react12.default.useState(false);
-  const [tempDate, setTempDate] = import_react12.default.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = import_react14.default.useState(false);
+  const [tempDate, setTempDate] = import_react14.default.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -3182,19 +3348,19 @@ var InputDatePicker = (props) => {
   const handleClose = () => {
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
       Input_default,
       {
         value: formatDate(value),
         placeholder,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(CalenderIcon_default, {}),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(CalenderIcon_default, {}),
         disabled,
         readOnly: true
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
         SingleDatePicker_default,
         {
           value: tempDate,
@@ -3204,9 +3370,9 @@ var InputDatePicker = (props) => {
           locale
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+      /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3215,20 +3381,20 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 
 // src/components/Tab/Tab.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react13 = __toESM(require("react"), 1);
-var import_jsx_runtime315 = require("react/jsx-runtime");
-var TabItem = import_react13.default.forwardRef((props, ref) => {
+var import_react15 = __toESM(require("react"), 1);
+var import_jsx_runtime317 = require("react/jsx-runtime");
+var TabItem = import_react15.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
     "div",
     {
       ref,
@@ -3242,25 +3408,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-var import_jsx_runtime316 = require("react/jsx-runtime");
+var import_jsx_runtime318 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react14.default.useState({
+  const [underlineStyle, setUnderlineStyle] = import_react16.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react14.default.useRef([]);
+  const itemRefs = import_react16.default.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react14.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -3272,7 +3438,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -3288,7 +3454,7 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_jsx_runtime317 = require("react/jsx-runtime");
+var import_jsx_runtime319 = require("react/jsx-runtime");
 var RangePicker = (props) => {
   const {
     startDate,
@@ -3298,7 +3464,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = import_react15.default.useState("start");
+  const [activeTab, setActiveTab] = import_react17.default.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -3311,8 +3477,8 @@ var RangePicker = (props) => {
   };
   const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
   const endMinDate = minDate && startDate > minDate ? startDate : startDate;
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
       Tab_default,
       {
         activeIndex: activeTab === "start" ? 0 : 1,
@@ -3325,8 +3491,8 @@ var RangePicker = (props) => {
         size: "sm"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "datepicker-range-panels", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "datepicker-range-panels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
         SingleDatePicker_default,
         {
           value: startDate,
@@ -3338,7 +3504,7 @@ var RangePicker = (props) => {
           locale
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
         SingleDatePicker_default,
         {
           value: endDate,
@@ -3351,7 +3517,7 @@ var RangePicker = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
       SingleDatePicker_default,
       {
         value: startDate,
@@ -3362,7 +3528,7 @@ var RangePicker = (props) => {
         rangeEnd: endDate,
         locale
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
       SingleDatePicker_default,
       {
         value: endDate,
@@ -3380,10 +3546,10 @@ RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_jsx_runtime318 = require("react/jsx-runtime");
+var import_jsx_runtime320 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react16.default.useState(false);
+  const [isOpen, setIsOpen] = import_react18.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -3391,11 +3557,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react16.default.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
+    import_react18.default.cloneElement(component, { onClick: handleClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -3405,7 +3571,7 @@ var PopupPicker = (props) => {
             locale
           }
         ),
-        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -3417,8 +3583,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           Button_default,
           {
             type: "secondary",
@@ -3426,7 +3592,7 @@ var PopupPicker = (props) => {
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3435,10 +3601,10 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/Divider/Divider.tsx
-var import_jsx_runtime319 = require("react/jsx-runtime");
+var import_jsx_runtime321 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { orientation = "horizontal" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation),
@@ -3451,15 +3617,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime320 = require("react/jsx-runtime");
+var import_jsx_runtime322 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = import_react17.default.useState(false);
-  const [visible, setVisible] = import_react17.default.useState(false);
-  import_react17.default.useEffect(() => {
+  const [mounted, setMounted] = import_react19.default.useState(false);
+  const [visible, setVisible] = import_react19.default.useState(false);
+  import_react19.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3473,12 +3639,12 @@ var Drawer = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
@@ -3486,11 +3652,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              title && /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("div", { className: "drawer-body", children })
+              /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -3503,22 +3669,23 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react20 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react18 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react18.default.useState({
+  const [position, setPosition] = import_react20.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react18.default.useCallback(() => {
+  const calculatePosition = import_react20.default.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;
@@ -3538,13 +3705,21 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react18.default.useLayoutEffect(() => {
+  import_react20.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react18.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
+  import_react20.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -3558,9 +3733,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react19 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react19.default.useEffect(() => {
+  import_react21.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -3583,17 +3758,17 @@ var useClickOutside = (refs, handler, enabled = true) => {
 var useClickOutside_default = useClickOutside;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime321 = require("react/jsx-runtime");
+var import_jsx_runtime323 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react20.default.useState(false);
-  const [mounted, setMounted] = import_react20.default.useState(false);
-  const [visible, setVisible] = import_react20.default.useState(false);
-  const triggerRef = import_react20.default.useRef(null);
-  const menuRef = import_react20.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react22.default.useState(false);
+  const [mounted, setMounted] = import_react22.default.useState(false);
+  const [visible, setVisible] = import_react22.default.useState(false);
+  const triggerRef = import_react22.default.useRef(null);
+  const menuRef = import_react22.default.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  import_react20.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -3608,8 +3783,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -3618,14 +3793,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
       "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__ */ (0, import_jsx_runtime321.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -3647,23 +3822,23 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/EmptyState/EmptyState.tsx
-var import_jsx_runtime322 = require("react/jsx-runtime");
+var import_jsx_runtime324 = require("react/jsx-runtime");
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: "lib-xplat-empty-state", children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: "lib-xplat-empty-state", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_jsx_runtime323 = require("react/jsx-runtime");
+var import_react23 = __toESM(require("react"), 1);
+var import_jsx_runtime325 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
     accept,
@@ -3673,8 +3848,8 @@ var FileUpload = (props) => {
     label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description
   } = props;
-  const [isDragOver, setIsDragOver] = import_react21.default.useState(false);
-  const inputRef = import_react21.default.useRef(null);
+  const [isDragOver, setIsDragOver] = import_react23.default.useState(false);
+  const inputRef = import_react23.default.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -3704,7 +3879,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -3713,7 +3888,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
           "input",
           {
             ref: inputRef,
@@ -3723,9 +3898,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(UploadIcon_default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -3734,10 +3909,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 
 // src/components/HtmlTypeWriter/utils.ts
-var import_react22 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -3805,41 +3980,41 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return import_react22.default.createElement(tag, props);
+    return import_react24.default.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return import_react22.default.createElement(tag, props, ...children);
+  return import_react24.default.createElement(tag, props, ...children);
 };
 var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : import_react22.default.createElement(import_react22.default.Fragment, { key: idx }, node);
+    return node == null ? null : import_react24.default.createElement(import_react24.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_jsx_runtime324 = require("react/jsx-runtime");
+var import_jsx_runtime326 = require("react/jsx-runtime");
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = import_react23.default.useState(0);
-  const doneCalledRef = import_react23.default.useRef(false);
-  const { doc, rangeMap, totalLength } = import_react23.default.useMemo(() => {
+  const [typedLen, setTypedLen] = import_react25.default.useState(0);
+  const doneCalledRef = import_react25.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react25.default.useMemo(() => {
     if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  import_react23.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  import_react23.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -3847,33 +4022,33 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  import_react23.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  import_react23.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = import_react23.default.useMemo(
+  const parsed = import_react25.default.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-var import_react24 = __toESM(require("react"), 1);
-var import_jsx_runtime325 = require("react/jsx-runtime");
+var import_react26 = __toESM(require("react"), 1);
+var import_jsx_runtime327 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = import_react24.default.useState();
-  import_react24.default.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = import_react26.default.useState();
+  import_react26.default.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -3882,7 +4057,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = import_react24.default.useRef(null);
+  const inputRef = import_react26.default.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -3895,8 +4070,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
       "input",
       {
         type: "file",
@@ -3906,13 +4081,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: "action-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(UploadIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: "action-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(UploadIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(ImageIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -3920,7 +4095,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime326 = require("react/jsx-runtime");
+var import_jsx_runtime328 = require("react/jsx-runtime");
 var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -3963,19 +4138,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
+      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
         "button",
         {
           className: clsx_default("page-btn", { active: page === current }),
@@ -3986,14 +4161,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -4002,17 +4177,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-var import_react25 = __toESM(require("react"), 1);
-var import_jsx_runtime327 = require("react/jsx-runtime");
+var import_react27 = __toESM(require("react"), 1);
+var import_jsx_runtime329 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react25.default.useRef(null);
-  const triggerRef = import_react25.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react25.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react25.default.useState(false);
+  const popRef = import_react27.default.useRef(null);
+  const triggerRef = import_react27.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react27.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react27.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react25.default.useEffect(() => {
+  import_react27.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -4025,7 +4200,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -4035,7 +4210,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
           "div",
           {
             className: clsx_default(
@@ -4058,7 +4233,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-var import_jsx_runtime328 = require("react/jsx-runtime");
+var import_jsx_runtime330 = require("react/jsx-runtime");
 var Progress = (props) => {
   const {
     value,
@@ -4068,8 +4243,8 @@ var Progress = (props) => {
     showLabel = false
   } = props;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
       "div",
       {
         className: "track",
@@ -4077,7 +4252,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
           "div",
           {
             className: "bar",
@@ -4086,7 +4261,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -4096,17 +4271,17 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-var import_react26 = __toESM(require("react"), 1);
-var RadioGroupContext = import_react26.default.createContext(
+var import_react28 = __toESM(require("react"), 1);
+var RadioGroupContext = import_react28.default.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return import_react26.default.useContext(RadioGroupContext);
+  return import_react28.default.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime329 = require("react/jsx-runtime");
+var import_jsx_runtime331 = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
@@ -4124,7 +4299,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(
     "label",
     {
       className: clsx_default(
@@ -4134,18 +4309,18 @@ var Radio = (props) => {
         localChecked ? "checked" : void 0
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("span", { children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("span", { children: label })
       ]
     }
   );
@@ -4154,28 +4329,28 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-var import_jsx_runtime330 = require("react/jsx-runtime");
+var import_jsx_runtime332 = require("react/jsx-runtime");
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(import_jsx_runtime330.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(import_jsx_runtime332.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-var import_react29 = __toESM(require("react"), 1);
+var import_react31 = __toESM(require("react"), 1);
 
 // src/components/Select/context.ts
-var import_react27 = __toESM(require("react"), 1);
-var SelectContext = import_react27.default.createContext(null);
+var import_react29 = __toESM(require("react"), 1);
+var SelectContext = import_react29.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react28 = __toESM(require("react"), 1);
-var import_jsx_runtime331 = require("react/jsx-runtime");
+var import_react30 = __toESM(require("react"), 1);
+var import_jsx_runtime333 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = import_react28.default.useContext(context_default);
+  const ctx = import_react30.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -4184,7 +4359,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled"),
@@ -4205,7 +4380,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime332 = require("react/jsx-runtime");
+var import_jsx_runtime334 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -4217,26 +4392,26 @@ var SelectRoot = (props) => {
     error = false,
     size = "md"
   } = props;
-  const itemChildren = import_react29.default.Children.toArray(children).filter(
-    (child) => import_react29.default.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = import_react31.default.Children.toArray(children).filter(
+    (child) => import_react31.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react29.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react29.default.useState(null);
-  const controlledLabel = import_react29.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react31.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react31.default.useState(null);
+  const controlledLabel = import_react31.default.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
-  const triggerRef = import_react29.default.useRef(null);
-  const contentRef = import_react29.default.useRef(null);
-  const [mounted, setMounted] = import_react29.default.useState(false);
-  const [visible, setVisible] = import_react29.default.useState(false);
-  import_react29.default.useEffect(() => {
+  const triggerRef = import_react31.default.useRef(null);
+  const contentRef = import_react31.default.useRef(null);
+  const [mounted, setMounted] = import_react31.default.useState(false);
+  const [visible, setVisible] = import_react31.default.useState(false);
+  import_react31.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react29.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -4246,12 +4421,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = import_react29.default.useCallback(() => setOpen(true), []);
-  const close = import_react29.default.useCallback(() => setOpen(false), []);
-  const toggle = import_react29.default.useCallback(() => setOpen((prev) => !prev), []);
+  const open = import_react31.default.useCallback(() => setOpen(true), []);
+  const close = import_react31.default.useCallback(() => setOpen(false), []);
+  const toggle = import_react31.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = import_react29.default.useCallback(
+  const setSelected = import_react31.default.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -4260,7 +4435,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react29.default.useMemo(
+  const ctxValue = import_react31.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -4281,7 +4456,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -4292,7 +4467,7 @@ var SelectRoot = (props) => {
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)(
           "div",
           {
             ref: triggerRef,
@@ -4316,7 +4491,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
                 "span",
                 {
                   className: clsx_default(
@@ -4326,25 +4501,25 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+        mounted && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
-            children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
+            children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
         ) })
       ]
@@ -4358,7 +4533,7 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime333 = require("react/jsx-runtime");
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var SIZE_MAP = {
   xs: "var(--spacing-size-1)",
   sm: "var(--spacing-size-2)",
@@ -4374,7 +4549,7 @@ var Skeleton = (props) => {
     ...width != null && { width: SIZE_MAP[width] },
     ...height != null && { height: SIZE_MAP[height] }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant),
@@ -4387,20 +4562,20 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime334 = require("react/jsx-runtime");
+var import_jsx_runtime336 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
     type = "brand"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
           "circle",
           {
             className: "track",
@@ -4410,7 +4585,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
           "circle",
           {
             className: "indicator",
@@ -4429,20 +4604,20 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-var import_jsx_runtime335 = require("react/jsx-runtime");
+var import_jsx_runtime337 = require("react/jsx-runtime");
 var Steps = (props) => {
   const {
     items,
     current,
     type = "brand"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("span", { children: index + 1 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)("div", { className: "step-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("span", { children: index + 1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)("div", { className: "step-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -4451,8 +4626,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-var import_react30 = __toESM(require("react"), 1);
-var import_jsx_runtime336 = require("react/jsx-runtime");
+var import_react32 = __toESM(require("react"), 1);
+var import_jsx_runtime338 = require("react/jsx-runtime");
 var Swiper = (props) => {
   const {
     auto = false,
@@ -4475,23 +4650,23 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = import_react30.default.useMemo(() => {
+  const extendedItems = import_react32.default.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = import_react30.default.useState(
+  const [innerIndex, setInnerIndex] = import_react32.default.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = import_react30.default.useState(false);
-  const [dragOffset, setDragOffset] = import_react30.default.useState(0);
-  const [animated, setAnimated] = import_react30.default.useState(true);
-  const [containerWidth, setContainerWidth] = import_react30.default.useState(0);
-  const containerRef = import_react30.default.useRef(null);
-  const startXRef = import_react30.default.useRef(0);
-  const startTimeRef = import_react30.default.useRef(0);
-  const autoplayTimerRef = import_react30.default.useRef(null);
-  import_react30.default.useEffect(() => {
+  const [isDragging, setIsDragging] = import_react32.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react32.default.useState(0);
+  const [animated, setAnimated] = import_react32.default.useState(true);
+  const [containerWidth, setContainerWidth] = import_react32.default.useState(0);
+  const containerRef = import_react32.default.useRef(null);
+  const startXRef = import_react32.default.useRef(0);
+  const startTimeRef = import_react32.default.useRef(0);
+  const autoplayTimerRef = import_react32.default.useRef(null);
+  import_react32.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -4510,7 +4685,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = import_react30.default.useCallback(
+  const moveToInner = import_react32.default.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -4538,7 +4713,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = import_react30.default.useCallback(() => {
+  const handleTransitionEnd = import_react32.default.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -4548,7 +4723,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = import_react30.default.useCallback(
+  const slideTo = import_react32.default.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -4558,7 +4733,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = import_react30.default.useCallback(() => {
+  const slideNext = import_react32.default.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -4567,7 +4742,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = import_react30.default.useCallback(() => {
+  const slidePrev = import_react32.default.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -4576,7 +4751,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  import_react30.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -4584,12 +4759,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  import_react30.default.useImperativeHandle(swiperRef, () => ({
+  import_react32.default.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  import_react30.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (!auto || !canSlide) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -4612,7 +4787,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  import_react30.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -4650,8 +4825,8 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = import_react30.default.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+  const slideElements = import_react32.default.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -4670,14 +4845,14 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
-        children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
           "div",
           {
             className: clsx_default(
@@ -4695,7 +4870,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -4705,7 +4880,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+    canSlide && /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       "button",
       {
         className: clsx_default(
@@ -4723,8 +4898,8 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-var import_react31 = __toESM(require("react"), 1);
-var import_jsx_runtime337 = require("react/jsx-runtime");
+var import_react33 = __toESM(require("react"), 1);
+var import_jsx_runtime339 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -4734,9 +4909,9 @@ var Switch = (props) => {
     disabled,
     onChange
   } = props;
-  const [isAnimating, setIsAnimating] = import_react31.default.useState(false);
-  const timeoutRef = import_react31.default.useRef(null);
-  import_react31.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react33.default.useState(false);
+  const timeoutRef = import_react33.default.useRef(null);
+  import_react33.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -4751,7 +4926,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
     "div",
     {
       className: clsx_default(
@@ -4764,7 +4939,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -4772,26 +4947,27 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-var import_react32 = __toESM(require("react"), 1);
-var TableContext = import_react32.default.createContext(null);
+var import_react34 = __toESM(require("react"), 1);
+var TableContext = import_react34.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react32.default.useContext(TableContext);
+  const ctx = import_react34.default.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_jsx_runtime340 = require("react/jsx-runtime");
 var Table = (props) => {
   const {
     children,
+    size = "md",
     rowBorderUse = true,
     colBorderUse = true,
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
     TableContext_default.Provider,
     {
       value: {
@@ -4800,7 +4976,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -4808,41 +4984,41 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime339 = require("react/jsx-runtime");
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)("tbody", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react35 = __toESM(require("react"), 1);
+var import_react37 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react33 = __toESM(require("react"), 1);
-var TableHeadContext = import_react33.default.createContext(
+var import_react35 = __toESM(require("react"), 1);
+var TableHeadContext = import_react35.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react33.default.useContext(TableHeadContext);
+  const ctx = import_react35.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react34 = __toESM(require("react"), 1);
-var TableRowContext = import_react34.default.createContext(null);
+var import_react36 = __toESM(require("react"), 1);
+var TableRowContext = import_react36.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react34.default.useContext(TableRowContext);
+  const ctx = import_react36.default.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-var import_jsx_runtime340 = require("react/jsx-runtime");
-var TableCell = import_react35.default.memo((props) => {
+var import_jsx_runtime342 = require("react/jsx-runtime");
+var TableCell = import_react37.default.memo((props) => {
   const {
     children,
     align = "center",
@@ -4854,9 +5030,9 @@ var TableCell = import_react35.default.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react35.default.useState(0);
-  const cellRef = import_react35.default.useRef(null);
-  const calculateLeft = import_react35.default.useCallback(() => {
+  const [left, setLeft] = import_react37.default.useState(0);
+  const cellRef = import_react37.default.useRef(null);
+  const calculateLeft = import_react37.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -4865,7 +5041,7 @@ var TableCell = import_react35.default.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react35.default.useEffect(() => {
+  import_react37.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -4883,7 +5059,7 @@ var TableCell = import_react35.default.memo((props) => {
   const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
     CellTag,
     {
       ref: cellRef,
@@ -4908,21 +5084,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-var import_react36 = __toESM(require("react"), 1);
-var import_jsx_runtime342 = require("react/jsx-runtime");
-var TableRow = import_react36.default.memo((props) => {
+var import_react38 = __toESM(require("react"), 1);
+var import_jsx_runtime344 = require("react/jsx-runtime");
+var TableRow = import_react38.default.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -4930,14 +5106,14 @@ var TableRow = import_react36.default.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react36.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react38.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
     "tr",
     {
       className: clsx_default(
@@ -4955,7 +5131,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime343 = require("react/jsx-runtime");
+var import_jsx_runtime345 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
@@ -4965,7 +5141,7 @@ var Tag = (props) => {
     disabled = false,
     colorIndex
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
     "span",
     {
       className: clsx_default(
@@ -4976,8 +5152,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(XIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(XIcon_default, {}) })
       ]
     }
   );
@@ -4985,83 +5161,26 @@ var Tag = (props) => {
 Tag.displayName = "Tag";
 var Tag_default = Tag;
 
-// src/components/TextArea/TextArea.tsx
-var import_react37 = __toESM(require("react"), 1);
-var import_jsx_runtime344 = require("react/jsx-runtime");
-var TextArea = import_react37.default.forwardRef(
-  (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
-    const localRef = import_react37.default.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);
-      }
-    };
-    import_react37.default.useEffect(() => {
-      const el = localRef.current;
-      if (!el) return;
-      el.style.height = "0px";
-      const nextHeight = Math.min(el.scrollHeight, 400);
-      el.style.height = `${nextHeight}px`;
-    }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
-      "div",
-      {
-        className: clsx_default(
-          "lib-xplat-textarea",
-          disabled ? "disabled" : void 0
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
-          "textarea",
-          {
-            ...textareaProps,
-            ref: setRefs,
-            disabled,
-            value,
-            onChange: handleOnChange
-          }
-        )
-      }
-    ) });
-  }
-);
-TextArea.displayName = "TextArea";
-var TextArea_default = TextArea;
-
 // src/components/Toast/Toast.tsx
-var import_react38 = __toESM(require("react"), 1);
+var import_react39 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
-var import_jsx_runtime345 = require("react/jsx-runtime");
-var ToastContext = import_react38.default.createContext(null);
+var import_jsx_runtime346 = require("react/jsx-runtime");
+var ToastContext = import_react39.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react38.default.useContext(ToastContext);
+  const ctx = import_react39.default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 };
 var EXIT_DURATION = 300;
 var ToastItemComponent = ({ item, isExiting, onClose }) => {
-  const ref = import_react38.default.useRef(null);
-  const [height, setHeight] = import_react38.default.useState(void 0);
-  import_react38.default.useEffect(() => {
+  const ref = import_react39.default.useRef(null);
+  const [height, setHeight] = import_react39.default.useState(void 0);
+  import_react39.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -5069,15 +5188,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -5088,13 +5207,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react38.default.useState([]);
-  const [removing, setRemoving] = import_react38.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react38.default.useState(false);
-  import_react38.default.useEffect(() => {
+  const [toasts, setToasts] = import_react39.default.useState([]);
+  const [removing, setRemoving] = import_react39.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react39.default.useState(false);
+  import_react39.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react38.default.useCallback((id) => {
+  const remove = import_react39.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -5105,7 +5224,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react38.default.useCallback(
+  const toast = import_react39.default.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -5115,10 +5234,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
         ToastItemComponent,
         {
           item: t,
@@ -5134,29 +5253,29 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react39 = __toESM(require("react"), 1);
-var import_jsx_runtime346 = require("react/jsx-runtime");
+var import_react40 = __toESM(require("react"), 1);
+var import_jsx_runtime347 = require("react/jsx-runtime");
 var Tooltip = (props) => {
   const {
     type = "primary",
     description,
     children
   } = props;
-  const iconRef = import_react39.default.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
+  const iconRef = import_react40.default.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-var import_react40 = __toESM(require("react"), 1);
-var import_jsx_runtime347 = require("react/jsx-runtime");
-var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+var import_react41 = __toESM(require("react"), 1);
+var import_jsx_runtime348 = require("react/jsx-runtime");
+var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
 ] });
 var formatTime = (sec) => {
   if (!Number.isFinite(sec) || sec < 0) return "0:00";
@@ -5164,7 +5283,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = import_react40.default.forwardRef((props, ref) => {
+var Video = import_react41.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -5188,21 +5307,21 @@ var Video = import_react40.default.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const containerRef = import_react40.default.useRef(null);
-  const videoRef = import_react40.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react40.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react40.default.useState(false);
-  const [currentTime, setCurrentTime] = import_react40.default.useState(0);
-  const [duration, setDuration] = import_react40.default.useState(0);
-  const [buffered, setBuffered] = import_react40.default.useState(0);
-  const [volume, setVolume] = import_react40.default.useState(1);
-  const [isMuted, setIsMuted] = import_react40.default.useState(Boolean(muted));
-  const [isFullscreen, setIsFullscreen] = import_react40.default.useState(false);
-  const [playbackRate, setPlaybackRate] = import_react40.default.useState(1);
-  const [rateMenuOpen, setRateMenuOpen] = import_react40.default.useState(false);
-  const [captionsOn, setCaptionsOn] = import_react40.default.useState(false);
-  const [isPip, setIsPip] = import_react40.default.useState(false);
-  const setRefs = import_react40.default.useCallback(
+  const containerRef = import_react41.default.useRef(null);
+  const videoRef = import_react41.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react41.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react41.default.useState(false);
+  const [currentTime, setCurrentTime] = import_react41.default.useState(0);
+  const [duration, setDuration] = import_react41.default.useState(0);
+  const [buffered, setBuffered] = import_react41.default.useState(0);
+  const [volume, setVolume] = import_react41.default.useState(1);
+  const [isMuted, setIsMuted] = import_react41.default.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = import_react41.default.useState(false);
+  const [playbackRate, setPlaybackRate] = import_react41.default.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = import_react41.default.useState(false);
+  const [captionsOn, setCaptionsOn] = import_react41.default.useState(false);
+  const [isPip, setIsPip] = import_react41.default.useState(false);
+  const setRefs = import_react41.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -5210,14 +5329,14 @@ var Video = import_react40.default.forwardRef((props, ref) => {
     },
     [ref]
   );
-  import_react40.default.useEffect(() => {
+  import_react41.default.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  import_react40.default.useEffect(() => {
+  import_react41.default.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -5331,13 +5450,13 @@ var Video = import_react40.default.forwardRef((props, ref) => {
   const volumePct = (isMuted ? 0 : volume) * 100;
   const VolumeGlyph = isMuted || volume === 0 ? VolumeXIcon_default : volume < 0.5 ? VolumeIcon_default : Volume2Icon_default;
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
           "video",
           {
             ref: setRefs,
@@ -5358,7 +5477,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
           "button",
           {
             type: "button",
@@ -5370,11 +5489,11 @@ var Video = import_react40.default.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
             "input",
             {
               type: "range",
@@ -5391,29 +5510,29 @@ var Video = import_react40.default.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "controls-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "controls-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "volume-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "volume-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(VolumeGlyph, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
                 "input",
                 {
                   type: "range",
@@ -5428,14 +5547,14 @@ var Video = import_react40.default.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("span", { className: "time", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -5449,7 +5568,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
+              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -5463,7 +5582,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
               "button",
               {
                 type: "button",
@@ -5471,37 +5590,37 @@ var Video = import_react40.default.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(TypeIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PipIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+            showDownload && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(DownloadIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -5524,6 +5643,7 @@ var Video_default = Video;
   Calendar,
   CardTab,
   Chart,
+  ChatInput,
   CheckBox,
   Chip,
   Divider,