@x-plat/design-system 0.6.0 → 0.6.1

package/dist/components/index.cjs

@@ -1595,8 +1595,69 @@ var Alert = (props) => {
 Alert.displayName = "Alert";
 var Alert_default = Alert;
 
-// src/components/Avatar/Avatar.tsx
+// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
+var import_react2 = __toESM(require("react"), 1);
 var import_jsx_runtime297 = require("react/jsx-runtime");
+var MAX_HEIGHT = 400;
+var AutoResizeTextArea = import_react2.default.forwardRef(
+  (props, ref) => {
+    const { value, className, onChange, disabled, bare = false, ...textareaProps } = props;
+    const localRef = import_react2.default.useRef(null);
+    const setRefs = (el) => {
+      localRef.current = el;
+      if (!ref) return;
+      if (typeof ref === "function") ref(el);
+      else if (ref && "current" in ref)
+        ref.current = el;
+    };
+    const updateHeight = () => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
+    };
+    const handleChange = (e) => {
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: e.target.value }
+        };
+        onChange(event);
+      }
+    };
+    import_react2.default.useEffect(() => {
+      updateHeight();
+    }, [value]);
+    if (bare) {
+      return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+        "textarea",
+        {
+          ...textareaProps,
+          ref: setRefs,
+          className,
+          disabled,
+          value,
+          onChange: handleChange
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+      "textarea",
+      {
+        ...textareaProps,
+        ref: setRefs,
+        disabled,
+        value,
+        onChange: handleChange
+      }
+    ) }) });
+  }
+);
+AutoResizeTextArea.displayName = "AutoResizeTextArea";
+var AutoResizeTextArea_default = AutoResizeTextArea;
+
+// src/components/Avatar/Avatar.tsx
+var import_jsx_runtime298 = require("react/jsx-runtime");
 var CATEGORICAL_COUNT = 8;
 var getColorIndex = (name) => {
   if (!name) return 1;
@@ -1613,13 +1674,13 @@ var Avatar = (props) => {
   const fullInitials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
   const initials = size === "sm" ? fullInitials.slice(0, 1) : fullInitials;
   const catIndex = getColorIndex(name || "");
-  return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };
 Avatar.displayName = "Avatar";
 var Avatar_default = Avatar;
 
 // src/components/Badge/Badge.tsx
-var import_jsx_runtime298 = require("react/jsx-runtime");
+var import_jsx_runtime299 = require("react/jsx-runtime");
 var Badge = (props) => {
   const {
     children,
@@ -1631,39 +1692,39 @@ var Badge = (props) => {
   } = props;
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
-  return /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: clsx_default("lib-xplat-badge", size), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: clsx_default("lib-xplat-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    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_runtime299 = require("react/jsx-runtime");
+var import_jsx_runtime300 = require("react/jsx-runtime");
 var Box = ({
   children,
   title,
   variant = "outlined",
   padding = "md"
 }) => {
-  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 })
+  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 })
   ] });
 };
 Box.displayName = "Box";
 var Box_default = Box;
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-var import_jsx_runtime300 = require("react/jsx-runtime");
+var import_jsx_runtime301 = require("react/jsx-runtime");
 var Breadcrumb = (props) => {
   const { items, separator = "/" } = props;
-  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) => {
+  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) => {
     const isLast = index === items.length - 1;
-    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 })
+    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 })
     ] }, index);
   }) }) });
 };
@@ -1671,7 +1732,7 @@ Breadcrumb.displayName = "Breadcrumb";
 var Breadcrumb_default = Breadcrumb;
 
 // src/components/Button/Button.tsx
-var import_jsx_runtime301 = require("react/jsx-runtime");
+var import_jsx_runtime302 = require("react/jsx-runtime");
 var Button = (props) => {
   const {
     children,
@@ -1680,7 +1741,7 @@ var Button = (props) => {
     disabled,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
     "button",
     {
       className: clsx_default("lib-xplat-button", type, size),
@@ -1694,15 +1755,15 @@ Button.displayName = "Button";
 var Button_default = Button;
 
 // src/components/Calendar/Calendar.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/components/Calendar/useCalendar.ts
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var useCalendar = (initialYear, initialMonth) => {
   const today = /* @__PURE__ */ new Date();
-  const [year, setYear] = import_react2.default.useState(initialYear ?? today.getFullYear());
-  const [month, setMonth] = import_react2.default.useState(initialMonth ?? today.getMonth());
-  const days = import_react2.default.useMemo(() => {
+  const [year, setYear] = import_react3.default.useState(initialYear ?? today.getFullYear());
+  const [month, setMonth] = import_react3.default.useState(initialMonth ?? today.getMonth());
+  const days = import_react3.default.useMemo(() => {
     const firstDay = new Date(year, month, 1);
     const lastDay = new Date(year, month + 1, 0);
     const startDayOfWeek = firstDay.getDay();
@@ -1745,7 +1806,7 @@ var useCalendar = (initialYear, initialMonth) => {
     }
     return result;
   }, [year, month]);
-  const goToPrevMonth = import_react2.default.useCallback(() => {
+  const goToPrevMonth = import_react3.default.useCallback(() => {
     setMonth((prev) => {
       if (prev === 0) {
         setYear((y) => y - 1);
@@ -1754,7 +1815,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev - 1;
     });
   }, []);
-  const goToNextMonth = import_react2.default.useCallback(() => {
+  const goToNextMonth = import_react3.default.useCallback(() => {
     setMonth((prev) => {
       if (prev === 11) {
         setYear((y) => y + 1);
@@ -1763,7 +1824,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev + 1;
     });
   }, []);
-  const goToToday = import_react2.default.useCallback(() => {
+  const goToToday = import_react3.default.useCallback(() => {
     setYear(today.getFullYear());
     setMonth(today.getMonth());
   }, []);
@@ -1797,8 +1858,8 @@ var MONTH_LABELS = {
 };
 
 // src/components/Calendar/Calendar.tsx
-var import_jsx_runtime302 = require("react/jsx-runtime");
-var DayCell = import_react3.default.memo(
+var import_jsx_runtime303 = require("react/jsx-runtime");
+var DayCell = import_react4.default.memo(
   ({
     day,
     disabled,
@@ -1809,7 +1870,7 @@ var DayCell = import_react3.default.memo(
     onEventClick
   }) => {
     if (renderDay) {
-      return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
         "div",
         {
           className: clsx_default(
@@ -1826,7 +1887,7 @@ var DayCell = import_react3.default.memo(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(
       "div",
       {
         className: clsx_default(
@@ -1842,13 +1903,13 @@ var DayCell = import_react3.default.memo(
           if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
         },
         children: [
-          /* @__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)(
+          /* @__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)(
               "span",
               {
                 className: "calendar-event-dot",
-                style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
+                style: { backgroundColor: event.color ?? "var(--semantic-surface-brand-default)" },
                 title: event.label,
                 onClick: (e) => {
                   e.stopPropagation();
@@ -1857,7 +1918,7 @@ var DayCell = import_react3.default.memo(
               },
               ei
             )),
-            dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("span", { className: "calendar-event-more", children: [
+            dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("span", { className: "calendar-event-more", children: [
               "+",
               dayEvents.length - 3
             ] })
@@ -1894,14 +1955,14 @@ var Calendar = (props) => {
     setYear,
     setMonth
   } = useCalendar(yearProp, monthProp);
-  const [pickerMode, setPickerMode] = import_react3.default.useState("days");
-  const [yearRangeStart, setYearRangeStart] = import_react3.default.useState(
+  const [pickerMode, setPickerMode] = import_react4.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react4.default.useState(
     Math.floor(year / 12) * 12
   );
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (yearProp !== void 0) setYear(yearProp);
   }, [yearProp, setYear]);
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (monthProp !== void 0) setMonth(monthProp);
   }, [monthProp, setMonth]);
   const handlePrev = () => {
@@ -1953,15 +2014,15 @@ var Calendar = (props) => {
     setPickerMode("months");
     onMonthChange?.(y, month);
   };
-  const minTime = import_react3.default.useMemo(
+  const minTime = import_react4.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = import_react3.default.useMemo(
+  const maxTime = import_react4.default.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const eventsMap = import_react3.default.useMemo(() => {
+  const eventsMap = import_react4.default.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const e of events) {
       const key = `${e.date.getFullYear()}-${e.date.getMonth()}-${e.date.getDate()}`;
@@ -1971,28 +2032,28 @@ var Calendar = (props) => {
     }
     return map;
   }, [events]);
-  const getEventsForDay = import_react3.default.useCallback(
+  const getEventsForDay = import_react4.default.useCallback(
     (date) => eventsMap.get(`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`) ?? [],
     [eventsMap]
   );
   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_runtime302.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(
     "div",
     {
       className: "lib-xplat-calendar",
       style: selectedColor ? { "--calendar-selected-color": `var(--${selectedColor})` } : void 0,
       children: [
-        /* @__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" })
+        /* @__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" })
         ] }),
-        pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+        pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
           const y = yearRangeStart + i;
-          return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
             "button",
             {
               type: "button",
@@ -2003,7 +2064,7 @@ var Calendar = (props) => {
             y
           );
         }) }),
-        pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "calendar-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+        pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "calendar-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
           "button",
           {
             type: "button",
@@ -2013,8 +2074,8 @@ var Calendar = (props) => {
           },
           i
         )) }),
-        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)(
+        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)(
             "div",
             {
               className: clsx_default(
@@ -2026,12 +2087,12 @@ var Calendar = (props) => {
             },
             label
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "calendar-grid", children: days.map((day, idx) => {
+          /* @__PURE__ */ (0, import_jsx_runtime303.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_runtime302.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
               DayCell,
               {
                 day,
@@ -2054,13 +2115,13 @@ Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
 
 // src/components/CardTab/CardTab.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // src/components/CardTab/CardTabPanel.tsx
-var import_jsx_runtime303 = require("react/jsx-runtime");
+var import_jsx_runtime304 = require("react/jsx-runtime");
 var CardTabPanel = (props) => {
   const { children, columns = 3 } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
     "div",
     {
       className: "card-tab-panel",
@@ -2073,7 +2134,7 @@ CardTabPanel.displayName = "CardTab.Panel";
 var CardTabPanel_default = CardTabPanel;
 
 // src/components/CardTab/CardTab.tsx
-var import_jsx_runtime304 = require("react/jsx-runtime");
+var import_jsx_runtime305 = require("react/jsx-runtime");
 var CardTabRoot = (props) => {
   const {
     tabs,
@@ -2083,7 +2144,7 @@ var CardTabRoot = (props) => {
     children
   } = props;
   const isControlled = activeValueProp !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = import_react4.default.useState(tabs[0]?.value ?? "");
+  const [uncontrolledValue, setUncontrolledValue] = import_react5.default.useState(tabs[0]?.value ?? "");
   const activeValue = isControlled ? activeValueProp : uncontrolledValue;
   const handleTabClick = (tab) => {
     if (!isControlled) {
@@ -2091,16 +2152,16 @@ var CardTabRoot = (props) => {
     }
     onChange?.(tab);
   };
-  const panels = import_react4.default.Children.toArray(children).filter(
-    (child) => import_react4.default.isValidElement(child) && child.type === CardTabPanel_default
+  const panels = import_react5.default.Children.toArray(children).filter(
+    (child) => import_react5.default.isValidElement(child) && child.type === CardTabPanel_default
   );
   const activePanel = panels.find(
     (panel) => panel.props.value === activeValue
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+  return /* @__PURE__ */ (0, import_jsx_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) => {
       const isActive2 = tab.value === activeValue;
-      return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
         "button",
         {
           className: clsx_default("card-tab-trigger", isActive2 && "active"),
@@ -2112,7 +2173,7 @@ var CardTabRoot = (props) => {
         tab.value
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "card-tab-body", children: activePanel })
+    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "card-tab-body", children: activePanel })
   ] });
 };
 CardTabRoot.displayName = "CardTab";
@@ -2122,8 +2183,8 @@ var CardTab = Object.assign(CardTabRoot, {
 var CardTab_default = CardTab;
 
 // src/components/Chart/Chart.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_jsx_runtime305 = require("react/jsx-runtime");
+var import_react6 = __toESM(require("react"), 1);
+var import_jsx_runtime306 = require("react/jsx-runtime");
 var CATEGORICAL_COUNT2 = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
   const n = i + 1;
@@ -2168,8 +2229,8 @@ var toSmoothPath = (points) => {
   return d;
 };
 var useChartSize = (ref) => {
-  const [size, setSize] = import_react5.default.useState({ width: 0, height: 0 });
-  import_react5.default.useEffect(() => {
+  const [size, setSize] = import_react6.default.useState({ width: 0, height: 0 });
+  import_react6.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     let rafId = 0;
@@ -2195,10 +2256,10 @@ var useChartSize = (ref) => {
 };
 var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 var useChartAnimation = (containerRef, dataKey) => {
-  const [animate, setAnimate] = import_react5.default.useState(false);
-  const prevDataKey = import_react5.default.useRef(dataKey);
-  const hasAnimated = import_react5.default.useRef(false);
-  import_react5.default.useEffect(() => {
+  const [animate, setAnimate] = import_react6.default.useState(false);
+  const prevDataKey = import_react6.default.useRef(dataKey);
+  const hasAnimated = import_react6.default.useRef(false);
+  import_react6.default.useEffect(() => {
     if (prefersReducedMotion()) return;
     const el = containerRef.current;
     if (!el) return;
@@ -2214,7 +2275,7 @@ var useChartAnimation = (containerRef, dataKey) => {
     observer.observe(el);
     return () => observer.disconnect();
   }, [containerRef]);
-  import_react5.default.useEffect(() => {
+  import_react6.default.useEffect(() => {
     if (dataKey !== prevDataKey.current) {
       prevDataKey.current = dataKey;
       if (prefersReducedMotion()) return;
@@ -2228,15 +2289,15 @@ var useChartAnimation = (containerRef, dataKey) => {
 };
 var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
-  const [tooltip, setTooltip] = import_react5.default.useState({
+  const [tooltip, setTooltip] = import_react6.default.useState({
     visible: false,
     x: 0,
     y: 0,
     content: ""
   });
-  const containerRef = import_react5.default.useRef(null);
-  const rafRef = import_react5.default.useRef(0);
-  const move = import_react5.default.useCallback((e) => {
+  const containerRef = import_react6.default.useRef(null);
+  const rafRef = import_react6.default.useRef(0);
+  const move = import_react6.default.useCallback((e) => {
     if (!enabled) return;
     const cx = e.clientX;
     const cy = e.clientY;
@@ -2247,24 +2308,24 @@ var useChartTooltip = (enabled) => {
       setTooltip((prev) => ({ ...prev, x: cx - rect.left, y: cy - rect.top }));
     });
   }, [enabled]);
-  const show = import_react5.default.useCallback((e, content) => {
+  const show = import_react6.default.useCallback((e, content) => {
     if (!enabled) return;
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const hide = import_react5.default.useCallback(() => {
+  const hide = import_react6.default.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var GridLines = import_react5.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(import_jsx_runtime305.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+var GridLines = import_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) => {
   const y = PADDING.top + (1 - ratio) * chartH;
   const val = Math.round(maxVal * ratio);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  return /* @__PURE__ */ (0, import_jsx_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 })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -2274,18 +2335,18 @@ var getLabelStep = (count, chartW) => {
   if (count <= maxLabels) return 1;
   return Math.ceil(count / maxLabels);
 };
-var AxisLabels = import_react5.default.memo(({ labels, count, chartW, height }) => {
+var AxisLabels = import_react6.default.memo(({ labels, count, chartW, height }) => {
   const step = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(import_jsx_runtime305.Fragment, { children: labels.map((label, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(import_jsx_runtime306.Fragment, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
 var useCrosshair = (seriesPoints, entries, labels, chartH) => {
-  const [activeIndex, setActiveIndex] = import_react5.default.useState(null);
-  const handleMouseMove = import_react5.default.useCallback((e) => {
+  const [activeIndex, setActiveIndex] = import_react6.default.useState(null);
+  const handleMouseMove = import_react6.default.useCallback((e) => {
     const svg = e.currentTarget;
     const rect = svg.getBoundingClientRect();
     const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
@@ -2304,17 +2365,17 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
     }
     setActiveIndex(minDist <= threshold ? closest : null);
   }, [seriesPoints]);
-  const handleMouseLeave = import_react5.default.useCallback(() => {
+  const handleMouseLeave = import_react6.default.useCallback(() => {
     setActiveIndex(null);
   }, []);
-  const tooltipContent = import_react5.default.useMemo(() => {
+  const tooltipContent = import_react6.default.useMemo(() => {
     if (activeIndex === null) return "";
     return entries.map(([key], di) => {
       const p = seriesPoints[di]?.[activeIndex];
       return p ? `${key}: ${p.v}` : "";
     }).filter(Boolean).join(" / ");
   }, [activeIndex, entries, seriesPoints]);
-  const getTooltipAt = import_react5.default.useCallback((idx) => {
+  const getTooltipAt = import_react6.default.useCallback((idx) => {
     return entries.map(([key], di) => {
       const p = seriesPoints[di]?.[idx];
       return p ? `${key}: ${p.v}` : "";
@@ -2322,16 +2383,16 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react5.default.useMemo(() => {
+var LineChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = import_react5.default.useMemo(
+  const seriesPoints = import_react6.default.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -2341,9 +2402,9 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const clipRef = import_react5.default.useRef(null);
+  const clipRef = import_react6.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
-  import_react5.default.useEffect(() => {
+  import_react6.default.useEffect(() => {
     if (!animate || !clipRef.current) return;
     clipRef.current.setAttribute("width", "0");
     requestAnimationFrame(() => {
@@ -2355,7 +2416,7 @@ var LineChart = import_react5.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_runtime305.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
@@ -2373,9 +2434,9 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
         onLeave();
       },
       children: [
-        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 }),
+        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 }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -2384,16 +2445,16 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
           const gradientId = `line-gradient-${di}`;
           const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
           const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
-          return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+          return /* @__PURE__ */ (0, import_jsx_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" })
             ] }) }),
-            /* @__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" })
+            /* @__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" })
             ] }),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -2405,7 +2466,7 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
           "line",
           {
             x1: activeX,
@@ -2415,7 +2476,7 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
           "rect",
           {
             x: PADDING.left,
@@ -2431,16 +2492,16 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, anima
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react5.default.useMemo(() => {
+var CurveChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = import_react5.default.useMemo(
+  const seriesPoints = import_react6.default.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -2450,9 +2511,9 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const curveClipRef = import_react5.default.useRef(null);
+  const curveClipRef = import_react6.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
-  import_react5.default.useEffect(() => {
+  import_react6.default.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
     curveClipRef.current.setAttribute("width", "0");
     requestAnimationFrame(() => {
@@ -2464,7 +2525,7 @@ var CurveChart = import_react5.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_runtime305.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
@@ -2483,9 +2544,9 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
         onLeave();
       },
       children: [
-        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 }),
+        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 }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -2494,16 +2555,16 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
           const gradientId = `curve-gradient-${di}`;
           const linePath = toSmoothPath(points);
           const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
-          return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+          return /* @__PURE__ */ (0, import_jsx_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" })
             ] }) }),
-            /* @__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" })
+            /* @__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" })
             ] }),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -2515,7 +2576,7 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
           "line",
           {
             x1: activeX,
@@ -2525,7 +2586,7 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
           "rect",
           {
             x: PADDING.left,
@@ -2541,9 +2602,9 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, anim
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
-  const maxVal = import_react5.default.useMemo(() => {
+var BarChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
@@ -2555,7 +2616,7 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, animat
   const barGap = groupCount > 1 ? 2 : 0;
   const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
   const baseline = PADDING.top + chartH;
-  const bars = import_react5.default.useMemo(
+  const bars = import_react6.default.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
         const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
@@ -2568,11 +2629,11 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, animat
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime306.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);
@@ -2581,7 +2642,7 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, animat
         const r2 = Math.min(4, b.w / 2);
         const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
         const delay = 100 + i * 80;
-        return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
           "path",
           {
             d,
@@ -2602,11 +2663,11 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, animat
   ] });
 });
 BarChart.displayName = "BarChart";
-var PieDonutChart = import_react5.default.memo(
+var PieDonutChart = import_react6.default.memo(
   ({ data, labels, width, height, animate, isDoughnut, onHover, onMove, onLeave }) => {
-    const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
-    const values = import_react5.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
-    const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
+    const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
+    const values = import_react6.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
+    const total = import_react6.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
     const size = Math.min(width, height);
     const cx = size / 2;
     const cy = size / 2;
@@ -2614,10 +2675,10 @@ var PieDonutChart = import_react5.default.memo(
     const innerR = isDoughnut ? r2 * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    const maskRef = import_react5.default.useRef(null);
+    const maskRef = import_react6.default.useRef(null);
     const maskR = r2 + 10;
     const maskCircumference = 2 * Math.PI * maskR;
-    import_react5.default.useEffect(() => {
+    import_react6.default.useEffect(() => {
       if (!animate || !maskRef.current) return;
       const el = maskRef.current;
       el.style.strokeDasharray = `${maskCircumference}`;
@@ -2627,7 +2688,7 @@ var PieDonutChart = import_react5.default.memo(
         el.style.strokeDashoffset = "0";
       });
     }, [animate, maskCircumference]);
-    const sliceData = import_react5.default.useMemo(() => {
+    const sliceData = import_react6.default.useMemo(() => {
       let angle0 = -Math.PI / 2;
       let cumulativeAngle = 0;
       return values.map((v, i) => {
@@ -2661,8 +2722,8 @@ var PieDonutChart = import_react5.default.memo(
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
     const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
-    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)(
+    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)(
         "circle",
         {
           ref: maskRef,
@@ -2675,7 +2736,7 @@ var PieDonutChart = import_react5.default.memo(
           transform: `rotate(-90 ${cx} ${cy})`
         }
       ) }) }),
-      /* @__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)(
+      /* @__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)(
         "path",
         {
           d: s.d,
@@ -2691,9 +2752,9 @@ var PieDonutChart = import_react5.default.memo(
 );
 PieDonutChart.displayName = "PieDonutChart";
 var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, children }) => {
-  const ref = import_react5.default.useRef(null);
-  const [pos, setPos] = import_react5.default.useState({ left: 0, top: 0 });
-  import_react5.default.useLayoutEffect(() => {
+  const ref = import_react6.default.useRef(null);
+  const [pos, setPos] = import_react6.default.useState({ left: 0, top: 0 });
+  import_react6.default.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -2710,15 +2771,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_runtime305.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
     "div",
     {
       ref,
       className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
       style: { left: pos.left, top: pos.top },
       children: [
-        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 })
+        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 })
       ]
     }
   );
@@ -2730,14 +2791,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_runtime305.jsx)("div", { className: "chart-legend", children: values.map((v, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime306.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_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: [
+      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: [
             v.toLocaleString(),
             "(",
             pct,
@@ -2747,103 +2808,42 @@ var ChartLegend = ({ data, labels, type }) => {
       ] }, i);
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "chart-legend", children: entries.map(([key], di) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime306.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_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() })
+    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() })
       ] })
     ] }, di);
   }) });
 };
-var Chart = import_react5.default.memo((props) => {
+var Chart = import_react6.default.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
-  const stableData = import_react5.default.useMemo(() => data, [JSON.stringify(data)]);
-  const stableLabels = import_react5.default.useMemo(() => labels, [JSON.stringify(labels)]);
-  const dataKey = import_react5.default.useMemo(() => JSON.stringify(labels), [labels]);
+  const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = import_react6.default.useMemo(() => labels, [JSON.stringify(labels)]);
+  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_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 })
+  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 })
   ] });
 });
 Chart.displayName = "Chart";
 var Chart_default = Chart;
 
-// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_jsx_runtime306 = require("react/jsx-runtime");
-var MAX_HEIGHT = 400;
-var AutoResizeTextArea = import_react6.default.forwardRef(
-  (props, ref) => {
-    const { value, className, onChange, disabled, bare = false, ...textareaProps } = props;
-    const localRef = import_react6.default.useRef(null);
-    const setRefs = (el) => {
-      localRef.current = el;
-      if (!ref) return;
-      if (typeof ref === "function") ref(el);
-      else if (ref && "current" in ref)
-        ref.current = el;
-    };
-    const updateHeight = () => {
-      const el = localRef.current;
-      if (!el) return;
-      el.style.height = "0px";
-      el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
-    };
-    const handleChange = (e) => {
-      if (onChange) {
-        const event = {
-          ...e,
-          target: { value: e.target.value }
-        };
-        onChange(event);
-      }
-    };
-    import_react6.default.useEffect(() => {
-      updateHeight();
-    }, [value]);
-    if (bare) {
-      return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
-        "textarea",
-        {
-          ...textareaProps,
-          ref: setRefs,
-          className,
-          disabled,
-          value,
-          onChange: handleChange
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
-      "textarea",
-      {
-        ...textareaProps,
-        ref: setRefs,
-        disabled,
-        value,
-        onChange: handleChange
-      }
-    ) }) });
-  }
-);
-AutoResizeTextArea.displayName = "AutoResizeTextArea";
-var AutoResizeTextArea_default = AutoResizeTextArea;
-
 // src/components/ChatInput/ChatInput.tsx
 var import_react7 = __toESM(require("react"), 1);
 
@@ -5368,12 +5368,12 @@ var Select_default = Select;
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime337 = require("react/jsx-runtime");
 var SIZE_MAP = {
-  xs: "var(--spacing-size-1)",
-  sm: "var(--spacing-size-2)",
-  md: "var(--spacing-size-4)",
-  lg: "var(--spacing-size-8)",
-  xl: "var(--spacing-size-12)",
-  "2xl": "var(--spacing-size-16)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-8)",
+  xl: "var(--spacing-space-12)",
+  "2xl": "var(--spacing-space-16)",
   full: "100%"
 };
 var Skeleton = (props) => {