@mattermost/compass-ui 0.1.0-alpha.16 → 0.1.0-alpha.18

package/dist/components/search-input/SearchInput.js

@@ -1,130 +1,129 @@
-import { jsx as t, jsxs as z } from "react/jsx-runtime";
-import { forwardRef as P, useId as B, useRef as ee, useState as E, useCallback as n } from "react";
-import { toKebab as se } from "../../utils/string.js";
-import j from "../icon/Icon.js";
-import __te from "@mattermost/compass-icons/components/magnify.js";const te=__te&&__te.default?__te.default:__te;
-import __ae from "@mattermost/compass-icons/components/close-circle.js";const ae=__ae&&__ae.default?__ae.default:__ae;
-import { mergeClassNames as ie } from "../../utils/props.js";
-import s from "./SearchInput.module.scss.js";
-const le = {
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { forwardRef as ie, useId as ne, useRef as te, useState as j, useCallback as r } from "react";
+import { toKebab as le } from "../../utils/string.js";
+import ce from "../icon/Icon.js";
+import __oe from "@mattermost/compass-icons/components/magnify.js";const oe=__oe&&__oe.default?__oe.default:__oe;
+import re from "../field/FieldClearButton.js";
+import { mergeFieldDescribedBy as de, hasFieldMessage as ue, isFieldInvalid as he } from "../field/fieldDescribedBy.js";
+import { useFieldClear as me } from "../field/useFieldClear.js";
+import pe from "../field-message/FieldMessage.js";
+import e from "./SearchInput.module.scss.js";
+const fe = {
   small: "12",
   medium: "16",
   large: "20"
-}, ce = {
-  small: "12",
-  medium: "16",
-  large: "16"
-}, _e = P(
+}, Me = ie(
   function({
-    className: k = "",
-    size: f = "medium",
-    label: h,
-    invalid: N = !1,
-    onClear: p,
-    clearLabel: A = "Clear search",
-    clearButtonProps: i,
-    id: M,
-    value: _,
-    defaultValue: b,
-    placeholder: V,
-    onFocus: u,
-    onBlur: d,
-    onChange: a,
-    disabled: c,
-    onKeyDown: m,
-    ...F
-  }, r) {
-    const L = B(), g = M ?? L, I = ee(null), l = _ !== void 0, [O, C] = E(
-      b ?? ""
-    ), S = l ? _ : O, o = S != null && S !== "", [T, x] = E(!1), Z = T || o, U = n(
-      (e) => {
-        x(!0), u == null || u(e);
-      },
-      [u]
-    ), $ = n(
-      (e) => {
-        x(!1), d == null || d(e);
+    className: D = "",
+    size: d = "medium",
+    label: u,
+    invalid: K = !1,
+    message: h,
+    messageTone: v,
+    onClear: V,
+    clearLabel: k = "Clear search",
+    clearButtonProps: t,
+    id: z,
+    value: m,
+    defaultValue: I,
+    placeholder: E,
+    onFocus: l,
+    onBlur: c,
+    onChange: o,
+    disabled: b,
+    readOnly: _,
+    onKeyDown: $,
+    "aria-describedby": A,
+    ...L
+  }, n) {
+    const T = ne(), p = z ?? T, C = te(null), i = m !== void 0, [U, g] = j(
+      I ?? ""
+    ), y = i ? m : U, F = y != null && y !== "", [Z, N] = j(!1), q = Z || F, G = r(
+      (s) => {
+        N(!0), l == null || l(s);
       },
-      [d]
-    ), q = n(
-      (e) => {
-        l || C(e.target.value), a == null || a(e);
+      [l]
+    ), H = r(
+      (s) => {
+        N(!1), c == null || c(s);
       },
-      [l, a]
-    ), w = n(
-      (e) => {
-        I.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+      [c]
+    ), w = r(
+      (s) => {
+        i || g(s.target.value), o == null || o(s);
       },
-      [r]
-    ), v = n(() => {
-      var R;
-      if (c) return;
-      if (p) {
-        p(), (R = I.current) == null || R.focus();
-        return;
-      }
-      const e = I.current;
-      e != null && (e.value = "", l || C(""), a == null || a({
-        target: e,
-        currentTarget: e
-      }), e.focus());
-    }, [c, l, a, p]), G = n(
-      (e) => {
-        m == null || m(e), !(e.defaultPrevented || c) && e.key === "Escape" && o && (e.preventDefault(), v());
+      [i, o]
+    ), J = r(
+      (s) => {
+        C.current = s, typeof n == "function" ? n(s) : n && (n.current = s);
       },
-      [c, v, o, m]
-    ), y = o && !c, H = s[`search-input--size-${se(f)}`], J = N ? s["search-input--invalid"] : "", Q = h != null && Z ? s["search-input--label-floated"] : "", W = s["search-input--has-leading-icon"], X = y ? s["search-input--has-trailing-icon"] : "", Y = le[f], D = ce[f], K = [
-      s["search-input"],
-      H,
-      J,
-      Q,
+      [n]
+    ), { showClearButton: x, handleClear: O, handleKeyDown: Q } = me({
+      disabled: !!(b || _),
+      hasValue: F,
+      clearEnabled: !0,
+      isControlled: i,
+      onClear: V,
+      onChange: w,
+      onKeyDown: $,
+      inputRef: C,
+      setUncontrolledValue: g
+    }), M = he(K, h, v), S = ue(h), W = e[`search-input--size-${le(d)}`], X = M ? e["search-input--invalid"] : "", Y = u != null && q ? e["search-input--label-floated"] : "", B = e["search-input--has-leading-icon"], P = x ? e["search-input--has-trailing-icon"] : "", ee = fe[d], se = [
+      e["search-input"],
       W,
       X,
-      k
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ t("div", { className: K, children: /* @__PURE__ */ z("div", { className: s["search-input__wrapper"], children: [
-      h != null && /* @__PURE__ */ t("label", { className: s["search-input__label"], htmlFor: g, children: h }),
-      /* @__PURE__ */ z("div", { className: s["search-input__inner"], children: [
-        /* @__PURE__ */ t("span", { className: s["search-input__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ t(j, { size: Y, glyph: /* @__PURE__ */ t(te, {}) }) }),
-        /* @__PURE__ */ t(
-          "input",
-          {
-            ref: w,
-            id: g,
-            type: "search",
-            className: s["search-input__input"],
-            value: l ? _ : void 0,
-            defaultValue: l ? void 0 : b,
-            placeholder: V,
-            disabled: c,
-            onFocus: U,
-            onBlur: $,
-            onChange: q,
-            onKeyDown: G,
-            "aria-invalid": N ? !0 : void 0,
-            ...F
-          }
-        ),
-        y && /* @__PURE__ */ t("span", { className: s["search-input__trailing-icon"], children: /* @__PURE__ */ t(
-          "button",
-          {
-            ...i,
-            type: "button",
-            className: ie(
-              s["search-input__clear-button"],
-              i == null ? void 0 : i.className
-            ),
-            onClick: v,
-            "aria-label": A,
-            tabIndex: (i == null ? void 0 : i.tabIndex) ?? -1,
-            children: /* @__PURE__ */ t(j, { size: D, glyph: /* @__PURE__ */ t(ae, {}) })
-          }
-        ) })
-      ] })
-    ] }) });
+      Y,
+      B,
+      P,
+      D
+    ].filter(Boolean).join(" "), R = S ? `${p}-message` : void 0, ae = v ?? "error";
+    return /* @__PURE__ */ f("div", { className: se, children: [
+      /* @__PURE__ */ f("div", { className: e["search-input__wrapper"], children: [
+        u != null && /* @__PURE__ */ a("label", { className: e["search-input__label"], htmlFor: p, children: u }),
+        /* @__PURE__ */ f("div", { className: e["search-input__inner"], children: [
+          /* @__PURE__ */ a("span", { className: e["search-input__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ a(ce, { size: ee, glyph: /* @__PURE__ */ a(oe, {}) }) }),
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ref: J,
+              id: p,
+              type: "search",
+              className: e["search-input__input"],
+              value: i ? m : void 0,
+              defaultValue: i ? void 0 : I,
+              placeholder: E,
+              disabled: b,
+              readOnly: _,
+              onFocus: G,
+              onBlur: H,
+              onChange: w,
+              onKeyDown: Q,
+              "aria-invalid": M ? !0 : void 0,
+              "aria-describedby": de(
+                A,
+                R,
+                void 0
+              ),
+              ...L
+            }
+          ),
+          x && /* @__PURE__ */ a("span", { className: e["search-input__trailing-icon"], children: /* @__PURE__ */ a(
+            re,
+            {
+              size: d,
+              clearLabel: k,
+              clearButtonProps: t,
+              onClick: O,
+              tabIndex: (t == null ? void 0 : t.tabIndex) ?? -1
+            }
+          ) })
+        ] })
+      ] }),
+      S && /* @__PURE__ */ a(pe, { id: R, message: h, tone: ae })
+    ] });
   }
 );
 export {
-  _e as default
+  Me as default
 };
 //# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nconst CLEAR_ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default: \"Clear search\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      onClear,\n      clearLabel = 'Clear search',\n      clearButtonProps,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      onKeyDown,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleClear = useCallback(() => {\n      if (disabled) return;\n\n      if (onClear) {\n        onClear();\n        inputRef.current?.focus();\n        return;\n      }\n\n      const input = inputRef.current;\n      if (input == null) return;\n\n      input.value = '';\n      if (!isControlled) setUncontrolledValue('');\n\n      onChange?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(e);\n        if (e.defaultPrevented || disabled) return;\n        if (e.key === 'Escape' && hasValue) {\n          e.preventDefault();\n          handleClear();\n        }\n      },\n      [disabled, handleClear, hasValue, onKeyDown],\n    );\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['search-input--label-floated']\n        : '';\n    const hasLeadingClass = styles['search-input--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['search-input--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n    const clearIconSize = CLEAR_ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['search-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['search-input__wrapper']}>\n          {label != null && (\n            <label className={styles['search-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['search-input__inner']}>\n            <span className={styles['search-input__leading-icon']} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles['search-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={invalid ? true : undefined}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <button\n                  {...clearButtonProps}\n                  type=\"button\"\n                  className={mergeClassNames(\n                    styles['search-input__clear-button'],\n                    clearButtonProps?.className,\n                  )}\n                  onClick={handleClear}\n                  aria-label={clearLabel}\n                  tabIndex={clearButtonProps?.tabIndex ?? -1}\n                >\n                  <Icon size={clearIconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","CLEAR_ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","onClear","clearLabel","clearButtonProps","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","onKeyDown","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","handleKeyDown","showClearButton","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","clearIconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","mergeClassNames","CloseCircleIcon"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport FieldClearButton from '@/components/field/FieldClearButton';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport { useFieldClear } from '@/components/field/useFieldClear';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default: \"Clear search\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      onClear,\n      clearLabel = 'Clear search',\n      clearButtonProps,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      onKeyDown,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const { showClearButton, handleClear, handleKeyDown } = useFieldClear({\n      disabled: Boolean(disabled || readOnly),\n      hasValue,\n      clearEnabled: true,\n      isControlled,\n      onClear,\n      onChange: handleChange,\n      onKeyDown: onKeyDown as\n        | ((e: KeyboardEvent<HTMLInputElement>) => void)\n        | undefined,\n      inputRef,\n      setUncontrolledValue,\n    });\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['search-input--label-floated']\n        : '';\n    const hasLeadingClass = styles['search-input--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['search-input--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['search-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['search-input__wrapper']}>\n          {label != null && (\n            <label className={styles['search-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['search-input__inner']}>\n            <span className={styles['search-input__leading-icon']} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles['search-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              readOnly={readOnly}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <FieldClearButton\n                  size={size}\n                  clearLabel={clearLabel}\n                  clearButtonProps={clearButtonProps}\n                  onClick={handleClear}\n                  tabIndex={clearButtonProps?.tabIndex ?? -1}\n                />\n              </span>\n            )}\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","message","messageTone","onClear","clearLabel","clearButtonProps","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","onKeyDown","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","showClearButton","handleClear","handleKeyDown","useFieldClear","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","Icon","MagnifyIcon","mergeFieldDescribedBy","FieldClearButton","FieldMessage"],"mappings":"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"}

package/dist/components/search-input/SearchInput.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SearchInput.css');const i={"search-input":"_search-input_1iq6i_2","search-input__wrapper":"_search-input__wrapper_1iq6i_7","search-input__input":"_search-input__input_1iq6i_17","search-input__label":"_search-input__label_1iq6i_27","search-input--label-floated":"_search-input--label-floated_1iq6i_47","search-input__inner":"_search-input__inner_1iq6i_54","search-input__leading-icon":"_search-input__leading-icon_1iq6i_85","search-input__trailing-icon":"_search-input__trailing-icon_1iq6i_85","search-input__clear-button":"_search-input__clear-button_1iq6i_99","search-input--size-small":"_search-input--size-small_1iq6i_114","search-input--size-medium":"_search-input--size-medium_1iq6i_130","search-input--size-large":"_search-input--size-large_1iq6i_150","search-input--has-leading-icon":"_search-input--has-leading-icon_1iq6i_171","search-input--invalid":"_search-input--invalid_1iq6i_189"};exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SearchInput.css');const _={"search-input":"_search-input_1h7hr_2","search-input__wrapper":"_search-input__wrapper_1h7hr_8","search-input__input":"_search-input__input_1h7hr_18","search-input__label":"_search-input__label_1h7hr_28","search-input--label-floated":"_search-input--label-floated_1h7hr_48","search-input__inner":"_search-input__inner_1h7hr_55","search-input__leading-icon":"_search-input__leading-icon_1h7hr_86","search-input__trailing-icon":"_search-input__trailing-icon_1h7hr_86","search-input--size-small":"_search-input--size-small_1h7hr_100","search-input--size-medium":"_search-input--size-medium_1h7hr_116","search-input--size-large":"_search-input--size-large_1h7hr_136","search-input--has-leading-icon":"_search-input--has-leading-icon_1h7hr_157","search-input--invalid":"_search-input--invalid_1h7hr_181"};exports.default=_;
 //# sourceMappingURL=SearchInput.module.scss.cjs.map

package/dist/components/search-input/SearchInput.module.scss.js

@@ -1,20 +1,19 @@
-import './SearchInput.css';const i = {
-  "search-input": "_search-input_1iq6i_2",
-  "search-input__wrapper": "_search-input__wrapper_1iq6i_7",
-  "search-input__input": "_search-input__input_1iq6i_17",
-  "search-input__label": "_search-input__label_1iq6i_27",
-  "search-input--label-floated": "_search-input--label-floated_1iq6i_47",
-  "search-input__inner": "_search-input__inner_1iq6i_54",
-  "search-input__leading-icon": "_search-input__leading-icon_1iq6i_85",
-  "search-input__trailing-icon": "_search-input__trailing-icon_1iq6i_85",
-  "search-input__clear-button": "_search-input__clear-button_1iq6i_99",
-  "search-input--size-small": "_search-input--size-small_1iq6i_114",
-  "search-input--size-medium": "_search-input--size-medium_1iq6i_130",
-  "search-input--size-large": "_search-input--size-large_1iq6i_150",
-  "search-input--has-leading-icon": "_search-input--has-leading-icon_1iq6i_171",
-  "search-input--invalid": "_search-input--invalid_1iq6i_189"
+import './SearchInput.css';const _ = {
+  "search-input": "_search-input_1h7hr_2",
+  "search-input__wrapper": "_search-input__wrapper_1h7hr_8",
+  "search-input__input": "_search-input__input_1h7hr_18",
+  "search-input__label": "_search-input__label_1h7hr_28",
+  "search-input--label-floated": "_search-input--label-floated_1h7hr_48",
+  "search-input__inner": "_search-input__inner_1h7hr_55",
+  "search-input__leading-icon": "_search-input__leading-icon_1h7hr_86",
+  "search-input__trailing-icon": "_search-input__trailing-icon_1h7hr_86",
+  "search-input--size-small": "_search-input--size-small_1h7hr_100",
+  "search-input--size-medium": "_search-input--size-medium_1h7hr_116",
+  "search-input--size-large": "_search-input--size-large_1h7hr_136",
+  "search-input--has-leading-icon": "_search-input--has-leading-icon_1h7hr_157",
+  "search-input--invalid": "_search-input--invalid_1h7hr_181"
 };
 export {
-  i as default
+  _ as default
 };
 //# sourceMappingURL=SearchInput.module.scss.js.map

package/dist/components/search-input/SearchInput.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SearchInput.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/components/section-notice/SectionNotice.css

@@ -1 +1 @@
-._section-notice_1fkh6_2{display:flex;flex-direction:column;align-items:flex-end;position:relative;border-radius:var(--radius-s);border:1px solid rgba(var(--color-info-rgb),.16);background-color:rgba(var(--color-info-rgb),.04)}._section-notice__content_1fkh6_11{display:flex;align-items:flex-start;gap:var(--spacing-m);padding:var(--spacing-m);width:100%}._section-notice__icon_1fkh6_18{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-info)}._section-notice__body_1fkh6_25{display:flex;flex:1 0 0;flex-direction:column;gap:var(--spacing-xs);min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._section-notice__title_1fkh6_34{margin:0;padding:0;font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);letter-spacing:var(--letter-spacing-normal);text-transform:none;color:var(--center-channel-color)}._section-notice__description_1fkh6_45{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._section-notice__actions_1fkh6_51{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._section-notice__dismiss_1fkh6_57{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}._section-notice--type-warning_1fkh6_62{background-color:rgba(var(--color-warning-rgb),.04);border-color:rgba(var(--color-warning-rgb),.16)}._section-notice--type-warning_1fkh6_62 ._section-notice__icon_1fkh6_18{color:var(--color-warning)}._section-notice--type-danger_1fkh6_69{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);border-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._section-notice--type-danger_1fkh6_69 ._section-notice__icon_1fkh6_18{color:var(--error-text, var(--color-danger))}._section-notice--type-success_1fkh6_76{background-color:rgba(var(--color-success-rgb),.04);border-color:rgba(var(--color-success-rgb),.16)}._section-notice--type-success_1fkh6_76 ._section-notice__icon_1fkh6_18{color:var(--color-success)}._section-notice--type-hint_1fkh6_83{background-color:rgba(var(--center-channel-color-rgb),.04);border-color:rgba(var(--center-channel-color-rgb),.16)}._section-notice--type-hint_1fkh6_83 ._section-notice__icon_1fkh6_18{color:rgba(var(--center-channel-color-rgb),.64)}
+._section-notice_1x4j7_2{display:flex;flex-direction:column;align-items:flex-end;position:relative;border-radius:var(--radius-s);border:1px solid rgba(var(--color-info-rgb),.16);background-color:rgba(var(--color-info-rgb),.04)}._section-notice__content_1x4j7_11{display:flex;align-items:flex-start;gap:var(--spacing-m);padding:var(--spacing-m);width:100%}._section-notice__icon_1x4j7_18{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-info)}._section-notice__body_1x4j7_25{display:flex;flex:1 0 0;flex-direction:column;gap:var(--spacing-xs);min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._section-notice__title_1x4j7_34._section-notice__title_1x4j7_34{margin:0;font-weight:var(--font-weight-semibold)}._section-notice__title_1x4j7_34{padding:0;font-family:var(--font-family-body);font-size:var(--font-size-100);line-height:var(--line-height-100);letter-spacing:var(--letter-spacing-normal);text-transform:none;color:var(--center-channel-color)}._section-notice__description_1x4j7_47{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._section-notice__actions_1x4j7_53{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._section-notice__dismiss_1x4j7_59{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}._section-notice--type-warning_1x4j7_64{background-color:rgba(var(--color-warning-rgb),.04);border-color:rgba(var(--color-warning-rgb),.16)}._section-notice--type-warning_1x4j7_64 ._section-notice__icon_1x4j7_18{color:var(--color-warning)}._section-notice--type-danger_1x4j7_71{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);border-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._section-notice--type-danger_1x4j7_71 ._section-notice__icon_1x4j7_18{color:var(--error-text, var(--color-danger))}._section-notice--type-success_1x4j7_78{background-color:rgba(var(--color-success-rgb),.04);border-color:rgba(var(--color-success-rgb),.16)}._section-notice--type-success_1x4j7_78 ._section-notice__icon_1x4j7_18{color:var(--color-success)}._section-notice--type-hint_1x4j7_85{background-color:rgba(var(--center-channel-color-rgb),.04);border-color:rgba(var(--center-channel-color-rgb),.16)}._section-notice--type-hint_1x4j7_85 ._section-notice__icon_1x4j7_18{color:rgba(var(--center-channel-color-rgb),.64)}

package/dist/components/section-notice/SectionNotice.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SectionNotice.css');const e={"section-notice":"_section-notice_1fkh6_2","section-notice__content":"_section-notice__content_1fkh6_11","section-notice__icon":"_section-notice__icon_1fkh6_18","section-notice__body":"_section-notice__body_1fkh6_25","section-notice__title":"_section-notice__title_1fkh6_34","section-notice__description":"_section-notice__description_1fkh6_45","section-notice__actions":"_section-notice__actions_1fkh6_51","section-notice__dismiss":"_section-notice__dismiss_1fkh6_57","section-notice--type-warning":"_section-notice--type-warning_1fkh6_62","section-notice--type-danger":"_section-notice--type-danger_1fkh6_69","section-notice--type-success":"_section-notice--type-success_1fkh6_76","section-notice--type-hint":"_section-notice--type-hint_1fkh6_83"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SectionNotice.css');const e={"section-notice":"_section-notice_1x4j7_2","section-notice__content":"_section-notice__content_1x4j7_11","section-notice__icon":"_section-notice__icon_1x4j7_18","section-notice__body":"_section-notice__body_1x4j7_25","section-notice__title":"_section-notice__title_1x4j7_34","section-notice__description":"_section-notice__description_1x4j7_47","section-notice__actions":"_section-notice__actions_1x4j7_53","section-notice__dismiss":"_section-notice__dismiss_1x4j7_59","section-notice--type-warning":"_section-notice--type-warning_1x4j7_64","section-notice--type-danger":"_section-notice--type-danger_1x4j7_71","section-notice--type-success":"_section-notice--type-success_1x4j7_78","section-notice--type-hint":"_section-notice--type-hint_1x4j7_85"};exports.default=e;
 //# sourceMappingURL=SectionNotice.module.scss.cjs.map

package/dist/components/section-notice/SectionNotice.module.scss.js

@@ -1,16 +1,16 @@
 import './SectionNotice.css';const t = {
-  "section-notice": "_section-notice_1fkh6_2",
-  "section-notice__content": "_section-notice__content_1fkh6_11",
-  "section-notice__icon": "_section-notice__icon_1fkh6_18",
-  "section-notice__body": "_section-notice__body_1fkh6_25",
-  "section-notice__title": "_section-notice__title_1fkh6_34",
-  "section-notice__description": "_section-notice__description_1fkh6_45",
-  "section-notice__actions": "_section-notice__actions_1fkh6_51",
-  "section-notice__dismiss": "_section-notice__dismiss_1fkh6_57",
-  "section-notice--type-warning": "_section-notice--type-warning_1fkh6_62",
-  "section-notice--type-danger": "_section-notice--type-danger_1fkh6_69",
-  "section-notice--type-success": "_section-notice--type-success_1fkh6_76",
-  "section-notice--type-hint": "_section-notice--type-hint_1fkh6_83"
+  "section-notice": "_section-notice_1x4j7_2",
+  "section-notice__content": "_section-notice__content_1x4j7_11",
+  "section-notice__icon": "_section-notice__icon_1x4j7_18",
+  "section-notice__body": "_section-notice__body_1x4j7_25",
+  "section-notice__title": "_section-notice__title_1x4j7_34",
+  "section-notice__description": "_section-notice__description_1x4j7_47",
+  "section-notice__actions": "_section-notice__actions_1x4j7_53",
+  "section-notice__dismiss": "_section-notice__dismiss_1x4j7_59",
+  "section-notice--type-warning": "_section-notice--type-warning_1x4j7_64",
+  "section-notice--type-danger": "_section-notice--type-danger_1x4j7_71",
+  "section-notice--type-success": "_section-notice--type-success_1x4j7_78",
+  "section-notice--type-hint": "_section-notice--type-hint_1x4j7_85"
 };
 export {
   t as default

package/dist/components/text-area/TextArea.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),t=require("react"),E=require("../../utils/string.cjs"),e=require("./TextArea.module.scss.cjs"),G=t.forwardRef(function({className:m="",size:N="medium",label:o,invalid:v=!1,maxLength:d,showCharacterCount:x=!1,id:p,value:n,defaultValue:b,placeholder:q,onFocus:i,onBlur:r,onChange:c,disabled:y,readOnly:I,rows:S=3,"aria-describedby":T,...h},k){const A=t.useId(),f=p??A,l=n!==void 0,[C,R]=t.useState(b??""),u=l?n:C,V=u!=null&&u!=="",[g,_]=t.useState(!1),z=g||V,F=t.useCallback(a=>{_(!0),i==null||i(a)},[i]),M=t.useCallback(a=>{_(!1),r==null||r(a)},[r]),$=t.useCallback(a=>{l||R(a.target.value),c==null||c(a)},[l,c]),w=e.default[`text-area--size-${E.toKebab(N)}`],K=v?e.default["text-area--invalid"]:"",O=o!=null&&z?e.default["text-area--label-floated"]:"",U=[e.default["text-area"],w,K,O,m].filter(Boolean).join(" "),D=typeof u=="string"?u.length:0,j=x&&d!=null?`${f}-counter`:void 0;return s.jsxs("div",{className:U,children:[s.jsxs("div",{className:e.default["text-area__wrapper"],children:[o!=null&&s.jsx("label",{className:e.default["text-area__label"],htmlFor:f,children:o}),s.jsx("textarea",{ref:k,id:f,className:e.default["text-area__input"],value:l?n:void 0,defaultValue:l?void 0:b,placeholder:q,maxLength:d,disabled:y,readOnly:I,rows:S,"aria-invalid":v?!0:void 0,"aria-describedby":[T,j].filter(Boolean).join(" ")||void 0,onFocus:F,onBlur:M,onChange:$,...h})]}),x&&d!=null&&s.jsxs("div",{id:j,className:e.default["text-area__counter"],"aria-live":"polite",children:[D," / ",d]})]})});exports.default=G;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("react"),_=require("../field/fieldDescribedBy.cjs"),X=require("../field-message/FieldMessage.cjs"),Y=require("../../utils/string.cjs"),e=require("./TextArea.module.scss.cjs"),Z=s.forwardRef(function({className:F="",size:g="medium",label:u,invalid:M=!1,maxLength:l,showCharacterCount:f=!1,message:v,messageTone:j,id:h,value:x,defaultValue:m,placeholder:p,onFocus:i,onBlur:r,onChange:c,disabled:S,readOnly:T,rows:k=3,"aria-describedby":A,...R},V){const $=s.useId(),o=h??$,d=x!==void 0,[w,z]=s.useState(m??""),n=d?x:w,D=n!=null&&n!=="",[C,I]=s.useState(!1),K=C||D,O=s.useCallback(a=>{I(!0),i==null||i(a)},[i]),U=s.useCallback(a=>{I(!1),r==null||r(a)},[r]),B=s.useCallback(a=>{d||z(a.target.value),c==null||c(a)},[d,c]),N=_.isFieldInvalid(M,v,j),b=_.hasFieldMessage(v),E=e.default[`text-area--size-${Y.toKebab(g)}`],G=N?e.default["text-area--invalid"]:"",H=u!=null&&K?e.default["text-area--label-floated"]:"",J=[e.default["text-area"],E,G,H,F].filter(Boolean).join(" "),Q=typeof n=="string"?n.length:0,q=f&&l!=null?`${o}-counter`:void 0,y=b?`${o}-message`:void 0,W=j??"error";return t.jsxs("div",{className:J,children:[t.jsxs("div",{className:e.default["text-area__wrapper"],children:[u!=null&&t.jsx("label",{className:e.default["text-area__label"],htmlFor:o,children:u}),t.jsx("textarea",{ref:V,id:o,className:e.default["text-area__input"],value:d?x:void 0,defaultValue:d?void 0:m,placeholder:p,maxLength:l,disabled:S,readOnly:T,rows:k,"aria-invalid":N?!0:void 0,"aria-describedby":_.mergeFieldDescribedBy(A,y,q),onFocus:O,onBlur:U,onChange:B,...R})]}),(b||f&&l!=null)&&t.jsxs("div",{className:e.default["text-area__footer"],children:[b&&t.jsx(X.default,{id:y,className:e.default["text-area__footer-message"],message:v,tone:W}),f&&l!=null&&t.jsxs("div",{id:q,className:e.default["text-area__counter"],"aria-live":"polite",children:[Q," / ",l]})]})]})});exports.default=Z;
 //# sourceMappingURL=TextArea.cjs.map

package/dist/components/text-area/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes, ReactNode, ChangeEvent } from 'react';\nimport { forwardRef, useId, useState, useCallback } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextArea.module.scss';\n\nexport type TextAreaSize = 'small' | 'medium' | 'large';\n\nexport interface TextAreaProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Max length for the textarea; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below textarea. */\n  showCharacterCount?: boolean;\n  /** Size variant. Default: Medium. */\n  size?: TextAreaSize;\n}\n\n/**\n * Text Areas let people write long-form text that spans multiple lines — descriptions,\n * channel purposes, message drafts, admin notes. They share their visual rhythm with Text\n * Input but trade the single-line constraint for room to breathe.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      rows = 3,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const sizeClass = styles[`text-area--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['text-area--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-area--label-floated'] : '';\n\n    const rootClass = [\n      styles['text-area'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-area__wrapper']}>\n          {label != null && (\n            <label className={styles['text-area__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <textarea\n            ref={ref}\n            id={id}\n            className={styles['text-area__input']}\n            value={isControlled ? valueProp : undefined}\n            defaultValue={isControlled ? undefined : defaultValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            readOnly={readOnly}\n            rows={rows}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={\n              [describedBy, counterId].filter(Boolean).join(' ') || undefined\n            }\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n          />\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles['text-area__counter']}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rows","describedBy","rest","ref","generatedId","useId","id","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"gPA8BMA,EAAWC,EAAAA,WACf,SACE,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,mBAAAC,EAAqB,GACrB,GAAIC,EACJ,MAAOC,EACP,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,EACP,mBAAoBC,EACpB,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKf,GAAUa,EAEfG,EAAef,IAAc,OAC7B,CAACgB,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDjB,GAAgB,EAAA,EAEZkB,EAAQJ,EAAgBf,EAAuBgB,EAC/CI,EAAWD,GAAS,MAAQA,IAAU,GAEtC,CAACE,EAAWC,CAAY,EAAIJ,EAAAA,SAAS,EAAK,EAC1CK,EAAeF,GAAaD,EAE5BI,EAAcC,EAAAA,YACjBC,GAA6C,CAC5CJ,EAAa,EAAI,EACjBnB,GAAA,MAAAA,EAAUuB,EACZ,EACA,CAACvB,CAAO,CAAA,EAEJwB,EAAaF,EAAAA,YAChBC,GAA6C,CAC5CJ,EAAa,EAAK,EAClBlB,GAAA,MAAAA,EAASsB,EACX,EACA,CAACtB,CAAM,CAAA,EAEHwB,EAAeH,EAAAA,YAClBC,GAAwC,CAClCX,GAAcE,EAAqBS,EAAE,OAAO,KAAK,EACtDrB,GAAA,MAAAA,EAAWqB,EACb,EACA,CAACX,EAAcV,CAAQ,CAAA,EAGnBwB,EAAYC,EAAAA,QAAO,mBAAmBC,EAAAA,QAAQrC,CAAI,CAAC,EAAE,EACrDsC,EAAepC,EAAUkC,UAAO,oBAAoB,EAAI,GACxDG,EACJtC,GAAS,MAAQ4B,EAAeO,EAAAA,QAAO,0BAA0B,EAAI,GAEjEI,EAAY,CAChBJ,EAAAA,QAAO,WAAW,EAClBD,EACAG,EACAC,EACAxC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEL0C,EAAgB,OAAOhB,GAAU,SAAWA,EAAM,OAAS,EAC3DiB,EACJtC,GAAsBD,GAAa,KAAO,GAAGiB,CAAE,WAAa,OAE9D,OACEuB,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAnC,GAAS,YACP,QAAA,CAAM,UAAWmC,EAAAA,QAAO,kBAAkB,EAAG,QAAShB,EACpD,SAAAnB,CAAA,CACH,EAEF2C,EAAAA,IAAC,WAAA,CACC,IAAA3B,EACA,GAAAG,EACA,UAAWgB,EAAAA,QAAO,kBAAkB,EACpC,MAAOf,EAAef,EAAY,OAClC,aAAce,EAAe,OAAYd,EACzC,YAAAC,EACA,UAAAL,EACA,SAAAS,EACA,SAAAC,EACA,KAAAC,EACA,eAAcZ,EAAU,GAAO,OAC/B,mBACE,CAACa,EAAa2B,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,QAASZ,EACT,OAAQG,EACR,SAAUC,EACT,GAAGlB,CAAA,CAAA,CACN,EACF,EACCZ,GAAsBD,GAAa,MAClCwC,EAAAA,KAAC,MAAA,CACC,GAAID,EACJ,UAAWN,EAAAA,QAAO,oBAAoB,EACtC,YAAU,SAET,SAAA,CAAAK,EAAc,MAAItC,CAAA,CAAA,CAAA,CACrB,EAEJ,CAEJ,CACF"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import type { TextareaHTMLAttributes, ReactNode, ChangeEvent } from 'react';\nimport { forwardRef, useId, useState, useCallback } from 'react';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextArea.module.scss';\n\nexport type TextAreaSize = 'small' | 'medium' | 'large';\n\nexport interface TextAreaProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'size'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label content. When provided, label floats on focus or when value is non-empty. */\n  label?: ReactNode;\n  /** Max length for the textarea; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below textarea. */\n  showCharacterCount?: boolean;\n  /** Size variant. Default: Medium. */\n  size?: TextAreaSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n}\n\n/**\n * Text Areas let people write long-form text that spans multiple lines — descriptions,\n * channel purposes, message drafts, admin notes. They share their visual rhythm with Text\n * Input but trade the single-line constraint for room to breathe.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      message,\n      messageTone,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      rows = 3,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`text-area--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['text-area--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-area--label-floated'] : '';\n\n    const rootClass = [\n      styles['text-area'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const currentLength = typeof value === 'string' ? value.length : 0;\n    const counterId =\n      showCharacterCount && maxLength != null ? `${id}-counter` : undefined;\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-area__wrapper']}>\n          {label != null && (\n            <label className={styles['text-area__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <textarea\n            ref={ref}\n            id={id}\n            className={styles['text-area__input']}\n            value={isControlled ? valueProp : undefined}\n            defaultValue={isControlled ? undefined : defaultValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            readOnly={readOnly}\n            rows={rows}\n            aria-invalid={showInvalid ? true : undefined}\n            aria-describedby={mergeFieldDescribedBy(\n              describedBy,\n              messageId,\n              counterId,\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n          />\n        </div>\n        {(showMessage || (showCharacterCount && maxLength != null)) && (\n          <div className={styles['text-area__footer']}>\n            {showMessage && (\n              <FieldMessage\n                id={messageId}\n                className={styles['text-area__footer-message']}\n                message={message}\n                tone={resolvedTone}\n              />\n            )}\n            {showCharacterCount && maxLength != null && (\n              <div\n                id={counterId}\n                className={styles['text-area__counter']}\n                aria-live=\"polite\"\n              >\n                {currentLength} / {maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextArea;\n"],"names":["TextArea","forwardRef","className","size","label","invalid","maxLength","showCharacterCount","message","messageTone","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rows","describedBy","rest","ref","generatedId","useId","id","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","rootClass","currentLength","counterId","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","FieldMessage"],"mappings":"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"}

package/dist/components/text-area/TextArea.css

@@ -1 +1 @@
-._text-area_1qev1_2{display:flex;flex-direction:column;width:100%}._text-area__wrapper_1qev1_7{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._text-area_1qev1_2:has(._text-area__input_1qev1_14:not(:disabled)):hover:not(:focus-within) ._text-area__wrapper_1qev1_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._text-area_1qev1_2:has(._text-area__input_1qev1_14:focus-visible) ._text-area__wrapper_1qev1_7{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._text-area_1qev1_2:has(._text-area__input_1qev1_14:disabled) ._text-area__wrapper_1qev1_7{background-color:var(--center-channel-bg);opacity:.56}._text-area__label_1qev1_24{position:absolute;left:var(--spacing-xs);top:var(--spacing-s);padding:0 var(--spacing-xxxs);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._text-area--label-floated_1qev1_43 ._text-area__label_1qev1_24{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_1qev1_14{display:block;width:100%;margin:0;border:0;background:transparent;resize:vertical;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:var(--center-channel-color);box-sizing:border-box}._text-area__input_1qev1_14:focus{outline:none}._text-area__input_1qev1_14::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_1qev1_14:disabled{cursor:not-allowed;resize:none}._text-area__counter_1qev1_74{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-area--size-small_1qev1_81 ._text-area__input_1qev1_14{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-75);line-height:var(--line-height-75)}._text-area--size-small_1qev1_81 ._text-area__label_1qev1_24{top:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-25)}._text-area--size-small_1qev1_81._text-area--label-floated_1qev1_43 ._text-area__label_1qev1_24{top:0;font-size:var(--font-size-25);line-height:14px}._text-area--size-medium_1qev1_96 ._text-area__input_1qev1_14{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-area--size-medium_1qev1_96 ._text-area__label_1qev1_24{top:var(--spacing-s);left:var(--spacing-m);font-size:var(--font-size-100)}._text-area--size-medium_1qev1_96._text-area--label-floated_1qev1_43 ._text-area__label_1qev1_24{top:0;font-size:var(--font-size-25);line-height:14px}._text-area--size-large_1qev1_111 ._text-area__input_1qev1_14{padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_1qev1_111 ._text-area__label_1qev1_24{top:var(--spacing-m);left:var(--spacing-m);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_1qev1_111._text-area--label-floated_1qev1_43 ._text-area__label_1qev1_24{top:0;font-size:var(--font-size-25);line-height:14px}._text-area_1qev1_2:has(._text-area__input_1qev1_14:focus-visible) ._text-area__label_1qev1_24{color:var(--button-bg)}._text-area_1qev1_2:has(._text-area__label_1qev1_24):not(._text-area--label-floated_1qev1_43) ._text-area__input_1qev1_14::placeholder{color:transparent}._text-area--invalid_1qev1_133 ._text-area__wrapper_1qev1_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._text-area--invalid_1qev1_133:has(._text-area__input_1qev1_14:focus-visible) ._text-area__wrapper_1qev1_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._text-area--invalid_1qev1_133 ._text-area__label_1qev1_24{color:var(--error-text, var(--color-danger))}._text-area--invalid_1qev1_133:has(._text-area__input_1qev1_14:focus-visible) ._text-area__label_1qev1_24{color:var(--error-text, var(--color-danger))}
+._text-area_r07x5_2{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._text-area__wrapper_r07x5_8{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._text-area_r07x5_2:has(._text-area__input_r07x5_15:not(:disabled)):hover:not(:focus-within) ._text-area__wrapper_r07x5_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._text-area_r07x5_2:has(._text-area__input_r07x5_15:focus-visible) ._text-area__wrapper_r07x5_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._text-area_r07x5_2:has(._text-area__input_r07x5_15:disabled) ._text-area__wrapper_r07x5_8{background-color:var(--center-channel-bg);opacity:.56}._text-area__label_r07x5_25{position:absolute;left:var(--spacing-xs);top:var(--spacing-s);padding:0 var(--spacing-xxxs);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._text-area--label-floated_r07x5_44 ._text-area__label_r07x5_25{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_r07x5_15{display:block;width:100%;margin:0;border:0;background:transparent;resize:vertical;font-family:Open Sans,sans-serif;font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);color:var(--center-channel-color);box-sizing:border-box}._text-area__input_r07x5_15:focus{outline:none}._text-area__input_r07x5_15::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_r07x5_15:disabled{cursor:not-allowed;resize:none}._text-area__footer_r07x5_75{display:flex;align-items:flex-start;gap:var(--spacing-xs);width:100%}._text-area__footer-message_r07x5_81{flex:1 1 0;min-width:0}._text-area__counter_r07x5_85{flex-shrink:0;margin-inline-start:auto;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64)}._text-area--size-small_r07x5_94 ._text-area__input_r07x5_15{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-75);line-height:var(--line-height-75)}._text-area--size-small_r07x5_94 ._text-area__label_r07x5_25{top:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-25)}._text-area--size-small_r07x5_94._text-area--label-floated_r07x5_44 ._text-area__label_r07x5_25{top:0;font-size:var(--font-size-25);line-height:14px}._text-area--size-medium_r07x5_109 ._text-area__input_r07x5_15{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-area--size-medium_r07x5_109 ._text-area__label_r07x5_25{top:var(--spacing-s);left:var(--spacing-m);font-size:var(--font-size-100)}._text-area--size-medium_r07x5_109._text-area--label-floated_r07x5_44 ._text-area__label_r07x5_25{top:0;font-size:var(--font-size-25);line-height:14px}._text-area--size-large_r07x5_124 ._text-area__input_r07x5_15{padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_r07x5_124 ._text-area__label_r07x5_25{top:var(--spacing-m);left:var(--spacing-m);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_r07x5_124._text-area--label-floated_r07x5_44 ._text-area__label_r07x5_25{top:0;font-size:var(--font-size-25);line-height:14px}._text-area_r07x5_2:has(._text-area__input_r07x5_15:focus-visible) ._text-area__label_r07x5_25{color:var(--button-bg)}._text-area_r07x5_2:has(._text-area__label_r07x5_25):not(._text-area--label-floated_r07x5_44) ._text-area__input_r07x5_15::placeholder{color:transparent}._text-area--invalid_r07x5_146 ._text-area__wrapper_r07x5_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._text-area--invalid_r07x5_146:has(._text-area__input_r07x5_15:focus-visible) ._text-area__wrapper_r07x5_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._text-area--invalid_r07x5_146 ._text-area__label_r07x5_25{color:var(--error-text, var(--color-danger))}._text-area--invalid_r07x5_146:has(._text-area__input_r07x5_15:focus-visible) ._text-area__label_r07x5_25{color:var(--error-text, var(--color-danger))}

package/dist/components/text-area/TextArea.d.ts

@@ -1,4 +1,5 @@
 import { TextareaHTMLAttributes, ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
 export type TextAreaSize = 'small' | 'medium' | 'large';
 export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     /** Optional CSS class name. */
@@ -13,6 +14,13 @@ export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     showCharacterCount?: boolean;
     /** Size variant. Default: Medium. */
     size?: TextAreaSize;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
 }
 /**
  * Text Areas let people write long-form text that spans multiple lines — descriptions,

package/dist/components/text-area/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAK5E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;GAIG;AACH,QAAA,MAAM,QAAQ,+GAuHb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAQ5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI/E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,CACP;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAED;;;;GAIG;AACH,QAAA,MAAM,QAAQ,+GA2Ib,CAAC;AAEF,eAAe,QAAQ,CAAC"}