@x-plat/design-system 0.5.20 → 0.5.22

package/dist/index.js

@@ -6035,30 +6035,151 @@ var Calendar = (props) => {
 Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
 
+// src/components/ChatInput/ChatInput.tsx
+import React5 from "react";
+
+// src/components/TextArea/TextArea.tsx
+import React4 from "react";
+import { jsx as jsx302 } from "react/jsx-runtime";
+var TextArea = React4.forwardRef(
+  (props, ref) => {
+    const { value, onChange, disabled, ...textareaProps } = props;
+    const localRef = React4.useRef(null);
+    const setRefs = (el) => {
+      localRef.current = el;
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref && typeof ref === "object" && "current" in ref) {
+        ref.current = el;
+      }
+    };
+    const handleOnChange = (e) => {
+      const val = e.target.value;
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: val }
+        };
+        onChange(event);
+      }
+    };
+    React4.useEffect(() => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      const nextHeight = Math.min(el.scrollHeight, 400);
+      el.style.height = `${nextHeight}px`;
+    }, [value]);
+    return /* @__PURE__ */ jsx302("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx302(
+      "div",
+      {
+        className: clsx_default(
+          "lib-xplat-textarea",
+          disabled ? "disabled" : void 0
+        ),
+        children: /* @__PURE__ */ jsx302(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: setRefs,
+            disabled,
+            value,
+            onChange: handleOnChange
+          }
+        )
+      }
+    ) });
+  }
+);
+TextArea.displayName = "TextArea";
+var TextArea_default = TextArea;
+
+// src/components/ChatInput/ChatInput.tsx
+import { jsx as jsx303, jsxs as jsxs194 } from "react/jsx-runtime";
+var ChatInput = React5.forwardRef(
+  (props, ref) => {
+    const {
+      placeholder,
+      value: valueProp,
+      disabled = false,
+      buttonType = "primary",
+      onSubmit,
+      onChange
+    } = props;
+    const isControlled = valueProp !== void 0;
+    const [internalValue, setInternalValue] = React5.useState("");
+    const value = isControlled ? valueProp : internalValue;
+    const hasText = value.trim().length > 0;
+    const handleChange = (e) => {
+      const val = e.target.value;
+      if (!isControlled) setInternalValue(val);
+      onChange?.(val);
+    };
+    const handleSubmit = () => {
+      if (!hasText || disabled) return;
+      onSubmit?.(value);
+      if (!isControlled) setInternalValue("");
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    return /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ jsx303(
+        TextArea_default,
+        {
+          ref,
+          placeholder,
+          value,
+          disabled,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx303(
+        "button",
+        {
+          type: "button",
+          className: clsx_default("chat-input-send", `btn-${buttonType}`),
+          disabled: !hasText || disabled,
+          onClick: handleSubmit,
+          "aria-label": "\uC804\uC1A1",
+          children: /* @__PURE__ */ jsx303(SendIcon_default, {})
+        }
+      )
+    ] });
+  }
+);
+ChatInput.displayName = "ChatInput";
+var ChatInput_default = ChatInput;
+
 // src/components/Box/Box.tsx
-import { jsx as jsx302, jsxs as jsxs194 } from "react/jsx-runtime";
+import { jsx as jsx304, jsxs as jsxs195 } from "react/jsx-runtime";
 var Box = ({
   children,
   title,
   variant = "outlined",
   padding = "md"
 }) => {
-  return /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
-    title && /* @__PURE__ */ jsx302("div", { className: "box-title", children: title }),
-    /* @__PURE__ */ jsx302("div", { className: "box-content", children })
+  return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ jsx304("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ jsx304("div", { className: "box-content", children })
   ] });
 };
 Box.displayName = "Box";
 var Box_default = Box;
 
 // src/components/CardTab/CardTab.tsx
-import React4 from "react";
+import React6 from "react";
 
 // src/components/CardTab/CardTabPanel.tsx
-import { jsx as jsx303 } from "react/jsx-runtime";
+import { jsx as jsx305 } from "react/jsx-runtime";
 var CardTabPanel = (props) => {
   const { children, columns = 3 } = props;
-  return /* @__PURE__ */ jsx303(
+  return /* @__PURE__ */ jsx305(
     "div",
     {
       className: "card-tab-panel",
@@ -6071,7 +6192,7 @@ CardTabPanel.displayName = "CardTab.Panel";
 var CardTabPanel_default = CardTabPanel;
 
 // src/components/CardTab/CardTab.tsx
-import { jsx as jsx304, jsxs as jsxs195 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs196 } from "react/jsx-runtime";
 var CardTabRoot = (props) => {
   const {
     tabs,
@@ -6081,7 +6202,7 @@ var CardTabRoot = (props) => {
     children
   } = props;
   const isControlled = activeValueProp !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = React4.useState(tabs[0]?.value ?? "");
+  const [uncontrolledValue, setUncontrolledValue] = React6.useState(tabs[0]?.value ?? "");
   const activeValue = isControlled ? activeValueProp : uncontrolledValue;
   const handleTabClick = (tab) => {
     if (!isControlled) {
@@ -6089,16 +6210,16 @@ var CardTabRoot = (props) => {
     }
     onChange?.(tab);
   };
-  const panels = React4.Children.toArray(children).filter(
-    (child) => React4.isValidElement(child) && child.type === CardTabPanel_default
+  const panels = React6.Children.toArray(children).filter(
+    (child) => React6.isValidElement(child) && child.type === CardTabPanel_default
   );
   const activePanel = panels.find(
     (panel) => panel.props.value === activeValue
   );
-  return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
-    /* @__PURE__ */ jsx304("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+  return /* @__PURE__ */ jsxs196("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
+    /* @__PURE__ */ jsx306("div", { className: "card-tab-bar", children: tabs.map((tab) => {
       const isActive = tab.value === activeValue;
-      return /* @__PURE__ */ jsx304(
+      return /* @__PURE__ */ jsx306(
         "button",
         {
           className: clsx_default("card-tab-trigger", isActive && "active"),
@@ -6110,7 +6231,7 @@ var CardTabRoot = (props) => {
         tab.value
       );
     }) }),
-    /* @__PURE__ */ jsx304("div", { className: "card-tab-body", children: activePanel })
+    /* @__PURE__ */ jsx306("div", { className: "card-tab-body", children: activePanel })
   ] });
 };
 CardTabRoot.displayName = "CardTab";
@@ -6120,8 +6241,8 @@ var CardTab = Object.assign(CardTabRoot, {
 var CardTab_default = CardTab;
 
 // src/components/Chart/Chart.tsx
-import React5 from "react";
-import { Fragment as Fragment2, jsx as jsx305, jsxs as jsxs196 } from "react/jsx-runtime";
+import React7 from "react";
+import { Fragment as Fragment2, jsx as jsx307, jsxs as jsxs197 } from "react/jsx-runtime";
 var CATEGORICAL_COUNT2 = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
   const n = i + 1;
@@ -6167,11 +6288,11 @@ var toSmoothPath = (points) => {
 };
 var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
-  const [size, setSize] = React5.useState({ width: 0, height: 0 });
-  const settleTimer = React5.useRef(0);
-  const committedSize = React5.useRef({ width: 0, height: 0 });
-  const initialRef = React5.useRef(true);
-  React5.useEffect(() => {
+  const [size, setSize] = React7.useState({ width: 0, height: 0 });
+  const settleTimer = React7.useRef(0);
+  const committedSize = React7.useRef({ width: 0, height: 0 });
+  const initialRef = React7.useRef(true);
+  React7.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -6213,10 +6334,10 @@ var useChartSize = (ref) => {
 };
 var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 var useChartAnimation = (containerRef, dataKey) => {
-  const [animate, setAnimate] = React5.useState(false);
-  const prevDataKey = React5.useRef(dataKey);
-  const hasAnimated = React5.useRef(false);
-  React5.useEffect(() => {
+  const [animate, setAnimate] = React7.useState(false);
+  const prevDataKey = React7.useRef(dataKey);
+  const hasAnimated = React7.useRef(false);
+  React7.useEffect(() => {
     if (prefersReducedMotion()) return;
     const el = containerRef.current;
     if (!el) return;
@@ -6232,7 +6353,7 @@ var useChartAnimation = (containerRef, dataKey) => {
     observer.observe(el);
     return () => observer.disconnect();
   }, [containerRef]);
-  React5.useEffect(() => {
+  React7.useEffect(() => {
     if (dataKey !== prevDataKey.current) {
       prevDataKey.current = dataKey;
       if (prefersReducedMotion()) return;
@@ -6243,15 +6364,15 @@ var useChartAnimation = (containerRef, dataKey) => {
   return animate || prefersReducedMotion();
 };
 var useChartTooltip = (enabled) => {
-  const [tooltip, setTooltip] = React5.useState({
+  const [tooltip, setTooltip] = React7.useState({
     visible: false,
     x: 0,
     y: 0,
     content: ""
   });
-  const containerRef = React5.useRef(null);
-  const rafRef = React5.useRef(0);
-  const move = React5.useCallback((e) => {
+  const containerRef = React7.useRef(null);
+  const rafRef = React7.useRef(0);
+  const move = React7.useCallback((e) => {
     if (!enabled) return;
     const clientX = e.clientX;
     const clientY = e.clientY;
@@ -6266,7 +6387,7 @@ var useChartTooltip = (enabled) => {
       }));
     });
   }, [enabled]);
-  const show = React5.useCallback((e, content) => {
+  const show = React7.useCallback((e, content) => {
     if (!enabled) return;
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
@@ -6277,18 +6398,18 @@ var useChartTooltip = (enabled) => {
       content
     });
   }, [enabled]);
-  const hide = React5.useCallback(() => {
+  const hide = React7.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var GridLines = React5.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx305(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+var GridLines = React7.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx307(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
   const val = Math.round(maxVal * ratio);
-  return /* @__PURE__ */ jsxs196("g", { children: [
-    /* @__PURE__ */ jsx305("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-    /* @__PURE__ */ jsx305("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  return /* @__PURE__ */ jsxs197("g", { children: [
+    /* @__PURE__ */ jsx307("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ jsx307("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -6298,25 +6419,25 @@ var getLabelStep = (count, chartW) => {
   if (count <= maxLabels) return 1;
   return Math.ceil(count / maxLabels);
 };
-var AxisLabels = React5.memo(({ labels, count, chartW, height }) => {
+var AxisLabels = React7.memo(({ labels, count, chartW, height }) => {
   const step = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsx305(Fragment2, { children: labels.map((label, i) => {
+  return /* @__PURE__ */ jsx307(Fragment2, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ jsx305("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ jsx307("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
-var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React5.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React5.useMemo(() => {
+var LineChart = React7.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React7.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React7.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = React5.useMemo(
+  const seriesPoints = React7.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -6327,8 +6448,8 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
-  const lineRefs = React5.useRef([]);
-  React5.useEffect(() => {
+  const lineRefs = React7.useRef([]);
+  React7.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
       if (!el) return;
@@ -6341,9 +6462,9 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
       });
     });
   }, [animate, seriesPoints]);
-  return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ jsx305(AxisLabels, { labels, count, chartW, height }),
+  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ jsx307(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -6352,12 +6473,12 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
       const gradientId = `line-gradient-${di}`;
       const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
       const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
-      return /* @__PURE__ */ jsxs196("g", { children: [
-        /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsxs196("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ jsx305("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-          /* @__PURE__ */ jsx305("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+      return /* @__PURE__ */ jsxs197("g", { children: [
+        /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsxs197("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+          /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
         ] }) }),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx307(
           "path",
           {
             d: areaD,
@@ -6366,7 +6487,7 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
             style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
           }
         ),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx307(
           "polyline",
           {
             ref: (el) => {
@@ -6378,7 +6499,7 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
             strokeWidth: "2"
           }
         ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ jsx305(
+        showPoints && points.map((p, i) => /* @__PURE__ */ jsx307(
           "circle",
           {
             cx: p.x,
@@ -6397,16 +6518,16 @@ var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, on
   ] });
 });
 LineChart.displayName = "LineChart";
-var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React5.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React5.useMemo(() => {
+var CurveChart = React7.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React7.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React7.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = React5.useMemo(
+  const seriesPoints = React7.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -6417,8 +6538,8 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
-  const lineRefs = React5.useRef([]);
-  React5.useEffect(() => {
+  const lineRefs = React7.useRef([]);
+  React7.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
       if (!el) return;
@@ -6431,9 +6552,9 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
       });
     });
   }, [animate, seriesPoints]);
-  return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ jsx305(AxisLabels, { labels, count, chartW, height }),
+  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ jsx307(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -6442,12 +6563,12 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
       const gradientId = `curve-gradient-${di}`;
       const linePath = toSmoothPath(points);
       const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
-      return /* @__PURE__ */ jsxs196("g", { children: [
-        /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsxs196("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ jsx305("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-          /* @__PURE__ */ jsx305("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+      return /* @__PURE__ */ jsxs197("g", { children: [
+        /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsxs197("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+          /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
         ] }) }),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx307(
           "path",
           {
             d: areaPath,
@@ -6456,7 +6577,7 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
             style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
           }
         ),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx307(
           "path",
           {
             ref: (el) => {
@@ -6468,7 +6589,7 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
             strokeWidth: "2"
           }
         ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ jsx305(
+        showPoints && points.map((p, i) => /* @__PURE__ */ jsx307(
           "circle",
           {
             cx: p.x,
@@ -6487,9 +6608,9 @@ var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, o
   ] });
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React5.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React5.useMemo(() => {
+var BarChart = React7.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React7.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React7.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
@@ -6501,7 +6622,7 @@ var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onM
   const barGap = groupCount > 1 ? 2 : 0;
   const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
   const baseline = PADDING.top + chartH;
-  const bars = React5.useMemo(
+  const bars = React7.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
         const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
@@ -6514,11 +6635,11 @@ var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onM
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
+  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ jsx305("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ jsx307("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
@@ -6527,7 +6648,7 @@ var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onM
         const r2 = Math.min(4, b.w / 2);
         const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
         const delay = 100 + i * 80;
-        return /* @__PURE__ */ jsx305(
+        return /* @__PURE__ */ jsx307(
           "path",
           {
             d,
@@ -6548,11 +6669,11 @@ var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onM
   ] });
 });
 BarChart.displayName = "BarChart";
-var PieDonutChart = React5.memo(
+var PieDonutChart = React7.memo(
   ({ data, labels, width, height, animate, isDoughnut, onHover, onMove, onLeave }) => {
-    const entries = React5.useMemo(() => Object.entries(data), [data]);
-    const values = React5.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
-    const total = React5.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
+    const entries = React7.useMemo(() => Object.entries(data), [data]);
+    const values = React7.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
+    const total = React7.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
     const size = Math.min(width, height);
     const cx = size / 2;
     const cy = size / 2;
@@ -6560,8 +6681,22 @@ var PieDonutChart = React5.memo(
     const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    const sliceData = React5.useMemo(() => {
+    const maskRef = React7.useRef(null);
+    const maskR = r2 + 10;
+    const maskCircumference = 2 * Math.PI * maskR;
+    React7.useEffect(() => {
+      if (!animate || !maskRef.current) return;
+      const el = maskRef.current;
+      el.style.strokeDasharray = `${maskCircumference}`;
+      el.style.strokeDashoffset = `${maskCircumference}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1000ms ease-out";
+        el.style.strokeDashoffset = "0";
+      });
+    }, [animate, maskCircumference]);
+    const sliceData = React7.useMemo(() => {
       let angle0 = -Math.PI / 2;
+      let cumulativeAngle = 0;
       return values.map((v, i) => {
         const angle = v / total * Math.PI * 2;
         const endAngle = angle0 + angle;
@@ -6585,45 +6720,60 @@ var PieDonutChart = React5.memo(
         const lx = cx + labelR * Math.cos(midAngle);
         const ly = cy + labelR * Math.sin(midAngle);
         const pct = Math.round(v / total * 100);
+        cumulativeAngle += angle;
+        const sliceEndRatio = cumulativeAngle / (Math.PI * 2);
+        const labelDelay = 1e3 * sliceEndRatio + 150;
         angle0 = endAngle;
-        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}`, labelDelay };
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
-    return /* @__PURE__ */ jsx305("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
-      const delay = i * 100;
-      return /* @__PURE__ */ jsxs196("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
-        /* @__PURE__ */ jsx305(
-          "path",
-          {
-            d: s.d,
-            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-            className: "chart-slice",
-            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          }
-        ),
-        s.angle > 0.2 && /* @__PURE__ */ jsx305(
-          "text",
-          {
-            x: s.lx,
-            y: s.ly,
-            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: s.v
-          }
-        )
-      ] }, i);
-    }) });
+    const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
+    return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsx307("mask", { id: maskId, children: /* @__PURE__ */ jsx307(
+        "circle",
+        {
+          ref: maskRef,
+          cx,
+          cy,
+          r: maskR,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: maskR * 2,
+          transform: `rotate(-90 ${cx} ${cy})`
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx307("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx307("g", { children: /* @__PURE__ */ jsx307(
+        "path",
+        {
+          d: s.d,
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        }
+      ) }, i)) }),
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx307(
+        "text",
+        {
+          x: s.lx,
+          y: s.ly,
+          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: s.v
+        },
+        `label-${i}`
+      ))
+    ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
 var TooltipBubble = ({ x, y, containerWidth, children }) => {
-  const ref = React5.useRef(null);
-  const [adjustedX, setAdjustedX] = React5.useState(x);
-  React5.useEffect(() => {
+  const ref = React7.useRef(null);
+  const [adjustedX, setAdjustedX] = React7.useState(x);
+  React7.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -6634,7 +6784,7 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     else if (x + half > containerWidth - margin) nx = containerWidth - half - margin;
     setAdjustedX(nx);
   }, [x, containerWidth]);
-  return /* @__PURE__ */ jsx305(
+  return /* @__PURE__ */ jsx307(
     "div",
     {
       ref,
@@ -6644,22 +6794,22 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     }
   );
 };
-var Chart = React5.memo((props) => {
+var Chart = React7.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
-  const stableData = React5.useMemo(() => data, [JSON.stringify(data)]);
-  const stableLabels = React5.useMemo(() => labels, [JSON.stringify(labels)]);
-  const dataKey = React5.useMemo(() => JSON.stringify(labels), [labels]);
+  const stableData = React7.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = React7.useMemo(() => labels, [JSON.stringify(labels)]);
+  const dataKey = React7.useMemo(() => JSON.stringify(labels), [labels]);
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
-  return /* @__PURE__ */ jsxs196("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx305(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx305(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx305(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ jsx305(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
+  return /* @__PURE__ */ jsxs197("div", { className: "lib-xplat-chart", ref: containerRef, children: [
+    ready && type === "line" && /* @__PURE__ */ jsx307(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx307(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx307(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    tooltip.visible && /* @__PURE__ */ jsx307(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -6685,7 +6835,7 @@ import { primitive, semantic } from "@x-plat/tokens-core";
 import { cssVar } from "@x-plat/tokens-core";
 
 // src/components/CheckBox/CheckBox.tsx
-import { jsx as jsx306, jsxs as jsxs197 } from "react/jsx-runtime";
+import { jsx as jsx308, jsxs as jsxs198 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
     checked,
@@ -6703,8 +6853,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs197("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
-    /* @__PURE__ */ jsx306(
+  return /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+    /* @__PURE__ */ jsx308(
       "input",
       {
         type: "checkbox",
@@ -6714,44 +6864,44 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx306("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx306("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx306(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ jsx306("span", { className: "label", children: label })
+    /* @__PURE__ */ jsx308("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx308("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx308(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ jsx308("span", { className: "label", children: label })
   ] });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx307 } from "react/jsx-runtime";
+import { jsx as jsx309 } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
     type = "primary",
     size = "md"
   } = props;
-  return /* @__PURE__ */ jsx307("div", { className: clsx_default("lib-xplat-chip", type, size), children });
+  return /* @__PURE__ */ jsx309("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-import React11 from "react";
+import React13 from "react";
 
 // src/components/Input/Input.tsx
-import React6 from "react";
+import React8 from "react";
 
 // src/components/Input/InputValidations.tsx
-import { jsx as jsx308, jsxs as jsxs198 } from "react/jsx-runtime";
+import { jsx as jsx310, jsxs as jsxs199 } from "react/jsx-runtime";
 var InputValidations = (props) => {
   const { message, status = "default" } = props;
-  return /* @__PURE__ */ jsxs198("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ jsxs198("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ jsx308(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ jsx308(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ jsx308(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ jsx308(ErrorIcon_default, {})
+  return /* @__PURE__ */ jsxs199("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ jsxs199("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ jsx310(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ jsx310(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ jsx310(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ jsx310(ErrorIcon_default, {})
     ] }),
-    /* @__PURE__ */ jsx308("div", { className: "message", children: message })
+    /* @__PURE__ */ jsx310("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -6792,7 +6942,7 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx309, jsxs as jsxs199 } from "react/jsx-runtime";
+import { jsx as jsx311, jsxs as jsxs200 } from "react/jsx-runtime";
 import { createElement } from "react";
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
@@ -6841,7 +6991,7 @@ var parseValue = (type, value) => {
       return value;
   }
 };
-var Input = React6.forwardRef((props, ref) => {
+var Input = React8.forwardRef((props, ref) => {
   const {
     value,
     onChange,
@@ -6867,13 +7017,13 @@ var Input = React6.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs199("div", { className: "lib-xplat-input-wrap", children: [
-    /* @__PURE__ */ jsxs199(
+  return /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-input-wrap", children: [
+    /* @__PURE__ */ jsxs200(
       "div",
       {
         className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ jsx309(
+          /* @__PURE__ */ jsx311(
             "input",
             {
               ...inputProps,
@@ -6884,11 +7034,11 @@ var Input = React6.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ jsx309("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ jsx311("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ jsx309("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
+    validations && /* @__PURE__ */ jsx311("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
       InputValidations_default,
       {
         ...validation,
@@ -6901,20 +7051,20 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-import React7 from "react";
-import { jsx as jsx310 } from "react/jsx-runtime";
-var PasswordInput = React7.forwardRef(
+import React9 from "react";
+import { jsx as jsx312 } from "react/jsx-runtime";
+var PasswordInput = React9.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = React7.useState(false);
+    const [isView, setIsView] = React9.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ jsx310(
+    return /* @__PURE__ */ jsx312(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ jsx310("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ jsx310(OpenEyeIcon_default, {}) : /* @__PURE__ */ jsx310(CloseEyeIcon_default, {}) }),
+        suffix: /* @__PURE__ */ jsx312("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ jsx312(OpenEyeIcon_default, {}) : /* @__PURE__ */ jsx312(CloseEyeIcon_default, {}) }),
         type: isView ? "text" : "password",
         ref
       }
@@ -6925,17 +7075,17 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
-import React9 from "react";
+import React11 from "react";
 import { createPortal } from "react-dom";
 
 // src/tokens/hooks/Portal.tsx
-import React8 from "react";
+import React10 from "react";
 import ReactDOM from "react-dom";
-import { jsx as jsx311 } from "react/jsx-runtime";
-var PortalContainerContext = React8.createContext(null);
-var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx311(PortalContainerContext.Provider, { value: container, children });
+import { jsx as jsx313 } from "react/jsx-runtime";
+var PortalContainerContext = React10.createContext(null);
+var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx313(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
-  const contextContainer = React8.useContext(PortalContainerContext);
+  const contextContainer = React10.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
   const container = contextContainer ?? document.body;
   return ReactDOM.createPortal(children, container);
@@ -6944,14 +7094,14 @@ Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx312 } from "react/jsx-runtime";
+import { jsx as jsx314 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React9.useState(false);
-  const [visible, setVisible] = React9.useState(false);
-  const boxRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const [mounted, setMounted] = React11.useState(false);
+  const [visible, setVisible] = React11.useState(false);
+  const boxRef = React11.useRef(null);
+  React11.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -6965,12 +7115,12 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return createPortal(
-    /* @__PURE__ */ jsx312(
+    /* @__PURE__ */ jsx314(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsx312(
+        children: /* @__PURE__ */ jsx314(
           "div",
           {
             ref: boxRef,
@@ -6978,7 +7128,7 @@ var Modal = (props) => {
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx312(PortalProvider, { container: boxRef.current, children })
+            children: /* @__PURE__ */ jsx314(PortalProvider, { container: boxRef.current, children })
           }
         )
       }
@@ -6990,9 +7140,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-import React10 from "react";
-import { Fragment as Fragment3, jsx as jsx313, jsxs as jsxs200 } from "react/jsx-runtime";
-var DayCell2 = React10.memo(
+import React12 from "react";
+import { Fragment as Fragment3, jsx as jsx315, jsxs as jsxs201 } from "react/jsx-runtime";
+var DayCell2 = React12.memo(
   ({
     day,
     disabled,
@@ -7002,7 +7152,7 @@ var DayCell2 = React10.memo(
     isEnd,
     inRange,
     onSelect
-  }) => /* @__PURE__ */ jsx313(
+  }) => /* @__PURE__ */ jsx315(
     "button",
     {
       type: "button",
@@ -7044,26 +7194,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = React10.useState("days");
-  const [yearRangeStart, setYearRangeStart] = React10.useState(
+  const [pickerMode, setPickerMode] = React12.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React12.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = React10.useMemo(
+  const minTime = React12.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = React10.useMemo(
+  const maxTime = React12.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = React10.useMemo(() => {
+  const highlightSet = React12.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = React10.useCallback(
+  const handleSelect = React12.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -7100,20 +7250,20 @@ var SingleDatePicker = (props) => {
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
   const hasRange = rangeStart != null && rangeEnd != null;
-  return /* @__PURE__ */ jsxs200(
+  return /* @__PURE__ */ jsxs201(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
       children: [
-        /* @__PURE__ */ jsxs200("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ jsx313("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ jsx313(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ jsx313("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ jsx313("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ jsx313(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ jsxs201("div", { className: "datepicker-header", children: [
+          /* @__PURE__ */ jsx315("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ jsx315(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ jsx315("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ jsx315("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ jsx315(ChevronRightIcon_default, {}) })
         ] }),
-        /* @__PURE__ */ jsxs200("div", { className: "datepicker-body", children: [
-          pickerMode === "years" && /* @__PURE__ */ jsx313("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+        /* @__PURE__ */ jsxs201("div", { className: "datepicker-body", children: [
+          pickerMode === "years" && /* @__PURE__ */ jsx315("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
             const y = yearRangeStart + i;
-            return /* @__PURE__ */ jsx313(
+            return /* @__PURE__ */ jsx315(
               "button",
               {
                 type: "button",
@@ -7124,7 +7274,7 @@ var SingleDatePicker = (props) => {
               y
             );
           }) }),
-          pickerMode === "months" && /* @__PURE__ */ jsx313("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx313(
+          pickerMode === "months" && /* @__PURE__ */ jsx315("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx315(
             "button",
             {
               type: "button",
@@ -7134,8 +7284,8 @@ var SingleDatePicker = (props) => {
             },
             i
           )) }),
-          pickerMode === "days" && /* @__PURE__ */ jsxs200(Fragment3, { children: [
-            /* @__PURE__ */ jsx313("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx313(
+          pickerMode === "days" && /* @__PURE__ */ jsxs201(Fragment3, { children: [
+            /* @__PURE__ */ jsx315("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx315(
               "div",
               {
                 className: clsx_default(
@@ -7147,7 +7297,7 @@ var SingleDatePicker = (props) => {
               },
               label
             )) }),
-            /* @__PURE__ */ jsx313("div", { className: "datepicker-grid", children: days.map((day, idx) => {
+            /* @__PURE__ */ jsx315("div", { className: "datepicker-grid", children: days.map((day, idx) => {
               const t = day.date.getTime();
               const disabled = t < minTime || t > maxTime;
               const selected = value ? isSameDay(day.date, value) : false;
@@ -7157,7 +7307,7 @@ var SingleDatePicker = (props) => {
               const isStart = hasRange ? isSameDay(day.date, rangeStart) : false;
               const isEnd = hasRange ? isSameDay(day.date, rangeEnd) : false;
               const inRangeVal = hasRange ? isInRange(day.date, rangeStart, rangeEnd) : false;
-              return /* @__PURE__ */ jsx313(
+              return /* @__PURE__ */ jsx315(
                 DayCell2,
                 {
                   day,
@@ -7182,7 +7332,7 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-import { jsx as jsx314, jsxs as jsxs201 } from "react/jsx-runtime";
+import { jsx as jsx316, jsxs as jsxs202 } from "react/jsx-runtime";
 var formatDate = (date) => {
   if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
@@ -7192,8 +7342,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = React11.useState(false);
-  const [tempDate, setTempDate] = React11.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = React13.useState(false);
+  const [tempDate, setTempDate] = React13.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -7209,19 +7359,19 @@ var InputDatePicker = (props) => {
   const handleClose = () => {
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs201("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
-    /* @__PURE__ */ jsx314("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ jsx314(
+  return /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
+    /* @__PURE__ */ jsx316("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ jsx316(
       Input_default,
       {
         value: formatDate(value),
         placeholder,
-        suffix: /* @__PURE__ */ jsx314(CalenderIcon_default, {}),
+        suffix: /* @__PURE__ */ jsx316(CalenderIcon_default, {}),
         disabled,
         readOnly: true
       }
     ) }),
-    /* @__PURE__ */ jsx314(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs201("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ jsx314("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ jsx314(
+    /* @__PURE__ */ jsx316(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs202("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ jsx316("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ jsx316(
         SingleDatePicker_default,
         {
           value: tempDate,
@@ -7231,9 +7381,9 @@ var InputDatePicker = (props) => {
           locale
         }
       ) }),
-      /* @__PURE__ */ jsxs201("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ jsx314(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
-        /* @__PURE__ */ jsx314(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+      /* @__PURE__ */ jsxs202("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ jsx316(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
+        /* @__PURE__ */ jsx316(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -7242,20 +7392,20 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React15 from "react";
+import React17 from "react";
 
 // src/components/DatePicker/RangePicker/index.tsx
-import React14 from "react";
+import React16 from "react";
 
 // src/components/Tab/Tab.tsx
-import React13 from "react";
+import React15 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React12 from "react";
-import { jsx as jsx315 } from "react/jsx-runtime";
-var TabItem = React12.forwardRef((props, ref) => {
+import React14 from "react";
+import { jsx as jsx317 } from "react/jsx-runtime";
+var TabItem = React14.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ jsx315(
+  return /* @__PURE__ */ jsx317(
     "div",
     {
       ref,
@@ -7269,25 +7419,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-import { jsx as jsx316, jsxs as jsxs202 } from "react/jsx-runtime";
+import { jsx as jsx318, jsxs as jsxs203 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = React13.useState({
+  const [underlineStyle, setUnderlineStyle] = React15.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React13.useRef([]);
+  const itemRefs = React15.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React13.useEffect(() => {
+  React15.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ jsx316(
+  return /* @__PURE__ */ jsxs203("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ jsx318(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -7299,7 +7449,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx316(
+    type === "toggle" && /* @__PURE__ */ jsx318(
       "div",
       {
         className: "tab-toggle-underline",
@@ -7315,7 +7465,7 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/DatePicker/RangePicker/index.tsx
-import { jsx as jsx317, jsxs as jsxs203 } from "react/jsx-runtime";
+import { jsx as jsx319, jsxs as jsxs204 } from "react/jsx-runtime";
 var RangePicker = (props) => {
   const {
     startDate,
@@ -7325,7 +7475,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = React14.useState("start");
+  const [activeTab, setActiveTab] = React16.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -7338,8 +7488,8 @@ var RangePicker = (props) => {
   };
   const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
   const endMinDate = minDate && startDate > minDate ? startDate : startDate;
-  return /* @__PURE__ */ jsxs203("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
-    /* @__PURE__ */ jsx317("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ jsx317(
+  return /* @__PURE__ */ jsxs204("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
+    /* @__PURE__ */ jsx319("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ jsx319(
       Tab_default,
       {
         activeIndex: activeTab === "start" ? 0 : 1,
@@ -7352,8 +7502,8 @@ var RangePicker = (props) => {
         size: "sm"
       }
     ) }),
-    /* @__PURE__ */ jsxs203("div", { className: "datepicker-range-panels", children: [
-      /* @__PURE__ */ jsx317(
+    /* @__PURE__ */ jsxs204("div", { className: "datepicker-range-panels", children: [
+      /* @__PURE__ */ jsx319(
         SingleDatePicker_default,
         {
           value: startDate,
@@ -7365,7 +7515,7 @@ var RangePicker = (props) => {
           locale
         }
       ),
-      /* @__PURE__ */ jsx317(
+      /* @__PURE__ */ jsx319(
         SingleDatePicker_default,
         {
           value: endDate,
@@ -7378,7 +7528,7 @@ var RangePicker = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx317("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ jsx317(
+    /* @__PURE__ */ jsx319("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ jsx319(
       SingleDatePicker_default,
       {
         value: startDate,
@@ -7389,7 +7539,7 @@ var RangePicker = (props) => {
         rangeEnd: endDate,
         locale
       }
-    ) : /* @__PURE__ */ jsx317(
+    ) : /* @__PURE__ */ jsx319(
       SingleDatePicker_default,
       {
         value: endDate,
@@ -7407,10 +7557,10 @@ RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import { jsx as jsx318, jsxs as jsxs204 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs205 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = React15.useState(false);
+  const [isOpen, setIsOpen] = React17.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -7418,11 +7568,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ jsxs204("div", { className: "lib-xplat-popup-datepicker", children: [
-    React15.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ jsx318(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs204("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
-      /* @__PURE__ */ jsxs204("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ jsx318(
+  return /* @__PURE__ */ jsxs205("div", { className: "lib-xplat-popup-datepicker", children: [
+    React17.cloneElement(component, { onClick: handleClick }),
+    /* @__PURE__ */ jsx320(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs205("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
+      /* @__PURE__ */ jsxs205("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ jsx320(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -7432,7 +7582,7 @@ var PopupPicker = (props) => {
             locale
           }
         ),
-        type === "range" && /* @__PURE__ */ jsx318(
+        type === "range" && /* @__PURE__ */ jsx320(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -7444,8 +7594,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs204("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ jsx318(
+      /* @__PURE__ */ jsxs205("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ jsx320(
           Button_default,
           {
             type: "secondary",
@@ -7453,7 +7603,7 @@ var PopupPicker = (props) => {
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx318(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+        /* @__PURE__ */ jsx320(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -7462,10 +7612,10 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/Divider/Divider.tsx
-import { jsx as jsx319 } from "react/jsx-runtime";
+import { jsx as jsx321 } from "react/jsx-runtime";
 var Divider = (props) => {
   const { orientation = "horizontal" } = props;
-  return /* @__PURE__ */ jsx319(
+  return /* @__PURE__ */ jsx321(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation),
@@ -7478,15 +7628,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-import React16 from "react";
+import React18 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx320, jsxs as jsxs205 } from "react/jsx-runtime";
+import { jsx as jsx322, jsxs as jsxs206 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = React16.useState(false);
-  const [visible, setVisible] = React16.useState(false);
-  React16.useEffect(() => {
+  const [mounted, setMounted] = React18.useState(false);
+  const [visible, setVisible] = React18.useState(false);
+  React18.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -7500,12 +7650,12 @@ var Drawer = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return createPortal2(
-    /* @__PURE__ */ jsx320(
+    /* @__PURE__ */ jsx322(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsxs205(
+        children: /* @__PURE__ */ jsxs206(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
@@ -7513,11 +7663,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ jsxs205("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ jsx320("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ jsx320("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              title && /* @__PURE__ */ jsxs206("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ jsx322("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ jsx322("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
               ] }),
-              /* @__PURE__ */ jsx320("div", { className: "drawer-body", children })
+              /* @__PURE__ */ jsx322("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -7530,22 +7680,23 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-import React19 from "react";
+import React21 from "react";
 
 // src/tokens/hooks/useAutoPosition.ts
-import React17 from "react";
+import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React17.useState({
+  const [position, setPosition] = React19.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React17.useCallback(() => {
+  const calculatePosition = React19.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -7565,13 +7716,21 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React17.useLayoutEffect(() => {
+  React19.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
+  React19.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -7585,9 +7744,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React18 from "react";
+import React20 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -7610,17 +7769,17 @@ var useClickOutside = (refs, handler, enabled = true) => {
 var useClickOutside_default = useClickOutside;
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx321, jsxs as jsxs206 } from "react/jsx-runtime";
+import { jsx as jsx323, jsxs as jsxs207 } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React19.useState(false);
-  const [mounted, setMounted] = React19.useState(false);
-  const [visible, setVisible] = React19.useState(false);
-  const triggerRef = React19.useRef(null);
-  const menuRef = React19.useRef(null);
+  const [isOpen, setIsOpen] = React21.useState(false);
+  const [mounted, setMounted] = React21.useState(false);
+  const [visible, setVisible] = React21.useState(false);
+  const triggerRef = React21.useRef(null);
+  const menuRef = React21.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -7635,8 +7794,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs206("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ jsx321(
+  return /* @__PURE__ */ jsxs207("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ jsx323(
       "div",
       {
         ref: triggerRef,
@@ -7645,14 +7804,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ jsx321(Portal_default, { children: /* @__PURE__ */ jsx321(
+    mounted && /* @__PURE__ */ jsx323(Portal_default, { children: /* @__PURE__ */ jsx323(
       "div",
       {
         ref: menuRef,
         className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ jsx321(
+        children: items.map((item) => /* @__PURE__ */ jsx323(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -7674,23 +7833,23 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx322, jsxs as jsxs207 } from "react/jsx-runtime";
+import { jsx as jsx324, jsxs as jsxs208 } from "react/jsx-runtime";
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
-  return /* @__PURE__ */ jsxs207("div", { className: "lib-xplat-empty-state", children: [
-    icon && /* @__PURE__ */ jsx322("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ jsx322("div", { className: "empty-icon", children: /* @__PURE__ */ jsx322("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx322("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
-    /* @__PURE__ */ jsx322("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ jsx322("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ jsx322("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ jsxs208("div", { className: "lib-xplat-empty-state", children: [
+    icon && /* @__PURE__ */ jsx324("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ jsx324("div", { className: "empty-icon", children: /* @__PURE__ */ jsx324("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx324("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ jsx324("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ jsx324("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ jsx324("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-import React20 from "react";
-import { jsx as jsx323, jsxs as jsxs208 } from "react/jsx-runtime";
+import React22 from "react";
+import { jsx as jsx325, jsxs as jsxs209 } from "react/jsx-runtime";
 var FileUpload = (props) => {
   const {
     accept,
@@ -7700,8 +7859,8 @@ var FileUpload = (props) => {
     label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description
   } = props;
-  const [isDragOver, setIsDragOver] = React20.useState(false);
-  const inputRef = React20.useRef(null);
+  const [isDragOver, setIsDragOver] = React22.useState(false);
+  const inputRef = React22.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -7731,7 +7890,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ jsxs208(
+  return /* @__PURE__ */ jsxs209(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -7740,7 +7899,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ jsx323(
+        /* @__PURE__ */ jsx325(
           "input",
           {
             ref: inputRef,
@@ -7750,9 +7909,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ jsx323("div", { className: "upload-icon", children: /* @__PURE__ */ jsx323(UploadIcon_default, {}) }),
-        /* @__PURE__ */ jsx323("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ jsx323("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ jsx325("div", { className: "upload-icon", children: /* @__PURE__ */ jsx325(UploadIcon_default, {}) }),
+        /* @__PURE__ */ jsx325("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ jsx325("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -7761,10 +7920,10 @@ FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import React22 from "react";
+import React24 from "react";
 
 // src/components/HtmlTypeWriter/utils.ts
-import React21 from "react";
+import React23 from "react";
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -7832,41 +7991,41 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return React21.createElement(tag, props);
+    return React23.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return React21.createElement(tag, props, ...children);
+  return React23.createElement(tag, props, ...children);
 };
 var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : React21.createElement(React21.Fragment, { key: idx }, node);
+    return node == null ? null : React23.createElement(React23.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import { jsx as jsx324 } from "react/jsx-runtime";
+import { jsx as jsx326 } from "react/jsx-runtime";
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = React22.useState(0);
-  const doneCalledRef = React22.useRef(false);
-  const { doc, rangeMap, totalLength } = React22.useMemo(() => {
+  const [typedLen, setTypedLen] = React24.useState(0);
+  const doneCalledRef = React24.useRef(false);
+  const { doc, rangeMap, totalLength } = React24.useMemo(() => {
     if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -7874,33 +8033,33 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = React22.useMemo(
+  const parsed = React24.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ jsx324("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ jsx326("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-import React23 from "react";
-import { jsx as jsx325, jsxs as jsxs209 } from "react/jsx-runtime";
+import React25 from "react";
+import { jsx as jsx327, jsxs as jsxs210 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = React23.useState();
-  React23.useEffect(() => {
+  const [previewUrl, setPreviewUrl] = React25.useState();
+  React25.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -7909,7 +8068,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = React23.useRef(null);
+  const inputRef = React25.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -7922,8 +8081,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs209("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ jsx325(
+  return /* @__PURE__ */ jsxs210("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ jsx327(
       "input",
       {
         type: "file",
@@ -7933,13 +8092,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ jsxs209("div", { className: "action-bar", children: [
-      /* @__PURE__ */ jsx325("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx325(UploadIcon_default, {}) }),
-      /* @__PURE__ */ jsx325("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx325(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ jsxs210("div", { className: "action-bar", children: [
+      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx327(UploadIcon_default, {}) }),
+      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx327(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ jsx325("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx325("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs209("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ jsx325("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx325(ImageIcon_default, {}) }),
-      /* @__PURE__ */ jsx325("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ jsx327("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx327("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs210("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ jsx327("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx327(ImageIcon_default, {}) }),
+      /* @__PURE__ */ jsx327("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -7947,7 +8106,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx326, jsxs as jsxs210 } from "react/jsx-runtime";
+import { jsx as jsx328, jsxs as jsxs211 } from "react/jsx-runtime";
 var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -7990,19 +8149,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ jsxs210("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ jsx326(
+  return /* @__PURE__ */ jsxs211("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ jsx328(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx326(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ jsx328(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ jsx326("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx326(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx328("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx328(
         "button",
         {
           className: clsx_default("page-btn", { active: page === current }),
@@ -8013,14 +8172,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ jsx326(
+    /* @__PURE__ */ jsx328(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ jsx326(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ jsx328(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -8029,17 +8188,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-import React24 from "react";
-import { jsx as jsx327, jsxs as jsxs211 } from "react/jsx-runtime";
+import React26 from "react";
+import { jsx as jsx329, jsxs as jsxs212 } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React24.useRef(null);
-  const triggerRef = React24.useRef(null);
-  const [localOpen, setLocalOpen] = React24.useState(false);
-  const [eventTrigger, setEventTrigger] = React24.useState(false);
+  const popRef = React26.useRef(null);
+  const triggerRef = React26.useRef(null);
+  const [localOpen, setLocalOpen] = React26.useState(false);
+  const [eventTrigger, setEventTrigger] = React26.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React24.useEffect(() => {
+  React26.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -8052,7 +8211,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs211(
+  return /* @__PURE__ */ jsxs212(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -8062,7 +8221,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx327(Portal_default, { children: /* @__PURE__ */ jsx327(
+        localOpen && /* @__PURE__ */ jsx329(Portal_default, { children: /* @__PURE__ */ jsx329(
           "div",
           {
             className: clsx_default(
@@ -8085,7 +8244,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-import { jsx as jsx328, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx330, jsxs as jsxs213 } from "react/jsx-runtime";
 var Progress = (props) => {
   const {
     value,
@@ -8095,8 +8254,8 @@ var Progress = (props) => {
     showLabel = false
   } = props;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs212("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
-    /* @__PURE__ */ jsx328(
+  return /* @__PURE__ */ jsxs213("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+    /* @__PURE__ */ jsx330(
       "div",
       {
         className: "track",
@@ -8104,7 +8263,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx328(
+        children: /* @__PURE__ */ jsx330(
           "div",
           {
             className: "bar",
@@ -8113,7 +8272,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ jsxs212("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ jsxs213("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -8123,17 +8282,17 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-import React25 from "react";
-var RadioGroupContext = React25.createContext(
+import React27 from "react";
+var RadioGroupContext = React27.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return React25.useContext(RadioGroupContext);
+  return React27.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx329, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx331, jsxs as jsxs214 } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
@@ -8151,7 +8310,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ jsxs213(
+  return /* @__PURE__ */ jsxs214(
     "label",
     {
       className: clsx_default(
@@ -8161,18 +8320,18 @@ var Radio = (props) => {
         localChecked ? "checked" : void 0
       ),
       children: [
-        /* @__PURE__ */ jsx329("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ jsx329(
+        /* @__PURE__ */ jsx331("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ jsx331(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ jsx329("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ jsx331("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ jsx329("span", { children: label })
+        label && /* @__PURE__ */ jsx331("span", { children: label })
       ]
     }
   );
@@ -8181,28 +8340,28 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-import { Fragment as Fragment4, jsx as jsx330 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx332 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx330(Fragment4, { children: /* @__PURE__ */ jsx330(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ jsx332(Fragment4, { children: /* @__PURE__ */ jsx332(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-import React28 from "react";
+import React30 from "react";
 
 // src/components/Select/context.ts
-import React26 from "react";
-var SelectContext = React26.createContext(null);
+import React28 from "react";
+var SelectContext = React28.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-import React27 from "react";
-import { jsx as jsx331 } from "react/jsx-runtime";
+import React29 from "react";
+import { jsx as jsx333 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = React27.useContext(context_default);
+  const ctx = React29.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -8211,7 +8370,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ jsx331(
+  return /* @__PURE__ */ jsx333(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled"),
@@ -8232,7 +8391,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-import { jsx as jsx332, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx334, jsxs as jsxs215 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -8244,26 +8403,26 @@ var SelectRoot = (props) => {
     error = false,
     size = "md"
   } = props;
-  const itemChildren = React28.Children.toArray(children).filter(
-    (child) => React28.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = React30.Children.toArray(children).filter(
+    (child) => React30.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = React28.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = React28.useState(null);
-  const controlledLabel = React28.useMemo(() => {
+  const [isOpen, setOpen] = React30.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = React30.useState(null);
+  const controlledLabel = React30.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
-  const triggerRef = React28.useRef(null);
-  const contentRef = React28.useRef(null);
-  const [mounted, setMounted] = React28.useState(false);
-  const [visible, setVisible] = React28.useState(false);
-  React28.useEffect(() => {
+  const triggerRef = React30.useRef(null);
+  const contentRef = React30.useRef(null);
+  const [mounted, setMounted] = React30.useState(false);
+  const [visible, setVisible] = React30.useState(false);
+  React30.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React28.useEffect(() => {
+  React30.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -8273,12 +8432,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = React28.useCallback(() => setOpen(true), []);
-  const close = React28.useCallback(() => setOpen(false), []);
-  const toggle = React28.useCallback(() => setOpen((prev) => !prev), []);
+  const open = React30.useCallback(() => setOpen(true), []);
+  const close = React30.useCallback(() => setOpen(false), []);
+  const toggle = React30.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = React28.useCallback(
+  const setSelected = React30.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -8287,7 +8446,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = React28.useMemo(
+  const ctxValue = React30.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -8308,7 +8467,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx332(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs214(
+  return /* @__PURE__ */ jsx334(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs215(
     "div",
     {
       className: clsx_default(
@@ -8319,7 +8478,7 @@ var SelectRoot = (props) => {
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ jsxs214(
+        /* @__PURE__ */ jsxs215(
           "div",
           {
             ref: triggerRef,
@@ -8343,7 +8502,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ jsx332(
+              /* @__PURE__ */ jsx334(
                 "span",
                 {
                   className: clsx_default(
@@ -8353,25 +8512,25 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ jsx332(
+              /* @__PURE__ */ jsx334(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx332(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ jsx334(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ jsx332(Portal_default, { children: /* @__PURE__ */ jsx332(
+        mounted && /* @__PURE__ */ jsx334(Portal_default, { children: /* @__PURE__ */ jsx334(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
-            children: /* @__PURE__ */ jsx332(context_default.Provider, { value: ctxValue, children: itemChildren })
+            children: /* @__PURE__ */ jsx334(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
         ) })
       ]
@@ -8385,7 +8544,7 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx335 } from "react/jsx-runtime";
 var SIZE_MAP = {
   xs: "var(--spacing-size-1)",
   sm: "var(--spacing-size-2)",
@@ -8401,7 +8560,7 @@ var Skeleton = (props) => {
     ...width != null && { width: SIZE_MAP[width] },
     ...height != null && { height: SIZE_MAP[height] }
   };
-  return /* @__PURE__ */ jsx333(
+  return /* @__PURE__ */ jsx335(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant),
@@ -8414,20 +8573,20 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx334, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx336, jsxs as jsxs216 } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
     type = "brand"
   } = props;
-  return /* @__PURE__ */ jsx334(
+  return /* @__PURE__ */ jsx336(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ jsxs215("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx334(
+      children: /* @__PURE__ */ jsxs216("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx336(
           "circle",
           {
             className: "track",
@@ -8437,7 +8596,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ jsx334(
+        /* @__PURE__ */ jsx336(
           "circle",
           {
             className: "indicator",
@@ -8456,20 +8615,20 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-import { jsx as jsx335, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx337, jsxs as jsxs217 } from "react/jsx-runtime";
 var Steps = (props) => {
   const {
     items,
     current,
     type = "brand"
   } = props;
-  return /* @__PURE__ */ jsx335("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx337("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ jsxs216("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ jsx335("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx335(CheckIcon_default, {}) : /* @__PURE__ */ jsx335("span", { children: index + 1 }) }),
-      /* @__PURE__ */ jsxs216("div", { className: "step-content", children: [
-        /* @__PURE__ */ jsx335("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ jsx335("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ jsxs217("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ jsx337("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx337(CheckIcon_default, {}) : /* @__PURE__ */ jsx337("span", { children: index + 1 }) }),
+      /* @__PURE__ */ jsxs217("div", { className: "step-content", children: [
+        /* @__PURE__ */ jsx337("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ jsx337("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -8478,8 +8637,8 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-import React29 from "react";
-import { jsx as jsx336, jsxs as jsxs217 } from "react/jsx-runtime";
+import React31 from "react";
+import { jsx as jsx338, jsxs as jsxs218 } from "react/jsx-runtime";
 var Swiper = (props) => {
   const {
     auto = false,
@@ -8502,23 +8661,23 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = React29.useMemo(() => {
+  const extendedItems = React31.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = React29.useState(
+  const [innerIndex, setInnerIndex] = React31.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = React29.useState(false);
-  const [dragOffset, setDragOffset] = React29.useState(0);
-  const [animated, setAnimated] = React29.useState(true);
-  const [containerWidth, setContainerWidth] = React29.useState(0);
-  const containerRef = React29.useRef(null);
-  const startXRef = React29.useRef(0);
-  const startTimeRef = React29.useRef(0);
-  const autoplayTimerRef = React29.useRef(null);
-  React29.useEffect(() => {
+  const [isDragging, setIsDragging] = React31.useState(false);
+  const [dragOffset, setDragOffset] = React31.useState(0);
+  const [animated, setAnimated] = React31.useState(true);
+  const [containerWidth, setContainerWidth] = React31.useState(0);
+  const containerRef = React31.useRef(null);
+  const startXRef = React31.useRef(0);
+  const startTimeRef = React31.useRef(0);
+  const autoplayTimerRef = React31.useRef(null);
+  React31.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -8537,7 +8696,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = React29.useCallback(
+  const moveToInner = React31.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -8565,7 +8724,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = React29.useCallback(() => {
+  const handleTransitionEnd = React31.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -8575,7 +8734,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = React29.useCallback(
+  const slideTo = React31.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -8585,7 +8744,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = React29.useCallback(() => {
+  const slideNext = React31.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -8594,7 +8753,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = React29.useCallback(() => {
+  const slidePrev = React31.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -8603,7 +8762,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -8611,12 +8770,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  React29.useImperativeHandle(swiperRef, () => ({
+  React31.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (!auto || !canSlide) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -8639,7 +8798,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -8677,8 +8836,8 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = React29.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx336(
+  const slideElements = React31.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx338(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -8697,14 +8856,14 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ jsxs217("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsxs218("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ jsx338(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
-        children: /* @__PURE__ */ jsx336(
+        children: /* @__PURE__ */ jsx338(
           "div",
           {
             className: clsx_default(
@@ -8722,7 +8881,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ jsx336("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx336("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx336(
+    showProgress && canSlide && /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx338(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -8732,7 +8891,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ jsx336("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx336(
+    canSlide && /* @__PURE__ */ jsx338("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx338(
       "button",
       {
         className: clsx_default(
@@ -8750,8 +8909,8 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-import React30 from "react";
-import { jsx as jsx337 } from "react/jsx-runtime";
+import React32 from "react";
+import { jsx as jsx339 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -8761,9 +8920,9 @@ var Switch = (props) => {
     disabled,
     onChange
   } = props;
-  const [isAnimating, setIsAnimating] = React30.useState(false);
-  const timeoutRef = React30.useRef(null);
-  React30.useEffect(() => {
+  const [isAnimating, setIsAnimating] = React32.useState(false);
+  const timeoutRef = React32.useRef(null);
+  React32.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -8778,7 +8937,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ jsx337(
+  return /* @__PURE__ */ jsx339(
     "div",
     {
       className: clsx_default(
@@ -8791,7 +8950,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ jsx337("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ jsx339("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -8799,26 +8958,27 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-import React31 from "react";
-var TableContext = React31.createContext(null);
+import React33 from "react";
+var TableContext = React33.createContext(null);
 var useTableContext = () => {
-  const ctx = React31.useContext(TableContext);
+  const ctx = React33.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx338 } from "react/jsx-runtime";
+import { jsx as jsx340 } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     children,
+    size = "md",
     rowBorderUse = true,
     colBorderUse = true,
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx338("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ jsx338(
+  return /* @__PURE__ */ jsx340("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx340(
     TableContext_default.Provider,
     {
       value: {
@@ -8827,7 +8987,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ jsx338("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ jsx340("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -8835,41 +8995,41 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx339 } from "react/jsx-runtime";
+import { jsx as jsx341 } from "react/jsx-runtime";
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx339("tbody", { children });
+  return /* @__PURE__ */ jsx341("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-import React34 from "react";
+import React36 from "react";
 
 // src/components/Table/TableHeadContext.tsx
-import React32 from "react";
-var TableHeadContext = React32.createContext(
+import React34 from "react";
+var TableHeadContext = React34.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = React32.useContext(TableHeadContext);
+  const ctx = React34.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-import React33 from "react";
-var TableRowContext = React33.createContext(null);
+import React35 from "react";
+var TableRowContext = React35.createContext(null);
 var useTableRowContext = () => {
-  const ctx = React33.useContext(TableRowContext);
+  const ctx = React35.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-import { jsx as jsx340 } from "react/jsx-runtime";
-var TableCell = React34.memo((props) => {
+import { jsx as jsx342 } from "react/jsx-runtime";
+var TableCell = React36.memo((props) => {
   const {
     children,
     align = "center",
@@ -8881,9 +9041,9 @@ var TableCell = React34.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = React34.useState(0);
-  const cellRef = React34.useRef(null);
-  const calculateLeft = React34.useCallback(() => {
+  const [left, setLeft] = React36.useState(0);
+  const cellRef = React36.useRef(null);
+  const calculateLeft = React36.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -8892,7 +9052,7 @@ var TableCell = React34.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -8910,7 +9070,7 @@ var TableCell = React34.memo((props) => {
   const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ jsx340(
+  return /* @__PURE__ */ jsx342(
     CellTag,
     {
       ref: cellRef,
@@ -8935,21 +9095,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-import { jsx as jsx341 } from "react/jsx-runtime";
+import { jsx as jsx343 } from "react/jsx-runtime";
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ jsx341(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx341("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ jsx343(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx343("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-import React35 from "react";
-import { jsx as jsx342 } from "react/jsx-runtime";
-var TableRow = React35.memo((props) => {
+import React37 from "react";
+import { jsx as jsx344 } from "react/jsx-runtime";
+var TableRow = React37.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -8957,14 +9117,14 @@ var TableRow = React35.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = React35.useState([]);
+  const [stickyCells, setStickyCells] = React37.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ jsx342(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx342(
+  return /* @__PURE__ */ jsx344(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx344(
     "tr",
     {
       className: clsx_default(
@@ -8982,7 +9142,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx343, jsxs as jsxs218 } from "react/jsx-runtime";
+import { jsx as jsx345, jsxs as jsxs219 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
@@ -8992,7 +9152,7 @@ var Tag = (props) => {
     disabled = false,
     colorIndex
   } = props;
-  return /* @__PURE__ */ jsxs218(
+  return /* @__PURE__ */ jsxs219(
     "span",
     {
       className: clsx_default(
@@ -9003,8 +9163,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ jsx343("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ jsx343("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx343(XIcon_default, {}) })
+        /* @__PURE__ */ jsx345("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ jsx345("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx345(XIcon_default, {}) })
       ]
     }
   );
@@ -9012,83 +9172,26 @@ var Tag = (props) => {
 Tag.displayName = "Tag";
 var Tag_default = Tag;
 
-// src/components/TextArea/TextArea.tsx
-import React36 from "react";
-import { jsx as jsx344 } from "react/jsx-runtime";
-var TextArea = React36.forwardRef(
-  (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
-    const localRef = React36.useRef(null);
-    const setRefs = (el) => {
-      localRef.current = el;
-      if (!ref) return;
-      if (typeof ref === "function") {
-        ref(el);
-      } else if (ref && typeof ref === "object" && "current" in ref) {
-        ref.current = el;
-      }
-    };
-    const handleOnChange = (e) => {
-      const val = e.target.value;
-      if (onChange) {
-        const event = {
-          ...e,
-          target: { value: val }
-        };
-        onChange(event);
-      }
-    };
-    React36.useEffect(() => {
-      const el = localRef.current;
-      if (!el) return;
-      el.style.height = "0px";
-      const nextHeight = Math.min(el.scrollHeight, 400);
-      el.style.height = `${nextHeight}px`;
-    }, [value]);
-    return /* @__PURE__ */ jsx344("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx344(
-      "div",
-      {
-        className: clsx_default(
-          "lib-xplat-textarea",
-          disabled ? "disabled" : void 0
-        ),
-        children: /* @__PURE__ */ jsx344(
-          "textarea",
-          {
-            ...textareaProps,
-            ref: setRefs,
-            disabled,
-            value,
-            onChange: handleOnChange
-          }
-        )
-      }
-    ) });
-  }
-);
-TextArea.displayName = "TextArea";
-var TextArea_default = TextArea;
-
 // src/components/Toast/Toast.tsx
-import React37 from "react";
+import React38 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx345, jsxs as jsxs219 } from "react/jsx-runtime";
-var ToastContext = React37.createContext(null);
+import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
+var ToastContext = React38.createContext(null);
 var useToast = () => {
-  const ctx = React37.useContext(ToastContext);
+  const ctx = React38.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 };
 var EXIT_DURATION = 300;
 var ToastItemComponent = ({ item, isExiting, onClose }) => {
-  const ref = React37.useRef(null);
-  const [height, setHeight] = React37.useState(void 0);
-  React37.useEffect(() => {
+  const ref = React38.useRef(null);
+  const [height, setHeight] = React38.useState(void 0);
+  React38.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ jsx345(
+  return /* @__PURE__ */ jsx346(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -9096,15 +9199,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ jsxs219(
+      children: /* @__PURE__ */ jsxs220(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx345("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ jsx345("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ jsx346("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx346("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -9115,13 +9218,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = React37.useState([]);
-  const [removing, setRemoving] = React37.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = React37.useState(false);
-  React37.useEffect(() => {
+  const [toasts, setToasts] = React38.useState([]);
+  const [removing, setRemoving] = React38.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React38.useState(false);
+  React38.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = React37.useCallback((id) => {
+  const remove = React38.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -9132,7 +9235,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = React37.useCallback(
+  const toast = React38.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -9142,10 +9245,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ jsxs219(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ jsxs220(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && createPortal3(
-      /* @__PURE__ */ jsx345("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx345(
+      /* @__PURE__ */ jsx346("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx346(
         ToastItemComponent,
         {
           item: t,
@@ -9161,29 +9264,29 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import React38 from "react";
-import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
+import React39 from "react";
+import { jsx as jsx347, jsxs as jsxs221 } from "react/jsx-runtime";
 var Tooltip = (props) => {
   const {
     type = "primary",
     description,
     children
   } = props;
-  const iconRef = React38.useRef(null);
-  return /* @__PURE__ */ jsxs220("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ jsx346("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ jsx346("div", { className: clsx_default("tooltip-wrapper", type), children: description })
+  const iconRef = React39.useRef(null);
+  return /* @__PURE__ */ jsxs221("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ jsx347("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ jsx347("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-import React39 from "react";
-import { jsx as jsx347, jsxs as jsxs221 } from "react/jsx-runtime";
-var PipIcon = () => /* @__PURE__ */ jsxs221("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx347("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ jsx347("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+import React40 from "react";
+import { jsx as jsx348, jsxs as jsxs222 } from "react/jsx-runtime";
+var PipIcon = () => /* @__PURE__ */ jsxs222("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx348("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx348("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
 ] });
 var formatTime = (sec) => {
   if (!Number.isFinite(sec) || sec < 0) return "0:00";
@@ -9191,7 +9294,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = React39.forwardRef((props, ref) => {
+var Video = React40.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -9215,21 +9318,21 @@ var Video = React39.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const containerRef = React39.useRef(null);
-  const videoRef = React39.useRef(null);
-  const [isPlaying, setIsPlaying] = React39.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = React39.useState(false);
-  const [currentTime, setCurrentTime] = React39.useState(0);
-  const [duration, setDuration] = React39.useState(0);
-  const [buffered, setBuffered] = React39.useState(0);
-  const [volume, setVolume] = React39.useState(1);
-  const [isMuted, setIsMuted] = React39.useState(Boolean(muted));
-  const [isFullscreen, setIsFullscreen] = React39.useState(false);
-  const [playbackRate, setPlaybackRate] = React39.useState(1);
-  const [rateMenuOpen, setRateMenuOpen] = React39.useState(false);
-  const [captionsOn, setCaptionsOn] = React39.useState(false);
-  const [isPip, setIsPip] = React39.useState(false);
-  const setRefs = React39.useCallback(
+  const containerRef = React40.useRef(null);
+  const videoRef = React40.useRef(null);
+  const [isPlaying, setIsPlaying] = React40.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React40.useState(false);
+  const [currentTime, setCurrentTime] = React40.useState(0);
+  const [duration, setDuration] = React40.useState(0);
+  const [buffered, setBuffered] = React40.useState(0);
+  const [volume, setVolume] = React40.useState(1);
+  const [isMuted, setIsMuted] = React40.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = React40.useState(false);
+  const [playbackRate, setPlaybackRate] = React40.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = React40.useState(false);
+  const [captionsOn, setCaptionsOn] = React40.useState(false);
+  const [isPip, setIsPip] = React40.useState(false);
+  const setRefs = React40.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -9237,14 +9340,14 @@ var Video = React39.forwardRef((props, ref) => {
     },
     [ref]
   );
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -9358,13 +9461,13 @@ var Video = React39.forwardRef((props, ref) => {
   const volumePct = (isMuted ? 0 : volume) * 100;
   const VolumeGlyph = isMuted || volume === 0 ? VolumeXIcon_default : volume < 0.5 ? VolumeIcon_default : Volume2Icon_default;
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
-  return /* @__PURE__ */ jsxs221(
+  return /* @__PURE__ */ jsxs222(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ jsx347(
+        /* @__PURE__ */ jsx348(
           "video",
           {
             ref: setRefs,
@@ -9385,7 +9488,7 @@ var Video = React39.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ jsx347(
+        showCenterPlay && /* @__PURE__ */ jsx348(
           "button",
           {
             type: "button",
@@ -9397,11 +9500,11 @@ var Video = React39.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx347("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx347(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ jsx348("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx348(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ jsxs221("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx347(
+        showControls && /* @__PURE__ */ jsxs222("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx348(
             "input",
             {
               type: "range",
@@ -9418,29 +9521,29 @@ var Video = React39.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsxs221("div", { className: "controls-row", children: [
-            /* @__PURE__ */ jsx347(
+          /* @__PURE__ */ jsxs222("div", { className: "controls-row", children: [
+            /* @__PURE__ */ jsx348(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ jsx347(PauseIcon_default, {}) : /* @__PURE__ */ jsx347(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ jsx348(PauseIcon_default, {}) : /* @__PURE__ */ jsx348(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsxs221("div", { className: "volume-group", children: [
-              /* @__PURE__ */ jsx347(
+            /* @__PURE__ */ jsxs222("div", { className: "volume-group", children: [
+              /* @__PURE__ */ jsx348(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ jsx347(VolumeGlyph, {})
+                  children: /* @__PURE__ */ jsx348(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ jsx347(
+              /* @__PURE__ */ jsx348(
                 "input",
                 {
                   type: "range",
@@ -9455,14 +9558,14 @@ var Video = React39.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs221("span", { className: "time", children: [
+            /* @__PURE__ */ jsxs222("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ jsx347("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs221("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ jsxs221(
+            /* @__PURE__ */ jsx348("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs222("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ jsxs222(
                 "button",
                 {
                   type: "button",
@@ -9476,7 +9579,7 @@ var Video = React39.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ jsx347("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx347("li", { children: /* @__PURE__ */ jsxs221(
+              rateMenuOpen && /* @__PURE__ */ jsx348("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx348("li", { children: /* @__PURE__ */ jsxs222(
                 "button",
                 {
                   type: "button",
@@ -9490,7 +9593,7 @@ var Video = React39.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ jsx347(
+            showCaptions && /* @__PURE__ */ jsx348(
               "button",
               {
                 type: "button",
@@ -9498,37 +9601,37 @@ var Video = React39.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ jsx347(TypeIcon_default, {})
+                children: /* @__PURE__ */ jsx348(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ jsx347(
+            showPip && pipSupported && /* @__PURE__ */ jsx348(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ jsx347(PipIcon, {})
+                children: /* @__PURE__ */ jsx348(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ jsx347(
+            showDownload && /* @__PURE__ */ jsx348(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ jsx347(DownloadIcon_default, {})
+                children: /* @__PURE__ */ jsx348(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsx347(
+            /* @__PURE__ */ jsx348(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ jsx347(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx347(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ jsx348(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx348(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -9541,7 +9644,7 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-import { jsx as jsx348 } from "react/jsx-runtime";
+import { jsx as jsx349 } from "react/jsx-runtime";
 var GAP_MAP = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -9554,13 +9657,13 @@ var GAP_MAP = {
 var FullGrid = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
-  return /* @__PURE__ */ jsx348("div", { className: "lib-xplat-full-grid", style, children });
+  return /* @__PURE__ */ jsx349("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-import { jsx as jsx349 } from "react/jsx-runtime";
+import { jsx as jsx350 } from "react/jsx-runtime";
 var GAP_MAP2 = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -9573,13 +9676,13 @@ var GAP_MAP2 = {
 var FullScreen = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
-  return /* @__PURE__ */ jsx349("div", { className: "lib-xplat-full-screen", style, children });
+  return /* @__PURE__ */ jsx350("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-import { jsx as jsx350 } from "react/jsx-runtime";
+import { jsx as jsx351 } from "react/jsx-runtime";
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -9596,35 +9699,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ jsx350("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ jsx351("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-import { jsx as jsx351, jsxs as jsxs222 } from "react/jsx-runtime";
+import { jsx as jsx352, jsxs as jsxs223 } from "react/jsx-runtime";
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ jsxs222("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ jsx351("div", { children: logo }),
-    /* @__PURE__ */ jsx351("div", { children: centerContent }),
-    /* @__PURE__ */ jsx351("div", { children: rightContent })
+  return /* @__PURE__ */ jsxs223("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ jsx352("div", { children: logo }),
+    /* @__PURE__ */ jsx352("div", { children: centerContent }),
+    /* @__PURE__ */ jsx352("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-import { Fragment as Fragment5, jsx as jsx352, jsxs as jsxs223 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx353, jsxs as jsxs224 } from "react/jsx-runtime";
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ jsx352("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs223("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ jsx352(Fragment5, { children: sideBar }),
-    /* @__PURE__ */ jsxs223("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ jsx352("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ jsx353("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ jsx353(Fragment5, { children: sideBar }),
+    /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ jsx353("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -9633,31 +9736,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-import React41 from "react";
+import React42 from "react";
 
 // src/layout/SideBar/SideBarContext.tsx
-import React40 from "react";
-var SideBarContext = React40.createContext(null);
+import React41 from "react";
+var SideBarContext = React41.createContext(null);
 var useSideBarContext = () => {
-  const ctx = React40.useContext(SideBarContext);
+  const ctx = React41.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-import { jsx as jsx353 } from "react/jsx-runtime";
+import { jsx as jsx354 } from "react/jsx-runtime";
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = React41.useState(true);
+  const [isOpen, setIsOpen] = React42.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ jsx353(
+  return /* @__PURE__ */ jsx354(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ jsx353(
+      children: /* @__PURE__ */ jsx354(
         "div",
         {
           className: clsx_default(
@@ -9736,6 +9839,7 @@ export {
   CardTab_default as CardTab,
   CastIcon_default as CastIcon,
   Chart_default as Chart,
+  ChatInput_default as ChatInput,
   CheckBox_default as CheckBox,
   CheckCircleIcon_default as CheckCircleIcon,
   CheckIcon_default as CheckIcon,