@x-plat/design-system 0.8.3 → 0.10.0

package/dist/components/ChatInput/index.cjs

@@ -111,11 +111,146 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 
 // src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
 var import_react = __toESM(require("react"), 1);
+
+// src/tokens/svg/status/ErrorIcon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var ErrorIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "path",
+          {
+            d: "M9.57588 5.57559C9.81019 5.34127 10.19 5.34127 10.4243 5.57559C10.6586 5.8099 10.6586 6.18971 10.4243 6.42402L8.84854 7.9998L10.4243 9.57559C10.6586 9.8099 10.6586 10.1897 10.4243 10.424C10.19 10.6583 9.81019 10.6583 9.57588 10.424L8.0001 8.84824L6.42432 10.424C6.19 10.6583 5.81019 10.6583 5.57588 10.424C5.34156 10.1897 5.34156 9.8099 5.57588 9.57559L7.15166 7.9998L5.57588 6.42402C5.34156 6.18971 5.34156 5.8099 5.57588 5.57559C5.81019 5.34127 6.19 5.34127 6.42432 5.57559L8.0001 7.15137L9.57588 5.57559Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.0001 0.733398C12.0131 0.73361 15.2671 3.98679 15.2673 7.9998C15.2672 12.0129 12.0131 15.2668 8.0001 15.267C3.98701 15.2669 0.733016 12.0129 0.73291 7.9998C0.733051 3.98674 3.98704 0.733539 8.0001 0.733398ZM8.0001 1.9334C4.64978 1.93354 1.93383 4.64948 1.93369 7.9998C1.9338 11.3502 4.64975 14.0669 8.0001 14.067C11.3504 14.0668 14.0672 11.3501 14.0673 7.9998C14.0671 4.64953 11.3504 1.93361 8.0001 1.9334Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
+
+// src/tokens/svg/status/InfoIcon.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var InfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "path",
+          {
+            d: "M8.00156 7.39999C8.33293 7.39999 8.60156 7.66862 8.60156 7.99999V10.6664C8.60156 10.9978 8.33293 11.2664 8.00156 11.2664C7.67019 11.2664 7.40156 10.9978 7.40156 10.6664V7.99999C7.40156 7.66862 7.67019 7.39999 8.00156 7.39999Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "path",
+          {
+            d: "M8.00859 4.73358C8.3398 4.73378 8.60859 5.00233 8.60859 5.33358C8.60849 5.66474 8.33973 5.93338 8.00859 5.93358H8.00156C7.67026 5.93358 7.40167 5.66486 7.40156 5.33358C7.40156 5.00221 7.67019 4.73358 8.00156 4.73358H8.00859Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.00156 0.733582C12.0146 0.733793 15.2686 3.98697 15.2688 7.99999C15.2686 12.013 12.0146 15.267 8.00156 15.2672C3.98848 15.267 0.734481 12.0131 0.734375 7.99999C0.734516 3.98693 3.9885 0.733722 8.00156 0.733582ZM8.00156 1.93358C4.65124 1.93372 1.9353 4.64967 1.93516 7.99999C1.93526 11.3503 4.65122 14.067 8.00156 14.0672C11.3518 14.067 14.0686 11.3503 14.0688 7.99999C14.0686 4.64971 11.3518 1.93379 8.00156 1.93358Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
+
+// src/tokens/svg/status/SuccessIcon.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "path",
+      {
+        d: "M12.9084 3.57597C13.1426 3.34172 13.5225 3.34185 13.7568 3.57597C13.9911 3.81028 13.9911 4.19009 13.7568 4.4244L6.424 11.758C6.31157 11.8703 6.15869 11.9337 5.99978 11.9338C5.8409 11.9337 5.68798 11.8703 5.57556 11.758L2.24197 8.4244C2.00782 8.19018 2.00795 7.81028 2.24197 7.57597C2.47626 7.34167 2.85609 7.34172 3.09041 7.57597L5.999 10.4846L12.9084 3.57597Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var SuccessIcon_default = SuccessIcon;
+
+// src/components/FieldMessage/FieldMessage.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ICON = {
+  default: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InfoIcon_default, {}),
+  success: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InfoIcon_default, {}),
+  error: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var Field = (props) => {
+  const { validations, children } = props;
+  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
+// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = import_react.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_react.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -143,9 +278,10 @@ var AutoResizeTextArea = import_react.default.forwardRef(
       updateHeight();
     }, [value]);
     if (bare) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "textarea",
         {
+          "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
           className,
@@ -155,9 +291,10 @@ var AutoResizeTextArea = import_react.default.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "textarea",
       {
+        "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
         disabled,
@@ -165,13 +302,14 @@ var AutoResizeTextArea = import_react.default.forwardRef(
         onChange: handleChange
       }
     ) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Field, { validations, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";
 var AutoResizeTextArea_default = AutoResizeTextArea;
 
 // src/components/ChatInput/ChatInput.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ChatInput = import_react2.default.forwardRef(
   (props, ref) => {
     const {
@@ -180,7 +318,8 @@ var ChatInput = import_react2.default.forwardRef(
       disabled = false,
       buttonType = "primary",
       onSubmit,
-      onChange
+      onChange,
+      validations
     } = props;
     const isControlled = valueProp !== void 0;
     const [internalValue, setInternalValue] = import_react2.default.useState("");
@@ -202,8 +341,8 @@ var ChatInput = import_react2.default.forwardRef(
         handleSubmit();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         AutoResizeTextArea_default,
         {
           ref,
@@ -214,13 +353,14 @@ var ChatInput = import_react2.default.forwardRef(
           disabled,
           rows: 1,
           onChange: handleChange,
+          "aria-invalid": hasError(validations) || void 0,
           onKeyDown: handleKeyDown
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         IconButton_default,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSquareIcon_default, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageSquareIcon_default, {}),
           type: buttonType,
           size: "sm",
           disabled: !hasText || disabled,
@@ -229,6 +369,7 @@ var ChatInput = import_react2.default.forwardRef(
         }
       )
     ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Field, { validations, children: control });
   }
 );
 ChatInput.displayName = "ChatInput";

package/dist/components/ChatInput/index.css

@@ -76,6 +76,44 @@
   outline-offset: 2px;
 }
 
+/* src/components/FieldMessage/fieldMessage.scss */
+.lib-xplat-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-field-message-wrap {
+  display: flex;
+  gap: var(--spacing-space-2);
+  margin-left: var(--spacing-space-1);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message {
+  display: flex;
+  gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  align-items: center;
+  user-select: none;
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.default {
+  color: var(--semantic-icon-secondary);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.success {
+  color: var(--semantic-text-success);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.warning {
+  color: var(--semantic-text-warning);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.error {
+  color: var(--semantic-text-error);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message > .icon {
+  font-size: var(--semantic-typo-label-2-m-size);
+}
+
 /* src/components/AutoResizeTextArea/autoResizeTextArea.scss */
 .lib-xplat-auto-resize-textarea-wrapper {
   display: flex;

package/dist/components/ChatInput/index.d.cts

@@ -1,12 +1,21 @@
 import React from 'react';
+import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 
 type ButtonType = "primary" | "secondary" | "ghost";
 interface ChatInputProps {
+    /** 비어 있을 때 표시할 안내 글자 */
     placeholder?: string;
+    /** 입력값. 주면 controlled 가 된다 */
     value?: string;
+    /** 입력과 전송을 막는다 */
     disabled?: boolean;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
+    /** 전송 버튼 색 */
     buttonType?: ButtonType;
+    /** Enter 또는 전송 버튼을 누르면 현재 값을 준다 */
     onSubmit?: (value: string) => void;
+    /** 입력할 때마다 값을 준다 */
     onChange?: (value: string) => void;
 }
 declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/ChatInput/index.d.ts

@@ -1,12 +1,21 @@
 import React from 'react';
+import { V as Validation } from '../../validation-Dqo1zqhT.js';
 
 type ButtonType = "primary" | "secondary" | "ghost";
 interface ChatInputProps {
+    /** 비어 있을 때 표시할 안내 글자 */
     placeholder?: string;
+    /** 입력값. 주면 controlled 가 된다 */
     value?: string;
+    /** 입력과 전송을 막는다 */
     disabled?: boolean;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
+    /** 전송 버튼 색 */
     buttonType?: ButtonType;
+    /** Enter 또는 전송 버튼을 누르면 현재 값을 준다 */
     onSubmit?: (value: string) => void;
+    /** 입력할 때마다 값을 준다 */
     onChange?: (value: string) => void;
 }
 declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/ChatInput/index.js

@@ -75,11 +75,146 @@ import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 
 // src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
 import React from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+
+// src/tokens/svg/status/ErrorIcon.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var ErrorIcon = () => /* @__PURE__ */ jsxs4(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs4("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ jsx9(
+          "path",
+          {
+            d: "M9.57588 5.57559C9.81019 5.34127 10.19 5.34127 10.4243 5.57559C10.6586 5.8099 10.6586 6.18971 10.4243 6.42402L8.84854 7.9998L10.4243 9.57559C10.6586 9.8099 10.6586 10.1897 10.4243 10.424C10.19 10.6583 9.81019 10.6583 9.57588 10.424L8.0001 8.84824L6.42432 10.424C6.19 10.6583 5.81019 10.6583 5.57588 10.424C5.34156 10.1897 5.34156 9.8099 5.57588 9.57559L7.15166 7.9998L5.57588 6.42402C5.34156 6.18971 5.34156 5.8099 5.57588 5.57559C5.81019 5.34127 6.19 5.34127 6.42432 5.57559L8.0001 7.15137L9.57588 5.57559Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.0001 0.733398C12.0131 0.73361 15.2671 3.98679 15.2673 7.9998C15.2672 12.0129 12.0131 15.2668 8.0001 15.267C3.98701 15.2669 0.733016 12.0129 0.73291 7.9998C0.733051 3.98674 3.98704 0.733539 8.0001 0.733398ZM8.0001 1.9334C4.64978 1.93354 1.93383 4.64948 1.93369 7.9998C1.9338 11.3502 4.64975 14.0669 8.0001 14.067C11.3504 14.0668 14.0672 11.3501 14.0673 7.9998C14.0671 4.64953 11.3504 1.93361 8.0001 1.9334Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx9("defs", { children: /* @__PURE__ */ jsx9("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ jsx9("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
+
+// src/tokens/svg/status/InfoIcon.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var InfoIcon = () => /* @__PURE__ */ jsxs5(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs5("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M8.00156 7.39999C8.33293 7.39999 8.60156 7.66862 8.60156 7.99999V10.6664C8.60156 10.9978 8.33293 11.2664 8.00156 11.2664C7.67019 11.2664 7.40156 10.9978 7.40156 10.6664V7.99999C7.40156 7.66862 7.67019 7.39999 8.00156 7.39999Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M8.00859 4.73358C8.3398 4.73378 8.60859 5.00233 8.60859 5.33358C8.60849 5.66474 8.33973 5.93338 8.00859 5.93358H8.00156C7.67026 5.93358 7.40167 5.66486 7.40156 5.33358C7.40156 5.00221 7.67019 4.73358 8.00156 4.73358H8.00859Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.00156 0.733582C12.0146 0.733793 15.2686 3.98697 15.2688 7.99999C15.2686 12.013 12.0146 15.267 8.00156 15.2672C3.98848 15.267 0.734481 12.0131 0.734375 7.99999C0.734516 3.98693 3.9885 0.733722 8.00156 0.733582ZM8.00156 1.93358C4.65124 1.93372 1.9353 4.64967 1.93516 7.99999C1.93526 11.3503 4.65122 14.067 8.00156 14.0672C11.3518 14.067 14.0686 11.3503 14.0688 7.99999C14.0686 4.64971 11.3518 1.93379 8.00156 1.93358Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsx10("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ jsx10("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
+
+// src/tokens/svg/status/SuccessIcon.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SuccessIcon = () => /* @__PURE__ */ jsx11(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ jsx11(
+      "path",
+      {
+        d: "M12.9084 3.57597C13.1426 3.34172 13.5225 3.34185 13.7568 3.57597C13.9911 3.81028 13.9911 4.19009 13.7568 4.4244L6.424 11.758C6.31157 11.8703 6.15869 11.9337 5.99978 11.9338C5.8409 11.9337 5.68798 11.8703 5.57556 11.758L2.24197 8.4244C2.00782 8.19018 2.00795 7.81028 2.24197 7.57597C2.47626 7.34167 2.85609 7.34172 3.09041 7.57597L5.999 10.4846L12.9084 3.57597Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var SuccessIcon_default = SuccessIcon;
+
+// src/components/FieldMessage/FieldMessage.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var ICON = {
+  default: /* @__PURE__ */ jsx12(InfoIcon_default, {}),
+  success: /* @__PURE__ */ jsx12(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ jsx12(InfoIcon_default, {}),
+  error: /* @__PURE__ */ jsx12(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ jsx12("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ jsx12("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ jsx12("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var Field = (props) => {
+  const { validations, children } = props;
+  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx12(Fragment, { children });
+  return /* @__PURE__ */ jsxs6("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ jsx12(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
+// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = React.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, bare = false, ...textareaProps } = props;
+    const { value, className, onChange, disabled, bare = false, validations, ...textareaProps } = props;
     const localRef = React.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -107,9 +242,10 @@ var AutoResizeTextArea = React.forwardRef(
       updateHeight();
     }, [value]);
     if (bare) {
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx13(
         "textarea",
         {
+          "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
           className,
@@ -119,9 +255,10 @@ var AutoResizeTextArea = React.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx9("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ jsx9("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ jsx9(
+    const control = /* @__PURE__ */ jsx13("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ jsx13("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ jsx13(
       "textarea",
       {
+        "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
         disabled,
@@ -129,13 +266,14 @@ var AutoResizeTextArea = React.forwardRef(
         onChange: handleChange
       }
     ) }) });
+    return /* @__PURE__ */ jsx13(Field, { validations, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";
 var AutoResizeTextArea_default = AutoResizeTextArea;
 
 // src/components/ChatInput/ChatInput.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var ChatInput = React2.forwardRef(
   (props, ref) => {
     const {
@@ -144,7 +282,8 @@ var ChatInput = React2.forwardRef(
       disabled = false,
       buttonType = "primary",
       onSubmit,
-      onChange
+      onChange,
+      validations
     } = props;
     const isControlled = valueProp !== void 0;
     const [internalValue, setInternalValue] = React2.useState("");
@@ -166,8 +305,8 @@ var ChatInput = React2.forwardRef(
         handleSubmit();
       }
     };
-    return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
-      /* @__PURE__ */ jsx10(
+    const control = /* @__PURE__ */ jsxs7("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ jsx14(
         AutoResizeTextArea_default,
         {
           ref,
@@ -178,13 +317,14 @@ var ChatInput = React2.forwardRef(
           disabled,
           rows: 1,
           onChange: handleChange,
+          "aria-invalid": hasError(validations) || void 0,
           onKeyDown: handleKeyDown
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx14(
         IconButton_default,
         {
-          icon: /* @__PURE__ */ jsx10(MessageSquareIcon_default, {}),
+          icon: /* @__PURE__ */ jsx14(MessageSquareIcon_default, {}),
           type: buttonType,
           size: "sm",
           disabled: !hasText || disabled,
@@ -193,6 +333,7 @@ var ChatInput = React2.forwardRef(
         }
       )
     ] });
+    return /* @__PURE__ */ jsx14(Field, { validations, children: control });
   }
 );
 ChatInput.displayName = "ChatInput";