@x-plat/design-system 0.8.3 → 0.10.0

package/dist/index.cjs

@@ -165,6 +165,8 @@ __export(index_exports, {
   FacebookIcon: () => FacebookIcon_default,
   FastForwardIcon: () => FastForwardIcon_default,
   FeatherIcon: () => FeatherIcon_default,
+  Field: () => Field,
+  FieldMessage: () => FieldMessage_default,
   FigmaIcon: () => FigmaIcon_default,
   FileIcon: () => FileIcon_default,
   FileMinusIcon: () => FileMinusIcon_default,
@@ -393,6 +395,7 @@ __export(index_exports, {
   breakpoints: () => breakpoints,
   cssVar: () => import_tokens_core2.cssVar,
   gridColumns: () => gridColumns,
+  hasError: () => hasError,
   isInRange: () => isInRange,
   isSameDay: () => isSameDay,
   semantic: () => import_tokens_core.semantic,
@@ -5999,11 +6002,49 @@ var Alert_default = Alert;
 
 // src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
 var import_react2 = __toESM(require("react"), 1);
+
+// src/components/FieldMessage/FieldMessage.tsx
 var import_jsx_runtime297 = require("react/jsx-runtime");
+var ICON = {
+  default: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(InfoIcon_default, {}),
+  success: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(InfoIcon_default, {}),
+  error: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var FieldMessage_default = FieldMessage;
+var Field = (props) => {
+  const { validations, children } = props;
+  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(import_jsx_runtime297.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
+// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
+var import_jsx_runtime298 = 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 { value, className, onChange, disabled, bare = false, validations, ...textareaProps } = props;
     const localRef = import_react2.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -6031,9 +6072,10 @@ var AutoResizeTextArea = import_react2.default.forwardRef(
       updateHeight();
     }, [value]);
     if (bare) {
-      return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
         "textarea",
         {
+          "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
           className,
@@ -6043,9 +6085,10 @@ var AutoResizeTextArea = import_react2.default.forwardRef(
         }
       );
     }
-    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)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
       "textarea",
       {
+        "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
         disabled,
@@ -6053,13 +6096,14 @@ var AutoResizeTextArea = import_react2.default.forwardRef(
         onChange: handleChange
       }
     ) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(Field, { validations, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";
 var AutoResizeTextArea_default = AutoResizeTextArea;
 
 // src/components/Avatar/Avatar.tsx
-var import_jsx_runtime298 = require("react/jsx-runtime");
+var import_jsx_runtime299 = require("react/jsx-runtime");
 var CATEGORICAL_COUNT = 8;
 var getColorIndex = (name) => {
   if (!name) return 1;
@@ -6076,36 +6120,36 @@ 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_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" }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime299.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/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);
   }) }) });
 };
@@ -6113,7 +6157,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,
@@ -6122,7 +6166,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),
@@ -6239,7 +6283,7 @@ var MONTH_LABELS = {
 };
 
 // src/components/Calendar/Calendar.tsx
-var import_jsx_runtime302 = require("react/jsx-runtime");
+var import_jsx_runtime303 = require("react/jsx-runtime");
 var DayCell = import_react4.default.memo(
   ({
     day,
@@ -6251,7 +6295,7 @@ var DayCell = import_react4.default.memo(
     onEventClick
   }) => {
     if (renderDay) {
-      return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
         "div",
         {
           className: clsx_default(
@@ -6268,7 +6312,7 @@ var DayCell = import_react4.default.memo(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(
       "div",
       {
         className: clsx_default(
@@ -6284,9 +6328,9 @@ var DayCell = import_react4.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",
@@ -6299,7 +6343,7 @@ var DayCell = import_react4.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
             ] })
@@ -6420,21 +6464,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_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",
@@ -6445,7 +6489,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",
@@ -6455,8 +6499,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(
@@ -6468,12 +6512,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,
@@ -6499,10 +6543,10 @@ var Calendar_default = Calendar;
 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",
@@ -6515,7 +6559,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,
@@ -6539,10 +6583,10 @@ var CardTabRoot = (props) => {
   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"),
@@ -6554,7 +6598,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";
@@ -6565,7 +6609,7 @@ var CardTab_default = CardTab;
 
 // src/components/Chart/Chart.tsx
 var import_react6 = __toESM(require("react"), 1);
-var import_jsx_runtime305 = require("react/jsx-runtime");
+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;
@@ -6708,12 +6752,12 @@ var formatTick = (value, maxVal) => {
   const fixed = value.toFixed(decimals);
   return decimals === 0 ? Number(fixed).toLocaleString("en-US") : fixed;
 };
-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) => {
+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 = formatTick(maxVal * ratio, maxVal);
-  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";
@@ -6725,10 +6769,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_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";
@@ -6804,7 +6848,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_runtime305.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
@@ -6822,9 +6866,9 @@ var LineChart = import_react6.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];
@@ -6833,16 +6877,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_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,
@@ -6854,7 +6898,7 @@ var LineChart = import_react6.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,
@@ -6864,7 +6908,7 @@ var LineChart = import_react6.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,
@@ -6913,7 +6957,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_runtime305.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
@@ -6932,9 +6976,9 @@ var CurveChart = import_react6.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];
@@ -6943,16 +6987,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_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,
@@ -6964,7 +7008,7 @@ var CurveChart = import_react6.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,
@@ -6974,7 +7018,7 @@ var CurveChart = import_react6.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,
@@ -7017,11 +7061,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_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);
@@ -7030,7 +7074,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_runtime305.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
           "path",
           {
             d,
@@ -7110,8 +7154,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_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,
@@ -7124,7 +7168,7 @@ var PieDonutChart = import_react6.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,
@@ -7159,15 +7203,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 })
       ]
     }
   );
@@ -7179,14 +7223,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,
@@ -7196,22 +7240,23 @@ 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_react6.default.memo((props) => {
-  const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
+  const { variant, type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
+  const shape = variant ?? type ?? "line";
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
@@ -7219,14 +7264,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_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 && shape === "line" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "curve" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "bar" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "pie" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "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";
@@ -7236,7 +7281,7 @@ var Chart_default = Chart;
 var import_react7 = __toESM(require("react"), 1);
 
 // src/components/IconButton/IconButton.tsx
-var import_jsx_runtime306 = require("react/jsx-runtime");
+var import_jsx_runtime307 = require("react/jsx-runtime");
 var IconButton = (props) => {
   const {
     icon,
@@ -7245,7 +7290,7 @@ var IconButton = (props) => {
     disabled,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
     "button",
     {
       className: clsx_default("lib-xplat-icon-button", type, size),
@@ -7259,7 +7304,7 @@ IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/components/ChatInput/ChatInput.tsx
-var import_jsx_runtime307 = require("react/jsx-runtime");
+var import_jsx_runtime308 = require("react/jsx-runtime");
 var ChatInput = import_react7.default.forwardRef(
   (props, ref) => {
     const {
@@ -7268,7 +7313,8 @@ var ChatInput = import_react7.default.forwardRef(
       disabled = false,
       buttonType = "primary",
       onSubmit,
-      onChange
+      onChange,
+      validations
     } = props;
     const isControlled = valueProp !== void 0;
     const [internalValue, setInternalValue] = import_react7.default.useState("");
@@ -7290,8 +7336,8 @@ var ChatInput = import_react7.default.forwardRef(
         handleSubmit();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
         AutoResizeTextArea_default,
         {
           ref,
@@ -7302,13 +7348,14 @@ var ChatInput = import_react7.default.forwardRef(
           disabled,
           rows: 1,
           onChange: handleChange,
+          "aria-invalid": hasError(validations) || void 0,
           onKeyDown: handleKeyDown
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
         IconButton_default,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(MessageSquareIcon_default, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(MessageSquareIcon_default, {}),
           type: buttonType,
           size: "sm",
           disabled: !hasText || disabled,
@@ -7317,6 +7364,7 @@ var ChatInput = import_react7.default.forwardRef(
         }
       )
     ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Field, { validations, children: control });
   }
 );
 ChatInput.displayName = "ChatInput";
@@ -7341,8 +7389,11 @@ var import_tokens_core = require("@x-plat/tokens-core");
 // src/tokens/index.ts
 var import_tokens_core2 = require("@x-plat/tokens-core");
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/components/CheckBox/CheckBox.tsx
-var import_jsx_runtime308 = require("react/jsx-runtime");
+var import_jsx_runtime309 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     checked,
@@ -7351,9 +7402,11 @@ var CheckBox = (props) => {
     onChange,
     disabled,
     size = "md",
-    type = "brand",
+    type = "primary",
+    validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
@@ -7361,60 +7414,45 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, statusType, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
       "input",
       {
         type: "checkbox",
         checked,
         onChange: handleChange,
         disabled,
+        "aria-invalid": hasError(validations) || void 0,
         ...rest
       }
     ),
-    /* @__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 })
+    /* @__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 })
   ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(Field, { validations, children: control });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-var import_jsx_runtime309 = require("react/jsx-runtime");
+var import_jsx_runtime310 = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
     type = "primary",
     size = "md"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 
 // src/components/Input/Input.tsx
 var import_react8 = __toESM(require("react"), 1);
 
-// src/components/Input/InputValidations.tsx
-var import_jsx_runtime310 = require("react/jsx-runtime");
-var InputValidations = (props) => {
-  const { message, status = "default" } = props;
-  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_runtime310.jsx)("div", { className: "message", children: message })
-  ] });
-};
-InputValidations.displayName = "InputValidations";
-var InputValidations_default = InputValidations;
-
 // src/components/Input/reg.ts
 var numberAndCommaReg = /^[0-9,]+$/;
 var phoneNumberMaxLengthReg = /^.{0,13}$/;
@@ -7451,7 +7489,6 @@ var handleTelBackspace = (prevValue, currValue) => {
 
 // src/components/Input/Input.tsx
 var import_jsx_runtime311 = require("react/jsx-runtime");
-var import_react9 = require("react");
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -7540,32 +7577,27 @@ var Input = import_react8.default.forwardRef((props, ref) => {
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
-              onChange: handleChange
+              onChange: handleChange,
+              "aria-invalid": hasError(validations) || void 0
             }
           ),
           suffix && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    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,
-        key: `${validation.message}_${idx}`
-      }
-    )) })
+    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(FieldMessage_default, { validations })
   ] });
 });
 Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_jsx_runtime312 = require("react/jsx-runtime");
-var PasswordInput = import_react10.default.forwardRef(
+var PasswordInput = import_react9.default.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = import_react10.default.useState(false);
+    const [isView, setIsView] = import_react9.default.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
@@ -7584,16 +7616,16 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 var import_jsx_runtime313 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react11.default.useState(false);
-  const [visible, setVisible] = import_react11.default.useState(false);
-  const [settled, setSettled] = import_react11.default.useState(false);
-  import_react11.default.useEffect(() => {
+  const [mounted, setMounted] = import_react10.default.useState(false);
+  const [visible, setVisible] = import_react10.default.useState(false);
+  const [settled, setSettled] = import_react10.default.useState(false);
+  import_react10.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -7636,9 +7668,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_jsx_runtime314 = require("react/jsx-runtime");
-var DayCell2 = import_react12.default.memo(
+var DayCell2 = import_react11.default.memo(
   ({
     day,
     disabled,
@@ -7690,26 +7722,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = import_react12.default.useState("days");
-  const [yearRangeStart, setYearRangeStart] = import_react12.default.useState(
+  const [pickerMode, setPickerMode] = import_react11.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react11.default.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = import_react12.default.useMemo(
+  const minTime = import_react11.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = import_react12.default.useMemo(
+  const maxTime = import_react11.default.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = import_react12.default.useMemo(() => {
+  const highlightSet = import_react11.default.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = import_react12.default.useCallback(
+  const handleSelect = import_react11.default.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -7838,8 +7870,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = import_react13.default.useState(false);
-  const [tempDate, setTempDate] = import_react13.default.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = import_react12.default.useState(false);
+  const [tempDate, setTempDate] = import_react12.default.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -7888,18 +7920,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/Tab/Tab.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var import_jsx_runtime316 = require("react/jsx-runtime");
-var TabItem = import_react14.default.forwardRef((props, ref) => {
+var TabItem = import_react13.default.forwardRef((props, ref) => {
   const { isActive: isActive2, title, onClick } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
     "div",
@@ -7917,22 +7949,23 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 var import_jsx_runtime317 = require("react/jsx-runtime");
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react15.default.useState({
+  const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
+  const shape = variant ?? type ?? "default";
+  const [underlineStyle, setUnderlineStyle] = import_react14.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react15.default.useRef([]);
+  const itemRefs = import_react14.default.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react15.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
       TabItem_default,
       {
@@ -7945,7 +7978,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -7971,7 +8004,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = import_react16.default.useState("start");
+  const [activeTab, setActiveTab] = import_react15.default.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -8056,7 +8089,7 @@ var RangePicker_default = RangePicker;
 var import_jsx_runtime319 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react17.default.useState(false);
+  const [isOpen, setIsOpen] = import_react16.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -8065,7 +8098,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react17.default.cloneElement(component, { onClick: handleClick }),
+    import_react16.default.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
@@ -8124,15 +8157,15 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime321 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = import_react18.default.useState(false);
-  const [visible, setVisible] = import_react18.default.useState(false);
-  import_react18.default.useEffect(() => {
+  const [mounted, setMounted] = import_react17.default.useState(false);
+  const [visible, setVisible] = import_react17.default.useState(false);
+  import_react17.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -8176,7 +8209,7 @@ Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom3 = __toESM(require("react-dom"), 1);
@@ -8188,13 +8221,13 @@ Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react19 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react19.default.useState({
+  const [position, setPosition] = import_react18.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react19.default.useCallback(() => {
+  const calculatePosition = import_react18.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -8221,13 +8254,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react19.default.useLayoutEffect(() => {
+  import_react18.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react19.default.useEffect(() => {
+  import_react18.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -8235,7 +8268,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  import_react19.default.useEffect(() => {
+  import_react18.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -8249,9 +8282,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react20 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react20.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -8277,14 +8310,14 @@ var useClickOutside_default = useClickOutside;
 var import_jsx_runtime322 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react21.default.useState(false);
-  const [mounted, setMounted] = import_react21.default.useState(false);
-  const [visible, setVisible] = import_react21.default.useState(false);
-  const triggerRef = import_react21.default.useRef(null);
-  const menuRef = import_react21.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react20.default.useState(false);
+  const [mounted, setMounted] = import_react20.default.useState(false);
+  const [visible, setVisible] = import_react20.default.useState(false);
+  const triggerRef = import_react20.default.useRef(null);
+  const menuRef = import_react20.default.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  import_react21.default.useEffect(() => {
+  import_react20.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -8338,7 +8371,7 @@ Dropdown.displayName = "Dropdown";
 var Dropdown_default = Dropdown;
 
 // src/components/Editor/Editor.tsx
-var import_react22 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 var import_jsx_runtime323 = require("react/jsx-runtime");
 var DEFAULT_TOOLBAR = [
   "bold",
@@ -8446,21 +8479,21 @@ var Editor = (props) => {
     onImageUpload,
     minHeight = 200
   } = props;
-  const editorRef = import_react22.default.useRef(null);
-  const lastRangeRef = import_react22.default.useRef(null);
-  const composingRef = import_react22.default.useRef(false);
-  const [isFocused, setIsFocused] = import_react22.default.useState(false);
-  const [isEmpty, setIsEmpty] = import_react22.default.useState(!value);
-  const [activeFormats, setActiveFormats] = import_react22.default.useState(/* @__PURE__ */ new Set());
-  const [slashOpen, setSlashOpen] = import_react22.default.useState(false);
-  const [slashFilter, setSlashFilter] = import_react22.default.useState("");
-  const [slashIdx, setSlashIdx] = import_react22.default.useState(0);
-  const [slashPos, setSlashPos] = import_react22.default.useState({ top: 0, left: 0 });
-  const slashStartRangeRef = import_react22.default.useRef(null);
-  const [linkOpen, setLinkOpen] = import_react22.default.useState(false);
-  const [linkValue, setLinkValue] = import_react22.default.useState("");
-  const [linkPos, setLinkPos] = import_react22.default.useState({ top: 0, left: 0 });
-  import_react22.default.useEffect(() => {
+  const editorRef = import_react21.default.useRef(null);
+  const lastRangeRef = import_react21.default.useRef(null);
+  const composingRef = import_react21.default.useRef(false);
+  const [isFocused, setIsFocused] = import_react21.default.useState(false);
+  const [isEmpty, setIsEmpty] = import_react21.default.useState(!value);
+  const [activeFormats, setActiveFormats] = import_react21.default.useState(/* @__PURE__ */ new Set());
+  const [slashOpen, setSlashOpen] = import_react21.default.useState(false);
+  const [slashFilter, setSlashFilter] = import_react21.default.useState("");
+  const [slashIdx, setSlashIdx] = import_react21.default.useState(0);
+  const [slashPos, setSlashPos] = import_react21.default.useState({ top: 0, left: 0 });
+  const slashStartRangeRef = import_react21.default.useRef(null);
+  const [linkOpen, setLinkOpen] = import_react21.default.useState(false);
+  const [linkValue, setLinkValue] = import_react21.default.useState("");
+  const [linkPos, setLinkPos] = import_react21.default.useState({ top: 0, left: 0 });
+  import_react21.default.useEffect(() => {
     if (!editorRef.current) return;
     if (editorRef.current.innerHTML !== value) {
       editorRef.current.innerHTML = sanitizeHtml(value || "");
@@ -8574,7 +8607,7 @@ var Editor = (props) => {
     setSlashIdx(0);
     slashStartRangeRef.current = null;
   };
-  const filteredSlashItems = import_react22.default.useMemo(() => {
+  const filteredSlashItems = import_react21.default.useMemo(() => {
     if (!slashFilter) return SLASH_ITEMS;
     const f = slashFilter.toLowerCase();
     return SLASH_ITEMS.filter((it) => it.label.toLowerCase().includes(f) || it.key.includes(f));
@@ -8967,7 +9000,7 @@ var EditorToolbar = ({ items, active, onAction }) => {
   )) });
 };
 var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
-  import_react22.default.useEffect(() => {
+  import_react21.default.useEffect(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       const menu = document.querySelector(".lib-xplat-editor__slash-menu");
@@ -9001,8 +9034,8 @@ var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
   );
 };
 var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
-  const inputRef = import_react22.default.useRef(null);
-  import_react22.default.useEffect(() => {
+  const inputRef = import_react21.default.useRef(null);
+  import_react21.default.useEffect(() => {
     inputRef.current?.focus();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime323.jsxs)(
@@ -9060,7 +9093,7 @@ EmptyState.displayName = "EmptyState";
 var EmptyState_default = EmptyState;
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 var import_jsx_runtime325 = require("react/jsx-runtime");
 var FileUpload = (props) => {
   const {
@@ -9069,10 +9102,11 @@ var FileUpload = (props) => {
     maxSize,
     onChange,
     label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
-    description
+    description,
+    validations
   } = props;
-  const [isDragOver, setIsDragOver] = import_react23.default.useState(false);
-  const inputRef = import_react23.default.useRef(null);
+  const [isDragOver, setIsDragOver] = import_react22.default.useState(false);
+  const inputRef = import_react22.default.useRef(null);
   const handleFiles = (fileList) => {
     let files = Array.from(fileList);
     if (maxSize) {
@@ -9102,7 +9136,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -9118,7 +9152,8 @@ var FileUpload = (props) => {
             type: "file",
             accept,
             multiple,
-            onChange: handleChange
+            onChange: handleChange,
+            "aria-invalid": hasError(validations) || void 0
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(UploadIcon_default, {}) }),
@@ -9127,15 +9162,16 @@ var FileUpload = (props) => {
       ]
     }
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(Field, { validations, children: control });
 };
 FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 
 // src/components/HtmlTypeWriter/utils.ts
-var import_react24 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -9203,15 +9239,15 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return import_react24.default.createElement(tag, props);
+    return import_react23.default.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return import_react24.default.createElement(tag, props, ...children);
+  return import_react23.default.createElement(tag, props, ...children);
 };
 var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : import_react24.default.createElement(import_react24.default.Fragment, { key: idx }, node);
+    return node == null ? null : import_react23.default.createElement(import_react23.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 };
@@ -9224,20 +9260,20 @@ var HtmlTypeWriter = ({
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = import_react25.default.useState(0);
-  const doneCalledRef = import_react25.default.useRef(false);
-  const { doc, rangeMap, totalLength } = import_react25.default.useMemo(() => {
+  const [typedLen, setTypedLen] = import_react24.default.useState(0);
+  const doneCalledRef = import_react24.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react24.default.useMemo(() => {
     if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  import_react25.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  import_react25.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -9245,18 +9281,18 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  import_react25.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  import_react25.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = import_react25.default.useMemo(
+  const parsed = import_react24.default.useMemo(
     () => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
     [doc, typedLen, rangeMap]
   );
@@ -9266,12 +9302,12 @@ HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-var import_react26 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 var import_jsx_runtime327 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
-  const { value, label, onChange } = props;
-  const [previewUrl, setPreviewUrl] = import_react26.default.useState();
-  import_react26.default.useEffect(() => {
+  const { value, label, onChange, validations } = props;
+  const [previewUrl, setPreviewUrl] = import_react25.default.useState();
+  import_react25.default.useEffect(() => {
     if (!value) {
       setPreviewUrl(void 0);
       return;
@@ -9280,7 +9316,7 @@ var ImageSelector = (props) => {
     setPreviewUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = import_react26.default.useRef(null);
+  const inputRef = import_react25.default.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -9293,7 +9329,7 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+  const control = /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
       "input",
       {
@@ -9301,7 +9337,8 @@ var ImageSelector = (props) => {
         accept: "image/*",
         id: "image-input",
         onChange: handleFileChange,
-        ref: inputRef
+        ref: inputRef,
+        "aria-invalid": hasError(validations) || void 0
       }
     ),
     value && /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: "action-bar", children: [
@@ -9313,6 +9350,7 @@ var ImageSelector = (props) => {
       /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Field, { validations, children: control });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
@@ -9366,11 +9404,12 @@ var NotificationBadge = (props) => {
     dot = false,
     size = "md"
   } = props;
+  const statusType = normalizeStatus(type);
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("span", { className: clsx_default("badge-indicator", statusType, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";
@@ -9411,8 +9450,9 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -9420,7 +9460,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, statusType), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
       "button",
       {
@@ -9459,17 +9499,17 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/PopOver/PopOver.tsx
-var import_react27 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 var import_jsx_runtime332 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react27.default.useRef(null);
-  const triggerRef = import_react27.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react27.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react27.default.useState(false);
+  const popRef = import_react26.default.useRef(null);
+  const triggerRef = import_react26.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react26.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react26.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react27.default.useEffect(() => {
+  import_react26.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -9521,11 +9561,12 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    type = "brand",
+    type = "primary",
     showLabel = false
   } = props;
+  const statusType = normalizeStatus(type);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
       "div",
       {
@@ -9553,12 +9594,12 @@ Progress.displayName = "Progress";
 var Progress_default = Progress;
 
 // src/components/Radio/RadioGroupContext.tsx
-var import_react28 = __toESM(require("react"), 1);
-var RadioGroupContext = import_react28.default.createContext(
+var import_react27 = __toESM(require("react"), 1);
+var RadioGroupContext = import_react27.default.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return import_react28.default.useContext(RadioGroupContext);
+  return import_react27.default.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
@@ -9570,9 +9611,11 @@ var Radio = (props) => {
     className,
     value,
     size: sizeProp,
-    type = "brand",
+    type = "primary",
+    validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const context = useRadioGroupContext();
   const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
@@ -9582,18 +9625,27 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)(
     "label",
     {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+          "input",
+          {
+            ...rest,
+            ...inputProps,
+            checked: localChecked,
+            type: "radio",
+            "aria-invalid": hasError(validations) || void 0
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
           "div",
           {
@@ -9608,6 +9660,7 @@ var Radio = (props) => {
       ]
     }
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(Field, { validations, children: control });
 };
 Radio.displayName = "Radio";
 var Radio_default = Radio;
@@ -9622,19 +9675,19 @@ RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
-var import_react31 = __toESM(require("react"), 1);
+var import_react30 = __toESM(require("react"), 1);
 
 // src/components/Select/context.ts
-var import_react29 = __toESM(require("react"), 1);
-var SelectContext = import_react29.default.createContext(null);
+var import_react28 = __toESM(require("react"), 1);
+var SelectContext = import_react28.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react30 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 var import_jsx_runtime336 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = import_react30.default.useContext(context_default);
+  const ctx = import_react29.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -9675,30 +9728,31 @@ var SelectRoot = (props) => {
     children,
     disabled = false,
     error = false,
+    validations,
     size = "md"
   } = props;
-  const itemChildren = import_react31.default.Children.toArray(children).filter(
-    (child) => import_react31.default.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = import_react30.default.Children.toArray(children).filter(
+    (child) => import_react30.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react31.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react31.default.useState(null);
-  const [uncontrolledValue, setUncontrolledValue] = import_react31.default.useState(void 0);
-  const controlledLabel = import_react31.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react30.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react30.default.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = import_react30.default.useState(void 0);
+  const controlledLabel = import_react30.default.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
   const selectedValue = isControlled ? valueProp : uncontrolledValue;
-  const triggerRef = import_react31.default.useRef(null);
-  const contentRef = import_react31.default.useRef(null);
-  const [mounted, setMounted] = import_react31.default.useState(false);
-  const [visible, setVisible] = import_react31.default.useState(false);
-  import_react31.default.useEffect(() => {
+  const triggerRef = import_react30.default.useRef(null);
+  const contentRef = import_react30.default.useRef(null);
+  const [mounted, setMounted] = import_react30.default.useState(false);
+  const [visible, setVisible] = import_react30.default.useState(false);
+  import_react30.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react31.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -9708,12 +9762,12 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = import_react31.default.useCallback(() => setOpen(true), []);
-  const close = import_react31.default.useCallback(() => setOpen(false), []);
-  const toggle = import_react31.default.useCallback(() => setOpen((prev) => !prev), []);
+  const open = import_react30.default.useCallback(() => setOpen(true), []);
+  const close = import_react30.default.useCallback(() => setOpen(false), []);
+  const toggle = import_react30.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = import_react31.default.useCallback(
+  const setSelected = import_react30.default.useCallback(
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
@@ -9723,7 +9777,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react31.default.useMemo(
+  const ctxValue = import_react30.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -9745,14 +9799,14 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
     "div",
     {
       className: clsx_default(
         "lib-xplat-select",
         size,
         disabled && "disabled",
-        error && "error",
+        (error || hasError(validations)) && "error",
         mounted && "is-open"
       ),
       children: [
@@ -9763,14 +9817,14 @@ var SelectRoot = (props) => {
             className: clsx_default(
               "select-trigger",
               disabled && "disabled",
-              error && "error"
+              (error || hasError(validations)) && "error"
             ),
             onClick: handleTriggerClick,
             role: "combobox",
             "aria-expanded": isOpen,
             "aria-haspopup": "listbox",
             "aria-disabled": disabled,
-            "aria-invalid": error,
+            "aria-invalid": error || hasError(validations) || void 0,
             tabIndex: disabled ? -1 : 0,
             onKeyDown: (e) => {
               if (disabled) return;
@@ -9814,6 +9868,7 @@ var SelectRoot = (props) => {
       ]
     }
   ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Field, { validations, children: control });
 };
 SelectRoot.displayName = "Select";
 var Select = Object.assign(SelectRoot, {
@@ -9855,12 +9910,13 @@ var import_jsx_runtime339 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
     "div",
     {
-      className: clsx_default("lib-xplat-spinner", size, type),
+      className: clsx_default("lib-xplat-spinner", size, statusType),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
       children: /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
@@ -9898,9 +9954,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    type = "brand"
+    type = "primary"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  const statusType = normalizeStatus(type);
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: clsx_default("lib-xplat-steps", statusType), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
     return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)("div", { className: clsx_default("step-item", status), children: [
       /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { children: index + 1 }) }),
@@ -9915,7 +9972,7 @@ Steps.displayName = "Steps";
 var Steps_default = Steps;
 
 // src/components/Swiper/Swiper.tsx
-var import_react32 = __toESM(require("react"), 1);
+var import_react31 = __toESM(require("react"), 1);
 var import_jsx_runtime341 = require("react/jsx-runtime");
 var Swiper = (props) => {
   const {
@@ -9940,26 +9997,26 @@ var Swiper = (props) => {
   const maxIndex = Math.max(0, totalSlides - viewItemCount);
   const useLoop = loop && canSlide;
   const cloneCount = useLoop ? totalSlides : 0;
-  const extendedItems = import_react32.default.useMemo(() => {
+  const extendedItems = import_react31.default.useMemo(() => {
     if (!useLoop) return items;
     return [...items, ...items, ...items];
   }, [items, useLoop]);
   const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
-  const [innerIndex, setInnerIndex] = import_react32.default.useState(
+  const [innerIndex, setInnerIndex] = import_react31.default.useState(
     useLoop ? cloneCount + initialIdx : initialIdx
   );
-  const [isDragging, setIsDragging] = import_react32.default.useState(false);
-  const [dragOffset, setDragOffset] = import_react32.default.useState(0);
-  const [animated, setAnimated] = import_react32.default.useState(false);
-  const [containerWidth, setContainerWidth] = import_react32.default.useState(0);
-  const containerRef = import_react32.default.useRef(null);
-  const startXRef = import_react32.default.useRef(0);
-  const startTimeRef = import_react32.default.useRef(0);
-  const autoplayTimerRef = import_react32.default.useRef(null);
-  const resumeTimeoutRef = import_react32.default.useRef(null);
-  const [paused, setPaused] = import_react32.default.useState(false);
-  const initializedRef = import_react32.default.useRef(false);
-  import_react32.default.useEffect(() => {
+  const [isDragging, setIsDragging] = import_react31.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react31.default.useState(0);
+  const [animated, setAnimated] = import_react31.default.useState(false);
+  const [containerWidth, setContainerWidth] = import_react31.default.useState(0);
+  const containerRef = import_react31.default.useRef(null);
+  const startXRef = import_react31.default.useRef(0);
+  const startTimeRef = import_react31.default.useRef(0);
+  const autoplayTimerRef = import_react31.default.useRef(null);
+  const resumeTimeoutRef = import_react31.default.useRef(null);
+  const [paused, setPaused] = import_react31.default.useState(false);
+  const initializedRef = import_react31.default.useRef(false);
+  import_react31.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
@@ -9982,7 +10039,7 @@ var Swiper = (props) => {
     return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
   };
   const realIndex = getRealIndex(innerIndex);
-  const moveToInner = import_react32.default.useCallback(
+  const moveToInner = import_react31.default.useCallback(
     (idx, withAnim = true) => {
       if (!useLoop) {
         setAnimated(withAnim);
@@ -10010,7 +10067,7 @@ var Swiper = (props) => {
     },
     [useLoop, cloneCount, totalSlides]
   );
-  const handleTransitionEnd = import_react32.default.useCallback(() => {
+  const handleTransitionEnd = import_react31.default.useCallback(() => {
     if (!useLoop) return;
     const real = getRealIndex(innerIndex);
     const canonical = cloneCount + real;
@@ -10020,7 +10077,7 @@ var Swiper = (props) => {
     }
     onChange?.(Math.min(real, maxIndex));
   }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
-  const slideTo = import_react32.default.useCallback(
+  const slideTo = import_react31.default.useCallback(
     (logicalIndex) => {
       if (!canSlide) return;
       const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
@@ -10030,7 +10087,7 @@ var Swiper = (props) => {
     },
     [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
   );
-  const slideNext = import_react32.default.useCallback(() => {
+  const slideNext = import_react31.default.useCallback(() => {
     if (!canSlide) return;
     const nextInner = innerIndex + slideBy;
     if (useLoop) {
@@ -10039,7 +10096,7 @@ var Swiper = (props) => {
       moveToInner(Math.min(nextInner, maxIndex), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
-  const slidePrev = import_react32.default.useCallback(() => {
+  const slidePrev = import_react31.default.useCallback(() => {
     if (!canSlide) return;
     const prevInner = innerIndex - slideBy;
     if (useLoop) {
@@ -10048,7 +10105,7 @@ var Swiper = (props) => {
       moveToInner(Math.max(prevInner, 0), true);
     }
   }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
-  import_react32.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     if (indexProp === void 0) return;
     const clamped = Math.max(0, Math.min(indexProp, maxIndex));
     const target = useLoop ? cloneCount + clamped : clamped;
@@ -10056,12 +10113,12 @@ var Swiper = (props) => {
       moveToInner(target, true);
     }
   }, [indexProp]);
-  import_react32.default.useImperativeHandle(swiperRef, () => ({
+  import_react31.default.useImperativeHandle(swiperRef, () => ({
     slidePrev,
     slideNext,
     slideTo
   }));
-  import_react32.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     if (!auto || !canSlide || paused) return;
     autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
     return () => {
@@ -10087,7 +10144,7 @@ var Swiper = (props) => {
       resumeTimeoutRef.current = null;
     }, pauseOnInteraction);
   };
-  import_react32.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     return () => {
       if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
     };
@@ -10105,7 +10162,7 @@ var Swiper = (props) => {
     startXRef.current = getClientX(e);
     startTimeRef.current = Date.now();
   };
-  import_react32.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     if (!isDragging) return;
     const handleMove = (e) => {
       setDragOffset(getClientX(e) - startXRef.current);
@@ -10144,7 +10201,7 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
-  const slideElements = import_react32.default.useMemo(
+  const slideElements = import_react31.default.useMemo(
     () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
       "div",
       {
@@ -10218,20 +10275,22 @@ Swiper.displayName = "Swiper";
 var Swiper_default = Swiper;
 
 // src/components/Switch/Switch.tsx
-var import_react33 = __toESM(require("react"), 1);
+var import_react32 = __toESM(require("react"), 1);
 var import_jsx_runtime342 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
     size = "md",
-    type = "brand",
+    type = "primary",
     disabled,
-    onChange
+    onChange,
+    validations
   } = props;
-  const [isAnimating, setIsAnimating] = import_react33.default.useState(false);
-  const timeoutRef = import_react33.default.useRef(null);
-  import_react33.default.useEffect(() => {
+  const statusType = normalizeStatus(type);
+  const [isAnimating, setIsAnimating] = import_react32.default.useState(false);
+  const timeoutRef = import_react32.default.useRef(null);
+  import_react32.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -10246,31 +10305,33 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
     "div",
     {
       className: clsx_default(
         "lib-xplat-switch",
         size,
-        type,
+        statusType,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating"
       ),
       onClick: handleClick,
+      "aria-invalid": hasError(validations) || void 0,
       "aria-disabled": disabled || isAnimating,
       children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Field, { validations, children: control });
 };
 Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Table/TableContext.tsx
-var import_react34 = __toESM(require("react"), 1);
-var TableContext = import_react34.default.createContext(null);
+var import_react33 = __toESM(require("react"), 1);
+var TableContext = import_react33.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react34.default.useContext(TableContext);
+  const ctx = import_react33.default.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
@@ -10313,24 +10374,24 @@ TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react37 = __toESM(require("react"), 1);
+var import_react36 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react35 = __toESM(require("react"), 1);
-var TableHeadContext = import_react35.default.createContext(
+var import_react34 = __toESM(require("react"), 1);
+var TableHeadContext = import_react34.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react35.default.useContext(TableHeadContext);
+  const ctx = import_react34.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react36 = __toESM(require("react"), 1);
-var TableRowContext = import_react36.default.createContext(null);
+var import_react35 = __toESM(require("react"), 1);
+var TableRowContext = import_react35.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react36.default.useContext(TableRowContext);
+  const ctx = import_react35.default.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
@@ -10338,7 +10399,7 @@ var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
 var import_jsx_runtime345 = require("react/jsx-runtime");
-var TableCell = import_react37.default.memo((props) => {
+var TableCell = import_react36.default.memo((props) => {
   const {
     children,
     align = "center",
@@ -10352,9 +10413,9 @@ var TableCell = import_react37.default.memo((props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react37.default.useState(0);
-  const cellRef = import_react37.default.useRef(null);
-  const calculateLeft = import_react37.default.useCallback(() => {
+  const [left, setLeft] = import_react36.default.useState(0);
+  const cellRef = import_react36.default.useRef(null);
+  const calculateLeft = import_react36.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -10363,7 +10424,7 @@ var TableCell = import_react37.default.memo((props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react37.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -10421,9 +10482,9 @@ TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-var import_react38 = __toESM(require("react"), 1);
+var import_react37 = __toESM(require("react"), 1);
 var import_jsx_runtime347 = require("react/jsx-runtime");
-var TableRow = import_react38.default.memo((props) => {
+var TableRow = import_react37.default.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -10432,7 +10493,7 @@ var TableRow = import_react38.default.memo((props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react38.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react37.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
@@ -10467,20 +10528,22 @@ var import_jsx_runtime348 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
-    type = "neutral",
+    variant,
+    type,
     onClose,
     size = "md",
     disabled = false,
     colorIndex
   } = props;
+  const shape = variant ?? type ?? "neutral";
   return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
     "span",
     {
       className: clsx_default(
         "lib-xplat-tag",
-        type,
+        shape,
         size,
-        type === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
+        shape === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
         disabled && "disabled"
       ),
       children: [
@@ -10494,49 +10557,52 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-var import_react39 = __toESM(require("react"), 1);
+var import_react38 = __toESM(require("react"), 1);
 var import_jsx_runtime349 = require("react/jsx-runtime");
-var TextArea = import_react39.default.forwardRef(
+var TextArea = import_react38.default.forwardRef(
   (props, ref) => {
     const {
       className,
       size = "md",
+      validations,
       resize = "vertical",
       rows = 3,
       disabled,
       ...textareaProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
       "textarea",
       {
         ...textareaProps,
         ref,
         rows,
         disabled,
+        "aria-invalid": hasError(validations) || void 0,
         className: clsx_default("lib-xplat-textarea", size, disabled && "disabled"),
         style: { resize }
       }
     ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(Field, { validations, children: control });
   }
 );
 TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-var import_react40 = __toESM(require("react"), 1);
+var import_react39 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 var import_jsx_runtime350 = require("react/jsx-runtime");
-var ToastContext = import_react40.default.createContext(null);
+var ToastContext = import_react39.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react40.default.useContext(ToastContext);
+  const ctx = import_react39.default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 };
 var EXIT_DURATION = 300;
 var ToastItemComponent = ({ item, isExiting, onClose }) => {
-  const ref = import_react40.default.useRef(null);
-  const [height, setHeight] = import_react40.default.useState(void 0);
-  import_react40.default.useEffect(() => {
+  const ref = import_react39.default.useRef(null);
+  const [height, setHeight] = import_react39.default.useState(void 0);
+  import_react39.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
@@ -10568,13 +10634,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react40.default.useState([]);
-  const [removing, setRemoving] = import_react40.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react40.default.useState(false);
-  import_react40.default.useEffect(() => {
+  const [toasts, setToasts] = import_react39.default.useState([]);
+  const [removing, setRemoving] = import_react39.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react39.default.useState(false);
+  import_react39.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react40.default.useCallback((id) => {
+  const remove = import_react39.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -10585,7 +10651,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react40.default.useCallback(
+  const toast = import_react39.default.useCallback(
     (type, message, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message }]);
@@ -10614,7 +10680,7 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react41 = __toESM(require("react"), 1);
+var import_react40 = __toESM(require("react"), 1);
 var import_jsx_runtime351 = require("react/jsx-runtime");
 var OFFSET = 12;
 var GAP = 8;
@@ -10624,18 +10690,20 @@ var Tooltip = (props) => {
     children,
     title,
     description,
-    type = "dark",
+    variant,
+    type,
     follow = false,
     disabled = false
   } = props;
-  const triggerRef = import_react41.default.useRef(null);
-  const tooltipRef = import_react41.default.useRef(null);
-  const [visible, setVisible] = import_react41.default.useState(false);
-  const [pos, setPos] = import_react41.default.useState({ left: 0, top: 0 });
-  const delayTimer = import_react41.default.useRef(0);
-  const rafRef = import_react41.default.useRef(0);
-  const cursor = import_react41.default.useRef(null);
-  const clamp = import_react41.default.useCallback((left, top, w, h) => {
+  const shape = variant ?? type ?? "dark";
+  const triggerRef = import_react40.default.useRef(null);
+  const tooltipRef = import_react40.default.useRef(null);
+  const [visible, setVisible] = import_react40.default.useState(false);
+  const [pos, setPos] = import_react40.default.useState({ left: 0, top: 0 });
+  const delayTimer = import_react40.default.useRef(0);
+  const rafRef = import_react40.default.useRef(0);
+  const cursor = import_react40.default.useRef(null);
+  const clamp = import_react40.default.useCallback((left, top, w, h) => {
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     return {
@@ -10643,7 +10711,7 @@ var Tooltip = (props) => {
       top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
     };
   }, []);
-  const placeAtCursor = import_react41.default.useCallback((x, y) => {
+  const placeAtCursor = import_react40.default.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -10654,7 +10722,7 @@ var Tooltip = (props) => {
     if (top < GAP) top = y + OFFSET;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const placeAtTrigger = import_react41.default.useCallback(() => {
+  const placeAtTrigger = import_react40.default.useCallback(() => {
     const el = tooltipRef.current;
     const trigger = triggerRef.current;
     if (!el || !trigger) return;
@@ -10666,19 +10734,19 @@ var Tooltip = (props) => {
     const left = rect.left + rect.width / 2 - w / 2;
     setPos(clamp(left, top, w, h));
   }, [clamp]);
-  const reposition = import_react41.default.useCallback(() => {
+  const reposition = import_react40.default.useCallback(() => {
     if (follow && cursor.current) {
       placeAtCursor(cursor.current.x, cursor.current.y);
     } else {
       placeAtTrigger();
     }
   }, [follow, placeAtCursor, placeAtTrigger]);
-  const handleMouseEnter = import_react41.default.useCallback((e) => {
+  const handleMouseEnter = import_react40.default.useCallback((e) => {
     if (disabled) return;
     cursor.current = { x: e.clientX, y: e.clientY };
     delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = import_react41.default.useCallback((e) => {
+  const handleMouseMove = import_react40.default.useCallback((e) => {
     cursor.current = { x: e.clientX, y: e.clientY };
     if (!visible || !follow) return;
     cancelAnimationFrame(rafRef.current);
@@ -10686,25 +10754,25 @@ var Tooltip = (props) => {
       if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
     });
   }, [visible, follow, placeAtCursor]);
-  const close = import_react41.default.useCallback(() => {
+  const close = import_react40.default.useCallback(() => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
-  const handleMouseLeave = import_react41.default.useCallback(() => {
+  const handleMouseLeave = import_react40.default.useCallback(() => {
     cursor.current = null;
     close();
   }, [close]);
-  const handleFocus = import_react41.default.useCallback(() => {
+  const handleFocus = import_react40.default.useCallback(() => {
     if (disabled) return;
     cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  import_react41.default.useLayoutEffect(() => {
+  import_react40.default.useLayoutEffect(() => {
     if (!visible) return;
     reposition();
   }, [visible, reposition]);
-  import_react41.default.useEffect(() => {
+  import_react40.default.useEffect(() => {
     if (!visible || follow) return;
     const onChange = () => placeAtTrigger();
     window.addEventListener("scroll", onChange, true);
@@ -10714,7 +10782,7 @@ var Tooltip = (props) => {
       window.removeEventListener("resize", onChange);
     };
   }, [visible, follow, placeAtTrigger]);
-  import_react41.default.useEffect(() => () => {
+  import_react40.default.useEffect(() => () => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
@@ -10737,7 +10805,7 @@ var Tooltip = (props) => {
           {
             ref: tooltipRef,
             role: "tooltip",
-            className: clsx_default("lib-xplat-tooltip", type),
+            className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
               title && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "tooltip-title", children: title }),
@@ -10753,7 +10821,7 @@ Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
-var import_react42 = __toESM(require("react"), 1);
+var import_react41 = __toESM(require("react"), 1);
 var import_jsx_runtime352 = require("react/jsx-runtime");
 var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
   /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
@@ -10765,7 +10833,7 @@ var formatTime = (sec) => {
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 };
-var Video = import_react42.default.forwardRef((props, ref) => {
+var Video = import_react41.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -10789,21 +10857,21 @@ var Video = import_react42.default.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const containerRef = import_react42.default.useRef(null);
-  const videoRef = import_react42.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react42.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react42.default.useState(false);
-  const [currentTime, setCurrentTime] = import_react42.default.useState(0);
-  const [duration, setDuration] = import_react42.default.useState(0);
-  const [buffered, setBuffered] = import_react42.default.useState(0);
-  const [volume, setVolume] = import_react42.default.useState(1);
-  const [isMuted, setIsMuted] = import_react42.default.useState(Boolean(muted));
-  const [isFullscreen, setIsFullscreen] = import_react42.default.useState(false);
-  const [playbackRate, setPlaybackRate] = import_react42.default.useState(1);
-  const [rateMenuOpen, setRateMenuOpen] = import_react42.default.useState(false);
-  const [captionsOn, setCaptionsOn] = import_react42.default.useState(false);
-  const [isPip, setIsPip] = import_react42.default.useState(false);
-  const setRefs = import_react42.default.useCallback(
+  const containerRef = import_react41.default.useRef(null);
+  const videoRef = import_react41.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react41.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react41.default.useState(false);
+  const [currentTime, setCurrentTime] = import_react41.default.useState(0);
+  const [duration, setDuration] = import_react41.default.useState(0);
+  const [buffered, setBuffered] = import_react41.default.useState(0);
+  const [volume, setVolume] = import_react41.default.useState(1);
+  const [isMuted, setIsMuted] = import_react41.default.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = import_react41.default.useState(false);
+  const [playbackRate, setPlaybackRate] = import_react41.default.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = import_react41.default.useState(false);
+  const [captionsOn, setCaptionsOn] = import_react41.default.useState(false);
+  const [isPip, setIsPip] = import_react41.default.useState(false);
+  const setRefs = import_react41.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -10811,14 +10879,14 @@ var Video = import_react42.default.forwardRef((props, ref) => {
     },
     [ref]
   );
-  import_react42.default.useEffect(() => {
+  import_react41.default.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === containerRef.current);
     };
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  import_react42.default.useEffect(() => {
+  import_react41.default.useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
     const onEnter = () => setIsPip(true);
@@ -11207,13 +11275,13 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-var import_react44 = __toESM(require("react"), 1);
+var import_react43 = __toESM(require("react"), 1);
 
 // src/layout/SideBar/SideBarContext.tsx
-var import_react43 = __toESM(require("react"), 1);
-var SideBarContext = import_react43.default.createContext(null);
+var import_react42 = __toESM(require("react"), 1);
+var SideBarContext = import_react42.default.createContext(null);
 var useSideBarContext = () => {
-  const ctx = import_react43.default.useContext(SideBarContext);
+  const ctx = import_react42.default.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
@@ -11223,7 +11291,7 @@ var SideBarContext_default = SideBarContext;
 var import_jsx_runtime358 = require("react/jsx-runtime");
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = import_react44.default.useState(true);
+  const [isOpen, setIsOpen] = import_react43.default.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
@@ -11384,6 +11452,8 @@ var SideBar_default = SideBar;
   FacebookIcon,
   FastForwardIcon,
   FeatherIcon,
+  Field,
+  FieldMessage,
   FigmaIcon,
   FileIcon,
   FileMinusIcon,
@@ -11612,6 +11682,7 @@ var SideBar_default = SideBar;
   breakpoints,
   cssVar,
   gridColumns,
+  hasError,
   isInRange,
   isSameDay,
   semantic,