@x-plat/design-system 0.5.25 → 0.5.28

package/dist/components/index.cjs

@@ -49,6 +49,7 @@ __export(components_exports, {
   EmptyState: () => EmptyState_default,
   FileUpload: () => FileUpload_default,
   HtmlTypewriter: () => HtmlTypeWriter_default,
+  IconButton: () => IconButton_default,
   ImageSelector: () => ImageSelector_default,
   Input: () => Input_default,
   InputDatePicker: () => InputDatePicker_default,
@@ -470,13 +471,7 @@ var import_jsx_runtime86 = require("react/jsx-runtime");
 
 // src/tokens/svg/communication/MessageSquareIcon.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
-
-// src/tokens/svg/communication/PaperclipIcon.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
-
-// src/tokens/svg/communication/SendIcon.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
-var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+var MessageSquareIcon = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -484,13 +479,16 @@ var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3558 0.918873C18.3887 0.919879 18.4212 0.9224 18.4535 0.927663C18.4642 0.929393 18.4751 0.930348 18.4857 0.932545C18.527 0.941123 18.5675 0.953269 18.6068 0.968678C18.6178 0.972968 18.6282 0.978499 18.639 0.983327C18.6672 0.995914 18.6945 1.01021 18.7211 1.0263C18.7403 1.03794 18.7594 1.04988 18.7777 1.0634C18.7803 1.06534 18.7829 1.0673 18.7855 1.06926C18.8126 1.08979 18.839 1.11195 18.8637 1.13665C18.8872 1.16018 18.9084 1.18517 18.9281 1.21087C18.9322 1.21625 18.9359 1.22198 18.9398 1.22747C18.9501 1.24168 18.959 1.25667 18.9681 1.27141C18.9866 1.30108 19.0029 1.33154 19.017 1.36321C19.0214 1.37309 19.0267 1.38248 19.0306 1.39251C19.0461 1.43186 19.0581 1.47231 19.0668 1.5136C19.069 1.52426 19.0699 1.5351 19.0717 1.54583C19.077 1.57815 19.0794 1.61062 19.0805 1.64348C19.0808 1.65621 19.0817 1.66884 19.0814 1.68157C19.0799 1.75981 19.0681 1.83872 19.0414 1.91497L13.2074 18.581C13.1058 18.871 12.8377 19.0703 12.5306 19.0829C12.2237 19.0954 11.9398 18.9192 11.8148 18.6386L8.59706 11.4003L1.3617 8.18547C1.08085 8.06057 0.90492 7.77678 0.917368 7.46965C0.929915 7.16252 1.12827 6.89358 1.41834 6.79192L18.0853 0.958913C18.1613 0.932334 18.2398 0.919479 18.3178 0.917897C18.3305 0.91763 18.3431 0.918498 18.3558 0.918873ZM10.0609 10.999L12.4164 16.2997L16.5375 4.52239L10.0609 10.999ZM3.69862 7.58294L9.00038 9.93841L15.4808 3.45794L3.69862 7.58294Z", fill: "currentColor" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("clipPath", { id: "send-clip", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
-    ]
+    children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.833 1.75C16.4739 1.75 17.0888 2.00479 17.542 2.45801C17.9952 2.91122 18.25 3.52605 18.25 4.16699V12.5C18.25 13.1409 17.9952 13.7558 17.542 14.209C17.0888 14.6621 16.4739 14.917 15.833 14.917H6.14355L3.03027 18.0303C2.81579 18.2448 2.49313 18.3094 2.21289 18.1934C1.93263 18.0773 1.75 17.8033 1.75 17.5V4.16699C1.75 3.52605 2.00479 2.91122 2.45801 2.45801C2.91122 2.00479 3.52605 1.75 4.16699 1.75H15.833ZM4.16699 3.25C3.92388 3.25 3.69046 3.34665 3.51855 3.51855C3.34665 3.69046 3.25 3.92388 3.25 4.16699V15.6895L5.30273 13.6367L5.41699 13.543C5.53928 13.4613 5.68382 13.4171 5.83301 13.417H15.833C16.076 13.417 16.3096 13.3202 16.4814 13.1484C16.6534 12.9765 16.75 12.7431 16.75 12.5V4.16699C16.75 3.92388 16.6534 3.69046 16.4814 3.51855C16.3095 3.34665 16.0761 3.25 15.833 3.25H4.16699Z", fill: "currentColor" })
   }
 );
-var SendIcon_default = SendIcon;
+var MessageSquareIcon_default = MessageSquareIcon;
+
+// src/tokens/svg/communication/PaperclipIcon.tsx
+var import_jsx_runtime88 = require("react/jsx-runtime");
+
+// src/tokens/svg/communication/SendIcon.tsx
+var import_jsx_runtime89 = require("react/jsx-runtime");
 
 // src/tokens/svg/date/CalendarIcon.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
@@ -2039,7 +2037,32 @@ var Calendar_default = Calendar;
 
 // src/components/ChatInput/ChatInput.tsx
 var import_react4 = __toESM(require("react"), 1);
+
+// src/components/IconButton/IconButton.tsx
 var import_jsx_runtime302 = require("react/jsx-runtime");
+var IconButton = (props) => {
+  const {
+    icon,
+    type = "primary",
+    size = "md",
+    disabled,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+    "button",
+    {
+      className: clsx_default("lib-xplat-icon-button", type, size),
+      disabled,
+      ...rest,
+      children: icon
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
+
+// src/components/ChatInput/ChatInput.tsx
+var import_jsx_runtime303 = require("react/jsx-runtime");
 var MAX_HEIGHT = 200;
 var ChatInput = import_react4.default.forwardRef(
   (props, ref) => {
@@ -2090,8 +2113,8 @@ var ChatInput = import_react4.default.forwardRef(
     import_react4.default.useEffect(() => {
       updateHeight();
     }, [value, updateHeight]);
-    return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
         "textarea",
         {
           ref: setRefs,
@@ -2104,15 +2127,15 @@ var ChatInput = import_react4.default.forwardRef(
           onKeyDown: handleKeyDown
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
-        "button",
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        IconButton_default,
         {
-          type: "button",
-          className: clsx_default("chat-input-send", `btn-${buttonType}`),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(MessageSquareIcon_default, {}),
+          type: buttonType,
+          size: "sm",
           disabled: !hasText || disabled,
           onClick: handleSubmit,
-          "aria-label": "\uC804\uC1A1",
-          children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(SendIcon_default, {})
+          "aria-label": "\uC804\uC1A1"
         }
       )
     ] });
@@ -2122,16 +2145,16 @@ ChatInput.displayName = "ChatInput";
 var ChatInput_default = ChatInput;
 
 // src/components/Box/Box.tsx
-var import_jsx_runtime303 = require("react/jsx-runtime");
+var import_jsx_runtime304 = require("react/jsx-runtime");
 var Box = ({
   children,
   title,
   variant = "outlined",
   padding = "md"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "box-title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "box-content", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "box-content", children })
   ] });
 };
 Box.displayName = "Box";
@@ -2141,10 +2164,10 @@ var Box_default = Box;
 var import_react5 = __toESM(require("react"), 1);
 
 // src/components/CardTab/CardTabPanel.tsx
-var import_jsx_runtime304 = require("react/jsx-runtime");
+var import_jsx_runtime305 = require("react/jsx-runtime");
 var CardTabPanel = (props) => {
   const { children, columns = 3 } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
     "div",
     {
       className: "card-tab-panel",
@@ -2157,7 +2180,7 @@ CardTabPanel.displayName = "CardTab.Panel";
 var CardTabPanel_default = CardTabPanel;
 
 // src/components/CardTab/CardTab.tsx
-var import_jsx_runtime305 = require("react/jsx-runtime");
+var import_jsx_runtime306 = require("react/jsx-runtime");
 var CardTabRoot = (props) => {
   const {
     tabs,
@@ -2181,10 +2204,10 @@ var CardTabRoot = (props) => {
   const activePanel = panels.find(
     (panel) => panel.props.value === activeValue
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "card-tab-bar", children: tabs.map((tab) => {
       const isActive = tab.value === activeValue;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
         "button",
         {
           className: clsx_default("card-tab-trigger", isActive && "active"),
@@ -2196,7 +2219,7 @@ var CardTabRoot = (props) => {
         tab.value
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "card-tab-body", children: activePanel })
+    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "card-tab-body", children: activePanel })
   ] });
 };
 CardTabRoot.displayName = "CardTab";
@@ -2207,7 +2230,7 @@ var CardTab_default = CardTab;
 
 // src/components/Chart/Chart.tsx
 var import_react6 = __toESM(require("react"), 1);
-var import_jsx_runtime306 = require("react/jsx-runtime");
+var import_jsx_runtime307 = require("react/jsx-runtime");
 var CATEGORICAL_COUNT2 = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
   const n = i + 1;
@@ -2369,12 +2392,12 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var GridLines = import_react6.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(import_jsx_runtime306.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+var GridLines = import_react6.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_jsx_runtime307.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
   const val = Math.round(maxVal * ratio);
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -2386,10 +2409,10 @@ var getLabelStep = (count, chartW) => {
 };
 var AxisLabels = import_react6.default.memo(({ labels, count, chartW, height }) => {
   const step = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(import_jsx_runtime306.Fragment, { children: labels.map((label, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_jsx_runtime307.Fragment, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
@@ -2427,9 +2450,9 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
       });
     });
   }, [animate, seriesPoints]);
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(AxisLabels, { labels, count, chartW, height }),
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2438,12 +2461,12 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
       const gradientId = `line-gradient-${di}`;
       const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
       const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
-      return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+      return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             d: areaD,
@@ -2452,7 +2475,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
             style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "polyline",
           {
             ref: (el) => {
@@ -2464,7 +2487,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
             strokeWidth: "2"
           }
         ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "circle",
           {
             cx: p.x,
@@ -2517,9 +2540,9 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
       });
     });
   }, [animate, seriesPoints]);
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(AxisLabels, { labels, count, chartW, height }),
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -2528,12 +2551,12 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
       const gradientId = `curve-gradient-${di}`;
       const linePath = toSmoothPath(points);
       const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
-      return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+      return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             d: areaPath,
@@ -2542,7 +2565,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
             style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             ref: (el) => {
@@ -2554,7 +2577,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
             strokeWidth: "2"
           }
         ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "circle",
           {
             cx: p.x,
@@ -2600,11 +2623,11 @@ var BarChart = import_react6.default.memo(({ data, labels, width, height, animat
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(GridLines, { width, height, chartH, maxVal }),
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
@@ -2613,7 +2636,7 @@ var BarChart = import_react6.default.memo(({ data, labels, width, height, animat
         const r2 = Math.min(4, b.w / 2);
         const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
         const delay = 100 + i * 80;
-        return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
           "path",
           {
             d,
@@ -2693,8 +2716,8 @@ var PieDonutChart = import_react6.default.memo(
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
     const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
-      animate && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("mask", { id: maskId, children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("mask", { id: maskId, children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
         "circle",
         {
           ref: maskRef,
@@ -2707,7 +2730,7 @@ var PieDonutChart = import_react6.default.memo(
           transform: `rotate(-90 ${cx} ${cy})`
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
         "path",
         {
           d: s.d,
@@ -2718,7 +2741,7 @@ var PieDonutChart = import_react6.default.memo(
           onMouseLeave: onLeave
         }
       ) }, i)) }),
-      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
         "text",
         {
           x: s.lx,
@@ -2749,7 +2772,7 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     else if (x + half > containerWidth - margin) nx = containerWidth - half - margin;
     setAdjustedX(nx);
   }, [x, containerWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
     "div",
     {
       ref,
@@ -2768,13 +2791,13 @@ var Chart = import_react6.default.memo((props) => {
   const dataKey = import_react6.default.useMemo(() => JSON.stringify(labels), [labels]);
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -2787,7 +2810,7 @@ var import_tokens_core = require("@x-plat/tokens-core");
 var import_tokens_core2 = require("@x-plat/tokens-core");
 
 // src/components/CheckBox/CheckBox.tsx
-var import_jsx_runtime307 = require("react/jsx-runtime");
+var import_jsx_runtime308 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     checked,
@@ -2805,8 +2828,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
       "input",
       {
         type: "checkbox",
@@ -2816,22 +2839,22 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: "label", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { className: "label", children: label })
   ] });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-var import_jsx_runtime308 = require("react/jsx-runtime");
+var import_jsx_runtime309 = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
     type = "primary",
     size = "md"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
@@ -2843,17 +2866,17 @@ var import_react13 = __toESM(require("react"), 1);
 var import_react7 = __toESM(require("react"), 1);
 
 // src/components/Input/InputValidations.tsx
-var import_jsx_runtime309 = require("react/jsx-runtime");
+var import_jsx_runtime310 = require("react/jsx-runtime");
 var InputValidations = (props) => {
   const { message, status = "default" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(ErrorIcon_default, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(ErrorIcon_default, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: "message", children: message })
+    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -2894,7 +2917,7 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime310 = require("react/jsx-runtime");
+var import_jsx_runtime311 = require("react/jsx-runtime");
 var import_react8 = require("react");
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
@@ -2969,13 +2992,13 @@ var Input = import_react7.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
         className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
             "input",
             {
               ...inputProps,
@@ -2986,11 +3009,11 @@ var Input = import_react7.default.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react8.createElement)(
+    validations && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react8.createElement)(
       InputValidations_default,
       {
         ...validation,
@@ -3004,7 +3027,7 @@ var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
 var import_react9 = __toESM(require("react"), 1);
-var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_jsx_runtime312 = require("react/jsx-runtime");
 var PasswordInput = import_react9.default.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
@@ -3012,11 +3035,11 @@ var PasswordInput = import_react9.default.forwardRef(
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(CloseEyeIcon_default, {}) }),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CloseEyeIcon_default, {}) }),
         type: isView ? "text" : "password",
         ref
       }
@@ -3033,9 +3056,9 @@ var import_react_dom2 = require("react-dom");
 // src/tokens/hooks/Portal.tsx
 var import_react10 = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime312 = require("react/jsx-runtime");
+var import_jsx_runtime313 = require("react/jsx-runtime");
 var PortalContainerContext = import_react10.default.createContext(null);
-var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(PortalContainerContext.Provider, { value: container, children });
+var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
   const contextContainer = import_react10.default.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
@@ -3046,7 +3069,7 @@ Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime313 = require("react/jsx-runtime");
+var import_jsx_runtime314 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
@@ -3067,12 +3090,12 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
           "div",
           {
             ref: boxRef,
@@ -3080,7 +3103,7 @@ var Modal = (props) => {
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(PortalProvider, { container: boxRef.current, children })
+            children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(PortalProvider, { container: boxRef.current, children })
           }
         )
       }
@@ -3093,7 +3116,7 @@ var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_react12 = __toESM(require("react"), 1);
-var import_jsx_runtime314 = require("react/jsx-runtime");
+var import_jsx_runtime315 = require("react/jsx-runtime");
 var DayCell2 = import_react12.default.memo(
   ({
     day,
@@ -3104,7 +3127,7 @@ var DayCell2 = import_react12.default.memo(
     isEnd,
     inRange,
     onSelect
-  }) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
     "button",
     {
       type: "button",
@@ -3202,20 +3225,20 @@ var SingleDatePicker = (props) => {
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
   const hasRange = rangeStart != null && rangeEnd != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "datepicker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(ChevronRightIcon_default, {}) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "datepicker-body", children: [
-          pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "datepicker-body", children: [
+          pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
             const y = yearRangeStart + i;
-            return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
               "button",
               {
                 type: "button",
@@ -3226,7 +3249,7 @@ var SingleDatePicker = (props) => {
               y
             );
           }) }),
-          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
             "button",
             {
               type: "button",
@@ -3236,8 +3259,8 @@ var SingleDatePicker = (props) => {
             },
             i
           )) }),
-          pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(import_jsx_runtime314.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+          pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)(import_jsx_runtime315.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
               "div",
               {
                 className: clsx_default(
@@ -3249,7 +3272,7 @@ var SingleDatePicker = (props) => {
               },
               label
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
+            /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
               const t = day.date.getTime();
               const disabled = t < minTime || t > maxTime;
               const selected = value ? isSameDay(day.date, value) : false;
@@ -3259,7 +3282,7 @@ var SingleDatePicker = (props) => {
               const isStart = hasRange ? isSameDay(day.date, rangeStart) : false;
               const isEnd = hasRange ? isSameDay(day.date, rangeEnd) : false;
               const inRangeVal = hasRange ? isInRange(day.date, rangeStart, rangeEnd) : false;
-              return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
                 DayCell2,
                 {
                   day,
@@ -3284,7 +3307,7 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_jsx_runtime315 = require("react/jsx-runtime");
+var import_jsx_runtime316 = require("react/jsx-runtime");
 var formatDate = (date) => {
   if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
@@ -3311,19 +3334,19 @@ var InputDatePicker = (props) => {
   const handleClose = () => {
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
       Input_default,
       {
         value: formatDate(value),
         placeholder,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(CalenderIcon_default, {}),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(CalenderIcon_default, {}),
         disabled,
         readOnly: true
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
         SingleDatePicker_default,
         {
           value: tempDate,
@@ -3333,9 +3356,9 @@ var InputDatePicker = (props) => {
           locale
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+      /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(Button_default, { type: "primary", onClick: handleApply, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3354,10 +3377,10 @@ var import_react15 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
 var import_react14 = __toESM(require("react"), 1);
-var import_jsx_runtime316 = require("react/jsx-runtime");
+var import_jsx_runtime317 = require("react/jsx-runtime");
 var TabItem = import_react14.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
     "div",
     {
       ref,
@@ -3371,7 +3394,7 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-var import_jsx_runtime317 = require("react/jsx-runtime");
+var import_jsx_runtime318 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size = "md" } = props;
   const [underlineStyle, setUnderlineStyle] = import_react15.default.useState({
@@ -3388,8 +3411,8 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -3401,7 +3424,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -3417,7 +3440,7 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_jsx_runtime318 = require("react/jsx-runtime");
+var import_jsx_runtime319 = require("react/jsx-runtime");
 var RangePicker = (props) => {
   const {
     startDate,
@@ -3440,8 +3463,8 @@ var RangePicker = (props) => {
   };
   const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
   const endMinDate = minDate && startDate > minDate ? startDate : startDate;
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
       Tab_default,
       {
         activeIndex: activeTab === "start" ? 0 : 1,
@@ -3454,8 +3477,8 @@ var RangePicker = (props) => {
         size: "sm"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "datepicker-range-panels", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "datepicker-range-panels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
         SingleDatePicker_default,
         {
           value: startDate,
@@ -3467,7 +3490,7 @@ var RangePicker = (props) => {
           locale
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
         SingleDatePicker_default,
         {
           value: endDate,
@@ -3480,7 +3503,7 @@ var RangePicker = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime319.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
       SingleDatePicker_default,
       {
         value: startDate,
@@ -3491,7 +3514,7 @@ var RangePicker = (props) => {
         rangeEnd: endDate,
         locale
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
       SingleDatePicker_default,
       {
         value: endDate,
@@ -3509,7 +3532,7 @@ RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_jsx_runtime319 = require("react/jsx-runtime");
+var import_jsx_runtime320 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
   const [isOpen, setIsOpen] = import_react17.default.useState(false);
@@ -3520,11 +3543,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
     import_react17.default.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -3534,7 +3557,7 @@ var PopupPicker = (props) => {
             locale
           }
         ),
-        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -3546,8 +3569,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           Button_default,
           {
             type: "secondary",
@@ -3555,7 +3578,7 @@ var PopupPicker = (props) => {
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });
@@ -3564,10 +3587,10 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/Divider/Divider.tsx
-var import_jsx_runtime320 = require("react/jsx-runtime");
+var import_jsx_runtime321 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { orientation = "horizontal" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation),
@@ -3582,7 +3605,7 @@ var Divider_default = Divider;
 // src/components/Drawer/Drawer.tsx
 var import_react18 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime321 = require("react/jsx-runtime");
+var import_jsx_runtime322 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
@@ -3602,12 +3625,12 @@ var Drawer = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
@@ -3615,11 +3638,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              title && /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime321.jsx)("div", { className: "drawer-body", children })
+              /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -3721,7 +3744,7 @@ var useClickOutside = (refs, handler, enabled = true) => {
 var useClickOutside_default = useClickOutside;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime322 = require("react/jsx-runtime");
+var import_jsx_runtime323 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
   const [isOpen, setIsOpen] = import_react21.default.useState(false);
@@ -3746,8 +3769,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -3756,14 +3779,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
       "div",
       {
         ref: menuRef,
         className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -3785,15 +3808,15 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/EmptyState/EmptyState.tsx
-var import_jsx_runtime323 = require("react/jsx-runtime");
+var import_jsx_runtime324 = require("react/jsx-runtime");
 var EmptyState = (props) => {
   const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "lib-xplat-empty-state", children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: "lib-xplat-empty-state", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
@@ -3801,7 +3824,7 @@ var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
 var import_react22 = __toESM(require("react"), 1);
-var import_jsx_runtime324 = require("react/jsx-runtime");
+var import_jsx_runtime325 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
     accept,
@@ -3842,7 +3865,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -3851,7 +3874,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
           "input",
           {
             ref: inputRef,
@@ -3861,9 +3884,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(UploadIcon_default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -3957,7 +3980,7 @@ var htmlToReactProgressive = (root, typedLen, rangeMap) => {
 };
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_jsx_runtime325 = require("react/jsx-runtime");
+var import_jsx_runtime326 = require("react/jsx-runtime");
 var HtmlTypeWriter = ({
   html,
   duration = 20,
@@ -4000,14 +4023,14 @@ var HtmlTypeWriter = ({
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
 var import_react25 = __toESM(require("react"), 1);
-var import_jsx_runtime326 = require("react/jsx-runtime");
+var import_jsx_runtime327 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
   const [previewUrl, setPreviewUrl] = import_react25.default.useState();
@@ -4033,8 +4056,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
       "input",
       {
         type: "file",
@@ -4044,13 +4067,13 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)("div", { className: "action-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(UploadIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: "action-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(UploadIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(ImageIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
@@ -4058,7 +4081,7 @@ ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime327 = require("react/jsx-runtime");
+var import_jsx_runtime328 = require("react/jsx-runtime");
 var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
@@ -4101,19 +4124,19 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
       "button",
       {
         className: "page-btn prev",
         disabled: current <= 1,
         onClick: () => handleClick(current - 1),
         "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(ChevronLeftIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(ChevronLeftIcon_default, {})
       }
     ),
     pages.map(
-      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+      (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
         "button",
         {
           className: clsx_default("page-btn", { active: page === current }),
@@ -4124,14 +4147,14 @@ var Pagination = (props) => {
         page
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
       "button",
       {
         className: "page-btn next",
         disabled: current >= totalPages,
         onClick: () => handleClick(current + 1),
         "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(ChevronRightIcon_default, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(ChevronRightIcon_default, {})
       }
     )
   ] });
@@ -4141,7 +4164,7 @@ var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
 var import_react26 = __toESM(require("react"), 1);
-var import_jsx_runtime328 = require("react/jsx-runtime");
+var import_jsx_runtime329 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
   const popRef = import_react26.default.useRef(null);
@@ -4163,7 +4186,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -4173,7 +4196,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
           "div",
           {
             className: clsx_default(
@@ -4196,7 +4219,7 @@ PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
 // src/components/Progress/Progress.tsx
-var import_jsx_runtime329 = require("react/jsx-runtime");
+var import_jsx_runtime330 = require("react/jsx-runtime");
 var Progress = (props) => {
   const {
     value,
@@ -4206,8 +4229,8 @@ var Progress = (props) => {
     showLabel = false
   } = props;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
       "div",
       {
         className: "track",
@@ -4215,7 +4238,7 @@ var Progress = (props) => {
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
           "div",
           {
             className: "bar",
@@ -4224,7 +4247,7 @@ var Progress = (props) => {
         )
       }
     ),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("span", { className: "label", children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)("span", { className: "label", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -4244,7 +4267,7 @@ var useRadioGroupContext = () => {
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime330 = require("react/jsx-runtime");
+var import_jsx_runtime331 = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
@@ -4262,7 +4285,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(
     "label",
     {
       className: clsx_default(
@@ -4272,18 +4295,18 @@ var Radio = (props) => {
         localChecked ? "checked" : void 0
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("span", { children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)("span", { children: label })
       ]
     }
   );
@@ -4292,10 +4315,10 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-var import_jsx_runtime331 = require("react/jsx-runtime");
+var import_jsx_runtime332 = require("react/jsx-runtime");
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(import_jsx_runtime331.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(import_jsx_runtime332.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
@@ -4310,7 +4333,7 @@ var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
 var import_react29 = __toESM(require("react"), 1);
-var import_jsx_runtime332 = require("react/jsx-runtime");
+var import_jsx_runtime333 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
   const ctx = import_react29.default.useContext(context_default);
@@ -4322,7 +4345,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled"),
@@ -4343,7 +4366,7 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime333 = require("react/jsx-runtime");
+var import_jsx_runtime334 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
@@ -4419,7 +4442,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -4430,7 +4453,7 @@ var SelectRoot = (props) => {
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)(
           "div",
           {
             ref: triggerRef,
@@ -4454,7 +4477,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
                 "span",
                 {
                   className: clsx_default(
@@ -4464,25 +4487,25 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+        mounted && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
-            children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
+            children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
         ) })
       ]
@@ -4496,7 +4519,7 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime334 = require("react/jsx-runtime");
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var SIZE_MAP = {
   xs: "var(--spacing-size-1)",
   sm: "var(--spacing-size-2)",
@@ -4512,7 +4535,7 @@ var Skeleton = (props) => {
     ...width != null && { width: SIZE_MAP[width] },
     ...height != null && { height: SIZE_MAP[height] }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-skeleton", variant),
@@ -4525,20 +4548,20 @@ Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime335 = require("react/jsx-runtime");
+var import_jsx_runtime336 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
     type = "brand"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
-      children: /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
           "circle",
           {
             className: "track",
@@ -4548,7 +4571,7 @@ var Spinner = (props) => {
             strokeWidth: "3"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
           "circle",
           {
             className: "indicator",
@@ -4567,20 +4590,20 @@ Spinner.displayName = "Spinner";
 var Spinner_default = Spinner;
 
 // src/components/Steps/Steps.tsx
-var import_jsx_runtime336 = require("react/jsx-runtime");
+var import_jsx_runtime337 = require("react/jsx-runtime");
 var Steps = (props) => {
   const {
     items,
     current,
     type = "brand"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
-    return /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("span", { children: index + 1 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("div", { className: "step-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("span", { className: "step-title", children: item.title }),
-        item.description && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)("span", { className: "step-description", children: item.description })
+    return /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("span", { children: index + 1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)("div", { className: "step-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("span", { className: "step-description", children: item.description })
       ] })
     ] }, index);
   }) });
@@ -4590,7 +4613,7 @@ var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
 var import_react31 = __toESM(require("react"), 1);
-var import_jsx_runtime337 = require("react/jsx-runtime");
+var import_jsx_runtime338 = require("react/jsx-runtime");
 var Swiper = (props) => {
   const {
     auto = false,
@@ -4789,7 +4812,7 @@ var Swiper = (props) => {
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
   const slideElements = import_react31.default.useMemo(
-    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__slide",
@@ -4808,14 +4831,14 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       "div",
       {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
-        children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
           "div",
           {
             className: clsx_default(
@@ -4833,7 +4856,7 @@ var Swiper = (props) => {
         )
       }
     ),
-    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       "span",
       {
         className: "lib-xplat-swiper__progress-fill",
@@ -4843,7 +4866,7 @@ var Swiper = (props) => {
         }
       }
     ) }) }),
-    canSlide && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+    canSlide && /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       "button",
       {
         className: clsx_default(
@@ -4862,7 +4885,7 @@ var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
 var import_react32 = __toESM(require("react"), 1);
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_jsx_runtime339 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -4889,7 +4912,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
     "div",
     {
       className: clsx_default(
@@ -4902,7 +4925,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -4920,7 +4943,7 @@ var useTableContext = () => {
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime339 = require("react/jsx-runtime");
+var import_jsx_runtime340 = require("react/jsx-runtime");
 var Table = (props) => {
   const {
     children,
@@ -4930,7 +4953,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
     TableContext_default.Provider,
     {
       value: {
@@ -4939,7 +4962,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -4947,10 +4970,10 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime340 = require("react/jsx-runtime");
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var TableBody = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("tbody", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
@@ -4980,7 +5003,7 @@ var useTableRowContext = () => {
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_jsx_runtime342 = require("react/jsx-runtime");
 var TableCell = import_react36.default.memo((props) => {
   const {
     children,
@@ -5022,7 +5045,7 @@ var TableCell = import_react36.default.memo((props) => {
   const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
     CellTag,
     {
       ref: cellRef,
@@ -5047,20 +5070,20 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-var import_jsx_runtime342 = require("react/jsx-runtime");
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var TableHead = ({
   children,
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
 var import_react37 = __toESM(require("react"), 1);
-var import_jsx_runtime343 = require("react/jsx-runtime");
+var import_jsx_runtime344 = require("react/jsx-runtime");
 var TableRow = import_react37.default.memo((props) => {
   const {
     children,
@@ -5076,7 +5099,7 @@ var TableRow = import_react37.default.memo((props) => {
       return [...prev, ref];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
     "tr",
     {
       className: clsx_default(
@@ -5094,7 +5117,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime344 = require("react/jsx-runtime");
+var import_jsx_runtime345 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
@@ -5104,7 +5127,7 @@ var Tag = (props) => {
     disabled = false,
     colorIndex
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
     "span",
     {
       className: clsx_default(
@@ -5115,8 +5138,8 @@ var Tag = (props) => {
         disabled && "disabled"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("span", { className: "tag-label", children }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(XIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(XIcon_default, {}) })
       ]
     }
   );
@@ -5126,7 +5149,7 @@ var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
 var import_react38 = __toESM(require("react"), 1);
-var import_jsx_runtime345 = require("react/jsx-runtime");
+var import_jsx_runtime346 = require("react/jsx-runtime");
 var TextArea = import_react38.default.forwardRef(
   (props, ref) => {
     const { value, onChange, disabled, ...textareaProps } = props;
@@ -5157,14 +5180,14 @@ var TextArea = import_react38.default.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
           "textarea",
           {
             ...textareaProps,
@@ -5184,7 +5207,7 @@ var TextArea_default = TextArea;
 // src/components/Toast/Toast.tsx
 var import_react39 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
-var import_jsx_runtime346 = require("react/jsx-runtime");
+var import_jsx_runtime347 = require("react/jsx-runtime");
 var ToastContext = import_react39.default.createContext(null);
 var useToast = () => {
   const ctx = import_react39.default.useContext(ToastContext);
@@ -5200,7 +5223,7 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -5208,15 +5231,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -5254,10 +5277,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
         ToastItemComponent,
         {
           item: t,
@@ -5274,7 +5297,7 @@ ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react40 = __toESM(require("react"), 1);
-var import_jsx_runtime347 = require("react/jsx-runtime");
+var import_jsx_runtime348 = require("react/jsx-runtime");
 var Tooltip = (props) => {
   const {
     type = "primary",
@@ -5282,9 +5305,9 @@ var Tooltip = (props) => {
     children
   } = props;
   const iconRef = import_react40.default.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";
@@ -5292,10 +5315,10 @@ var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
 var import_react41 = __toESM(require("react"), 1);
-var import_jsx_runtime348 = require("react/jsx-runtime");
-var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+var import_jsx_runtime349 = require("react/jsx-runtime");
+var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
 ] });
 var formatTime = (sec) => {
   if (!Number.isFinite(sec) || sec < 0) return "0:00";
@@ -5470,13 +5493,13 @@ var Video = import_react41.default.forwardRef((props, ref) => {
   const volumePct = (isMuted ? 0 : volume) * 100;
   const VolumeGlyph = isMuted || volume === 0 ? VolumeXIcon_default : volume < 0.5 ? VolumeIcon_default : Volume2Icon_default;
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
           "video",
           {
             ref: setRefs,
@@ -5497,7 +5520,7 @@ var Video = import_react41.default.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
           "button",
           {
             type: "button",
@@ -5509,11 +5532,11 @@ var Video = import_react41.default.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
             "input",
             {
               type: "range",
@@ -5530,29 +5553,29 @@ var Video = import_react41.default.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "controls-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)("div", { className: "controls-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "volume-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)("div", { className: "volume-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(VolumeGlyph, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
                 "input",
                 {
                   type: "range",
@@ -5567,14 +5590,14 @@ var Video = import_react41.default.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("span", { className: "time", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -5588,7 +5611,7 @@ var Video = import_react41.default.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
+              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -5602,7 +5625,7 @@ var Video = import_react41.default.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
               "button",
               {
                 type: "button",
@@ -5610,37 +5633,37 @@ var Video = import_react41.default.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(TypeIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(PipIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+            showDownload && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(DownloadIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -5672,6 +5695,7 @@ var Video_default = Video;
   EmptyState,
   FileUpload,
   HtmlTypewriter,
+  IconButton,
   ImageSelector,
   Input,
   InputDatePicker,