@x-plat/design-system 0.7.0 → 0.7.2

package/dist/components/index.cjs

@@ -34,7 +34,7 @@ __export(components_exports, {
   Alert: () => Alert_default,
   AutoResizeTextArea: () => AutoResizeTextArea_default,
   Avatar: () => Avatar_default,
-  Badge: () => Badge_default,
+  Badge: () => NotificationBadge_default,
   Box: () => Box_default,
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
@@ -57,6 +57,7 @@ __export(components_exports, {
   Input: () => Input_default,
   InputDatePicker: () => InputDatePicker_default,
   Modal: () => Modal_default,
+  NotificationBadge: () => NotificationBadge_default,
   Pagination: () => Pagination_default,
   PasswordInput: () => PasswordInput_default,
   PopOver: () => PopOver_default,
@@ -1680,52 +1681,31 @@ var Avatar = (props) => {
 Avatar.displayName = "Avatar";
 var Avatar_default = Avatar;
 
-// src/components/Badge/Badge.tsx
-var import_jsx_runtime299 = require("react/jsx-runtime");
-var Badge = (props) => {
-  const {
-    children,
-    type = "error",
-    count,
-    maxCount = 99,
-    dot = false,
-    size = "md"
-  } = props;
-  const showBadge = dot || count !== void 0 && count > 0;
-  const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
-  return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: clsx_default("lib-xplat-badge", size), children: [
-    children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
-  ] });
-};
-Badge.displayName = "Badge";
-var Badge_default = Badge;
-
 // src/components/Box/Box.tsx
-var import_jsx_runtime300 = require("react/jsx-runtime");
+var import_jsx_runtime299 = require("react/jsx-runtime");
 var Box = ({
   children,
   title,
   variant = "outlined",
   padding = "md"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("div", { className: "box-title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("div", { className: "box-content", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: "box-content", children })
   ] });
 };
 Box.displayName = "Box";
 var Box_default = Box;
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-var import_jsx_runtime301 = require("react/jsx-runtime");
+var import_jsx_runtime300 = require("react/jsx-runtime");
 var Breadcrumb = (props) => {
   const { items, separator = "/" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("nav", { className: "lib-xplat-breadcrumb", "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("ol", { children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("nav", { className: "lib-xplat-breadcrumb", "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("ol", { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("li", { children: [
-      isLast ? /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("button", { className: "link", onClick: item.onClick, children: item.label }),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: "separator", children: separator })
+    return /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("li", { children: [
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("button", { className: "link", onClick: item.onClick, children: item.label }),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("span", { className: "separator", children: separator })
     ] }, index);
   }) }) });
 };
@@ -1733,7 +1713,7 @@ Breadcrumb.displayName = "Breadcrumb";
 var Breadcrumb_default = Breadcrumb;
 
 // src/components/Button/Button.tsx
-var import_jsx_runtime302 = require("react/jsx-runtime");
+var import_jsx_runtime301 = require("react/jsx-runtime");
 var Button = (props) => {
   const {
     children,
@@ -1742,7 +1722,7 @@ var Button = (props) => {
     disabled,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
     "button",
     {
       className: clsx_default("lib-xplat-button", type, size),
@@ -1859,7 +1839,7 @@ var MONTH_LABELS = {
 };
 
 // src/components/Calendar/Calendar.tsx
-var import_jsx_runtime303 = require("react/jsx-runtime");
+var import_jsx_runtime302 = require("react/jsx-runtime");
 var DayCell = import_react4.default.memo(
   ({
     day,
@@ -1871,7 +1851,7 @@ var DayCell = import_react4.default.memo(
     onEventClick
   }) => {
     if (renderDay) {
-      return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
         "div",
         {
           className: clsx_default(
@@ -1888,7 +1868,7 @@ var DayCell = import_react4.default.memo(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(
       "div",
       {
         className: clsx_default(
@@ -1904,9 +1884,9 @@ var DayCell = import_react4.default.memo(
           if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("span", { className: "calendar-day-number", children: day.day }),
-          dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "calendar-day-events", children: [
-            dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("span", { className: "calendar-day-number", children: day.day }),
+          dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "calendar-day-events", children: [
+            dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
               "span",
               {
                 className: "calendar-event-dot",
@@ -1919,7 +1899,7 @@ var DayCell = import_react4.default.memo(
               },
               ei
             )),
-            dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("span", { className: "calendar-event-more", children: [
+            dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("span", { className: "calendar-event-more", children: [
               "+",
               dayEvents.length - 3
             ] })
@@ -2040,21 +2020,21 @@ var Calendar = (props) => {
   const weekdays = WEEKDAY_LABELS[locale];
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(
     "div",
     {
       className: "lib-xplat-calendar",
       style: selectedColor ? { "--calendar-selected-color": `var(--${selectedColor})` } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "calendar-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("button", { className: "calendar-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(ChevronRightIcon_default, {}) }),
-          showToday && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("button", { className: "calendar-today-btn", onClick: handleToday, children: locale === "ko" ? "\uC624\uB298" : "Today" })
+        /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "calendar-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("button", { className: "calendar-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ChevronRightIcon_default, {}) }),
+          showToday && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("button", { className: "calendar-today-btn", onClick: handleToday, children: locale === "ko" ? "\uC624\uB298" : "Today" })
         ] }),
-        pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+        pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
           const y = yearRangeStart + i;
-          return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
             "button",
             {
               type: "button",
@@ -2065,7 +2045,7 @@ var Calendar = (props) => {
             y
           );
         }) }),
-        pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "calendar-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "calendar-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
           "button",
           {
             type: "button",
@@ -2075,8 +2055,8 @@ var Calendar = (props) => {
           },
           i
         )) }),
-        pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(import_jsx_runtime303.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(import_jsx_runtime302.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
             "div",
             {
               className: clsx_default(
@@ -2088,12 +2068,12 @@ var Calendar = (props) => {
             },
             label
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "calendar-grid", children: days.map((day, idx) => {
+          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "calendar-grid", children: days.map((day, idx) => {
             const dayEvents = getEventsForDay(day.date);
             const t = day.date.getTime();
             const disabled = t < minTime || t > maxTime;
             const isSelected = selectedDate ? isSameDay(day.date, selectedDate) : false;
-            return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
               DayCell,
               {
                 day,
@@ -2119,10 +2099,10 @@ var Calendar_default = Calendar;
 var import_react5 = __toESM(require("react"), 1);
 
 // src/components/CardTab/CardTabPanel.tsx
-var import_jsx_runtime304 = require("react/jsx-runtime");
+var import_jsx_runtime303 = require("react/jsx-runtime");
 var CardTabPanel = (props) => {
   const { children, columns = 3 } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
     "div",
     {
       className: "card-tab-panel",
@@ -2135,7 +2115,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_runtime304 = require("react/jsx-runtime");
 var CardTabRoot = (props) => {
   const {
     tabs,
@@ -2159,10 +2139,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_runtime304.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "card-tab-bar", children: tabs.map((tab) => {
       const isActive2 = tab.value === activeValue;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
         "button",
         {
           className: clsx_default("card-tab-trigger", isActive2 && "active"),
@@ -2174,7 +2154,7 @@ var CardTabRoot = (props) => {
         tab.value
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "card-tab-body", children: activePanel })
+    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "card-tab-body", children: activePanel })
   ] });
 };
 CardTabRoot.displayName = "CardTab";
@@ -2185,7 +2165,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_runtime305 = require("react/jsx-runtime");
 var CATEGORICAL_COUNT2 = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
   const n = i + 1;
@@ -2321,12 +2301,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_runtime305.jsx)(import_jsx_runtime305.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
   const val = Math.round(maxVal * ratio);
-  return /* @__PURE__ */ (0, import_jsx_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_runtime305.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -2338,10 +2318,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_runtime305.jsx)(import_jsx_runtime305.Fragment, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
@@ -2417,7 +2397,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
   }, [animate, width]);
   const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const lineClipId = "line-area-clip";
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
@@ -2435,9 +2415,9 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
         onLeave();
       },
       children: [
-        animate && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("clipPath", { id: lineClipId, children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(GridLines, { width, height, chartH, maxVal }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(AxisLabels, { labels, count, chartW, height }),
+        animate && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("clipPath", { id: lineClipId, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(AxisLabels, { labels, count, chartW, height }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -2446,16 +2426,16 @@ 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_runtime305.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("path", { d: areaD, fill: `url(#${gradientId})` }),
-              /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
+            /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: areaD, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
             ] }),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -2467,7 +2447,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "line",
           {
             x1: activeX,
@@ -2477,7 +2457,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "rect",
           {
             x: PADDING.left,
@@ -2526,7 +2506,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
   }, [animate, width]);
   const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const curveClipId = "curve-area-clip";
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
@@ -2545,9 +2525,9 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
         onLeave();
       },
       children: [
-        animate && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("clipPath", { id: curveClipId, children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(GridLines, { width, height, chartH, maxVal }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(AxisLabels, { labels, count, chartW, height }),
+        animate && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("clipPath", { id: curveClipId, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(AxisLabels, { labels, count, chartW, height }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -2556,16 +2536,16 @@ 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_runtime305.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
-              /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
+            /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
             ] }),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -2577,7 +2557,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "line",
           {
             x1: activeX,
@@ -2587,7 +2567,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "rect",
           {
             x: PADDING.left,
@@ -2630,11 +2610,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_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ (0, import_jsx_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_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
@@ -2643,7 +2623,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_runtime305.jsx)(
           "path",
           {
             d,
@@ -2723,8 +2703,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_runtime305.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("mask", { id: maskId, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
         "circle",
         {
           ref: maskRef,
@@ -2737,7 +2717,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_runtime305.jsx)("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
         "path",
         {
           d: s.d,
@@ -2772,15 +2752,15 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
   const sepIdx = content.indexOf(" \u2014 ");
   const title = sepIdx >= 0 ? content.slice(0, sepIdx) : content;
   const desc = sepIdx >= 0 ? content.slice(sepIdx + 3) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
     "div",
     {
       ref,
       className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
       style: { left: pos.left, top: pos.top },
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "tooltip-title", children: title }),
-        desc && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "tooltip-desc", children: desc })
+        title && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "tooltip-title", children: title }),
+        desc && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "tooltip-desc", children: desc })
       ]
     }
   );
@@ -2792,14 +2772,14 @@ var ChartLegend = ({ data, labels, type }) => {
     const total = values.reduce((a, b) => a + b, 0) || 1;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "chart-legend", children: values.map((v, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "chart-legend", children: values.map((v, i) => {
       const pct = Math.round(v / total * 100);
       const color = PIE_COLORS[(i + colorOffset) % PIE_COLORS.length];
-      return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: "chart-legend-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: "chart-legend-text", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("span", { className: "chart-legend-value", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "chart-legend-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "chart-legend-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("span", { className: "chart-legend-value", children: [
             v.toLocaleString(),
             "(",
             pct,
@@ -2809,16 +2789,16 @@ var ChartLegend = ({ data, labels, type }) => {
       ] }, i);
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "chart-legend", children: entries.map(([key], di) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "chart-legend", children: entries.map(([key], di) => {
     const palette = getPalette(LINE_BAR_PALETTES, di, key);
     const color = palette[2];
     const values = entries[di][1];
     const sum = values.reduce((a, b) => a + b, 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: "chart-legend-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
-      /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: "chart-legend-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: "chart-legend-label", children: key }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: "chart-legend-value", children: sum.toLocaleString() })
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "chart-legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+      /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "chart-legend-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "chart-legend-label", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "chart-legend-value", children: sum.toLocaleString() })
       ] })
     ] }, di);
   }) });
@@ -2832,14 +2812,14 @@ 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 }),
-    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -2849,7 +2829,7 @@ var Chart_default = Chart;
 var import_react7 = __toESM(require("react"), 1);
 
 // src/components/IconButton/IconButton.tsx
-var import_jsx_runtime307 = require("react/jsx-runtime");
+var import_jsx_runtime306 = require("react/jsx-runtime");
 var IconButton = (props) => {
   const {
     icon,
@@ -2858,7 +2838,7 @@ var IconButton = (props) => {
     disabled,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
     "button",
     {
       className: clsx_default("lib-xplat-icon-button", type, size),
@@ -2872,7 +2852,7 @@ IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/components/ChatInput/ChatInput.tsx
-var import_jsx_runtime308 = require("react/jsx-runtime");
+var import_jsx_runtime307 = require("react/jsx-runtime");
 var ChatInput = import_react7.default.forwardRef(
   (props, ref) => {
     const {
@@ -2903,8 +2883,8 @@ var ChatInput = import_react7.default.forwardRef(
         handleSubmit();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
         AutoResizeTextArea_default,
         {
           ref,
@@ -2918,10 +2898,10 @@ var ChatInput = import_react7.default.forwardRef(
           onKeyDown: handleKeyDown
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
         IconButton_default,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(MessageSquareIcon_default, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(MessageSquareIcon_default, {}),
           type: buttonType,
           size: "sm",
           disabled: !hasText || disabled,
@@ -2942,7 +2922,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_runtime309 = require("react/jsx-runtime");
+var import_jsx_runtime308 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     checked,
@@ -2961,8 +2941,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
       "input",
       {
         type: "checkbox",
@@ -2972,22 +2952,22 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime309.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_runtime310 = 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_runtime310.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;
@@ -2999,17 +2979,17 @@ var import_react14 = __toESM(require("react"), 1);
 var import_react8 = __toESM(require("react"), 1);
 
 // src/components/Input/InputValidations.tsx
-var import_jsx_runtime311 = 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_runtime311.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime311.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_runtime311.jsx)("div", { className: "message", children: message })
+    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -3050,7 +3030,7 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime312 = require("react/jsx-runtime");
+var import_jsx_runtime311 = require("react/jsx-runtime");
 var import_react9 = require("react");
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
@@ -3126,13 +3106,13 @@ var Input = import_react8.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
         className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
             "input",
             {
               ...inputProps,
@@ -3143,11 +3123,11 @@ var Input = import_react8.default.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react9.createElement)(
+    validations && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react9.createElement)(
       InputValidations_default,
       {
         ...validation,
@@ -3161,7 +3141,7 @@ var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
 var import_react10 = __toESM(require("react"), 1);
-var import_jsx_runtime313 = require("react/jsx-runtime");
+var import_jsx_runtime312 = require("react/jsx-runtime");
 var PasswordInput = import_react10.default.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
@@ -3169,11 +3149,11 @@ var PasswordInput = import_react10.default.forwardRef(
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime313.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
       }
@@ -3190,9 +3170,9 @@ var import_react_dom2 = require("react-dom");
 // src/tokens/hooks/Portal.tsx
 var import_react11 = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime314 = require("react/jsx-runtime");
+var import_jsx_runtime313 = require("react/jsx-runtime");
 var PortalContainerContext = import_react11.default.createContext(null);
-var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime314.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_react11.default.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
@@ -3203,7 +3183,7 @@ Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime315 = 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;
@@ -3224,12 +3204,12 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
           "div",
           {
             ref: boxRef,
@@ -3237,7 +3217,7 @@ var Modal = (props) => {
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(PortalProvider, { container: boxRef.current, children })
+            children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(PortalProvider, { container: boxRef.current, children })
           }
         )
       }
@@ -3250,7 +3230,7 @@ var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_react13 = __toESM(require("react"), 1);
-var import_jsx_runtime316 = require("react/jsx-runtime");
+var import_jsx_runtime315 = require("react/jsx-runtime");
 var DayCell2 = import_react13.default.memo(
   ({
     day,
@@ -3261,7 +3241,7 @@ var DayCell2 = import_react13.default.memo(
     isEnd,
     inRange,
     onSelect
-  }) => /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
     "button",
     {
       type: "button",
@@ -3359,20 +3339,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_runtime316.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime316.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_runtime316.jsxs)("div", { className: "datepicker-body", children: [
-          pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime316.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_runtime316.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
               "button",
               {
                 type: "button",
@@ -3383,7 +3363,7 @@ var SingleDatePicker = (props) => {
               y
             );
           }) }),
-          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime316.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",
@@ -3393,8 +3373,8 @@ var SingleDatePicker = (props) => {
             },
             i
           )) }),
-          pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)(import_jsx_runtime316.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime316.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(
@@ -3406,7 +3386,7 @@ var SingleDatePicker = (props) => {
               },
               label
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime316.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;
@@ -3416,7 +3396,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_runtime316.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
                 DayCell2,
                 {
                   day,
@@ -3441,7 +3421,7 @@ SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_jsx_runtime317 = 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();
@@ -3468,19 +3448,19 @@ var InputDatePicker = (props) => {
   const handleClose = () => {
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("div", { className: "input-datepicker-trigger", onClick: handleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime317.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_runtime317.jsx)(CalenderIcon_default, {}),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(CalenderIcon_default, {}),
         disabled,
         readOnly: true
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime317.jsx)("div", { className: "popup-datepicker-content", children: /* @__PURE__ */ (0, import_jsx_runtime317.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,
@@ -3490,9 +3470,9 @@ var InputDatePicker = (props) => {
           locale
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(Button_default, { type: "secondary", onClick: handleClose, children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime317.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" })
       ] })
     ] }) })
   ] });
@@ -3511,10 +3491,10 @@ var import_react16 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
 var import_react15 = __toESM(require("react"), 1);
-var import_jsx_runtime318 = require("react/jsx-runtime");
+var import_jsx_runtime317 = require("react/jsx-runtime");
 var TabItem = import_react15.default.forwardRef((props, ref) => {
   const { isActive: isActive2, title, onClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
     "div",
     {
       ref,
@@ -3528,7 +3508,7 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-var import_jsx_runtime319 = 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_react16.default.useState({
@@ -3545,8 +3525,8 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime319.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),
@@ -3558,7 +3538,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -3574,7 +3554,7 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_jsx_runtime320 = require("react/jsx-runtime");
+var import_jsx_runtime319 = require("react/jsx-runtime");
 var RangePicker = (props) => {
   const {
     startDate,
@@ -3597,8 +3577,8 @@ var RangePicker = (props) => {
   };
   const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
   const endMinDate = minDate && startDate > minDate ? startDate : startDate;
-  return /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime320.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,
@@ -3611,8 +3591,8 @@ var RangePicker = (props) => {
         size: "sm"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "datepicker-range-panels", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "datepicker-range-panels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
         SingleDatePicker_default,
         {
           value: startDate,
@@ -3624,7 +3604,7 @@ var RangePicker = (props) => {
           locale
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
         SingleDatePicker_default,
         {
           value: endDate,
@@ -3637,7 +3617,7 @@ var RangePicker = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime320.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime320.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,
@@ -3648,7 +3628,7 @@ var RangePicker = (props) => {
         rangeEnd: endDate,
         locale
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
       SingleDatePicker_default,
       {
         value: endDate,
@@ -3666,7 +3646,7 @@ RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_jsx_runtime321 = require("react/jsx-runtime");
+var import_jsx_runtime320 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
   const [isOpen, setIsOpen] = import_react18.default.useState(false);
@@ -3677,11 +3657,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
     import_react18.default.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime321.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,
@@ -3691,7 +3671,7 @@ var PopupPicker = (props) => {
             locale
           }
         ),
-        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
+        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -3703,8 +3683,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
           Button_default,
           {
             type: "secondary",
@@ -3712,7 +3692,7 @@ var PopupPicker = (props) => {
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime321.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" })
       ] })
     ] }) })
   ] });
@@ -3721,10 +3701,10 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/Divider/Divider.tsx
-var import_jsx_runtime322 = require("react/jsx-runtime");
+var import_jsx_runtime321 = require("react/jsx-runtime");
 var Divider = (props) => {
   const { orientation = "horizontal" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-divider", orientation),
@@ -3739,7 +3719,7 @@ var Divider_default = Divider;
 // src/components/Drawer/Drawer.tsx
 var import_react19 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime323 = 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;
@@ -3759,12 +3739,12 @@ var Drawer = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-drawer-overlay", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime322.jsxs)(
           "div",
           {
             className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
@@ -3772,11 +3752,11 @@ var Drawer = (props) => {
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "drawer-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime323.jsx)("span", { className: "drawer-title", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime323.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_runtime323.jsx)("div", { className: "drawer-body", children })
+              /* @__PURE__ */ (0, import_jsx_runtime322.jsx)("div", { className: "drawer-body", children })
             ]
           }
         )
@@ -3878,7 +3858,7 @@ var useClickOutside = (refs, handler, enabled = true) => {
 var useClickOutside_default = useClickOutside;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime324 = require("react/jsx-runtime");
+var import_jsx_runtime323 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
   const [isOpen, setIsOpen] = import_react22.default.useState(false);
@@ -3903,8 +3883,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -3913,14 +3893,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime324.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_runtime324.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -3943,7 +3923,7 @@ var Dropdown_default = Dropdown;
 
 // src/components/Editor/Editor.tsx
 var import_react23 = __toESM(require("react"), 1);
-var import_jsx_runtime325 = require("react/jsx-runtime");
+var import_jsx_runtime324 = require("react/jsx-runtime");
 var DEFAULT_TOOLBAR = [
   "bold",
   "italic",
@@ -4463,8 +4443,8 @@ var Editor = (props) => {
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: clsx_default("lib-xplat-editor", isFocused && "focused", readOnly && "readonly"), children: [
-    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: clsx_default("lib-xplat-editor", isFocused && "focused", readOnly && "readonly"), children: [
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
       EditorToolbar,
       {
         items: toolbar,
@@ -4472,9 +4452,9 @@ var Editor = (props) => {
         onAction: onToolbarAction
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: "lib-xplat-editor__content", style: { minHeight }, children: [
-      isEmpty && !isFocused && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "lib-xplat-editor__placeholder", children: placeholder }),
-      /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)("div", { className: "lib-xplat-editor__content", style: { minHeight }, children: [
+      isEmpty && !isFocused && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "lib-xplat-editor__placeholder", children: placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
         "div",
         {
           ref: editorRef,
@@ -4493,7 +4473,7 @@ var Editor = (props) => {
           spellCheck: true
         }
       ),
-      slashOpen && filteredSlashItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+      slashOpen && filteredSlashItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
         SlashMenu,
         {
           position: slashPos,
@@ -4503,7 +4483,7 @@ var Editor = (props) => {
           onClose: closeSlashMenu
         }
       ),
-      linkOpen && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+      linkOpen && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
         LinkPopover,
         {
           position: linkPos,
@@ -4555,7 +4535,7 @@ var isActive = (item, active) => {
   return active.has(item);
 };
 var EditorToolbar = ({ items, active, onAction }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "lib-xplat-editor__toolbar", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("div", { className: "lib-xplat-editor__toolbar", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
     "button",
     {
       type: "button",
@@ -4580,12 +4560,12 @@ var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
     window.addEventListener("mousedown", handleClickOutside);
     return () => window.removeEventListener("mousedown", handleClickOutside);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
     "div",
     {
       className: "lib-xplat-editor__slash-menu",
       style: { top: position.top, left: position.left },
-      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(
+      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)(
         "button",
         {
           type: "button",
@@ -4595,8 +4575,8 @@ var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
             onSelect(item);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { className: "label", children: item.label }),
-            item.hint && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { className: "hint", children: item.hint })
+            /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("span", { className: "label", children: item.label }),
+            item.hint && /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("span", { className: "hint", children: item.hint })
           ]
         },
         item.key
@@ -4609,13 +4589,13 @@ var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
   import_react23.default.useEffect(() => {
     inputRef.current?.focus();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsxs)(
     "div",
     {
       className: "lib-xplat-editor__link-popover",
       style: { top: position.top, left: position.left },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
           "input",
           {
             ref: inputRef,
@@ -4635,11 +4615,11 @@ var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("button", { type: "button", onMouseDown: (e) => {
+        /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("button", { type: "button", onMouseDown: (e) => {
           e.preventDefault();
           onConfirm();
         }, children: "\uC801\uC6A9" }),
-        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("button", { type: "button", onMouseDown: (e) => {
+        /* @__PURE__ */ (0, import_jsx_runtime324.jsx)("button", { type: "button", onMouseDown: (e) => {
           e.preventDefault();
           onClose();
         }, children: "\uCDE8\uC18C" })
@@ -4649,15 +4629,15 @@ var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
 };
 
 // src/components/EmptyState/EmptyState.tsx
-var import_jsx_runtime326 = require("react/jsx-runtime");
+var import_jsx_runtime325 = 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_runtime326.jsxs)("div", { className: "lib-xplat-empty-state", children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "empty-icon", children: icon }),
-    !icon && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime326.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_runtime326.jsx)("p", { className: "empty-title", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("p", { className: "empty-description", children: description }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "empty-action", children: action })
+  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)("div", { className: "lib-xplat-empty-state", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime325.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_runtime325.jsx)("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "empty-action", children: action })
   ] });
 };
 EmptyState.displayName = "EmptyState";
@@ -4665,7 +4645,7 @@ var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
 var import_react24 = __toESM(require("react"), 1);
-var import_jsx_runtime327 = require("react/jsx-runtime");
+var import_jsx_runtime326 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
     accept,
@@ -4706,7 +4686,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime326.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -4715,7 +4695,7 @@ var FileUpload = (props) => {
       onDragLeave: handleDragLeave,
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(
           "input",
           {
             ref: inputRef,
@@ -4725,9 +4705,9 @@ var FileUpload = (props) => {
             onChange: handleChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("p", { className: "upload-label", children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("p", { className: "upload-description", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime326.jsx)(UploadIcon_default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
@@ -4821,7 +4801,7 @@ var htmlToReactProgressive = (root, typedLen, rangeMap) => {
 };
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_jsx_runtime328 = require("react/jsx-runtime");
+var import_jsx_runtime327 = require("react/jsx-runtime");
 var HtmlTypeWriter = ({
   html,
   duration = 20,
@@ -4864,14 +4844,14 @@ var HtmlTypeWriter = ({
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
 var import_react27 = __toESM(require("react"), 1);
-var import_jsx_runtime329 = require("react/jsx-runtime");
+var import_jsx_runtime328 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
   const [previewUrl, setPreviewUrl] = import_react27.default.useState();
@@ -4897,8 +4877,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
       "input",
       {
         type: "file",
@@ -4908,19 +4888,40 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("div", { className: "action-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(UploadIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("div", { className: "action-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(UploadIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(ImageIcon_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime328.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
+// src/components/NotificationBadge/NotificationBadge.tsx
+var import_jsx_runtime329 = require("react/jsx-runtime");
+var NotificationBadge = (props) => {
+  const {
+    children,
+    type = "error",
+    count,
+    maxCount = 99,
+    dot = false,
+    size = "md"
+  } = props;
+  const showBadge = dot || count !== void 0 && count > 0;
+  const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
+    children,
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+  ] });
+};
+NotificationBadge.displayName = "NotificationBadge";
+var NotificationBadge_default = NotificationBadge;
+
 // src/components/Pagination/Pagination.tsx
 var import_jsx_runtime330 = require("react/jsx-runtime");
 var getPageRange = (current, totalPages, siblingCount) => {
@@ -5891,6 +5892,7 @@ var TableCell = import_react38.default.memo((props) => {
     width,
     nowrap = false,
     scope = "col",
+    colSpan,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -5939,6 +5941,7 @@ var TableCell = import_react38.default.memo((props) => {
         nowrap && "nowrap"
       ),
       scope: isHeaderCell ? scope : void 0,
+      colSpan,
       style: {
         ...isSticky ? { left } : null,
         ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null
@@ -6640,6 +6643,7 @@ var Video_default = Video;
   Input,
   InputDatePicker,
   Modal,
+  NotificationBadge,
   Pagination,
   PasswordInput,
   PopOver,