@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/components/tag/Tag.d.ts

@@ -1,17 +1,17 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export type TagType = 'default' | 'info' | 'info-dim' | 'danger' | 'success' | 'warning';
 export type TagSize = 'small' | 'x-small';
 export type TagCasing = 'title-case' | 'all-caps';
-export type TagProps = {
-    /** Tag label text. */
-    label: string;
+export type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'type'> & {
+    /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
     /** Semantic colour type. Default: Default. */
     type?: TagType;
     /** Size variant. Default: X-Small. */
     size?: TagSize;
     /** Text casing. Default: Title Case. */
     casing?: TagCasing;
-    /** Optional leading icon node. */
+    /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`"10"` for x-small, `"12"` for small). */
     leadingIcon?: ReactNode;
     /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */
     className?: string;
@@ -21,5 +21,5 @@ export type TagProps = {
  * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way
  * to surface a small piece of metadata without spending a sentence on it.
  */
-export default function Tag({ label, type, size, casing, leadingIcon, className, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export default function Tag({ label, type, size, casing, leadingIcon, className, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/components/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,GACf,EAAE,QAAQ,2CAuBV"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,GAAG;IACrE,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,EACd,GAAG,IAAI,EACR,EAAE,QAAQ,2CAuBV"}

package/dist/components/tag/Tag.js

@@ -1,6 +1,10 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { IconSlotContext as m } from "../icon/Icon.js";
 import a from "./Tag.module.scss.js";
-const o = {
+const p = {
+  "x-small": "10",
+  small: "12"
+}, d = {
   default: a["tag--type-default"],
   info: a["tag--type-info"],
   "info-dim": a["tag--type-info-dim"],
@@ -8,27 +12,28 @@ const o = {
   success: a["tag--type-success"],
   warning: a["tag--type-warning"]
 };
-function d({
-  label: e,
-  type: l = "default",
-  size: n = "x-small",
+function y({
+  label: l,
+  type: n = "default",
+  size: t = "x-small",
   casing: i = "title-case",
-  leadingIcon: s,
-  className: c = ""
+  leadingIcon: e,
+  className: o = "",
+  ...r
 }) {
-  const g = [
+  const c = [
     a.tag,
-    o[l],
-    n === "small" ? a["tag--size-small"] : a["tag--size-x-small"],
+    d[n],
+    t === "small" ? a["tag--size-small"] : a["tag--size-x-small"],
     i === "all-caps" ? a["tag--casing-all-caps"] : "",
-    c
+    o
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("span", { className: g, children: [
-    s && /* @__PURE__ */ t("span", { className: a.tag__icon, "aria-hidden": !0, children: s }),
-    /* @__PURE__ */ t("span", { className: a.tag__label, children: e })
+  return /* @__PURE__ */ g("span", { ...r, className: c, children: [
+    e && /* @__PURE__ */ s("span", { className: a.tag__icon, "aria-hidden": !0, children: /* @__PURE__ */ s(m.Provider, { value: { size: p[t] }, children: e }) }),
+    /* @__PURE__ */ s("span", { className: a.tag__label, children: l })
   ] });
 }
 export {
-  d as default
+  y as default
 };
 //# sourceMappingURL=Tag.js.map

package/dist/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label text. */\n  label: string;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Optional leading icon node. */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small'\n      ? styles['tag--size-small']\n      : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          {leadingIcon}\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx"],"mappings":";;AA6BA,MAAMA,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAa;AACX,QAAMC,IAAU;AAAA,IACdR,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UACLJ,EAAO,iBAAiB,IACxBA,EAAO,mBAAmB;AAAA,IAC9BK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,QAAA,EAAK,WAAWD,GACd,UAAA;AAAA,IAAAF,KACC,gBAAAI,EAAC,UAAK,WAAWV,EAAO,WAAc,eAAW,IAC9C,UAAAM,EAAA,CACH;AAAA,sBAED,QAAA,EAAK,WAAWN,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'type'> & {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n  ...rest\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span {...rest} className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","rest","classes","jsxs","jsx","IconSlotContext"],"mappings":";;;AA+BA,MAAMA,IAA2C;AAAA,EAC/C,WAAW;AAAA,EACX,OAAO;AACT,GAEMC,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAa;AACX,QAAMC,IAAU;AAAA,IACdT,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UAAUJ,EAAO,iBAAiB,IAAIA,EAAO,mBAAmB;AAAA,IACzEK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,QAAA,EAAM,GAAGF,GAAM,WAAWC,GACxB,UAAA;AAAA,IAAAH,KACC,gBAAAK,EAAC,UAAK,WAAWX,EAAO,WAAc,eAAW,IAC/C,UAAA,gBAAAW,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAcM,CAAI,EAAA,GACxD,aACH,GACF;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}

package/dist/components/tag/Tag.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tag.module.css');const t="_tag_jtn7u_2",a="_tag__icon_jtn7u_14",_="_tag__label_jtn7u_19",e={tag:t,tag__icon:a,tag__label:_,"tag--size-x-small":"_tag--size-x-small_jtn7u_22","tag--size-small":"_tag--size-small_jtn7u_28","tag--type-default":"_tag--type-default_jtn7u_33","tag--type-info":"_tag--type-info_jtn7u_37","tag--type-info-dim":"_tag--type-info-dim_jtn7u_41","tag--type-danger":"_tag--type-danger_jtn7u_45","tag--type-success":"_tag--type-success_jtn7u_49","tag--type-warning":"_tag--type-warning_jtn7u_53","tag--casing-all-caps":"_tag--casing-all-caps_jtn7u_57"};exports.default=e;exports.tag=t;exports.tag__icon=a;exports.tag__label=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tag.css');const t="_tag_bsp47_13",a="_tag__icon_bsp47_25",_="_tag__label_bsp47_30",e={tag:t,tag__icon:a,tag__label:_,"tag--size-x-small":"_tag--size-x-small_bsp47_33","tag--size-small":"_tag--size-small_bsp47_39","tag--type-default":"_tag--type-default_bsp47_44","tag--type-info":"_tag--type-info_bsp47_48","tag--type-info-dim":"_tag--type-info-dim_bsp47_52","tag--type-danger":"_tag--type-danger_bsp47_56","tag--type-success":"_tag--type-success_bsp47_60","tag--type-warning":"_tag--type-warning_bsp47_64","tag--casing-all-caps":"_tag--casing-all-caps_bsp47_68"};exports.default=e;exports.tag=t;exports.tag__icon=a;exports.tag__label=_;
 //# sourceMappingURL=Tag.module.scss.cjs.map

package/dist/components/tag/Tag.module.scss.js

@@ -1,21 +1,21 @@
-import './Tag.module.css';const t = "_tag_jtn7u_2", a = "_tag__icon_jtn7u_14", _ = "_tag__label_jtn7u_19", g = {
-  tag: t,
-  tag__icon: a,
+import './Tag.css';const a = "_tag_bsp47_13", t = "_tag__icon_bsp47_25", _ = "_tag__label_bsp47_30", s = {
+  tag: a,
+  tag__icon: t,
   tag__label: _,
-  "tag--size-x-small": "_tag--size-x-small_jtn7u_22",
-  "tag--size-small": "_tag--size-small_jtn7u_28",
-  "tag--type-default": "_tag--type-default_jtn7u_33",
-  "tag--type-info": "_tag--type-info_jtn7u_37",
-  "tag--type-info-dim": "_tag--type-info-dim_jtn7u_41",
-  "tag--type-danger": "_tag--type-danger_jtn7u_45",
-  "tag--type-success": "_tag--type-success_jtn7u_49",
-  "tag--type-warning": "_tag--type-warning_jtn7u_53",
-  "tag--casing-all-caps": "_tag--casing-all-caps_jtn7u_57"
+  "tag--size-x-small": "_tag--size-x-small_bsp47_33",
+  "tag--size-small": "_tag--size-small_bsp47_39",
+  "tag--type-default": "_tag--type-default_bsp47_44",
+  "tag--type-info": "_tag--type-info_bsp47_48",
+  "tag--type-info-dim": "_tag--type-info-dim_bsp47_52",
+  "tag--type-danger": "_tag--type-danger_bsp47_56",
+  "tag--type-success": "_tag--type-success_bsp47_60",
+  "tag--type-warning": "_tag--type-warning_bsp47_64",
+  "tag--casing-all-caps": "_tag--casing-all-caps_bsp47_68"
 };
 export {
-  g as default,
-  t as tag,
-  a as tag__icon,
+  s as default,
+  a as tag,
+  t as tag__icon,
   _ as tag__label
 };
 //# sourceMappingURL=Tag.module.scss.js.map

package/dist/components/team-avatar/TeamAvatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("../mention-badge/MentionBadge.cjs"),a=require("./TeamAvatar.module.scss.cjs");function f({alt:s="",badge:t,className:n="",initials:l="Ac",size:r="40",src:u,state:c="default"}){const d=parseInt(r,10),i=c==="active",m=t!=null&&t>0&&d<=64&&!i,o=[a.default["team-avatar"],a.default[`team-avatar--size-${r}`],i&&a.default["team-avatar--active"],n].filter(Boolean).join(" ");return e.jsxs("div",{className:o,children:[e.jsx("div",{className:a.default["team-avatar__inner"],children:u?e.jsx("img",{src:u,alt:s,className:a.default["team-avatar__image"]}):e.jsx("div",{className:a.default["team-avatar__fallback"],"aria-label":s||l,children:l})}),m&&e.jsx(v.default,{count:t,size:"medium",className:a.default["team-avatar__badge"]})]})}exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),_=require("../mention-badge/MentionBadge.cjs"),a=require("./TeamAvatar.module.scss.cjs");function j({alt:l="",badge:s,className:d="",initials:r="Ac",size:i="40",src:u,state:m="default",variant:c="sidebar"}){const o=parseInt(i,10),t=c==="menu",n=m==="active"&&!t,v=s!=null&&s>0&&o<=64&&!n&&!t,f=[a.default["team-avatar"],a.default[`team-avatar--size-${i}`],n&&a.default["team-avatar--active"],t&&a.default["team-avatar--menu"],d].filter(Boolean).join(" ");return e.jsxs("div",{className:f,"aria-hidden":t||void 0,children:[e.jsx("div",{className:a.default["team-avatar__inner"],children:u?e.jsx("img",{src:u,alt:l,className:a.default["team-avatar__image"]}):e.jsx("div",{className:a.default["team-avatar__fallback"],"aria-label":l||r,children:r})}),v&&e.jsx(_.default,{count:s,size:"medium",className:a.default["team-avatar__badge"]})]})}exports.default=j;
 //# sourceMappingURL=TeamAvatar.cjs.map

package/dist/components/team-avatar/TeamAvatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TeamAvatar.cjs","sources":["../../../src/components/team-avatar/TeamAvatar.tsx"],"sourcesContent":["import MentionBadge from '../mention-badge/MentionBadge';\nimport styles from './TeamAvatar.module.scss';\n\nexport type TeamAvatarSize =\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72'\n  | '96'\n  | '120';\nexport type TeamAvatarState = 'default' | 'active';\n\nexport interface TeamAvatarProps {\n  alt?: string;\n  badge?: number;\n  className?: string;\n  initials?: string;\n  size?: TeamAvatarSize;\n  src?: string;\n  state?: TeamAvatarState;\n}\n\n/**\n * Team Avatars identify a Team in Mattermost. Their rounded-square shape sets them apart\n * from circular User Avatars at a glance — same scanning rhythm, different kind of subject.\n */\nexport default function TeamAvatar({\n  alt = '',\n  badge,\n  className = '',\n  initials = 'Ac',\n  size = '40',\n  src,\n  state = 'default',\n}: TeamAvatarProps) {\n  const numSize = parseInt(size, 10);\n  const isActive = state === 'active';\n  const showBadge = badge != null && badge > 0 && numSize <= 64 && !isActive;\n\n  const rootClasses = [\n    styles['team-avatar'],\n    styles[`team-avatar--size-${size}`],\n    isActive && styles['team-avatar--active'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClasses}>\n      <div className={styles['team-avatar__inner']}>\n        {src ? (\n          <img src={src} alt={alt} className={styles['team-avatar__image']} />\n        ) : (\n          <div\n            className={styles['team-avatar__fallback']}\n            aria-label={alt || initials}\n          >\n            {initials}\n          </div>\n        )}\n      </div>\n      {showBadge && (\n        <MentionBadge\n          count={badge!}\n          size=\"medium\"\n          className={styles['team-avatar__badge']}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TeamAvatar","alt","badge","className","initials","size","src","state","numSize","isActive","showBadge","rootClasses","styles","jsxs","jsx","MentionBadge"],"mappings":"yOA8BA,SAAwBA,EAAW,CACjC,IAAAC,EAAM,GACN,MAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,KACX,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EAAQ,SACV,EAAoB,CAClB,MAAMC,EAAU,SAASH,EAAM,EAAE,EAC3BI,EAAWF,IAAU,SACrBG,EAAYR,GAAS,MAAQA,EAAQ,GAAKM,GAAW,IAAM,CAACC,EAE5DE,EAAc,CAClBC,EAAAA,QAAO,aAAa,EACpBA,EAAAA,QAAO,qBAAqBP,CAAI,EAAE,EAClCI,GAAYG,EAAAA,QAAO,qBAAqB,EACxCT,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEU,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACxC,SAAAN,EACCQ,EAAAA,IAAC,MAAA,CAAI,IAAAR,EAAU,IAAAL,EAAU,UAAWW,EAAAA,QAAO,oBAAoB,EAAG,EAElEE,EAAAA,IAAC,MAAA,CACC,UAAWF,EAAAA,QAAO,uBAAuB,EACzC,aAAYX,GAAOG,EAElB,SAAAA,CAAA,CAAA,EAGP,EACCM,GACCI,EAAAA,IAACC,EAAAA,QAAA,CACC,MAAOb,EACP,KAAK,SACL,UAAWU,EAAAA,QAAO,oBAAoB,CAAA,CAAA,CACxC,EAEJ,CAEJ"}
+{"version":3,"file":"TeamAvatar.cjs","sources":["../../../src/components/team-avatar/TeamAvatar.tsx"],"sourcesContent":["import MentionBadge from '../mention-badge/MentionBadge';\nimport styles from './TeamAvatar.module.scss';\n\nexport type TeamAvatarSize =\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72'\n  | '96'\n  | '120';\nexport type TeamAvatarState = 'default' | 'active';\nexport type TeamAvatarVariant = 'sidebar' | 'menu';\n\nexport interface TeamAvatarProps {\n  alt?: string;\n  badge?: number;\n  className?: string;\n  initials?: string;\n  size?: TeamAvatarSize;\n  src?: string;\n  state?: TeamAvatarState;\n  /**\n   * `sidebar` (default) is interactive and uses sidebar colors. `menu` is decorative and uses\n   * center-channel colors — for menu rows and other surfaces on `center-channel-bg`. It has no\n   * hover or pointer affordance, is hidden from assistive tech, and ignores `state` and `badge`.\n   */\n  variant?: TeamAvatarVariant;\n}\n\n/**\n * Team Avatars identify a Team in Mattermost. Their rounded-square shape sets them apart\n * from circular User Avatars at a glance — same scanning rhythm, different kind of subject.\n */\nexport default function TeamAvatar({\n  alt = '',\n  badge,\n  className = '',\n  initials = 'Ac',\n  size = '40',\n  src,\n  state = 'default',\n  variant = 'sidebar',\n}: TeamAvatarProps) {\n  const numSize = parseInt(size, 10);\n  const isMenu = variant === 'menu';\n  const isActive = state === 'active' && !isMenu;\n  const showBadge =\n    badge != null && badge > 0 && numSize <= 64 && !isActive && !isMenu;\n\n  const rootClasses = [\n    styles['team-avatar'],\n    styles[`team-avatar--size-${size}`],\n    isActive && styles['team-avatar--active'],\n    isMenu && styles['team-avatar--menu'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClasses} aria-hidden={isMenu || undefined}>\n      <div className={styles['team-avatar__inner']}>\n        {src ? (\n          <img src={src} alt={alt} className={styles['team-avatar__image']} />\n        ) : (\n          <div\n            className={styles['team-avatar__fallback']}\n            aria-label={alt || initials}\n          >\n            {initials}\n          </div>\n        )}\n      </div>\n      {showBadge && (\n        <MentionBadge\n          count={badge!}\n          size=\"medium\"\n          className={styles['team-avatar__badge']}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TeamAvatar","alt","badge","className","initials","size","src","state","variant","numSize","isMenu","isActive","showBadge","rootClasses","styles","jsx","MentionBadge"],"mappings":"yOAqCA,SAAwBA,EAAW,CACjC,IAAAC,EAAM,GACN,MAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,KACX,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EAAQ,UACR,QAAAC,EAAU,SACZ,EAAoB,CAClB,MAAMC,EAAU,SAASJ,EAAM,EAAE,EAC3BK,EAASF,IAAY,OACrBG,EAAWJ,IAAU,UAAY,CAACG,EAClCE,EACJV,GAAS,MAAQA,EAAQ,GAAKO,GAAW,IAAM,CAACE,GAAY,CAACD,EAEzDG,EAAc,CAClBC,EAAAA,QAAO,aAAa,EACpBA,EAAAA,QAAO,qBAAqBT,CAAI,EAAE,EAClCM,GAAYG,EAAAA,QAAO,qBAAqB,EACxCJ,GAAUI,EAAAA,QAAO,mBAAmB,EACpCX,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,MAAA,CAAI,UAAWU,EAAa,cAAaH,GAAU,OAClD,SAAA,CAAAK,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,oBAAoB,EACxC,SAAAR,EACCS,EAAAA,IAAC,MAAA,CAAI,IAAAT,EAAU,IAAAL,EAAU,UAAWa,EAAAA,QAAO,oBAAoB,EAAG,EAElEC,EAAAA,IAAC,MAAA,CACC,UAAWD,EAAAA,QAAO,uBAAuB,EACzC,aAAYb,GAAOG,EAElB,SAAAA,CAAA,CAAA,EAGP,EACCQ,GACCG,EAAAA,IAACC,EAAAA,QAAA,CACC,MAAOd,EACP,KAAK,SACL,UAAWY,EAAAA,QAAO,oBAAoB,CAAA,CAAA,CACxC,EAEJ,CAEJ"}

package/dist/components/team-avatar/TeamAvatar.css

@@ -0,0 +1 @@
+._team-avatar_s1ka9_13{position:relative;display:inline-flex;flex-shrink:0;cursor:pointer;outline-style:solid;outline-offset:0;outline-color:transparent;transition:outline-color var(--duration-quick) var(--ease-transition)}._team-avatar__inner_s1ka9_23{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}._team-avatar__inner_s1ka9_23:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box;border-radius:inherit;border-style:solid;border-color:var(--sidebar-header-bg, #192a4d);border-width:0;pointer-events:none;z-index:1;transition:border-width var(--duration-quick) var(--ease-transition)}._team-avatar__image_s1ka9_42{display:block;width:100%;height:100%;object-fit:cover}._team-avatar__fallback_s1ka9_48{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:rgba(var(--sidebar-text-rgb),.16);color:var(--sidebar-text, white);font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold);line-height:1;-webkit-user-select:none;user-select:none}._team-avatar__badge_s1ka9_61{position:absolute;top:-4px;right:-4px;z-index:2;box-shadow:0 0 0 2px var(--sidebar-header-bg, #192a4d)}._team-avatar--size-24_s1ka9_68{width:24px;height:24px;border-radius:4px;outline-width:2px}._team-avatar--size-24_s1ka9_68 ._team-avatar__inner_s1ka9_23{border-radius:4px}._team-avatar--size-24_s1ka9_68 ._team-avatar__fallback_s1ka9_48{font-size:11.2px}._team-avatar--size-24_s1ka9_68:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-24_s1ka9_68._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:2px}._team-avatar--size-24_s1ka9_68:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-24_s1ka9_68._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-28_s1ka9_89{width:28px;height:28px;border-radius:4px;outline-width:2px}._team-avatar--size-28_s1ka9_89 ._team-avatar__inner_s1ka9_23{border-radius:4px}._team-avatar--size-28_s1ka9_89 ._team-avatar__fallback_s1ka9_48{font-size:13.07px}._team-avatar--size-28_s1ka9_89:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-28_s1ka9_89._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:2px}._team-avatar--size-28_s1ka9_89:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-28_s1ka9_89._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-32_s1ka9_110{width:32px;height:32px;border-radius:6px;outline-width:3px}._team-avatar--size-32_s1ka9_110 ._team-avatar__inner_s1ka9_23{border-radius:6px}._team-avatar--size-32_s1ka9_110 ._team-avatar__fallback_s1ka9_48{font-size:14.93px}._team-avatar--size-32_s1ka9_110:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-32_s1ka9_110._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:3px}._team-avatar--size-32_s1ka9_110:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-32_s1ka9_110._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-40_s1ka9_131{width:40px;height:40px;border-radius:8px;outline-width:3px}._team-avatar--size-40_s1ka9_131 ._team-avatar__inner_s1ka9_23{border-radius:8px}._team-avatar--size-40_s1ka9_131 ._team-avatar__fallback_s1ka9_48{font-size:18.67px}._team-avatar--size-40_s1ka9_131:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-40_s1ka9_131._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:3px}._team-avatar--size-40_s1ka9_131:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-40_s1ka9_131._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-48_s1ka9_152{width:48px;height:48px;border-radius:9px;outline-width:3px}._team-avatar--size-48_s1ka9_152 ._team-avatar__inner_s1ka9_23{border-radius:9px}._team-avatar--size-48_s1ka9_152 ._team-avatar__fallback_s1ka9_48{font-size:22.4px}._team-avatar--size-48_s1ka9_152:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-48_s1ka9_152._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:3px}._team-avatar--size-48_s1ka9_152:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-48_s1ka9_152._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-56_s1ka9_173{width:56px;height:56px;border-radius:10px;outline-width:3px}._team-avatar--size-56_s1ka9_173 ._team-avatar__inner_s1ka9_23{border-radius:10px}._team-avatar--size-56_s1ka9_173 ._team-avatar__fallback_s1ka9_48{font-size:26.13px}._team-avatar--size-56_s1ka9_173:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-56_s1ka9_173._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:3px}._team-avatar--size-56_s1ka9_173:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-56_s1ka9_173._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-64_s1ka9_194{width:64px;height:64px;border-radius:11px;outline-width:3px}._team-avatar--size-64_s1ka9_194 ._team-avatar__inner_s1ka9_23{border-radius:11px}._team-avatar--size-64_s1ka9_194 ._team-avatar__fallback_s1ka9_48{font-size:29.87px}._team-avatar--size-64_s1ka9_194:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-64_s1ka9_194._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:3px}._team-avatar--size-64_s1ka9_194:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-64_s1ka9_194._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-72_s1ka9_215{width:72px;height:72px;border-radius:12px;outline-width:3px}._team-avatar--size-72_s1ka9_215 ._team-avatar__inner_s1ka9_23{border-radius:12px}._team-avatar--size-72_s1ka9_215 ._team-avatar__fallback_s1ka9_48{font-size:33.6px}._team-avatar--size-72_s1ka9_215:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-72_s1ka9_215._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:3px}._team-avatar--size-72_s1ka9_215:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-72_s1ka9_215._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-96_s1ka9_236{width:96px;height:96px;border-radius:18px;outline-width:3px}._team-avatar--size-96_s1ka9_236 ._team-avatar__inner_s1ka9_23{border-radius:20px}._team-avatar--size-96_s1ka9_236 ._team-avatar__fallback_s1ka9_48{font-size:44.8px}._team-avatar--size-96_s1ka9_236:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-96_s1ka9_236._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:3px}._team-avatar--size-96_s1ka9_236:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-96_s1ka9_236._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--size-120_s1ka9_257{width:120px;height:120px;border-radius:24px;outline-width:3px}._team-avatar--size-120_s1ka9_257 ._team-avatar__inner_s1ka9_23{border-radius:24px}._team-avatar--size-120_s1ka9_257 ._team-avatar__fallback_s1ka9_48{font-size:56px}._team-avatar--size-120_s1ka9_257:hover ._team-avatar__inner_s1ka9_23:after,._team-avatar--size-120_s1ka9_257._team-avatar--active_s1ka9_80 ._team-avatar__inner_s1ka9_23:after{border-width:3px}._team-avatar--size-120_s1ka9_257:hover{outline-color:rgba(var(--sidebar-text-rgb),.16)}._team-avatar--size-120_s1ka9_257._team-avatar--active_s1ka9_80{outline-color:var(--sidebar-text-active-border, #5d89ea)}._team-avatar--menu_s1ka9_278{cursor:default}._team-avatar--menu_s1ka9_278:hover{outline-color:transparent}._team-avatar--menu_s1ka9_278:hover ._team-avatar__inner_s1ka9_23:after{border-width:0}._team-avatar--menu_s1ka9_278 ._team-avatar__fallback_s1ka9_48{background:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.72)}

package/dist/components/team-avatar/TeamAvatar.d.ts

@@ -1,5 +1,6 @@
 export type TeamAvatarSize = '24' | '28' | '32' | '40' | '48' | '56' | '64' | '72' | '96' | '120';
 export type TeamAvatarState = 'default' | 'active';
+export type TeamAvatarVariant = 'sidebar' | 'menu';
 export interface TeamAvatarProps {
     alt?: string;
     badge?: number;
@@ -8,10 +9,16 @@ export interface TeamAvatarProps {
     size?: TeamAvatarSize;
     src?: string;
     state?: TeamAvatarState;
+    /**
+     * `sidebar` (default) is interactive and uses sidebar colors. `menu` is decorative and uses
+     * center-channel colors — for menu rows and other surfaces on `center-channel-bg`. It has no
+     * hover or pointer affordance, is hidden from assistive tech, and ignores `state` and `badge`.
+     */
+    variant?: TeamAvatarVariant;
 }
 /**
  * Team Avatars identify a Team in Mattermost. Their rounded-square shape sets them apart
  * from circular User Avatars at a glance — same scanning rhythm, different kind of subject.
  */
-export default function TeamAvatar({ alt, badge, className, initials, size, src, state, }: TeamAvatarProps): import("react/jsx-runtime").JSX.Element;
+export default function TeamAvatar({ alt, badge, className, initials, size, src, state, variant, }: TeamAvatarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TeamAvatar.d.ts.map

package/dist/components/team-avatar/TeamAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeamAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/team-avatar/TeamAvatar.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AACV,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,GAAQ,EACR,KAAK,EACL,SAAc,EACd,QAAe,EACf,IAAW,EACX,GAAG,EACH,KAAiB,GAClB,EAAE,eAAe,2CAqCjB"}
+{"version":3,"file":"TeamAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/team-avatar/TeamAvatar.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AACV,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,CAAC;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,GAAQ,EACR,KAAK,EACL,SAAc,EACd,QAAe,EACf,IAAW,EACX,GAAG,EACH,KAAiB,EACjB,OAAmB,GACpB,EAAE,eAAe,2CAwCjB"}

package/dist/components/team-avatar/TeamAvatar.js

@@ -1,34 +1,36 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import u from "../mention-badge/MentionBadge.js";
+import { jsxs as _, jsx as t } from "react/jsx-runtime";
+import h from "../mention-badge/MentionBadge.js";
 import a from "./TeamAvatar.module.scss.js";
-function h({
-  alt: s = "",
-  badge: t,
-  className: n = "",
-  initials: m = "Ac",
-  size: r = "40",
-  src: i,
-  state: c = "default"
+function j({
+  alt: m = "",
+  badge: s,
+  className: c = "",
+  initials: r = "Ac",
+  size: i = "40",
+  src: n,
+  state: l = "default",
+  variant: v = "sidebar"
 }) {
-  const l = parseInt(r, 10), o = c === "active", v = t != null && t > 0 && l <= 64 && !o, d = [
+  const d = parseInt(i, 10), e = v === "menu", o = l === "active" && !e, u = s != null && s > 0 && d <= 64 && !o && !e, f = [
     a["team-avatar"],
-    a[`team-avatar--size-${r}`],
+    a[`team-avatar--size-${i}`],
     o && a["team-avatar--active"],
-    n
+    e && a["team-avatar--menu"],
+    c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ f("div", { className: d, children: [
-    /* @__PURE__ */ e("div", { className: a["team-avatar__inner"], children: i ? /* @__PURE__ */ e("img", { src: i, alt: s, className: a["team-avatar__image"] }) : /* @__PURE__ */ e(
+  return /* @__PURE__ */ _("div", { className: f, "aria-hidden": e || void 0, children: [
+    /* @__PURE__ */ t("div", { className: a["team-avatar__inner"], children: n ? /* @__PURE__ */ t("img", { src: n, alt: m, className: a["team-avatar__image"] }) : /* @__PURE__ */ t(
       "div",
       {
         className: a["team-avatar__fallback"],
-        "aria-label": s || m,
-        children: m
+        "aria-label": m || r,
+        children: r
       }
     ) }),
-    v && /* @__PURE__ */ e(
-      u,
+    u && /* @__PURE__ */ t(
+      h,
       {
-        count: t,
+        count: s,
         size: "medium",
         className: a["team-avatar__badge"]
       }
@@ -36,6 +38,6 @@ function h({
   ] });
 }
 export {
-  h as default
+  j as default
 };
 //# sourceMappingURL=TeamAvatar.js.map

package/dist/components/team-avatar/TeamAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamAvatar.js","sources":["../../../src/components/team-avatar/TeamAvatar.tsx"],"sourcesContent":["import MentionBadge from '../mention-badge/MentionBadge';\nimport styles from './TeamAvatar.module.scss';\n\nexport type TeamAvatarSize =\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72'\n  | '96'\n  | '120';\nexport type TeamAvatarState = 'default' | 'active';\n\nexport interface TeamAvatarProps {\n  alt?: string;\n  badge?: number;\n  className?: string;\n  initials?: string;\n  size?: TeamAvatarSize;\n  src?: string;\n  state?: TeamAvatarState;\n}\n\n/**\n * Team Avatars identify a Team in Mattermost. Their rounded-square shape sets them apart\n * from circular User Avatars at a glance — same scanning rhythm, different kind of subject.\n */\nexport default function TeamAvatar({\n  alt = '',\n  badge,\n  className = '',\n  initials = 'Ac',\n  size = '40',\n  src,\n  state = 'default',\n}: TeamAvatarProps) {\n  const numSize = parseInt(size, 10);\n  const isActive = state === 'active';\n  const showBadge = badge != null && badge > 0 && numSize <= 64 && !isActive;\n\n  const rootClasses = [\n    styles['team-avatar'],\n    styles[`team-avatar--size-${size}`],\n    isActive && styles['team-avatar--active'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClasses}>\n      <div className={styles['team-avatar__inner']}>\n        {src ? (\n          <img src={src} alt={alt} className={styles['team-avatar__image']} />\n        ) : (\n          <div\n            className={styles['team-avatar__fallback']}\n            aria-label={alt || initials}\n          >\n            {initials}\n          </div>\n        )}\n      </div>\n      {showBadge && (\n        <MentionBadge\n          count={badge!}\n          size=\"medium\"\n          className={styles['team-avatar__badge']}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TeamAvatar","alt","badge","className","initials","size","src","state","numSize","isActive","showBadge","rootClasses","styles","jsxs","jsx","MentionBadge"],"mappings":";;;AA8BA,SAAwBA,EAAW;AAAA,EACjC,KAAAC,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,KAAAC;AAAA,EACA,OAAAC,IAAQ;AACV,GAAoB;AAClB,QAAMC,IAAU,SAASH,GAAM,EAAE,GAC3BI,IAAWF,MAAU,UACrBG,IAAYR,KAAS,QAAQA,IAAQ,KAAKM,KAAW,MAAM,CAACC,GAE5DE,IAAc;AAAA,IAClBC,EAAO,aAAa;AAAA,IACpBA,EAAO,qBAAqBP,CAAI,EAAE;AAAA,IAClCI,KAAYG,EAAO,qBAAqB;AAAA,IACxCT;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAU,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACxC,UAAAN,IACC,gBAAAQ,EAAC,OAAA,EAAI,KAAAR,GAAU,KAAAL,GAAU,WAAWW,EAAO,oBAAoB,GAAG,IAElE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWF,EAAO,uBAAuB;AAAA,QACzC,cAAYX,KAAOG;AAAA,QAElB,UAAAA;AAAA,MAAA;AAAA,IAAA,GAGP;AAAA,IACCM,KACC,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAOb;AAAA,QACP,MAAK;AAAA,QACL,WAAWU,EAAO,oBAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EACxC,GAEJ;AAEJ;"}
+{"version":3,"file":"TeamAvatar.js","sources":["../../../src/components/team-avatar/TeamAvatar.tsx"],"sourcesContent":["import MentionBadge from '../mention-badge/MentionBadge';\nimport styles from './TeamAvatar.module.scss';\n\nexport type TeamAvatarSize =\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72'\n  | '96'\n  | '120';\nexport type TeamAvatarState = 'default' | 'active';\nexport type TeamAvatarVariant = 'sidebar' | 'menu';\n\nexport interface TeamAvatarProps {\n  alt?: string;\n  badge?: number;\n  className?: string;\n  initials?: string;\n  size?: TeamAvatarSize;\n  src?: string;\n  state?: TeamAvatarState;\n  /**\n   * `sidebar` (default) is interactive and uses sidebar colors. `menu` is decorative and uses\n   * center-channel colors — for menu rows and other surfaces on `center-channel-bg`. It has no\n   * hover or pointer affordance, is hidden from assistive tech, and ignores `state` and `badge`.\n   */\n  variant?: TeamAvatarVariant;\n}\n\n/**\n * Team Avatars identify a Team in Mattermost. Their rounded-square shape sets them apart\n * from circular User Avatars at a glance — same scanning rhythm, different kind of subject.\n */\nexport default function TeamAvatar({\n  alt = '',\n  badge,\n  className = '',\n  initials = 'Ac',\n  size = '40',\n  src,\n  state = 'default',\n  variant = 'sidebar',\n}: TeamAvatarProps) {\n  const numSize = parseInt(size, 10);\n  const isMenu = variant === 'menu';\n  const isActive = state === 'active' && !isMenu;\n  const showBadge =\n    badge != null && badge > 0 && numSize <= 64 && !isActive && !isMenu;\n\n  const rootClasses = [\n    styles['team-avatar'],\n    styles[`team-avatar--size-${size}`],\n    isActive && styles['team-avatar--active'],\n    isMenu && styles['team-avatar--menu'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClasses} aria-hidden={isMenu || undefined}>\n      <div className={styles['team-avatar__inner']}>\n        {src ? (\n          <img src={src} alt={alt} className={styles['team-avatar__image']} />\n        ) : (\n          <div\n            className={styles['team-avatar__fallback']}\n            aria-label={alt || initials}\n          >\n            {initials}\n          </div>\n        )}\n      </div>\n      {showBadge && (\n        <MentionBadge\n          count={badge!}\n          size=\"medium\"\n          className={styles['team-avatar__badge']}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TeamAvatar","alt","badge","className","initials","size","src","state","variant","numSize","isMenu","isActive","showBadge","rootClasses","styles","jsx","MentionBadge"],"mappings":";;;AAqCA,SAAwBA,EAAW;AAAA,EACjC,KAAAC,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,KAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AACZ,GAAoB;AAClB,QAAMC,IAAU,SAASJ,GAAM,EAAE,GAC3BK,IAASF,MAAY,QACrBG,IAAWJ,MAAU,YAAY,CAACG,GAClCE,IACJV,KAAS,QAAQA,IAAQ,KAAKO,KAAW,MAAM,CAACE,KAAY,CAACD,GAEzDG,IAAc;AAAA,IAClBC,EAAO,aAAa;AAAA,IACpBA,EAAO,qBAAqBT,CAAI,EAAE;AAAA,IAClCM,KAAYG,EAAO,qBAAqB;AAAA,IACxCJ,KAAUI,EAAO,mBAAmB;AAAA,IACpCX;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWU,GAAa,eAAaH,KAAU,QAClD,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,oBAAoB,GACxC,UAAAR,IACC,gBAAAS,EAAC,OAAA,EAAI,KAAAT,GAAU,KAAAL,GAAU,WAAWa,EAAO,oBAAoB,GAAG,IAElE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAO,uBAAuB;AAAA,QACzC,cAAYb,KAAOG;AAAA,QAElB,UAAAA;AAAA,MAAA;AAAA,IAAA,GAGP;AAAA,IACCQ,KACC,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAOd;AAAA,QACP,MAAK;AAAA,QACL,WAAWY,EAAO,oBAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EACxC,GAEJ;AAEJ;"}

package/dist/components/team-avatar/TeamAvatar.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TeamAvatar.module.css');const a={"team-avatar":"_team-avatar_1s9bp_2","team-avatar__inner":"_team-avatar__inner_1s9bp_12","team-avatar__image":"_team-avatar__image_1s9bp_31","team-avatar__fallback":"_team-avatar__fallback_1s9bp_37","team-avatar__badge":"_team-avatar__badge_1s9bp_50","team-avatar--size-24":"_team-avatar--size-24_1s9bp_57","team-avatar--active":"_team-avatar--active_1s9bp_69","team-avatar--size-28":"_team-avatar--size-28_1s9bp_78","team-avatar--size-32":"_team-avatar--size-32_1s9bp_99","team-avatar--size-40":"_team-avatar--size-40_1s9bp_120","team-avatar--size-48":"_team-avatar--size-48_1s9bp_141","team-avatar--size-56":"_team-avatar--size-56_1s9bp_162","team-avatar--size-64":"_team-avatar--size-64_1s9bp_183","team-avatar--size-72":"_team-avatar--size-72_1s9bp_204","team-avatar--size-96":"_team-avatar--size-96_1s9bp_225","team-avatar--size-120":"_team-avatar--size-120_1s9bp_246"};exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TeamAvatar.css');const a={"team-avatar":"_team-avatar_s1ka9_13","team-avatar__inner":"_team-avatar__inner_s1ka9_23","team-avatar__image":"_team-avatar__image_s1ka9_42","team-avatar__fallback":"_team-avatar__fallback_s1ka9_48","team-avatar__badge":"_team-avatar__badge_s1ka9_61","team-avatar--size-24":"_team-avatar--size-24_s1ka9_68","team-avatar--active":"_team-avatar--active_s1ka9_80","team-avatar--size-28":"_team-avatar--size-28_s1ka9_89","team-avatar--size-32":"_team-avatar--size-32_s1ka9_110","team-avatar--size-40":"_team-avatar--size-40_s1ka9_131","team-avatar--size-48":"_team-avatar--size-48_s1ka9_152","team-avatar--size-56":"_team-avatar--size-56_s1ka9_173","team-avatar--size-64":"_team-avatar--size-64_s1ka9_194","team-avatar--size-72":"_team-avatar--size-72_s1ka9_215","team-avatar--size-96":"_team-avatar--size-96_s1ka9_236","team-avatar--size-120":"_team-avatar--size-120_s1ka9_257","team-avatar--menu":"_team-avatar--menu_s1ka9_278"};exports.default=a;
 //# sourceMappingURL=TeamAvatar.module.scss.cjs.map

package/dist/components/team-avatar/TeamAvatar.module.scss.js

@@ -1,20 +1,21 @@
-import './TeamAvatar.module.css';const a = {
-  "team-avatar": "_team-avatar_1s9bp_2",
-  "team-avatar__inner": "_team-avatar__inner_1s9bp_12",
-  "team-avatar__image": "_team-avatar__image_1s9bp_31",
-  "team-avatar__fallback": "_team-avatar__fallback_1s9bp_37",
-  "team-avatar__badge": "_team-avatar__badge_1s9bp_50",
-  "team-avatar--size-24": "_team-avatar--size-24_1s9bp_57",
-  "team-avatar--active": "_team-avatar--active_1s9bp_69",
-  "team-avatar--size-28": "_team-avatar--size-28_1s9bp_78",
-  "team-avatar--size-32": "_team-avatar--size-32_1s9bp_99",
-  "team-avatar--size-40": "_team-avatar--size-40_1s9bp_120",
-  "team-avatar--size-48": "_team-avatar--size-48_1s9bp_141",
-  "team-avatar--size-56": "_team-avatar--size-56_1s9bp_162",
-  "team-avatar--size-64": "_team-avatar--size-64_1s9bp_183",
-  "team-avatar--size-72": "_team-avatar--size-72_1s9bp_204",
-  "team-avatar--size-96": "_team-avatar--size-96_1s9bp_225",
-  "team-avatar--size-120": "_team-avatar--size-120_1s9bp_246"
+import './TeamAvatar.css';const a = {
+  "team-avatar": "_team-avatar_s1ka9_13",
+  "team-avatar__inner": "_team-avatar__inner_s1ka9_23",
+  "team-avatar__image": "_team-avatar__image_s1ka9_42",
+  "team-avatar__fallback": "_team-avatar__fallback_s1ka9_48",
+  "team-avatar__badge": "_team-avatar__badge_s1ka9_61",
+  "team-avatar--size-24": "_team-avatar--size-24_s1ka9_68",
+  "team-avatar--active": "_team-avatar--active_s1ka9_80",
+  "team-avatar--size-28": "_team-avatar--size-28_s1ka9_89",
+  "team-avatar--size-32": "_team-avatar--size-32_s1ka9_110",
+  "team-avatar--size-40": "_team-avatar--size-40_s1ka9_131",
+  "team-avatar--size-48": "_team-avatar--size-48_s1ka9_152",
+  "team-avatar--size-56": "_team-avatar--size-56_s1ka9_173",
+  "team-avatar--size-64": "_team-avatar--size-64_s1ka9_194",
+  "team-avatar--size-72": "_team-avatar--size-72_s1ka9_215",
+  "team-avatar--size-96": "_team-avatar--size-96_s1ka9_236",
+  "team-avatar--size-120": "_team-avatar--size-120_s1ka9_257",
+  "team-avatar--menu": "_team-avatar--menu_s1ka9_278"
 };
 export {
   a as default

package/dist/components/team-avatar/TeamAvatar.module.scss.js.map

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

package/dist/components/team-avatar/index.d.ts

@@ -1,3 +1,3 @@
 export { default as TeamAvatar } from './TeamAvatar';
-export type { TeamAvatarProps } from './TeamAvatar';
+export type { TeamAvatarProps, TeamAvatarVariant } from './TeamAvatar';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/team-avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/team-avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/team-avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

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"),D=require("../../utils/string.cjs"),e=require("./TextArea.module.scss.cjs"),E=t.forwardRef(function({className:j="",size:m="medium",label:n,invalid:v=!1,maxLength:d,showCharacterCount:x=!1,id:N,value:o,defaultValue:b,placeholder:p,onFocus:r,onBlur:i,onChange:u,disabled:q,readOnly:I,rows:S=3,...T},h){const k=t.useId(),f=N??k,a=o!==void 0,[y,C]=t.useState(b??""),c=a?o:y,R=c!=null&&c!=="",[V,_]=t.useState(!1),g=V||R,z=t.useCallback(l=>{_(!0),r==null||r(l)},[r]),F=t.useCallback(l=>{_(!1),i==null||i(l)},[i]),M=t.useCallback(l=>{a||C(l.target.value),u==null||u(l)},[a,u]),$=e.default[`textArea--size-${D.toKebab(m)}`],w=v?e.default["textArea--invalid"]:"",K=n!=null&&g?e.default["textArea--label-floated"]:"",O=[e.default.textArea,$,w,K,j].filter(Boolean).join(" "),U=typeof c=="string"?c.length:0,A=x&&d!=null?`${f}-counter`:void 0;return s.jsxs("div",{className:O,children:[s.jsxs("div",{className:e.default.textArea__wrapper,children:[n!=null&&s.jsx("label",{className:e.default.textArea__label,htmlFor:f,children:n}),s.jsx("textarea",{ref:h,id:f,className:e.default.textArea__input,value:a?o:void 0,defaultValue:a?void 0:b,placeholder:p,maxLength:d,disabled:q,readOnly:I,rows:S,"aria-invalid":v?!0:void 0,"aria-describedby":A,onFocus:z,onBlur:F,onChange:M,...T})]}),x&&d!=null&&s.jsxs("div",{id:A,className:e.default.textArea__counter,"aria-live":"polite",children:[U," / ",d]})]})});exports.default=E;
+"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      ...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[`textArea--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['textArea--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['textArea--label-floated'] : '';\n\n    const rootClass = [\n      styles.textArea,\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.textArea__wrapper}>\n          {label != null && (\n            <label className={styles.textArea__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <textarea\n            ref={ref}\n            id={id}\n            className={styles.textArea__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={counterId}\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.textArea__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","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,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKd,GAAUY,EAEfG,EAAed,IAAc,OAC7B,CAACe,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDhB,GAAgB,EAAA,EAEZiB,EAAQJ,EAAgBd,EAAuBe,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,EACjBlB,GAAA,MAAAA,EAAUsB,EACZ,EACA,CAACtB,CAAO,CAAA,EAEJuB,EAAaF,EAAAA,YAChBC,GAA6C,CAC5CJ,EAAa,EAAK,EAClBjB,GAAA,MAAAA,EAASqB,EACX,EACA,CAACrB,CAAM,CAAA,EAEHuB,EAAeH,EAAAA,YAClBC,GAAwC,CAClCX,GAAcE,EAAqBS,EAAE,OAAO,KAAK,EACtDpB,GAAA,MAAAA,EAAWoB,EACb,EACA,CAACX,EAAcT,CAAQ,CAAA,EAGnBuB,EAAYC,EAAAA,QAAO,kBAAkBC,EAAAA,QAAQpC,CAAI,CAAC,EAAE,EACpDqC,EAAenC,EAAUiC,UAAO,mBAAmB,EAAI,GACvDG,EACJrC,GAAS,MAAQ2B,EAAeO,EAAAA,QAAO,yBAAyB,EAAI,GAEhEI,EAAY,CAChBJ,EAAAA,QAAO,SACPD,EACAG,EACAC,EACAvC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELyC,EAAgB,OAAOhB,GAAU,SAAWA,EAAM,OAAS,EAC3DiB,EACJrC,GAAsBD,GAAa,KAAO,GAAGgB,CAAE,WAAa,OAE9D,OACEuB,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACd,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,kBACpB,SAAA,CAAAlC,GAAS,YACP,QAAA,CAAM,UAAWkC,UAAO,gBAAiB,QAAShB,EAChD,SAAAlB,CAAA,CACH,EAEF0C,EAAAA,IAAC,WAAA,CACC,IAAA3B,EACA,GAAAG,EACA,UAAWgB,EAAAA,QAAO,gBAClB,MAAOf,EAAed,EAAY,OAClC,aAAcc,EAAe,OAAYb,EACzC,YAAAC,EACA,UAAAL,EACA,SAAAS,EACA,SAAAC,EACA,KAAAC,EACA,eAAcZ,EAAU,GAAO,OAC/B,mBAAkBuC,EAClB,QAASZ,EACT,OAAQG,EACR,SAAUC,EACT,GAAGlB,CAAA,CAAA,CACN,EACF,EACCX,GAAsBD,GAAa,MAClCuC,EAAAA,KAAC,MAAA,CACC,GAAID,EACJ,UAAWN,EAAAA,QAAO,kBAClB,YAAU,SAET,SAAA,CAAAK,EAAc,MAAIrC,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":"yUA4CMA,EAAWC,EAAAA,WACf,SACE,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,mBAAAC,EAAqB,GACrB,QAAAC,EACA,YAAAC,EACA,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,EAAcC,EAAAA,eAAepC,EAASG,EAASC,CAAW,EAC1DiC,EAAcC,EAAAA,gBAAgBnC,CAAO,EACrCoC,EAAYC,EAAAA,QAAO,mBAAmBC,EAAAA,QAAQ3C,CAAI,CAAC,EAAE,EACrD4C,EAAeP,EAAcK,UAAO,oBAAoB,EAAI,GAC5DG,EACJ5C,GAAS,MAAQ8B,EAAeW,EAAAA,QAAO,0BAA0B,EAAI,GAEjEI,EAAY,CAChBJ,EAAAA,QAAO,WAAW,EAClBD,EACAG,EACAC,EACA9C,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELgD,EAAgB,OAAOpB,GAAU,SAAWA,EAAM,OAAS,EAC3DqB,EACJ5C,GAAsBD,GAAa,KAAO,GAAGmB,CAAE,WAAa,OACxD2B,EAAYV,EAAc,GAAGjB,CAAE,WAAa,OAC5C4B,EAAe5C,GAAe,QAEpC,OACE6C,EAAAA,KAAC,MAAA,CAAI,UAAWL,EACd,SAAA,CAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWT,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAzC,GAAS,YACP,QAAA,CAAM,UAAWyC,EAAAA,QAAO,kBAAkB,EAAG,QAASpB,EACpD,SAAArB,CAAA,CACH,EAEFmD,EAAAA,IAAC,WAAA,CACC,IAAAjC,EACA,GAAAG,EACA,UAAWoB,EAAAA,QAAO,kBAAkB,EACpC,MAAOnB,EAAef,EAAY,OAClC,aAAce,EAAe,OAAYd,EACzC,YAAAC,EACA,UAAAP,EACA,SAAAW,EACA,SAAAC,EACA,KAAAC,EACA,eAAcqB,EAAc,GAAO,OACnC,mBAAkBgB,EAAAA,sBAChBpC,EACAgC,EACAD,CAAA,EAEF,QAAShB,EACT,OAAQG,EACR,SAAUC,EACT,GAAGlB,CAAA,CAAA,CACN,EACF,GACEqB,GAAgBnC,GAAsBD,GAAa,cAClD,MAAA,CAAI,UAAWuC,EAAAA,QAAO,mBAAmB,EACvC,SAAA,CAAAH,GACCa,EAAAA,IAACE,EAAAA,QAAA,CACC,GAAIL,EACJ,UAAWP,EAAAA,QAAO,2BAA2B,EAC7C,QAAArC,EACA,KAAM6C,CAAA,CAAA,EAGT9C,GAAsBD,GAAa,MAClCgD,EAAAA,KAAC,MAAA,CACC,GAAIH,EACJ,UAAWN,EAAAA,QAAO,oBAAoB,EACtC,YAAU,SAET,SAAA,CAAAK,EAAc,MAAI5C,CAAA,CAAA,CAAA,CACrB,CAAA,CAEJ,CAAA,EAEJ,CAEJ,CACF"}

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

@@ -0,0 +1 @@
+._text-area_cq6rq_13{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._text-area__wrapper_cq6rq_19{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_cq6rq_13:has(._text-area__input_cq6rq_26:not(:disabled)):hover:not(:focus-within) ._text-area__wrapper_cq6rq_19{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._text-area_cq6rq_13:has(._text-area__input_cq6rq_26:focus-visible) ._text-area__wrapper_cq6rq_19{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._text-area_cq6rq_13:has(._text-area__input_cq6rq_26:disabled) ._text-area__wrapper_cq6rq_19{background-color:var(--center-channel-bg);opacity:.56}._text-area__label_cq6rq_36{position:absolute;left:var(--spacing-xs);top:var(--spacing-s);padding:0 var(--spacing-xxxs);margin:0;font-family:var(--font-family-body);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_cq6rq_55 ._text-area__label_cq6rq_36{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4;color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_cq6rq_26{display:block;width:100%;margin:0;border:0;background:transparent;resize:vertical;font-family:var(--font-family-body);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_cq6rq_26:focus{outline:none}._text-area__input_cq6rq_26::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._text-area__input_cq6rq_26:disabled{cursor:not-allowed;resize:none}._text-area__footer_cq6rq_86{display:flex;align-items:flex-start;gap:var(--spacing-xs);width:100%}._text-area__footer-message_cq6rq_92{flex:1 1 0;min-width:0}._text-area__counter_cq6rq_96{flex-shrink:0;margin-inline-start:auto;font-family:var(--font-family-body);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_cq6rq_105 ._text-area__input_cq6rq_26{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-75);line-height:var(--line-height-75)}._text-area--size-small_cq6rq_105 ._text-area__label_cq6rq_36{top:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-25)}._text-area--size-small_cq6rq_105._text-area--label-floated_cq6rq_55 ._text-area__label_cq6rq_36{top:0;font-size:var(--font-size-25);line-height:1.4}._text-area--size-medium_cq6rq_120 ._text-area__input_cq6rq_26{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-area--size-medium_cq6rq_120 ._text-area__label_cq6rq_36{top:var(--spacing-s);left:var(--spacing-m);font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-area--size-medium_cq6rq_120._text-area--label-floated_cq6rq_55 ._text-area__label_cq6rq_36{top:0;font-size:var(--font-size-25);line-height:1.4}._text-area--size-large_cq6rq_136 ._text-area__input_cq6rq_26{padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_cq6rq_136 ._text-area__label_cq6rq_36{top:var(--spacing-m);left:var(--spacing-m);font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-area--size-large_cq6rq_136._text-area--label-floated_cq6rq_55 ._text-area__label_cq6rq_36{top:0;font-size:var(--font-size-25);line-height:1.4}._text-area_cq6rq_13:has(._text-area__input_cq6rq_26:focus-visible) ._text-area__label_cq6rq_36{color:var(--button-bg)}._text-area_cq6rq_13:not(._text-area--label-floated_cq6rq_55) ._text-area__label_cq6rq_36~._text-area__input_cq6rq_26::placeholder{color:transparent}._text-area--invalid_cq6rq_158 ._text-area__wrapper_cq6rq_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._text-area--invalid_cq6rq_158:has(._text-area__input_cq6rq_26:focus-visible) ._text-area__wrapper_cq6rq_19{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_cq6rq_158 ._text-area__label_cq6rq_36{color:var(--error-text, var(--color-danger))}._text-area--invalid_cq6rq_158:has(._text-area__input_cq6rq_26:focus-visible) ._text-area__label_cq6rq_36{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,+GAoHb,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"}