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

package/dist/components/text-input/TextInput.js

@@ -1,108 +1,166 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { forwardRef as Y, useId as Z, useRef as L, useCallback as r, useState as j } from "react";
-import { toKebab as B } from "../../utils/string.js";
-import t from "./TextInput.module.scss.js";
-const nt = Y(
+import { jsxs as n, Fragment as fe, jsx as t } from "react/jsx-runtime";
+import { forwardRef as _e, useId as ve, useRef as he, useCallback as p, useState as k } from "react";
+import { IconSlotContext as E } from "../icon/Icon.js";
+import xe from "../field/FieldClearButton.js";
+import { mergeFieldDescribedBy as Ne, hasFieldMessage as be, isFieldInvalid as Ce } from "../field/fieldDescribedBy.js";
+import { useFieldClear as ye } from "../field/useFieldClear.js";
+import Fe from "../field-message/FieldMessage.js";
+import { toKebab as Ie } from "../../utils/string.js";
+import e from "./TextInput.module.scss.js";
+const ge = {
+  small: "12",
+  medium: "16",
+  large: "16"
+}, Ve = _e(
   function({
-    className: C = "",
-    size: T = "medium",
-    label: d,
-    leadingIcon: p,
-    trailingIcon: f,
-    invalid: x = !1,
-    maxLength: a,
-    showCharacterCount: _ = !1,
-    id: V,
-    value: I,
-    defaultValue: v,
-    placeholder: z,
-    onFocus: i,
-    onBlur: u,
+    className: P = "",
+    size: m = "medium",
+    label: f,
+    leadingIcon: _,
+    trailingIcon: v,
+    invalid: U = !1,
+    maxLength: s,
+    showCharacterCount: h = !1,
+    message: x,
+    messageTone: y,
+    clearable: Z = !1,
+    onClear: q,
+    clearLabel: A = "Clear",
+    clearButtonProps: G,
+    trailingAction: F,
+    id: H,
+    value: N,
+    defaultValue: I,
+    placeholder: J,
+    onFocus: o,
+    onBlur: r,
     onChange: c,
-    disabled: $,
-    readOnly: g,
-    ...k
-  }, s) {
-    const w = Z(), h = V ?? w, b = L(null), F = r(
-      (e) => {
-        if (b.current = e, typeof s == "function") {
-          const R = s(e);
+    onKeyDown: O,
+    disabled: g,
+    readOnly: w,
+    "aria-describedby": Q,
+    ...W
+  }, a) {
+    const X = ve(), d = H ?? X, b = he(null), Y = p(
+      (l) => {
+        if (b.current = l, typeof a == "function") {
+          const $ = a(l);
           return () => {
-            b.current = null, typeof R == "function" && R();
+            b.current = null, typeof $ == "function" && $();
           };
         }
-        s && (s.current = e);
+        a && (a.current = l);
       },
-      [s]
-    ), l = I !== void 0, [K, S] = j(
-      v ?? ""
-    ), o = l ? I : K, U = o != null && o !== "", [q, N] = j(!1), A = q || U, D = r(
-      (e) => {
-        N(!0), i == null || i(e);
+      [a]
+    ), i = N !== void 0, [L, M] = k(
+      I ?? ""
+    ), u = i ? N : L, R = u != null && u !== "", [ee, S] = k(!1), te = ee || R, le = p(
+      (l) => {
+        S(!0), o == null || o(l);
       },
-      [i]
-    ), E = r(
-      (e) => {
-        N(!1), u == null || u(e);
+      [o]
+    ), ie = p(
+      (l) => {
+        S(!1), r == null || r(l);
       },
-      [u]
-    ), G = r(
-      (e) => {
-        l || S(e.target.value), c == null || c(e);
+      [r]
+    ), j = p(
+      (l) => {
+        i || M(l.target.value), c == null || c(l);
       },
-      [l, c]
-    ), H = t[`textInput--size-${B(T)}`], J = x ? t["textInput--invalid"] : "", M = d != null && A ? t["textInput--label-floated"] : "", O = p != null ? t["textInput--has-leading-icon"] : "", Q = f != null ? t["textInput--has-trailing-icon"] : "", W = [
-      t.textInput,
-      H,
-      J,
-      M,
-      O,
-      Q,
-      C
-    ].filter(Boolean).join(" "), X = typeof o == "string" ? o.length : 0, y = _ && a != null ? `${h}-counter` : void 0;
-    return /* @__PURE__ */ m("div", { className: W, children: [
-      /* @__PURE__ */ n("div", { className: t.textInput__wrapper, children: /* @__PURE__ */ m("label", { className: t.textInput__inner, children: [
-        d != null && /* @__PURE__ */ n("span", { className: t.textInput__label, children: d }),
-        p != null && /* @__PURE__ */ n("span", { className: t.textInput__leadingIcon, children: p }),
-        /* @__PURE__ */ n(
-          "input",
+      [i, c]
+    ), { showClearButton: z, handleClear: ne, handleKeyDown: se } = ye({
+      disabled: !!(g || w),
+      hasValue: R,
+      clearEnabled: Z,
+      isControlled: i,
+      onClear: q,
+      onChange: j,
+      onKeyDown: O,
+      inputRef: b,
+      setUncontrolledValue: M
+    }), B = Ce(U, x, y), C = be(x), ae = e[`text-input--size-${Ie(m)}`], oe = B ? e["text-input--invalid"] : "", re = f != null && te ? e["text-input--label-floated"] : "", ce = _ != null ? e["text-input--has-leading-icon"] : "", de = v != null || z ? e["text-input--has-trailing-icon"] : "", D = ge[m], ue = [
+      e["text-input"],
+      ae,
+      oe,
+      re,
+      ce,
+      de,
+      P
+    ].filter(Boolean).join(" "), pe = typeof u == "string" ? u.length : 0, K = h && s != null ? `${d}-counter` : void 0, T = C ? `${d}-message` : void 0, me = y ?? "error", V = /* @__PURE__ */ n(fe, { children: [
+      /* @__PURE__ */ n("div", { className: e["text-input__wrapper"], children: [
+        f != null && /* @__PURE__ */ t("label", { className: e["text-input__label"], htmlFor: d, children: f }),
+        /* @__PURE__ */ n("div", { className: e["text-input__inner"], children: [
+          _ != null && /* @__PURE__ */ t("span", { className: e["text-input__leading-icon"], children: /* @__PURE__ */ t(E.Provider, { value: { size: D }, children: _ }) }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              ref: Y,
+              id: d,
+              className: e["text-input__input"],
+              value: i ? N : void 0,
+              defaultValue: i ? void 0 : I,
+              placeholder: J,
+              maxLength: s,
+              disabled: g,
+              readOnly: w,
+              "aria-invalid": B ? !0 : void 0,
+              "aria-describedby": Ne(
+                Q,
+                T,
+                K
+              ),
+              onFocus: le,
+              onBlur: ie,
+              onChange: j,
+              onKeyDown: se,
+              ...W
+            }
+          ),
+          v != null && /* @__PURE__ */ t("span", { className: e["text-input__trailing-icon"], children: /* @__PURE__ */ t(E.Provider, { value: { size: D }, children: v }) }),
+          z && /* @__PURE__ */ t("span", { className: e["text-input__trailing-icon"], children: /* @__PURE__ */ t(
+            xe,
+            {
+              size: m,
+              clearLabel: A,
+              clearButtonProps: G,
+              onClick: ne
+            }
+          ) })
+        ] })
+      ] }),
+      (C || h && s != null) && /* @__PURE__ */ n("div", { className: e["text-input__footer"], children: [
+        C && /* @__PURE__ */ t(
+          Fe,
           {
-            ref: F,
-            id: h,
-            className: t.textInput__input,
-            value: l ? I : void 0,
-            defaultValue: l ? void 0 : v,
-            placeholder: z,
-            maxLength: a,
-            disabled: $,
-            readOnly: g,
-            "aria-invalid": x ? !0 : void 0,
-            "aria-describedby": y,
-            onFocus: D,
-            onBlur: E,
-            onChange: G,
-            ...k
+            id: T,
+            className: e["text-input__footer-message"],
+            message: x,
+            tone: me
           }
         ),
-        f != null && /* @__PURE__ */ n("span", { className: t.textInput__trailingIcon, children: f })
-      ] }) }),
-      _ && a != null && /* @__PURE__ */ m(
-        "div",
-        {
-          id: y,
-          className: t.textInput__counter,
-          "aria-live": "polite",
-          children: [
-            X,
-            " / ",
-            a
-          ]
-        }
-      )
+        h && s != null && /* @__PURE__ */ n(
+          "div",
+          {
+            id: K,
+            className: e["text-input__counter"],
+            "aria-live": "polite",
+            children: [
+              pe,
+              " / ",
+              s
+            ]
+          }
+        )
+      ] })
     ] });
+    return /* @__PURE__ */ t("div", { className: ue, children: F != null ? /* @__PURE__ */ n("div", { className: e["text-input__row"], children: [
+      /* @__PURE__ */ t("div", { className: e["text-input__field"], children: V }),
+      /* @__PURE__ */ t("div", { className: e["text-input__trailing-action"], children: F })
+    ] }) : V });
   }
 );
 export {
-  nt as default
+  Ve as default
 };
 //# sourceMappingURL=TextInput.js.map

package/dist/components/text-input/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\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  /** Leading icon (e.g. <Icon glyph={<SearchIcon />} size=\"16\" />). */\n  leadingIcon?: ReactNode;\n  /** Max length for the input; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below input. */\n  showCharacterCount?: boolean;\n  /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n  size?: TextInputSize;\n  /** Trailing icon. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      leadingIcon,\n      trailingIcon,\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      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n          return () => {\n            inputRef.current = null;\n            if (typeof cleanup === 'function') cleanup();\n          };\n        }\n        if (ref) ref.current = node;\n      },\n      [ref],\n    );\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 sizeClass = styles[`textInput--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['textInput--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['textInput--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['textInput--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null ? styles['textInput--has-trailing-icon'] : '';\n\n    const rootClass = [\n      styles.textInput,\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\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.textInput__wrapper}>\n          <label className={styles.textInput__inner}>\n            {label != null && (\n              <span className={styles.textInput__label}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles.textInput__leadingIcon}>\n                {leadingIcon}\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles.textInput__input}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              disabled={disabled}\n              readOnly={readOnly}\n              aria-invalid={invalid ? true : undefined}\n              aria-describedby={counterId}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles.textInput__trailingIcon}>\n                {trailingIcon}\n              </span>\n            )}\n          </label>\n        </div>\n        {showCharacterCount && maxLength != null && (\n          <div\n            id={counterId}\n            className={styles.textInput__counter}\n            aria-live=\"polite\"\n          >\n            {currentLength} / {maxLength}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","handleBlur","handleChange","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","rootClass","currentLength","counterId","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sources":["../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import type {\n  InputHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  RefCallback,\n  KeyboardEvent,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\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 { toKebab } from '@/utils/string';\nimport styles from './TextInput.module.scss';\n\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\n/** Matches FieldClearButton / in-field chrome for each Text Input size. */\nconst ICON_SIZE_MAP: Record<TextInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\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  /** Leading icon — pass `<Icon glyph={<SearchIcon />} />`; TextInput provides the correct size via context. */\n  leadingIcon?: ReactNode;\n  /** Max length for the input; used with showCharacterCount for counter. */\n  maxLength?: number;\n  /** When true with maxLength, shows \"current / max\" character count below input. */\n  showCharacterCount?: boolean;\n  /** Size variant. Figma: Small (32px), Medium (40px), Large (48px). Default: Medium. */\n  size?: TextInputSize;\n  /**\n   * Native input `type`. For passwords with show/hide, prefer `PasswordInput`\n   * over composing `type=\"password\"` here.\n   */\n  type?: InputHTMLAttributes<HTMLInputElement>['type'];\n  /**\n   * Trailing icon inside the field — pass `<Icon glyph={<GlobeIcon />} />`. Sized via\n   * context from `size`. When `clearable` is also set, clear renders after this icon.\n   * For password show/hide, use `PasswordInput` instead (don’t combine clear with\n   * password reveal). Combobox owns its own clear/chevron.\n   */\n  trailingIcon?: ReactNode;\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   * When true, shows a clear button while the field has a non-empty value and is not disabled.\n   * Default: false.\n   */\n  clearable?: boolean;\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\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\n  /**\n   * Rendered outside the border, beside the control (same height as the field). Use for\n   * labeled actions like Copy (`Button`, primary by default). Password show/hide belongs\n   * on `PasswordInput`. Message and counter stay as wide as the field column, not under\n   * the action.\n   */\n  trailingAction?: ReactNode;\n}\n\n/**\n * Text Inputs let people enter and edit a single line of text — names, emails, search\n * queries, channel titles. They're the workhorse of every form and modal in Mattermost.\n */\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      leadingIcon,\n      trailingIcon,\n      invalid = false,\n      maxLength,\n      showCharacterCount = false,\n      message,\n      messageTone,\n      clearable = false,\n      onClear,\n      clearLabel = 'Clear',\n      clearButtonProps,\n      trailingAction,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      onKeyDown,\n      disabled,\n      readOnly,\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 setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          const cleanup = (ref as RefCallback<HTMLInputElement>)(node);\n          return () => {\n            inputRef.current = null;\n            if (typeof cleanup === 'function') cleanup();\n          };\n        }\n        if (ref) ref.current = node;\n      },\n      [ref],\n    );\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 { showClearButton, handleClear, handleKeyDown } = useFieldClear({\n      disabled: Boolean(disabled || readOnly),\n      hasValue,\n      clearEnabled: clearable,\n      isControlled,\n      onClear,\n      onChange: handleChange as (e: ChangeEvent<HTMLInputElement>) => void,\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[`text-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['text-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['text-input--label-floated'] : '';\n    const hasLeadingClass =\n      leadingIcon != null ? styles['text-input--has-leading-icon'] : '';\n    const hasTrailingClass =\n      trailingIcon != null || showClearButton\n        ? styles['text-input--has-trailing-icon']\n        : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['text-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\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    const fieldBody = (\n      <>\n        <div className={styles['text-input__wrapper']}>\n          {label != null && (\n            <label className={styles['text-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['text-input__inner']}>\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                <IconSlotContext.Provider value={{ size: iconSize }}>\n                  {leadingIcon}\n                </IconSlotContext.Provider>\n              </span>\n            )}\n            <input\n              ref={setInputRef}\n              id={id}\n              className={styles['text-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              disabled={disabled}\n              readOnly={readOnly}\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              onKeyDown={handleKeyDown}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                <IconSlotContext.Provider value={{ size: iconSize }}>\n                  {trailingIcon}\n                </IconSlotContext.Provider>\n              </span>\n            )}\n            {showClearButton && (\n              <span className={styles['text-input__trailing-icon']}>\n                <FieldClearButton\n                  size={size}\n                  clearLabel={clearLabel}\n                  clearButtonProps={clearButtonProps}\n                  onClick={handleClear}\n                />\n              </span>\n            )}\n          </div>\n        </div>\n        {(showMessage || (showCharacterCount && maxLength != null)) && (\n          <div className={styles['text-input__footer']}>\n            {showMessage && (\n              <FieldMessage\n                id={messageId}\n                className={styles['text-input__footer-message']}\n                message={message}\n                tone={resolvedTone}\n              />\n            )}\n            {showCharacterCount && maxLength != null && (\n              <div\n                id={counterId}\n                className={styles['text-input__counter']}\n                aria-live=\"polite\"\n              >\n                {currentLength} / {maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </>\n    );\n\n    return (\n      <div className={rootClass}>\n        {trailingAction != null ? (\n          <div className={styles['text-input__row']}>\n            <div className={styles['text-input__field']}>{fieldBody}</div>\n            <div className={styles['text-input__trailing-action']}>\n              {trailingAction}\n            </div>\n          </div>\n        ) : (\n          fieldBody\n        )}\n      </div>\n    );\n  },\n);\n\nexport default TextInput;\n"],"names":["ICON_SIZE_MAP","TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","message","messageTone","clearable","onClear","clearLabel","clearButtonProps","trailingAction","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","onKeyDown","disabled","readOnly","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","setInputRef","useCallback","node","cleanup","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","e","handleBlur","handleChange","showClearButton","handleClear","handleKeyDown","useFieldClear","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","currentLength","counterId","messageId","resolvedTone","fieldBody","jsxs","Fragment","jsx","IconSlotContext","mergeFieldDescribedBy","FieldClearButton","FieldMessage"],"mappings":";;;;;;;;;AA0BA,MAAMA,KAAiD;AAAA,EACrD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GA+DMC,KAAYC;AAAA,EAChB,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,oBAAAC,IAAqB;AAAA,IACrB,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAcC,GAAA,GACdC,IAAKf,KAAUa,GACfG,IAAWC,GAAgC,IAAI,GAE/CC,IAAcC;AAAA,MAClB,CAACC,MAAkC;AAEjC,YADAJ,EAAS,UAAUI,GACf,OAAOR,KAAQ,YAAY;AAC7B,gBAAMS,IAAWT,EAAsCQ,CAAI;AAC3D,iBAAO,MAAM;AACX,YAAAJ,EAAS,UAAU,MACf,OAAOK,KAAY,cAAYA,EAAA;AAAA,UACrC;AAAA,QACF;AACA,QAAIT,QAAS,UAAUQ;AAAA,MACzB;AAAA,MACA,CAACR,CAAG;AAAA,IAAA,GAGAU,IAAerB,MAAc,QAC7B,CAACsB,GAAmBC,CAAoB,IAAIC;AAAA,MAChDvB,KAAgB;AAAA,IAAA,GAEZwB,IAAQJ,IAAgBrB,IAAuBsB,GAC/CI,IAAWD,KAAS,QAAQA,MAAU,IAEtC,CAACE,IAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1CK,KAAeF,MAAaD,GAE5BI,KAAcZ;AAAA,MAClB,CAACa,MAA0C;AACzC,QAAAH,EAAa,EAAI,GACjBzB,KAAA,QAAAA,EAAU4B;AAAA,MACZ;AAAA,MACA,CAAC5B,CAAO;AAAA,IAAA,GAEJ6B,KAAad;AAAA,MACjB,CAACa,MAA0C;AACzC,QAAAH,EAAa,EAAK,GAClBxB,KAAA,QAAAA,EAAS2B;AAAA,MACX;AAAA,MACA,CAAC3B,CAAM;AAAA,IAAA,GAEH6B,IAAef;AAAA,MACnB,CAACa,MAAqC;AACpC,QAAKV,KAAcE,EAAqBQ,EAAE,OAAO,KAAK,GACtD1B,KAAA,QAAAA,EAAW0B;AAAA,MACb;AAAA,MACA,CAACV,GAAchB,CAAQ;AAAA,IAAA,GAGnB,EAAE,iBAAA6B,GAAiB,aAAAC,IAAa,eAAAC,GAAA,IAAkBC,GAAc;AAAA,MACpE,UAAU,GAAQ9B,KAAYC;AAAA,MAC9B,UAAAkB;AAAA,MACA,cAAchC;AAAA,MACd,cAAA2B;AAAA,MACA,SAAA1B;AAAA,MACA,UAAUsC;AAAA,MACV,WAAA3B;AAAA,MAGA,UAAAS;AAAA,MACA,sBAAAQ;AAAA,IAAA,CACD,GAEKe,IAAcC,GAAelD,GAASG,GAASC,CAAW,GAC1D+C,IAAcC,GAAgBjD,CAAO,GACrCkD,KAAYC,EAAO,oBAAoBC,GAAQ3D,CAAI,CAAC,EAAE,GACtD4D,KAAeP,IAAcK,EAAO,qBAAqB,IAAI,IAC7DG,KACJ5D,KAAS,QAAQ2C,KAAec,EAAO,2BAA2B,IAAI,IAClEI,KACJ5D,KAAe,OAAOwD,EAAO,8BAA8B,IAAI,IAC3DK,KACJ5D,KAAgB,QAAQ8C,IACpBS,EAAO,+BAA+B,IACtC,IACAM,IAAWpE,GAAcI,CAAI,GAE7BiE,KAAY;AAAA,MAChBP,EAAO,YAAY;AAAA,MACnBD;AAAA,MACAG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAhE;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELmE,KAAgB,OAAO1B,KAAU,WAAWA,EAAM,SAAS,GAC3D2B,IACJ7D,KAAsBD,KAAa,OAAO,GAAGwB,CAAE,aAAa,QACxDuC,IAAYb,IAAc,GAAG1B,CAAE,aAAa,QAC5CwC,KAAe7D,KAAe,SAE9B8D,IACJ,gBAAAC,EAAAC,IAAA,EACE,UAAA;AAAA,MAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWb,EAAO,qBAAqB,GACzC,UAAA;AAAA,QAAAzD,KAAS,0BACP,SAAA,EAAM,WAAWyD,EAAO,mBAAmB,GAAG,SAAS7B,GACrD,UAAA5B,EAAA,CACH;AAAA,QAEF,gBAAAsE,EAAC,OAAA,EAAI,WAAWb,EAAO,mBAAmB,GACvC,UAAA;AAAA,UAAAxD,KAAe,QACd,gBAAAuE,EAAC,QAAA,EAAK,WAAWf,EAAO,0BAA0B,GAChD,UAAA,gBAAAe,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMV,EAAA,GACtC,aACH,GACF;AAAA,UAEF,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKzC;AAAA,cACL,IAAAH;AAAA,cACA,WAAW6B,EAAO,mBAAmB;AAAA,cACrC,OAAOtB,IAAerB,IAAY;AAAA,cAClC,cAAcqB,IAAe,SAAYpB;AAAA,cACzC,aAAAC;AAAA,cACA,WAAAZ;AAAA,cACA,UAAAiB;AAAA,cACA,UAAAC;AAAA,cACA,gBAAc8B,IAAc,KAAO;AAAA,cACnC,oBAAkBsB;AAAA,gBAChBnD;AAAA,gBACA4C;AAAA,gBACAD;AAAA,cAAA;AAAA,cAEF,SAAStB;AAAA,cACT,QAAQE;AAAA,cACR,UAAUC;AAAA,cACV,WAAWG;AAAA,cACV,GAAG1B;AAAA,YAAA;AAAA,UAAA;AAAA,UAELtB,KAAgB,QACf,gBAAAsE,EAAC,UAAK,WAAWf,EAAO,2BAA2B,GACjD,UAAA,gBAAAe,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMV,EAAA,GACtC,aACH,GACF;AAAA,UAEDf,KACC,gBAAAwB,EAAC,QAAA,EAAK,WAAWf,EAAO,2BAA2B,GACjD,UAAA,gBAAAe;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAA5E;AAAA,cACA,YAAAW;AAAA,cACA,kBAAAC;AAAA,cACA,SAASsC;AAAA,YAAA;AAAA,UAAA,EACX,CACF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,GACF;AAAA,OACEK,KAAgBjD,KAAsBD,KAAa,2BAClD,OAAA,EAAI,WAAWqD,EAAO,oBAAoB,GACxC,UAAA;AAAA,QAAAH,KACC,gBAAAkB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,IAAIT;AAAA,YACJ,WAAWV,EAAO,4BAA4B;AAAA,YAC9C,SAAAnD;AAAA,YACA,MAAM8D;AAAA,UAAA;AAAA,QAAA;AAAA,QAGT/D,KAAsBD,KAAa,QAClC,gBAAAkE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAIJ;AAAA,YACJ,WAAWT,EAAO,qBAAqB;AAAA,YACvC,aAAU;AAAA,YAET,UAAA;AAAA,cAAAQ;AAAA,cAAc;AAAA,cAAI7D;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB,EAAA,CAEJ;AAAA,IAAA,GAEJ;AAGF,WACE,gBAAAoE,EAAC,OAAA,EAAI,WAAWR,IACb,UAAApD,KAAkB,OACjB,gBAAA0D,EAAC,OAAA,EAAI,WAAWb,EAAO,iBAAiB,GACtC,UAAA;AAAA,MAAA,gBAAAe,EAAC,OAAA,EAAI,WAAWf,EAAO,mBAAmB,GAAI,UAAAY,GAAU;AAAA,wBACvD,OAAA,EAAI,WAAWZ,EAAO,6BAA6B,GACjD,UAAA7C,EAAA,CACH;AAAA,IAAA,EAAA,CACF,IAEAyD,GAEJ;AAAA,EAEJ;AACF;"}

package/dist/components/text-input/TextInput.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextInput.module.css');const t="_textInput_14l3m_2",_="_textInput__wrapper_14l3m_7",e="_textInput__input_14l3m_18",n="_textInput__label_14l3m_29",u="_textInput__inner_14l3m_56",p="_textInput__leadingIcon_14l3m_87",l="_textInput__trailingIcon_14l3m_87",I="_textInput__counter_14l3m_100",x={textInput:t,textInput__wrapper:_,textInput__input:e,textInput__label:n,"textInput--label-floated":"_textInput--label-floated_14l3m_49",textInput__inner:u,textInput__leadingIcon:p,textInput__trailingIcon:l,textInput__counter:I,"textInput--size-small":"_textInput--size-small_14l3m_107","textInput--size-medium":"_textInput--size-medium_14l3m_123","textInput--size-large":"_textInput--size-large_14l3m_143","textInput--has-leading-icon":"_textInput--has-leading-icon_14l3m_164","textInput--invalid":"_textInput--invalid_14l3m_182"};exports.default=x;exports.textInput=t;exports.textInput__counter=I;exports.textInput__inner=u;exports.textInput__input=e;exports.textInput__label=n;exports.textInput__leadingIcon=p;exports.textInput__trailingIcon=l;exports.textInput__wrapper=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextInput.css');const t={"text-input":"_text-input_ikss5_13","text-input__row":"_text-input__row_ikss5_19","text-input__field":"_text-input__field_ikss5_25","text-input__trailing-action":"_text-input__trailing-action_ikss5_32","text-input__wrapper":"_text-input__wrapper_ikss5_42","text-input__input":"_text-input__input_ikss5_53","text-input__label":"_text-input__label_ikss5_64","text-input--label-floated":"_text-input--label-floated_ikss5_84","text-input__inner":"_text-input__inner_ikss5_91","text-input__leading-icon":"_text-input__leading-icon_ikss5_122","text-input__trailing-icon":"_text-input__trailing-icon_ikss5_122","text-input__footer":"_text-input__footer_ikss5_135","text-input__footer-message":"_text-input__footer-message_ikss5_141","text-input__counter":"_text-input__counter_ikss5_145","text-input--size-small":"_text-input--size-small_ikss5_154","text-input--size-medium":"_text-input--size-medium_ikss5_173","text-input--size-large":"_text-input--size-large_ikss5_197","text-input--has-leading-icon":"_text-input--has-leading-icon_ikss5_221","text-input--invalid":"_text-input--invalid_ikss5_239"};exports.default=t;
 //# sourceMappingURL=TextInput.module.scss.cjs.map

package/dist/components/text-input/TextInput.module.scss.js

@@ -1,28 +1,25 @@
-import './TextInput.module.css';const t = "_textInput_14l3m_2", _ = "_textInput__wrapper_14l3m_7", n = "_textInput__input_14l3m_18", e = "_textInput__label_14l3m_29", p = "_textInput__inner_14l3m_56", u = "_textInput__leadingIcon_14l3m_87", l = "_textInput__trailingIcon_14l3m_87", I = "_textInput__counter_14l3m_100", x = {
-  textInput: t,
-  textInput__wrapper: _,
-  textInput__input: n,
-  textInput__label: e,
-  "textInput--label-floated": "_textInput--label-floated_14l3m_49",
-  textInput__inner: p,
-  textInput__leadingIcon: u,
-  textInput__trailingIcon: l,
-  textInput__counter: I,
-  "textInput--size-small": "_textInput--size-small_14l3m_107",
-  "textInput--size-medium": "_textInput--size-medium_14l3m_123",
-  "textInput--size-large": "_textInput--size-large_14l3m_143",
-  "textInput--has-leading-icon": "_textInput--has-leading-icon_14l3m_164",
-  "textInput--invalid": "_textInput--invalid_14l3m_182"
+import './TextInput.css';const t = {
+  "text-input": "_text-input_ikss5_13",
+  "text-input__row": "_text-input__row_ikss5_19",
+  "text-input__field": "_text-input__field_ikss5_25",
+  "text-input__trailing-action": "_text-input__trailing-action_ikss5_32",
+  "text-input__wrapper": "_text-input__wrapper_ikss5_42",
+  "text-input__input": "_text-input__input_ikss5_53",
+  "text-input__label": "_text-input__label_ikss5_64",
+  "text-input--label-floated": "_text-input--label-floated_ikss5_84",
+  "text-input__inner": "_text-input__inner_ikss5_91",
+  "text-input__leading-icon": "_text-input__leading-icon_ikss5_122",
+  "text-input__trailing-icon": "_text-input__trailing-icon_ikss5_122",
+  "text-input__footer": "_text-input__footer_ikss5_135",
+  "text-input__footer-message": "_text-input__footer-message_ikss5_141",
+  "text-input__counter": "_text-input__counter_ikss5_145",
+  "text-input--size-small": "_text-input--size-small_ikss5_154",
+  "text-input--size-medium": "_text-input--size-medium_ikss5_173",
+  "text-input--size-large": "_text-input--size-large_ikss5_197",
+  "text-input--has-leading-icon": "_text-input--has-leading-icon_ikss5_221",
+  "text-input--invalid": "_text-input--invalid_ikss5_239"
 };
 export {
-  x as default,
-  t as textInput,
-  I as textInput__counter,
-  p as textInput__inner,
-  n as textInput__input,
-  e as textInput__label,
-  u as textInput__leadingIcon,
-  l as textInput__trailingIcon,
-  _ as textInput__wrapper
+  t as default
 };
 //# sourceMappingURL=TextInput.module.scss.js.map

package/dist/components/text-input/TextInput.module.scss.js.map

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

package/dist/components/thread-footer/ThreadFooter.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),p=require("../user-avatar/UserAvatar.cjs"),c=require("../button/Button.cjs"),N=require("../icon/Icon.cjs"),__b=require("@mattermost/compass-icons/components/reply-outline.js"),b=__b?.default??__b,a=require("./ThreadFooter.module.scss.cjs");function g({replyCount:t=3,avatars:l=[],badge:n="none",following:r=!1,lastReplyTime:i,onReply:h,onFollowToggle:u,hovered:_=!1,className:m="",...j}){const x=[a.default["thread-footer"],m].filter(Boolean).join(" "),o=3,d=l.slice(0,o),f=l.length>o?l.length-o:0;return e.jsx("div",{className:x,...j,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[n==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"],"aria-label":"Unread replies"}),n==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:"@"}),d.length>0&&e.jsxs("div",{className:a.default["thread-footer__avatars"],children:[d.map((s,v)=>e.jsx(p.default,{src:s.src,alt:s.alt,size:"20",className:a.default["thread-footer__avatar"]},v)),f>0&&e.jsxs("span",{className:a.default["thread-footer__avatar-overflow"],children:["+",f]})]}),d.length===0&&e.jsxs("div",{className:a.default["thread-footer__avatars"],children:[[0,1,2].map(s=>e.jsx("span",{className:a.default["thread-footer__avatar-placeholder"]},s)),e.jsx("span",{className:a.default["thread-footer__avatar-overflow"],children:"+2"})]})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(c.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],_?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:h,"aria-label":`${t} repl${t===1?"y":"ies"}`,leadingIcon:e.jsx(N.default,{size:"12",glyph:e.jsx(b,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[t," ",t===1?"reply":"replies"]})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(c.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],r?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:u,"aria-pressed":r,"aria-label":r?"Unfollow thread":"Follow thread",children:r?"Following":"Follow"}),r&&i&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:i})]})]})]})})}exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),z=require("../icon/Icon.cjs"),__B=require("@mattermost/compass-icons/components/reply-outline.js"),B=__B?.default??__B,g=require("../mention-badge/MentionBadge.cjs"),M=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs"),f=t=>`${t} ${t===1?"reply":"replies"}`,$=t=>`${t} mention${t===1?"":"s"}`;function w({replyCount:t=3,avatars:o=[],badge:r="none",mentionCount:l=1,following:s=!1,lastReplyTime:d,onReply:c,onFollowToggle:h,hovered:n=!1,className:_="",formatReplyCount:m=f,formatReplyLabel:j=f,formatMentionLabel:x=$,unreadLabel:p="Unread replies",followLabel:v="Follow",followingLabel:N="Following",followAriaLabel:q="Follow thread",unfollowAriaLabel:y="Unfollow thread",...b}){const F=[a.default["thread-footer"],s?a.default["thread-footer--following"]:"",n?a.default["thread-footer--hovered"]:"",_].filter(Boolean).join(" "),i=r==="mention"?x(l):r==="unread"?p:void 0;return e.jsx("div",{className:F,...b,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[i&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:i}),(r==="unread"||r==="mention")&&e.jsxs("div",{className:a.default["thread-footer__badge-container"],"aria-hidden":!0,children:[r==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"]}),r==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:e.jsx(g.default,{count:l,location:"channel",size:"medium"})})]}),o.length>0&&e.jsx(M.default,{avatars:o,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],n?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:c,"aria-label":j(t),leadingIcon:e.jsx(z.default,{size:"12",glyph:e.jsx(B,{})}),children:m(t)}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],s?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:h,"aria-pressed":s,"aria-label":s?y:q,children:s?N:v}),s&&d&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:d})]})]})]})})}exports.default=w;
 //# sourceMappingURL=ThreadFooter.cjs.map

package/dist/components/thread-footer/ThreadFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface AvatarData {\n  src: string;\n  alt: string;\n}\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars (first 3 shown, overflow as +N). */\n  avatars?: AvatarData[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown when following. */\n  lastReplyTime?: string;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [styles['thread-footer'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const MAX_VISIBLE = 3;\n  const visibleAvatars = avatars.slice(0, MAX_VISIBLE);\n  const overflowCount =\n    avatars.length > MAX_VISIBLE ? avatars.length - MAX_VISIBLE : 0;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        {/* Badge + Avatars */}\n        <div className={styles['thread-footer__avatars-group']}>\n          {badge === 'unread' && (\n            <span\n              className={styles['thread-footer__unread-dot']}\n              aria-label=\"Unread replies\"\n            />\n          )}\n          {badge === 'mention' && (\n            <span className={styles['thread-footer__mention-badge']}>@</span>\n          )}\n\n          {/* Avatar stack */}\n          {visibleAvatars.length > 0 && (\n            <div className={styles['thread-footer__avatars']}>\n              {visibleAvatars.map((av, i) => (\n                <UserAvatar\n                  key={i}\n                  src={av.src}\n                  alt={av.alt}\n                  size=\"20\"\n                  className={styles['thread-footer__avatar']}\n                />\n              ))}\n              {overflowCount > 0 && (\n                <span className={styles['thread-footer__avatar-overflow']}>\n                  +{overflowCount}\n                </span>\n              )}\n            </div>\n          )}\n\n          {/* Placeholder avatars when none provided */}\n          {visibleAvatars.length === 0 && (\n            <div className={styles['thread-footer__avatars']}>\n              {[0, 1, 2].map((i) => (\n                <span\n                  key={i}\n                  className={styles['thread-footer__avatar-placeholder']}\n                />\n              ))}\n              <span className={styles['thread-footer__avatar-overflow']}>\n                +2\n              </span>\n            </div>\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={`${replyCount} repl${replyCount === 1 ? 'y' : 'ies'}`}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {replyCount} {replyCount === 1 ? 'reply' : 'replies'}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? 'Unfollow thread' : 'Follow thread'}\n          >\n            {following ? 'Following' : 'Follow'}\n          </Button>\n\n          {/* Last reply time — visible when following */}\n          {following && lastReplyTime && (\n            <>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","MAX_VISIBLE","visibleAvatars","overflowCount","jsx","jsxs","av","i","UserAvatar","Button","Icon","ReplyOutlineIcon","Fragment"],"mappings":"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"}
+{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: ReactNode;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Visible reply count. Default: `{count} reply` / `{count} replies`. */\n  formatReplyCount?: (count: number) => ReactNode;\n  /** Accessible name for the reply button. Default: `{count} reply` / `{count} replies`. */\n  formatReplyLabel?: (count: number) => string;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"Unread replies\". */\n  unreadLabel?: ReactNode;\n  /** Visible follow button text when not following. Default: \"Follow\". */\n  followLabel?: ReactNode;\n  /** Visible follow button text when following. Default: \"Following\". */\n  followingLabel?: ReactNode;\n  /** Accessible name for the follow button when not following. Default: \"Follow thread\". */\n  followAriaLabel?: string;\n  /** Accessible name for the follow button when following. Default: \"Unfollow thread\". */\n  unfollowAriaLabel?: string;\n}\n\nconst defaultFormatReplies = (count: number) =>\n  `${count} ${count === 1 ? 'reply' : 'replies'}`;\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  formatReplyCount = defaultFormatReplies,\n  formatReplyLabel = defaultFormatReplies,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'Unread replies',\n  followLabel = 'Follow',\n  followingLabel = 'Following',\n  followAriaLabel = 'Follow thread',\n  unfollowAriaLabel = 'Unfollow thread',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? formatMentionLabel(mentionCount)\n      : badge === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={formatReplyLabel(replyCount)}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            {formatReplyCount(replyCount)}\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? unfollowAriaLabel : followAriaLabel}\n          >\n            {following ? followingLabel : followLabel}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatReplies","count","defaultFormatMentions","ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","formatReplyCount","formatReplyLabel","formatMentionLabel","unreadLabel","followLabel","followingLabel","followAriaLabel","unfollowAriaLabel","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"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"}

package/dist/components/thread-footer/ThreadFooter.css

@@ -0,0 +1 @@
+._thread-footer_1beph_13{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start}._thread-footer__inner_1beph_19{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s)}._thread-footer__avatars-group_1beph_25{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_1beph_30{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__badge-container_1beph_41{position:absolute;left:calc(var(--spacing-xxs) * -1);top:50%;transform:translate(-100%,-50%);display:flex;align-items:center;justify-content:flex-end}._thread-footer__unread-dot_1beph_50{display:block;width:8px;height:8px;border-radius:var(--radius-pill);background-color:var(--link-color)}._thread-footer__mention-badge_1beph_57{display:inline-flex}._thread-footer__buttons_1beph_60{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_1beph_65,._thread-footer__follow-btn_1beph_65{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_1beph_13 ._thread-footer__reply-btn_1beph_65[class*=button--emphasis-quaternary],._thread-footer_1beph_13 ._thread-footer__follow-btn_1beph_65:not(._thread-footer__follow-btn--following_1beph_68)[class*=button--emphasis-quaternary]{--button-fg: rgba(var(--center-channel-color-rgb), .75)}._thread-footer_1beph_13 ._thread-footer__reply-btn_1beph_65[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_1beph_13 ._thread-footer__follow-btn_1beph_65:not(._thread-footer__follow-btn--following_1beph_68)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_1beph_13 ._thread-footer__reply-btn--hovered_1beph_74[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_1beph_13 ._thread-footer__follow-btn--following_1beph_68[class*=button--emphasis-quaternary]{--button-fg: var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_1beph_13 ._thread-footer__follow-btn--following_1beph_68[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__divider_1beph_84{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_1beph_60:has(._thread-footer__follow-btn--following_1beph_68)>._thread-footer__divider_1beph_84:first-of-type,._thread-footer__buttons_1beph_60:has(._thread-footer__follow-btn--following_1beph_68)>._thread-footer__last-reply-group_1beph_97>._thread-footer__divider_1beph_84{opacity:0}._thread-footer__buttons_1beph_60:not(:has(._thread-footer__follow-btn--following_1beph_68)):has(._thread-footer__reply-btn_1beph_65:hover,._thread-footer__reply-btn--hovered_1beph_74,._thread-footer__reply-btn_1beph_65:focus-visible,._thread-footer__follow-btn_1beph_65:hover,._thread-footer__follow-btn_1beph_65:focus-visible)>._thread-footer__divider_1beph_84:first-of-type{opacity:0}._thread-footer__last-reply-group_1beph_97{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_1beph_116:hover ._thread-footer__last-reply-group_1beph_97,._thread-footer--following_1beph_116:focus-within ._thread-footer__last-reply-group_1beph_97,._thread-footer--following_1beph_116._thread-footer--hovered_1beph_116 ._thread-footer__last-reply-group_1beph_97{max-width:10rem;opacity:1}._thread-footer__last-reply_1beph_97{padding:var(--spacing-xxxs) var(--spacing-xs);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);white-space:nowrap}

package/dist/components/thread-footer/ThreadFooter.d.ts

@@ -1,20 +1,19 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
 export type ThreadFooterBadge = 'none' | 'unread' | 'mention';
-export interface AvatarData {
-    src: string;
-    alt: string;
-}
 export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
     /** Reply count. Default: 3. */
     replyCount?: number;
-    /** Participant avatars (first 3 shown, overflow as +N). */
-    avatars?: AvatarData[];
+    /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */
+    avatars?: UserAvatarGroupItem[];
     /** Badge variant. Default: None. */
     badge?: ThreadFooterBadge;
+    /** Shown when `badge` is Mention. Default: 1. */
+    mentionCount?: number;
     /** Whether the current user is following the thread. Default: false. */
     following?: boolean;
-    /** Last reply timestamp label. Shown when following. */
-    lastReplyTime?: string;
+    /** Last reply timestamp label. Shown on row hover when following. */
+    lastReplyTime?: ReactNode;
     /** Called when Reply is clicked. */
     onReply?: () => void;
     /** Called when Follow/Following is clicked. */
@@ -23,11 +22,27 @@ export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
     hovered?: boolean;
     /** Optional CSS class name. */
     className?: string;
+    /** Visible reply count. Default: `{count} reply` / `{count} replies`. */
+    formatReplyCount?: (count: number) => ReactNode;
+    /** Accessible name for the reply button. Default: `{count} reply` / `{count} replies`. */
+    formatReplyLabel?: (count: number) => string;
+    /** Visually hidden mention hint. Default: `{count} mention(s)`. */
+    formatMentionLabel?: (count: number) => ReactNode;
+    /** Visually hidden unread hint. Default: "Unread replies". */
+    unreadLabel?: ReactNode;
+    /** Visible follow button text when not following. Default: "Follow". */
+    followLabel?: ReactNode;
+    /** Visible follow button text when following. Default: "Following". */
+    followingLabel?: ReactNode;
+    /** Accessible name for the follow button when not following. Default: "Follow thread". */
+    followAriaLabel?: string;
+    /** Accessible name for the follow button when following. Default: "Unfollow thread". */
+    unfollowAriaLabel?: string;
 }
 /**
  * The Thread Footer is the reply summary bar at the bottom of a message. It shows
  * participants, reply count, follow state, and last-reply time — the information someone
  * needs to decide whether to dive in.
  */
-export default function ThreadFooter({ replyCount, avatars, badge, following, lastReplyTime, onReply, onFollowToggle, hovered, className, ...rest }: ThreadFooterProps): import("react/jsx-runtime").JSX.Element;
+export default function ThreadFooter({ replyCount, avatars, badge, mentionCount, following, lastReplyTime, onReply, onFollowToggle, hovered, className, formatReplyCount, formatReplyLabel, formatMentionLabel, unreadLabel, followLabel, followingLabel, followAriaLabel, unfollowAriaLabel, ...rest }: ThreadFooterProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThreadFooter.d.ts.map

package/dist/components/thread-footer/ThreadFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadFooter.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO5C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,UAAc,EACd,OAAY,EACZ,KAAc,EACd,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAkHnB"}
+{"version":3,"file":"ThreadFooter.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,8CAA8C,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAOD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,UAAc,EACd,OAAY,EACZ,KAAc,EACd,YAAgB,EAChB,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,gBAAuC,EACvC,gBAAuC,EACvC,kBAA0C,EAC1C,WAA8B,EAC9B,WAAsB,EACtB,cAA4B,EAC5B,eAAiC,EACjC,iBAAqC,EACrC,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAsGnB"}