@x-plat/design-system 0.8.3 → 0.9.0

package/dist/components/index.js

@@ -1505,11 +1505,49 @@ var Alert_default = Alert;
 
 // src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
 import React2 from "react";
-import { jsx as jsx297 } from "react/jsx-runtime";
+
+// src/components/FieldMessage/FieldMessage.tsx
+import { Fragment, jsx as jsx297, jsxs as jsxs191 } from "react/jsx-runtime";
+var ICON = {
+  default: /* @__PURE__ */ jsx297(InfoIcon_default, {}),
+  success: /* @__PURE__ */ jsx297(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ jsx297(InfoIcon_default, {}),
+  error: /* @__PURE__ */ jsx297(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ jsx297("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ jsxs191(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ jsx297("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ jsx297("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__ */ jsx297(Fragment, { children });
+  return /* @__PURE__ */ jsxs191("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ jsx297(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
+// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
+import { jsx as jsx298 } from "react/jsx-runtime";
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = React2.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, bare = false, ...textareaProps } = props;
+    const { value, className, onChange, disabled, bare = false, validations, ...textareaProps } = props;
     const localRef = React2.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -1537,9 +1575,10 @@ var AutoResizeTextArea = React2.forwardRef(
       updateHeight();
     }, [value]);
     if (bare) {
-      return /* @__PURE__ */ jsx297(
+      return /* @__PURE__ */ jsx298(
         "textarea",
         {
+          "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
           className,
@@ -1549,9 +1588,10 @@ var AutoResizeTextArea = React2.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx297("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ jsx297("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ jsx297(
+    const control = /* @__PURE__ */ jsx298("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ jsx298("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ jsx298(
       "textarea",
       {
+        "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
         disabled,
@@ -1559,13 +1599,14 @@ var AutoResizeTextArea = React2.forwardRef(
         onChange: handleChange
       }
     ) }) });
+    return /* @__PURE__ */ jsx298(Field, { validations, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";
 var AutoResizeTextArea_default = AutoResizeTextArea;
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx298 } from "react/jsx-runtime";
+import { jsx as jsx299 } from "react/jsx-runtime";
 var CATEGORICAL_COUNT = 8;
 var getColorIndex = (name) => {
   if (!name) return 1;
@@ -1582,36 +1623,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__ */ jsx298("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ jsx298("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx298("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ jsx298("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx298("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__ */ jsx299("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ jsx299("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx299("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ jsx299("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx299("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
-import { jsx as jsx299, jsxs as jsxs191 } from "react/jsx-runtime";
+import { jsx as jsx300, jsxs as jsxs192 } from "react/jsx-runtime";
 var Box = ({
   children,
   title,
   variant = "outlined",
   padding = "md"
 }) => {
-  return /* @__PURE__ */ jsxs191("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
-    title && /* @__PURE__ */ jsx299("div", { className: "box-title", children: title }),
-    /* @__PURE__ */ jsx299("div", { className: "box-content", children })
+  return /* @__PURE__ */ jsxs192("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ jsx300("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ jsx300("div", { className: "box-content", children })
   ] });
 };
 Box.displayName = "Box";
 var Box_default = Box;
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-import { jsx as jsx300, jsxs as jsxs192 } from "react/jsx-runtime";
+import { jsx as jsx301, jsxs as jsxs193 } from "react/jsx-runtime";
 var Breadcrumb = (props) => {
   const { items, separator = "/" } = props;
-  return /* @__PURE__ */ jsx300("nav", { className: "lib-xplat-breadcrumb", "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ jsx300("ol", { children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx301("nav", { className: "lib-xplat-breadcrumb", "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ jsx301("ol", { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs192("li", { children: [
-      isLast ? /* @__PURE__ */ jsx300("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx300("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ jsx300("button", { className: "link", onClick: item.onClick, children: item.label }),
-      !isLast && /* @__PURE__ */ jsx300("span", { className: "separator", children: separator })
+    return /* @__PURE__ */ jsxs193("li", { children: [
+      isLast ? /* @__PURE__ */ jsx301("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx301("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ jsx301("button", { className: "link", onClick: item.onClick, children: item.label }),
+      !isLast && /* @__PURE__ */ jsx301("span", { className: "separator", children: separator })
     ] }, index);
   }) }) });
 };
@@ -1619,7 +1660,7 @@ Breadcrumb.displayName = "Breadcrumb";
 var Breadcrumb_default = Breadcrumb;
 
 // src/components/Button/Button.tsx
-import { jsx as jsx301 } from "react/jsx-runtime";
+import { jsx as jsx302 } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     children,
@@ -1628,7 +1669,7 @@ var Button = (props) => {
     disabled,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx301(
+  return /* @__PURE__ */ jsx302(
     "button",
     {
       className: clsx_default("lib-xplat-button", type, size),
@@ -1745,7 +1786,7 @@ var MONTH_LABELS = {
 };
 
 // src/components/Calendar/Calendar.tsx
-import { Fragment, jsx as jsx302, jsxs as jsxs193 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx303, jsxs as jsxs194 } from "react/jsx-runtime";
 var DayCell = React4.memo(
   ({
     day,
@@ -1757,7 +1798,7 @@ var DayCell = React4.memo(
     onEventClick
   }) => {
     if (renderDay) {
-      return /* @__PURE__ */ jsx302(
+      return /* @__PURE__ */ jsx303(
         "div",
         {
           className: clsx_default(
@@ -1774,7 +1815,7 @@ var DayCell = React4.memo(
         }
       );
     }
-    return /* @__PURE__ */ jsxs193(
+    return /* @__PURE__ */ jsxs194(
       "div",
       {
         className: clsx_default(
@@ -1790,9 +1831,9 @@ var DayCell = React4.memo(
           if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
         },
         children: [
-          /* @__PURE__ */ jsx302("span", { className: "calendar-day-number", children: day.day }),
-          dayEvents.length > 0 && /* @__PURE__ */ jsxs193("div", { className: "calendar-day-events", children: [
-            dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ jsx302(
+          /* @__PURE__ */ jsx303("span", { className: "calendar-day-number", children: day.day }),
+          dayEvents.length > 0 && /* @__PURE__ */ jsxs194("div", { className: "calendar-day-events", children: [
+            dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ jsx303(
               "span",
               {
                 className: "calendar-event-dot",
@@ -1805,7 +1846,7 @@ var DayCell = React4.memo(
               },
               ei
             )),
-            dayEvents.length > 3 && /* @__PURE__ */ jsxs193("span", { className: "calendar-event-more", children: [
+            dayEvents.length > 3 && /* @__PURE__ */ jsxs194("span", { className: "calendar-event-more", children: [
               "+",
               dayEvents.length - 3
             ] })
@@ -1926,21 +1967,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__ */ jsxs193(
+  return /* @__PURE__ */ jsxs194(
     "div",
     {
       className: "lib-xplat-calendar",
       style: selectedColor ? { "--calendar-selected-color": `var(--${selectedColor})` } : void 0,
       children: [
-        /* @__PURE__ */ jsxs193("div", { className: "calendar-header", children: [
-          /* @__PURE__ */ jsx302("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ jsx302(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ jsx302("button", { className: "calendar-title", onClick: handleTitleClick, type: "button", children: titleText }),
-          /* @__PURE__ */ jsx302("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ jsx302(ChevronRightIcon_default, {}) }),
-          showToday && /* @__PURE__ */ jsx302("button", { className: "calendar-today-btn", onClick: handleToday, children: locale === "ko" ? "\uC624\uB298" : "Today" })
+        /* @__PURE__ */ jsxs194("div", { className: "calendar-header", children: [
+          /* @__PURE__ */ jsx303("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ jsx303(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ jsx303("button", { className: "calendar-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ jsx303("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ jsx303(ChevronRightIcon_default, {}) }),
+          showToday && /* @__PURE__ */ jsx303("button", { className: "calendar-today-btn", onClick: handleToday, children: locale === "ko" ? "\uC624\uB298" : "Today" })
         ] }),
-        pickerMode === "years" && /* @__PURE__ */ jsx302("div", { className: "calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+        pickerMode === "years" && /* @__PURE__ */ jsx303("div", { className: "calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
           const y = yearRangeStart + i;
-          return /* @__PURE__ */ jsx302(
+          return /* @__PURE__ */ jsx303(
             "button",
             {
               type: "button",
@@ -1951,7 +1992,7 @@ var Calendar = (props) => {
             y
           );
         }) }),
-        pickerMode === "months" && /* @__PURE__ */ jsx302("div", { className: "calendar-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx302(
+        pickerMode === "months" && /* @__PURE__ */ jsx303("div", { className: "calendar-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx303(
           "button",
           {
             type: "button",
@@ -1961,8 +2002,8 @@ var Calendar = (props) => {
           },
           i
         )) }),
-        pickerMode === "days" && /* @__PURE__ */ jsxs193(Fragment, { children: [
-          /* @__PURE__ */ jsx302("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx302(
+        pickerMode === "days" && /* @__PURE__ */ jsxs194(Fragment2, { children: [
+          /* @__PURE__ */ jsx303("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx303(
             "div",
             {
               className: clsx_default(
@@ -1974,12 +2015,12 @@ var Calendar = (props) => {
             },
             label
           )) }),
-          /* @__PURE__ */ jsx302("div", { className: "calendar-grid", children: days.map((day, idx) => {
+          /* @__PURE__ */ jsx303("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__ */ jsx302(
+            return /* @__PURE__ */ jsx303(
               DayCell,
               {
                 day,
@@ -2005,10 +2046,10 @@ var Calendar_default = Calendar;
 import React5 from "react";
 
 // src/components/CardTab/CardTabPanel.tsx
-import { jsx as jsx303 } from "react/jsx-runtime";
+import { jsx as jsx304 } from "react/jsx-runtime";
 var CardTabPanel = (props) => {
   const { children, columns = 3 } = props;
-  return /* @__PURE__ */ jsx303(
+  return /* @__PURE__ */ jsx304(
     "div",
     {
       className: "card-tab-panel",
@@ -2021,7 +2062,7 @@ CardTabPanel.displayName = "CardTab.Panel";
 var CardTabPanel_default = CardTabPanel;
 
 // src/components/CardTab/CardTab.tsx
-import { jsx as jsx304, jsxs as jsxs194 } from "react/jsx-runtime";
+import { jsx as jsx305, jsxs as jsxs195 } from "react/jsx-runtime";
 var CardTabRoot = (props) => {
   const {
     tabs,
@@ -2045,10 +2086,10 @@ var CardTabRoot = (props) => {
   const activePanel = panels.find(
     (panel) => panel.props.value === activeValue
   );
-  return /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
-    /* @__PURE__ */ jsx304("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+  return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
+    /* @__PURE__ */ jsx305("div", { className: "card-tab-bar", children: tabs.map((tab) => {
       const isActive2 = tab.value === activeValue;
-      return /* @__PURE__ */ jsx304(
+      return /* @__PURE__ */ jsx305(
         "button",
         {
           className: clsx_default("card-tab-trigger", isActive2 && "active"),
@@ -2060,7 +2101,7 @@ var CardTabRoot = (props) => {
         tab.value
       );
     }) }),
-    /* @__PURE__ */ jsx304("div", { className: "card-tab-body", children: activePanel })
+    /* @__PURE__ */ jsx305("div", { className: "card-tab-body", children: activePanel })
   ] });
 };
 CardTabRoot.displayName = "CardTab";
@@ -2071,7 +2112,7 @@ var CardTab_default = CardTab;
 
 // src/components/Chart/Chart.tsx
 import React6 from "react";
-import { Fragment as Fragment2, jsx as jsx305, jsxs as jsxs195 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx306, jsxs as jsxs196 } from "react/jsx-runtime";
 var CATEGORICAL_COUNT2 = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
   const n = i + 1;
@@ -2214,12 +2255,12 @@ var formatTick = (value, maxVal) => {
   const fixed = value.toFixed(decimals);
   return decimals === 0 ? Number(fixed).toLocaleString("en-US") : fixed;
 };
-var GridLines = React6.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx305(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+var GridLines = React6.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx306(Fragment3, { 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__ */ jsxs195("g", { children: [
-    /* @__PURE__ */ jsx305("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-    /* @__PURE__ */ jsx305("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  return /* @__PURE__ */ jsxs196("g", { children: [
+    /* @__PURE__ */ jsx306("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ jsx306("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -2231,10 +2272,10 @@ var getLabelStep = (count, chartW) => {
 };
 var AxisLabels = React6.memo(({ labels, count, chartW, height }) => {
   const step = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsx305(Fragment2, { children: labels.map((label, i) => {
+  return /* @__PURE__ */ jsx306(Fragment3, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ jsx305("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ jsx306("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
@@ -2310,7 +2351,7 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
   }, [animate, width]);
   const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const lineClipId = "line-area-clip";
-  return /* @__PURE__ */ jsxs195(
+  return /* @__PURE__ */ jsxs196(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
@@ -2328,9 +2369,9 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
         onLeave();
       },
       children: [
-        animate && /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsx305("clipPath", { id: lineClipId, children: /* @__PURE__ */ jsx305("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
-        /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
-        /* @__PURE__ */ jsx305(AxisLabels, { labels, count, chartW, height }),
+        animate && /* @__PURE__ */ jsx306("defs", { children: /* @__PURE__ */ jsx306("clipPath", { id: lineClipId, children: /* @__PURE__ */ jsx306("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ jsx306(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ jsx306(AxisLabels, { labels, count, chartW, height }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -2339,16 +2380,16 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
           const gradientId = `line-gradient-${di}`;
           const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
           const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
-          return /* @__PURE__ */ jsxs195("g", { children: [
-            /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsxs195("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ jsx305("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-              /* @__PURE__ */ jsx305("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+          return /* @__PURE__ */ jsxs196("g", { children: [
+            /* @__PURE__ */ jsx306("defs", { children: /* @__PURE__ */ jsxs196("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx306("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+              /* @__PURE__ */ jsx306("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
             ] }) }),
-            /* @__PURE__ */ jsxs195("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
-              /* @__PURE__ */ jsx305("path", { d: areaD, fill: `url(#${gradientId})` }),
-              /* @__PURE__ */ jsx305("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
+            /* @__PURE__ */ jsxs196("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
+              /* @__PURE__ */ jsx306("path", { d: areaD, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ jsx306("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
             ] }),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx305(
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx306(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -2360,7 +2401,7 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ jsx305(
+        activeX !== null && /* @__PURE__ */ jsx306(
           "line",
           {
             x1: activeX,
@@ -2370,7 +2411,7 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx306(
           "rect",
           {
             x: PADDING.left,
@@ -2419,7 +2460,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
   }, [animate, width]);
   const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const curveClipId = "curve-area-clip";
-  return /* @__PURE__ */ jsxs195(
+  return /* @__PURE__ */ jsxs196(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
@@ -2438,9 +2479,9 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
         onLeave();
       },
       children: [
-        animate && /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsx305("clipPath", { id: curveClipId, children: /* @__PURE__ */ jsx305("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
-        /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
-        /* @__PURE__ */ jsx305(AxisLabels, { labels, count, chartW, height }),
+        animate && /* @__PURE__ */ jsx306("defs", { children: /* @__PURE__ */ jsx306("clipPath", { id: curveClipId, children: /* @__PURE__ */ jsx306("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ jsx306(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ jsx306(AxisLabels, { labels, count, chartW, height }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -2449,16 +2490,16 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
           const gradientId = `curve-gradient-${di}`;
           const linePath = toSmoothPath(points);
           const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
-          return /* @__PURE__ */ jsxs195("g", { children: [
-            /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsxs195("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ jsx305("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-              /* @__PURE__ */ jsx305("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+          return /* @__PURE__ */ jsxs196("g", { children: [
+            /* @__PURE__ */ jsx306("defs", { children: /* @__PURE__ */ jsxs196("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx306("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+              /* @__PURE__ */ jsx306("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
             ] }) }),
-            /* @__PURE__ */ jsxs195("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
-              /* @__PURE__ */ jsx305("path", { d: areaPath, fill: `url(#${gradientId})` }),
-              /* @__PURE__ */ jsx305("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
+            /* @__PURE__ */ jsxs196("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
+              /* @__PURE__ */ jsx306("path", { d: areaPath, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ jsx306("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
             ] }),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx305(
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx306(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -2470,7 +2511,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ jsx305(
+        activeX !== null && /* @__PURE__ */ jsx306(
           "line",
           {
             x1: activeX,
@@ -2480,7 +2521,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx306(
           "rect",
           {
             x: PADDING.left,
@@ -2523,11 +2564,11 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onM
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsxs195("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
+  return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    /* @__PURE__ */ jsx306(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ jsx305("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ jsx306("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);
@@ -2536,7 +2577,7 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onM
         const r2 = Math.min(4, b.w / 2);
         const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
         const delay = 100 + i * 80;
-        return /* @__PURE__ */ jsx305(
+        return /* @__PURE__ */ jsx306(
           "path",
           {
             d,
@@ -2616,8 +2657,8 @@ var PieDonutChart = React6.memo(
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
     const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
-    return /* @__PURE__ */ jsxs195("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
-      animate && /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsx305("mask", { id: maskId, children: /* @__PURE__ */ jsx305(
+    return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ jsx306("defs", { children: /* @__PURE__ */ jsx306("mask", { id: maskId, children: /* @__PURE__ */ jsx306(
         "circle",
         {
           ref: maskRef,
@@ -2630,7 +2671,7 @@ var PieDonutChart = React6.memo(
           transform: `rotate(-90 ${cx} ${cy})`
         }
       ) }) }),
-      /* @__PURE__ */ jsx305("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx305("g", { children: /* @__PURE__ */ jsx305(
+      /* @__PURE__ */ jsx306("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx306("g", { children: /* @__PURE__ */ jsx306(
         "path",
         {
           d: s.d,
@@ -2665,15 +2706,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__ */ jsxs195(
+  return /* @__PURE__ */ jsxs196(
     "div",
     {
       ref,
       className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
       style: { left: pos.left, top: pos.top },
       children: [
-        title && /* @__PURE__ */ jsx305("div", { className: "tooltip-title", children: title }),
-        desc && /* @__PURE__ */ jsx305("div", { className: "tooltip-desc", children: desc })
+        title && /* @__PURE__ */ jsx306("div", { className: "tooltip-title", children: title }),
+        desc && /* @__PURE__ */ jsx306("div", { className: "tooltip-desc", children: desc })
       ]
     }
   );
@@ -2685,14 +2726,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__ */ jsx305("div", { className: "chart-legend", children: values.map((v, i) => {
+    return /* @__PURE__ */ jsx306("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__ */ jsxs195("div", { className: "chart-legend-item", children: [
-        /* @__PURE__ */ jsx305("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
-        /* @__PURE__ */ jsxs195("div", { className: "chart-legend-text", children: [
-          /* @__PURE__ */ jsx305("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
-          /* @__PURE__ */ jsxs195("span", { className: "chart-legend-value", children: [
+      return /* @__PURE__ */ jsxs196("div", { className: "chart-legend-item", children: [
+        /* @__PURE__ */ jsx306("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+        /* @__PURE__ */ jsxs196("div", { className: "chart-legend-text", children: [
+          /* @__PURE__ */ jsx306("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
+          /* @__PURE__ */ jsxs196("span", { className: "chart-legend-value", children: [
             v.toLocaleString(),
             "(",
             pct,
@@ -2702,16 +2743,16 @@ var ChartLegend = ({ data, labels, type }) => {
       ] }, i);
     }) });
   }
-  return /* @__PURE__ */ jsx305("div", { className: "chart-legend", children: entries.map(([key], di) => {
+  return /* @__PURE__ */ jsx306("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__ */ jsxs195("div", { className: "chart-legend-item", children: [
-      /* @__PURE__ */ jsx305("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
-      /* @__PURE__ */ jsxs195("div", { className: "chart-legend-text", children: [
-        /* @__PURE__ */ jsx305("span", { className: "chart-legend-label", children: key }),
-        /* @__PURE__ */ jsx305("span", { className: "chart-legend-value", children: sum.toLocaleString() })
+    return /* @__PURE__ */ jsxs196("div", { className: "chart-legend-item", children: [
+      /* @__PURE__ */ jsx306("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+      /* @__PURE__ */ jsxs196("div", { className: "chart-legend-text", children: [
+        /* @__PURE__ */ jsx306("span", { className: "chart-legend-label", children: key }),
+        /* @__PURE__ */ jsx306("span", { className: "chart-legend-value", children: sum.toLocaleString() })
       ] })
     ] }, di);
   }) });
@@ -2725,14 +2766,14 @@ var Chart = React6.memo((props) => {
   const dataKey = React6.useMemo(() => JSON.stringify(labels), [labels]);
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
-  return /* @__PURE__ */ jsxs195("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx305(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx305(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx305(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx305(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.visible && tooltip.content && /* @__PURE__ */ jsx305(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
+  return /* @__PURE__ */ jsxs196("div", { className: "lib-xplat-chart", ref: containerRef, children: [
+    ready && type === "line" && /* @__PURE__ */ jsx306(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx306(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx306(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx306(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx306(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx306(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    tooltip.visible && tooltip.content && /* @__PURE__ */ jsx306(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -2742,7 +2783,7 @@ var Chart_default = Chart;
 import React7 from "react";
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx306 } from "react/jsx-runtime";
+import { jsx as jsx307 } from "react/jsx-runtime";
 var IconButton = (props) => {
   const {
     icon,
@@ -2751,7 +2792,7 @@ var IconButton = (props) => {
     disabled,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx306(
+  return /* @__PURE__ */ jsx307(
     "button",
     {
       className: clsx_default("lib-xplat-icon-button", type, size),
@@ -2765,7 +2806,7 @@ IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/components/ChatInput/ChatInput.tsx
-import { jsx as jsx307, jsxs as jsxs196 } from "react/jsx-runtime";
+import { jsx as jsx308, jsxs as jsxs197 } from "react/jsx-runtime";
 var ChatInput = React7.forwardRef(
   (props, ref) => {
     const {
@@ -2774,7 +2815,8 @@ var ChatInput = React7.forwardRef(
       disabled = false,
       buttonType = "primary",
       onSubmit,
-      onChange
+      onChange,
+      validations
     } = props;
     const isControlled = valueProp !== void 0;
     const [internalValue, setInternalValue] = React7.useState("");
@@ -2796,8 +2838,8 @@ var ChatInput = React7.forwardRef(
         handleSubmit();
       }
     };
-    return /* @__PURE__ */ jsxs196("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
-      /* @__PURE__ */ jsx307(
+    const control = /* @__PURE__ */ jsxs197("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ jsx308(
         AutoResizeTextArea_default,
         {
           ref,
@@ -2808,13 +2850,14 @@ var ChatInput = React7.forwardRef(
           disabled,
           rows: 1,
           onChange: handleChange,
+          "aria-invalid": hasError(validations) || void 0,
           onKeyDown: handleKeyDown
         }
       ),
-      /* @__PURE__ */ jsx307(
+      /* @__PURE__ */ jsx308(
         IconButton_default,
         {
-          icon: /* @__PURE__ */ jsx307(MessageSquareIcon_default, {}),
+          icon: /* @__PURE__ */ jsx308(MessageSquareIcon_default, {}),
           type: buttonType,
           size: "sm",
           disabled: !hasText || disabled,
@@ -2823,6 +2866,7 @@ var ChatInput = React7.forwardRef(
         }
       )
     ] });
+    return /* @__PURE__ */ jsx308(Field, { validations, children: control });
   }
 );
 ChatInput.displayName = "ChatInput";
@@ -2835,7 +2879,7 @@ import { semantic } from "@x-plat/tokens-core";
 import { cssVar } from "@x-plat/tokens-core";
 
 // src/components/CheckBox/CheckBox.tsx
-import { jsx as jsx308, jsxs as jsxs197 } from "react/jsx-runtime";
+import { jsx as jsx309, jsxs as jsxs198 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
     checked,
@@ -2845,6 +2889,7 @@ var CheckBox = (props) => {
     disabled,
     size = "md",
     type = "brand",
+    validations,
     ...rest
   } = props;
   const handleChange = (e) => {
@@ -2854,33 +2899,35 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs197("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
-    /* @__PURE__ */ jsx308(
+  const control = /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
+    /* @__PURE__ */ jsx309(
       "input",
       {
         type: "checkbox",
         checked,
         onChange: handleChange,
         disabled,
+        "aria-invalid": hasError(validations) || void 0,
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx308("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx308("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx308(CheckIcon_default, {}) }) }),
-    label && /* @__PURE__ */ jsx308("span", { className: "label", children: label })
+    /* @__PURE__ */ jsx309("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx309("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx309(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ jsx309("span", { className: "label", children: label })
   ] });
+  return /* @__PURE__ */ jsx309(Field, { validations, children: control });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx309 } from "react/jsx-runtime";
+import { jsx as jsx310 } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
     type = "primary",
     size = "md"
   } = props;
-  return /* @__PURE__ */ jsx309("div", { className: clsx_default("lib-xplat-chip", type, size), children });
+  return /* @__PURE__ */ jsx310("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
@@ -2891,23 +2938,6 @@ import React12 from "react";
 // src/components/Input/Input.tsx
 import React8 from "react";
 
-// src/components/Input/InputValidations.tsx
-import { jsx as jsx310, jsxs as jsxs198 } from "react/jsx-runtime";
-var InputValidations = (props) => {
-  const { message, status = "default" } = props;
-  return /* @__PURE__ */ jsxs198("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ jsxs198("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ jsx310(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ jsx310(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ jsx310(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ jsx310(ErrorIcon_default, {})
-    ] }),
-    /* @__PURE__ */ jsx310("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}$/;
@@ -2944,7 +2974,6 @@ var handleTelBackspace = (prevValue, currValue) => {
 
 // src/components/Input/Input.tsx
 import { jsx as jsx311, jsxs as jsxs199 } from "react/jsx-runtime";
-import { createElement } from "react";
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -3033,20 +3062,15 @@ var Input = React8.forwardRef((props, ref) => {
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
-              onChange: handleChange
+              onChange: handleChange,
+              "aria-invalid": hasError(validations) || void 0
             }
           ),
           suffix && /* @__PURE__ */ jsx311("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ jsx311("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
-      InputValidations_default,
-      {
-        ...validation,
-        key: `${validation.message}_${idx}`
-      }
-    )) })
+    /* @__PURE__ */ jsx311(FieldMessage_default, { validations })
   ] });
 });
 Input.displayName = "Input";
@@ -3130,7 +3154,7 @@ var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 import React11 from "react";
-import { Fragment as Fragment3, jsx as jsx314, jsxs as jsxs200 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx314, jsxs as jsxs200 } from "react/jsx-runtime";
 var DayCell2 = React11.memo(
   ({
     day,
@@ -3273,7 +3297,7 @@ var SingleDatePicker = (props) => {
             },
             i
           )) }),
-          pickerMode === "days" && /* @__PURE__ */ jsxs200(Fragment3, { children: [
+          pickerMode === "days" && /* @__PURE__ */ jsxs200(Fragment4, { children: [
             /* @__PURE__ */ jsx314("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx314(
               "div",
               {
@@ -4562,7 +4586,8 @@ 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] = React22.useState(false);
   const inputRef = React22.useRef(null);
@@ -4595,7 +4620,7 @@ var FileUpload = (props) => {
       handleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ jsxs209(
+  const control = /* @__PURE__ */ jsxs209(
     "div",
     {
       className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
@@ -4611,7 +4636,8 @@ var FileUpload = (props) => {
             type: "file",
             accept,
             multiple,
-            onChange: handleChange
+            onChange: handleChange,
+            "aria-invalid": hasError(validations) || void 0
           }
         ),
         /* @__PURE__ */ jsx325("div", { className: "upload-icon", children: /* @__PURE__ */ jsx325(UploadIcon_default, {}) }),
@@ -4620,6 +4646,7 @@ var FileUpload = (props) => {
       ]
     }
   );
+  return /* @__PURE__ */ jsx325(Field, { validations, children: control });
 };
 FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
@@ -4762,7 +4789,7 @@ var HtmlTypeWriter_default = HtmlTypeWriter;
 import React25 from "react";
 import { jsx as jsx327, jsxs as jsxs210 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
-  const { value, label, onChange } = props;
+  const { value, label, onChange, validations } = props;
   const [previewUrl, setPreviewUrl] = React25.useState();
   React25.useEffect(() => {
     if (!value) {
@@ -4786,7 +4813,7 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs210("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+  const control = /* @__PURE__ */ jsxs210("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
     /* @__PURE__ */ jsx327(
       "input",
       {
@@ -4794,7 +4821,8 @@ var ImageSelector = (props) => {
         accept: "image/*",
         id: "image-input",
         onChange: handleFileChange,
-        ref: inputRef
+        ref: inputRef,
+        "aria-invalid": hasError(validations) || void 0
       }
     ),
     value && /* @__PURE__ */ jsxs210("div", { className: "action-bar", children: [
@@ -4806,6 +4834,7 @@ var ImageSelector = (props) => {
       /* @__PURE__ */ jsx327("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
+  return /* @__PURE__ */ jsx327(Field, { validations, children: control });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
@@ -5064,6 +5093,7 @@ var Radio = (props) => {
     value,
     size: sizeProp,
     type = "brand",
+    validations,
     ...rest
   } = props;
   const context = useRadioGroupContext();
@@ -5075,7 +5105,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ jsxs215(
+  const control = /* @__PURE__ */ jsxs215(
     "label",
     {
       className: clsx_default(
@@ -5086,7 +5116,16 @@ var Radio = (props) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx334("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ jsx334(
+          "input",
+          {
+            ...rest,
+            ...inputProps,
+            checked: localChecked,
+            type: "radio",
+            "aria-invalid": hasError(validations) || void 0
+          }
+        ),
         /* @__PURE__ */ jsx334(
           "div",
           {
@@ -5101,15 +5140,16 @@ var Radio = (props) => {
       ]
     }
   );
+  return /* @__PURE__ */ jsx334(Field, { validations, children: control });
 };
 Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-import { Fragment as Fragment4, jsx as jsx335 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx335 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx335(Fragment4, { children: /* @__PURE__ */ jsx335(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ jsx335(Fragment5, { children: /* @__PURE__ */ jsx335(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
@@ -5168,6 +5208,7 @@ var SelectRoot = (props) => {
     children,
     disabled = false,
     error = false,
+    validations,
     size = "md"
   } = props;
   const itemChildren = React30.Children.toArray(children).filter(
@@ -5238,14 +5279,14 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx337(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
+  const control = /* @__PURE__ */ jsx337(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
     "div",
     {
       className: clsx_default(
         "lib-xplat-select",
         size,
         disabled && "disabled",
-        error && "error",
+        (error || hasError(validations)) && "error",
         mounted && "is-open"
       ),
       children: [
@@ -5256,14 +5297,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;
@@ -5307,6 +5348,7 @@ var SelectRoot = (props) => {
       ]
     }
   ) });
+  return /* @__PURE__ */ jsx337(Field, { validations, children: control });
 };
 SelectRoot.displayName = "Select";
 var Select = Object.assign(SelectRoot, {
@@ -5720,7 +5762,8 @@ var Switch = (props) => {
     size = "md",
     type = "brand",
     disabled,
-    onChange
+    onChange,
+    validations
   } = props;
   const [isAnimating, setIsAnimating] = React32.useState(false);
   const timeoutRef = React32.useRef(null);
@@ -5739,7 +5782,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  return /* @__PURE__ */ jsx342(
+  const control = /* @__PURE__ */ jsx342(
     "div",
     {
       className: clsx_default(
@@ -5751,10 +5794,12 @@ var Switch = (props) => {
         isAnimating && "animating"
       ),
       onClick: handleClick,
+      "aria-invalid": hasError(validations) || void 0,
       "aria-disabled": disabled || isAnimating,
       children: /* @__PURE__ */ jsx342("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
+  return /* @__PURE__ */ jsx342(Field, { validations, children: control });
 };
 Switch.displayName = "Switch";
 var Switch_default = Switch;
@@ -5994,22 +6039,25 @@ var TextArea = React38.forwardRef(
     const {
       className,
       size = "md",
+      validations,
       resize = "vertical",
       rows = 3,
       disabled,
       ...textareaProps
     } = props;
-    return /* @__PURE__ */ jsx349("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx349(
+    const control = /* @__PURE__ */ jsx349("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx349(
       "textarea",
       {
         ...textareaProps,
         ref,
         rows,
         disabled,
+        "aria-invalid": hasError(validations) || void 0,
         className: clsx_default("lib-xplat-textarea", size, disabled && "disabled"),
         style: { resize }
       }
     ) });
+    return /* @__PURE__ */ jsx349(Field, { validations, children: control });
   }
 );
 TextArea.displayName = "TextArea";
@@ -6108,7 +6156,7 @@ ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
 import React40 from "react";
-import { Fragment as Fragment5, jsx as jsx351, jsxs as jsxs222 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx351, jsxs as jsxs222 } from "react/jsx-runtime";
 var OFFSET = 12;
 var GAP = 8;
 var SHOW_DELAY = 300;
@@ -6211,7 +6259,7 @@ var Tooltip = (props) => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
-  if (!title && !description) return /* @__PURE__ */ jsx351(Fragment5, { children });
+  if (!title && !description) return /* @__PURE__ */ jsx351(Fragment6, { children });
   return /* @__PURE__ */ jsxs222(
     "div",
     {
@@ -6626,6 +6674,8 @@ export {
   Dropdown_default as Dropdown,
   Editor_default as Editor,
   EmptyState_default as EmptyState,
+  Field,
+  FieldMessage_default as FieldMessage,
   FileUpload_default as FileUpload,
   HtmlTypeWriter_default as HtmlTypeWriter,
   HtmlTypeWriter_default as HtmlTypewriter,
@@ -6664,6 +6714,7 @@ export {
   ToastProvider,
   Tooltip_default as Tooltip,
   Video_default as Video,
+  hasError,
   isInRange,
   isSameDay,
   useCalendar,