@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.5

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

@@ -1,101 +1,102 @@
-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 { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { forwardRef as Z, useId as B, useRef as L, useCallback as r, useState as C } from "react";
+import { toKebab as P } from "../../utils/string.js";
 import t from "./TextInput.module.scss.js";
-const nt = Y(
+const it = Z(
   function({
-    className: C = "",
+    className: I = "",
     size: T = "medium",
     label: d,
     leadingIcon: p,
     trailingIcon: f,
-    invalid: x = !1,
-    maxLength: a,
+    invalid: v = !1,
+    maxLength: i,
     showCharacterCount: _ = !1,
     id: V,
-    value: I,
-    defaultValue: v,
+    value: m,
+    defaultValue: b,
     placeholder: z,
-    onFocus: i,
-    onBlur: u,
-    onChange: c,
+    onFocus: a,
+    onBlur: c,
+    onChange: u,
     disabled: $,
     readOnly: g,
-    ...k
-  }, s) {
-    const w = Z(), h = V ?? w, b = L(null), F = r(
+    "aria-describedby": k,
+    ...w
+  }, l) {
+    const F = B(), h = V ?? F, N = L(null), K = r(
       (e) => {
-        if (b.current = e, typeof s == "function") {
-          const R = s(e);
+        if (N.current = e, typeof l == "function") {
+          const R = l(e);
           return () => {
-            b.current = null, typeof R == "function" && R();
+            N.current = null, typeof R == "function" && R();
           };
         }
-        s && (s.current = e);
+        l && (l.current = e);
       },
-      [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(
+      [l]
+    ), s = m !== void 0, [S, U] = C(
+      b ?? ""
+    ), o = s ? m : S, q = o != null && o !== "", [A, y] = C(!1), D = A || q, E = r(
       (e) => {
-        N(!0), i == null || i(e);
+        y(!0), a == null || a(e);
       },
-      [i]
-    ), E = r(
+      [a]
+    ), G = r(
       (e) => {
-        N(!1), u == null || u(e);
+        y(!1), c == null || c(e);
       },
-      [u]
-    ), G = r(
+      [c]
+    ), H = r(
       (e) => {
-        l || S(e.target.value), c == null || c(e);
+        s || U(e.target.value), u == null || u(e);
       },
-      [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,
+      [s, u]
+    ), J = t[`text-input--size-${P(T)}`], M = v ? t["text-input--invalid"] : "", O = d != null && D ? t["text-input--label-floated"] : "", Q = p != null ? t["text-input--has-leading-icon"] : "", W = f != null ? t["text-input--has-trailing-icon"] : "", X = [
+      t["text-input"],
       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 }),
+      W,
+      I
+    ].filter(Boolean).join(" "), Y = typeof o == "string" ? o.length : 0, j = _ && i != null ? `${h}-counter` : void 0;
+    return /* @__PURE__ */ x("div", { className: X, children: [
+      /* @__PURE__ */ n("div", { className: t["text-input__wrapper"], children: /* @__PURE__ */ x("label", { className: t["text-input__inner"], children: [
+        d != null && /* @__PURE__ */ n("span", { className: t["text-input__label"], children: d }),
+        p != null && /* @__PURE__ */ n("span", { className: t["text-input__leading-icon"], children: p }),
         /* @__PURE__ */ n(
           "input",
           {
-            ref: F,
+            ref: K,
             id: h,
-            className: t.textInput__input,
-            value: l ? I : void 0,
-            defaultValue: l ? void 0 : v,
+            className: t["text-input__input"],
+            value: s ? m : void 0,
+            defaultValue: s ? void 0 : b,
             placeholder: z,
-            maxLength: a,
+            maxLength: i,
             disabled: $,
             readOnly: g,
-            "aria-invalid": x ? !0 : void 0,
-            "aria-describedby": y,
-            onFocus: D,
-            onBlur: E,
-            onChange: G,
-            ...k
+            "aria-invalid": v ? !0 : void 0,
+            "aria-describedby": [k, j].filter(Boolean).join(" ") || void 0,
+            onFocus: E,
+            onBlur: G,
+            onChange: H,
+            ...w
           }
         ),
-        f != null && /* @__PURE__ */ n("span", { className: t.textInput__trailingIcon, children: f })
+        f != null && /* @__PURE__ */ n("span", { className: t["text-input__trailing-icon"], children: f })
       ] }) }),
-      _ && a != null && /* @__PURE__ */ m(
+      _ && i != null && /* @__PURE__ */ x(
         "div",
         {
-          id: y,
-          className: t.textInput__counter,
+          id: j,
+          className: t["text-input__counter"],
           "aria-live": "polite",
           children: [
-            X,
+            Y,
             " / ",
-            a
+            i
           ]
         }
       )
@@ -103,6 +104,6 @@ const nt = Y(
   }
 );
 export {
-  nt as default
+  it 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} 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      '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 sizeClass = styles[`text-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? 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 ? styles['text-input--has-trailing-icon'] : '';\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\n    return (\n      <div className={rootClass}>\n        <div className={styles['text-input__wrapper']}>\n          <label className={styles['text-input__inner']}>\n            {label != null && (\n              <span className={styles['text-input__label']}>{label}</span>\n            )}\n            {leadingIcon != null && (\n              <span className={styles['text-input__leading-icon']}>\n                {leadingIcon}\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={invalid ? true : undefined}\n              aria-describedby={\n                [describedBy, counterId].filter(Boolean).join(' ') || undefined\n              }\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {trailingIcon != null && (\n              <span className={styles['text-input__trailing-icon']}>\n                {trailingIcon}\n              </span>\n            )}\n          </label>\n        </div>\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\nexport default TextInput;\n"],"names":["TextInput","forwardRef","className","size","label","leadingIcon","trailingIcon","invalid","maxLength","showCharacterCount","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","describedBy","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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"}

package/dist/components/text-input/TextInput.module.css

@@ -1 +1 @@
-._textInput_14l3m_2{display:flex;flex-direction:column;width:100%}._textInput__wrapper_14l3m_7{position:relative;display:flex;flex-direction:column;min-height:0;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);cursor:text}._textInput_14l3m_2:has(._textInput__input_14l3m_18:not(:disabled)):hover:not(:focus-within) ._textInput__wrapper_14l3m_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._textInput_14l3m_2:has(._textInput__input_14l3m_18:focus-visible) ._textInput__wrapper_14l3m_7{box-shadow:inset 0 0 0 1px var(--button-bg),0 0 0 1px var(--button-bg)}._textInput_14l3m_2:has(._textInput__input_14l3m_18:disabled) ._textInput__wrapper_14l3m_7{background-color:var(--center-channel-bg);opacity:.56;cursor:not-allowed}._textInput__label_14l3m_29{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);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:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textInput__inner_14l3m_56{display:flex;align-items:center;flex:1;width:100%;min-width:0;box-sizing:border-box;margin:0;cursor:text}._textInput__input_14l3m_18{flex:1 1 0;width:100%;min-width:0;min-height:100%;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._textInput__input_14l3m_18:focus{outline:none}._textInput__input_14l3m_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._textInput__leadingIcon_14l3m_87,._textInput__trailingIcon_14l3m_87{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._textInput__leadingIcon_14l3m_87{margin-right:var(--spacing-xs)}._textInput__trailingIcon_14l3m_87{margin-left:var(--spacing-xs)}._textInput__counter_14l3m_100{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._textInput--size-small_14l3m_107 ._textInput__wrapper_14l3m_7{min-height:32px}._textInput--size-small_14l3m_107 ._textInput__inner_14l3m_56{padding:var(--spacing-xs) var(--spacing-m)}._textInput--size-small_14l3m_107 ._textInput__input_14l3m_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._textInput--size-small_14l3m_107._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._textInput--size-medium_14l3m_123 ._textInput__wrapper_14l3m_7{min-height:40px}._textInput--size-medium_14l3m_123 ._textInput__inner_14l3m_56{padding:var(--spacing-s) var(--spacing-l)}._textInput--size-medium_14l3m_123 ._textInput__input_14l3m_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._textInput--size-medium_14l3m_123 ._textInput__label_14l3m_29{font-size:var(--font-size-100);left:var(--spacing-m)}._textInput--size-medium_14l3m_123._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._textInput--size-large_14l3m_143 ._textInput__wrapper_14l3m_7{min-height:48px}._textInput--size-large_14l3m_143 ._textInput__inner_14l3m_56{padding:var(--spacing-m) var(--spacing-l)}._textInput--size-large_14l3m_143 ._textInput__input_14l3m_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._textInput--size-large_14l3m_143 ._textInput__label_14l3m_29{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._textInput--size-large_14l3m_143._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._textInput--has-leading-icon_14l3m_164 ._textInput__label_14l3m_29{left:var(--spacing-xxxl)}._textInput--has-leading-icon_14l3m_164._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{left:var(--spacing-xs)}._textInput--has-leading-icon_14l3m_164._textInput--size-medium_14l3m_123 ._textInput__label_14l3m_29,._textInput--has-leading-icon_14l3m_164._textInput--size-large_14l3m_143 ._textInput__label_14l3m_29{left:36px}._textInput--has-leading-icon_14l3m_164._textInput--size-medium_14l3m_123._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29,._textInput--has-leading-icon_14l3m_164._textInput--size-large_14l3m_143._textInput--label-floated_14l3m_49 ._textInput__label_14l3m_29{left:var(--spacing-m)}._textInput_14l3m_2:has(._textInput__input_14l3m_18:focus-visible) ._textInput__label_14l3m_29{color:var(--button-bg)}._textInput_14l3m_2:has(._textInput__label_14l3m_29):not(._textInput--label-floated_14l3m_49) ._textInput__input_14l3m_18::placeholder{color:transparent}._textInput--invalid_14l3m_182 ._textInput__wrapper_14l3m_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._textInput--invalid_14l3m_182:has(._textInput__input_14l3m_18:focus-visible) ._textInput__wrapper_14l3m_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._textInput--invalid_14l3m_182 ._textInput__label_14l3m_29{color:var(--error-text, var(--color-danger))}._textInput--invalid_14l3m_182:has(._textInput__input_14l3m_18:focus-visible) ._textInput__label_14l3m_29{color:var(--error-text, var(--color-danger))}
+._text-input_16ayx_2{display:flex;flex-direction:column;width:100%}._text-input__wrapper_16ayx_7{position:relative;display:flex;flex-direction:column;min-height:0;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);cursor:text}._text-input_16ayx_2:has(._text-input__input_16ayx_18:not(:disabled)):hover:not(:focus-within) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:focus-visible) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:disabled) ._text-input__wrapper_16ayx_7{background-color:var(--center-channel-bg);opacity:.56;cursor:not-allowed}._text-input__label_16ayx_29{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);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:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-input__inner_16ayx_56{display:flex;align-items:center;flex:1;width:100%;min-width:0;box-sizing:border-box;margin:0;cursor:text}._text-input__input_16ayx_18{flex:1 1 0;width:100%;min-width:0;min-height:100%;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._text-input__input_16ayx_18:focus{outline:none}._text-input__input_16ayx_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._text-input__leading-icon_16ayx_87,._text-input__trailing-icon_16ayx_87{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._text-input__leading-icon_16ayx_87{margin-right:var(--spacing-xs)}._text-input__trailing-icon_16ayx_87{margin-left:var(--spacing-xs)}._text-input__counter_16ayx_100{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-input--size-small_16ayx_107 ._text-input__wrapper_16ayx_7{min-height:32px}._text-input--size-small_16ayx_107 ._text-input__inner_16ayx_56{padding:var(--spacing-xs) var(--spacing-m)}._text-input--size-small_16ayx_107 ._text-input__input_16ayx_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._text-input--size-small_16ayx_107._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--size-medium_16ayx_123 ._text-input__wrapper_16ayx_7{min-height:40px}._text-input--size-medium_16ayx_123 ._text-input__inner_16ayx_56{padding:var(--spacing-s) var(--spacing-l)}._text-input--size-medium_16ayx_123 ._text-input__input_16ayx_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-input--size-medium_16ayx_123 ._text-input__label_16ayx_29{font-size:var(--font-size-100);left:var(--spacing-m)}._text-input--size-medium_16ayx_123._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--size-large_16ayx_143 ._text-input__wrapper_16ayx_7{min-height:48px}._text-input--size-large_16ayx_143 ._text-input__inner_16ayx_56{padding:var(--spacing-m) var(--spacing-l)}._text-input--size-large_16ayx_143 ._text-input__input_16ayx_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-input--size-large_16ayx_143 ._text-input__label_16ayx_29{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._text-input--size-large_16ayx_143._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--has-leading-icon_16ayx_164 ._text-input__label_16ayx_29{left:var(--spacing-xxxl)}._text-input--has-leading-icon_16ayx_164._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{left:var(--spacing-xs)}._text-input--has-leading-icon_16ayx_164._text-input--size-medium_16ayx_123 ._text-input__label_16ayx_29,._text-input--has-leading-icon_16ayx_164._text-input--size-large_16ayx_143 ._text-input__label_16ayx_29{left:36px}._text-input--has-leading-icon_16ayx_164._text-input--size-medium_16ayx_123._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29,._text-input--has-leading-icon_16ayx_164._text-input--size-large_16ayx_143._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{left:var(--spacing-m)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:focus-visible) ._text-input__label_16ayx_29{color:var(--button-bg)}._text-input_16ayx_2:has(._text-input__label_16ayx_29):not(._text-input--label-floated_16ayx_49) ._text-input__input_16ayx_18::placeholder{color:transparent}._text-input--invalid_16ayx_182 ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182:has(._text-input__input_16ayx_18:focus-visible) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182 ._text-input__label_16ayx_29{color:var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182:has(._text-input__input_16ayx_18:focus-visible) ._text-input__label_16ayx_29{color:var(--error-text, var(--color-danger))}

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.module.css');const t={"text-input":"_text-input_16ayx_2","text-input__wrapper":"_text-input__wrapper_16ayx_7","text-input__input":"_text-input__input_16ayx_18","text-input__label":"_text-input__label_16ayx_29","text-input--label-floated":"_text-input--label-floated_16ayx_49","text-input__inner":"_text-input__inner_16ayx_56","text-input__leading-icon":"_text-input__leading-icon_16ayx_87","text-input__trailing-icon":"_text-input__trailing-icon_16ayx_87","text-input__counter":"_text-input__counter_16ayx_100","text-input--size-small":"_text-input--size-small_16ayx_107","text-input--size-medium":"_text-input--size-medium_16ayx_123","text-input--size-large":"_text-input--size-large_16ayx_143","text-input--has-leading-icon":"_text-input--has-leading-icon_16ayx_164","text-input--invalid":"_text-input--invalid_16ayx_182"};exports.default=t;
 //# sourceMappingURL=TextInput.module.scss.cjs.map

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

@@ -1,28 +1,20 @@
-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.module.css';const t = {
+  "text-input": "_text-input_16ayx_2",
+  "text-input__wrapper": "_text-input__wrapper_16ayx_7",
+  "text-input__input": "_text-input__input_16ayx_18",
+  "text-input__label": "_text-input__label_16ayx_29",
+  "text-input--label-floated": "_text-input--label-floated_16ayx_49",
+  "text-input__inner": "_text-input__inner_16ayx_56",
+  "text-input__leading-icon": "_text-input__leading-icon_16ayx_87",
+  "text-input__trailing-icon": "_text-input__trailing-icon_16ayx_87",
+  "text-input__counter": "_text-input__counter_16ayx_100",
+  "text-input--size-small": "_text-input--size-small_16ayx_107",
+  "text-input--size-medium": "_text-input--size-medium_16ayx_123",
+  "text-input--size-large": "_text-input--size-large_16ayx_143",
+  "text-input--has-leading-icon": "_text-input--has-leading-icon_16ayx_164",
+  "text-input--invalid": "_text-input--invalid_16ayx_182"
 };
 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/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"),j=require("../icon/Icon.cjs"),__x=require("@mattermost/compass-icons/components/reply-outline.js"),x=__x?.default??__x,p=require("../mention-badge/MentionBadge.cjs"),v=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs");function N({replyCount:r=3,avatars:d=[],badge:s="none",mentionCount:l=1,following:t=!1,lastReplyTime:o,onReply:f,onFollowToggle:c,hovered:i=!1,className:h="",..._}){const m=[a.default["thread-footer"],t?a.default["thread-footer--following"]:"",i?a.default["thread-footer--hovered"]:"",h].filter(Boolean).join(" "),n=s==="mention"?`${l} mention${l===1?"":"s"}`:s==="unread"?"Unread replies":void 0;return e.jsx("div",{className:m,..._,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[n&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:n}),s==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"],"aria-hidden":!0}),s==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],"aria-hidden":!0,children:e.jsx(p.default,{count:l,location:"channel",size:"medium"})}),d.length>0&&e.jsx(v.default,{avatars:d,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"],i?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:f,"aria-label":`${r} repl${r===1?"y":"ies"}`,leadingIcon:e.jsx(j.default,{size:"12",glyph:e.jsx(x,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[r," ",r===1?"reply":"replies"]})}),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"],t?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:c,"aria-pressed":t,"aria-label":t?"Unfollow thread":"Follow thread",children:t?"Following":"Follow"}),t&&o&&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:o})]})]})]})})}exports.default=N;
 //# 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 } 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?: 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  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\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      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'Unread replies'\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' && (\n            <span\n              className={styles['thread-footer__unread-dot']}\n              aria-hidden\n            />\n          )}\n          {badge === 'mention' && (\n            <span\n              className={styles['thread-footer__mention-badge']}\n              aria-hidden\n            >\n              <MentionBadge\n                count={mentionCount}\n                location=\"channel\"\n                size=\"medium\"\n              />\n            </span>\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={`${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 — 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":["ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"+ZAwCA,SAAwBA,EAAa,CACnC,WAAAC,EAAa,EACb,QAAAC,EAAU,CAAA,EACV,MAAAC,EAAQ,OACR,aAAAC,EAAe,EACf,UAAAC,EAAY,GACZ,cAAAC,EACA,QAAAC,EACA,eAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBR,EAAYQ,EAAAA,QAAO,0BAA0B,EAAI,GACjDJ,EAAUI,EAAAA,QAAO,wBAAwB,EAAI,GAC7CH,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELI,EACJX,IAAU,UACN,GAAGC,CAAY,WAAWA,IAAiB,EAAI,GAAK,GAAG,GACvDD,IAAU,SACR,iBACA,OAER,OACEY,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAY,GAAGD,EAC7B,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,8BAA8B,EAClD,SAAA,CAAAC,SACE,OAAA,CAAK,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAAC,EACH,EAEDX,IAAU,UACTY,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAAA,QAAO,2BAA2B,EAC7C,cAAW,EAAA,CAAA,EAGdV,IAAU,WACTY,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,cAAW,GAEX,SAAAE,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAOb,EACP,SAAS,UACT,KAAK,QAAA,CAAA,CACP,CAAA,EAIHF,EAAQ,OAAS,GAChBa,EAAAA,IAACG,EAAAA,SAAgB,QAAAhB,EAAkB,IAAK,EAAG,KAAK,IAAA,CAAK,CAAA,EAEzD,EAGAc,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,wBAAwB,EAE7C,SAAA,CAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,CACTN,EAAAA,QAAO,0BAA0B,EACjCJ,EAAUI,EAAAA,QAAO,mCAAmC,EAAI,EAAA,EAEvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASN,EACT,aAAY,GAAGN,CAAU,QAAQA,IAAe,EAAI,IAAM,KAAK,GAC/D,kBAAcmB,UAAA,CAAK,KAAK,KAAK,MAAOL,MAACM,IAAiB,EAAI,EAE1D,SAAAL,EAAAA,KAAC,OAAA,CAAK,UAAWH,UAAO,0BAA0B,EAC/C,SAAA,CAAAZ,EAAW,IAAEA,IAAe,EAAI,QAAU,SAAA,CAAA,CAC7C,CAAA,CAAA,QAGD,MAAA,CAAI,UAAWY,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,EAG9DE,EAAAA,IAACI,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,CACTN,EAAAA,QAAO,2BAA2B,EAClCR,EAAYQ,EAAAA,QAAO,sCAAsC,EAAI,EAAA,EAE5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASL,EACT,eAAcH,EACd,aAAYA,EAAY,kBAAoB,gBAE3C,WAAY,YAAc,QAAA,CAAA,EAI5BA,GAAaC,GACZU,EAAAA,KAAC,OAAI,UAAWH,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAE,MAAC,OAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,QAC7D,OAAA,CAAK,UAAWA,EAAAA,QAAO,2BAA2B,EAChD,SAAAP,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CACF,CAEJ"}

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

@@ -1,19 +1,18 @@
 import { HTMLAttributes } 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. */
+    /** Last reply timestamp label. Shown on row hover when following. */
     lastReplyTime?: string;
     /** Called when Reply is clicked. */
     onReply?: () => void;
@@ -29,5 +28,5 @@ export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
  * 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, ...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,MAAM,OAAO,CAAC;AAK5C,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,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,YAAgB,EAChB,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAuGnB"}

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

@@ -1,103 +1,100 @@
-import { jsx as a, jsxs as r, Fragment as g } from "react/jsx-runtime";
-import w from "../user-avatar/UserAvatar.js";
-import _ from "../button/Button.js";
-import y from "../icon/Icon.js";
-import __j from "@mattermost/compass-icons/components/reply-outline.js";const j=__j&&__j.default?__j.default:__j;
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import c from "../button/Button.js";
+import N from "../icon/Icon.js";
+import __v from "@mattermost/compass-icons/components/reply-outline.js";const v=__v&&__v.default?__v.default:__v;
+import b from "../mention-badge/MentionBadge.js";
+import y from "../user-avatar-group/UserAvatarGroup.js";
 import e from "./ThreadFooter.module.scss.js";
-function U({
+function w({
   replyCount: t = 3,
-  avatars: s = [],
-  badge: d = "none",
-  following: o = !1,
-  lastReplyTime: h,
+  avatars: l = [],
+  badge: s = "none",
+  mentionCount: i = 1,
+  following: a = !1,
+  lastReplyTime: d,
   onReply: m,
   onFollowToggle: f,
-  hovered: p = !1,
-  className: v = "",
-  ...N
+  hovered: n = !1,
+  className: _ = "",
+  ...p
 }) {
-  const b = [e["thread-footer"], v].filter(Boolean).join(" "), n = 3, i = s.slice(0, n), c = s.length > n ? s.length - n : 0;
-  return /* @__PURE__ */ a("div", { className: b, ...N, children: /* @__PURE__ */ r("div", { className: e["thread-footer__inner"], children: [
-    /* @__PURE__ */ r("div", { className: e["thread-footer__avatars-group"], children: [
-      d === "unread" && /* @__PURE__ */ a(
+  const u = [
+    e["thread-footer"],
+    a ? e["thread-footer--following"] : "",
+    n ? e["thread-footer--hovered"] : "",
+    _
+  ].filter(Boolean).join(" "), h = s === "mention" ? `${i} mention${i === 1 ? "" : "s"}` : s === "unread" ? "Unread replies" : void 0;
+  return /* @__PURE__ */ r("div", { className: u, ...p, children: /* @__PURE__ */ o("div", { className: e["thread-footer__inner"], children: [
+    /* @__PURE__ */ o("div", { className: e["thread-footer__avatars-group"], children: [
+      h && /* @__PURE__ */ r("span", { className: e["thread-footer__status-hint"], children: h }),
+      s === "unread" && /* @__PURE__ */ r(
         "span",
         {
           className: e["thread-footer__unread-dot"],
-          "aria-label": "Unread replies"
+          "aria-hidden": !0
         }
       ),
-      d === "mention" && /* @__PURE__ */ a("span", { className: e["thread-footer__mention-badge"], children: "@" }),
-      i.length > 0 && /* @__PURE__ */ r("div", { className: e["thread-footer__avatars"], children: [
-        i.map((l, u) => /* @__PURE__ */ a(
-          w,
-          {
-            src: l.src,
-            alt: l.alt,
-            size: "20",
-            className: e["thread-footer__avatar"]
-          },
-          u
-        )),
-        c > 0 && /* @__PURE__ */ r("span", { className: e["thread-footer__avatar-overflow"], children: [
-          "+",
-          c
-        ] })
-      ] }),
-      i.length === 0 && /* @__PURE__ */ r("div", { className: e["thread-footer__avatars"], children: [
-        [0, 1, 2].map((l) => /* @__PURE__ */ a(
-          "span",
-          {
-            className: e["thread-footer__avatar-placeholder"]
-          },
-          l
-        )),
-        /* @__PURE__ */ a("span", { className: e["thread-footer__avatar-overflow"], children: "+2" })
-      ] })
+      s === "mention" && /* @__PURE__ */ r(
+        "span",
+        {
+          className: e["thread-footer__mention-badge"],
+          "aria-hidden": !0,
+          children: /* @__PURE__ */ r(
+            b,
+            {
+              count: i,
+              location: "channel",
+              size: "medium"
+            }
+          )
+        }
+      ),
+      l.length > 0 && /* @__PURE__ */ r(y, { avatars: l, max: 3, size: "20" })
     ] }),
-    /* @__PURE__ */ r("div", { className: e["thread-footer__buttons"], children: [
-      /* @__PURE__ */ a(
-        _,
+    /* @__PURE__ */ o("div", { className: e["thread-footer__buttons"], children: [
+      /* @__PURE__ */ r(
+        c,
         {
           emphasis: "quaternary",
           size: "x-small",
           className: [
             e["thread-footer__reply-btn"],
-            p ? e["thread-footer__reply-btn--hovered"] : ""
+            n ? e["thread-footer__reply-btn--hovered"] : ""
           ].filter(Boolean).join(" "),
           onClick: m,
           "aria-label": `${t} repl${t === 1 ? "y" : "ies"}`,
-          leadingIcon: /* @__PURE__ */ a(y, { size: "12", glyph: /* @__PURE__ */ a(j, {}) }),
-          children: /* @__PURE__ */ r("span", { className: e["thread-footer__btn-label"], children: [
+          leadingIcon: /* @__PURE__ */ r(N, { size: "12", glyph: /* @__PURE__ */ r(v, {}) }),
+          children: /* @__PURE__ */ o("span", { className: e["thread-footer__btn-label"], children: [
             t,
             " ",
             t === 1 ? "reply" : "replies"
           ] })
         }
       ),
-      /* @__PURE__ */ a("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
-      /* @__PURE__ */ a(
-        _,
+      /* @__PURE__ */ r("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
+      /* @__PURE__ */ r(
+        c,
         {
           emphasis: "quaternary",
           size: "x-small",
           className: [
             e["thread-footer__follow-btn"],
-            o ? e["thread-footer__follow-btn--following"] : ""
+            a ? e["thread-footer__follow-btn--following"] : ""
           ].filter(Boolean).join(" "),
           onClick: f,
-          "aria-pressed": o,
-          "aria-label": o ? "Unfollow thread" : "Follow thread",
-          children: o ? "Following" : "Follow"
+          "aria-pressed": a,
+          "aria-label": a ? "Unfollow thread" : "Follow thread",
+          children: a ? "Following" : "Follow"
         }
       ),
-      o && h && /* @__PURE__ */ r(g, { children: [
-        /* @__PURE__ */ a("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
-        /* @__PURE__ */ a("span", { className: e["thread-footer__last-reply"], children: h })
+      a && d && /* @__PURE__ */ o("div", { className: e["thread-footer__last-reply-group"], children: [
+        /* @__PURE__ */ r("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
+        /* @__PURE__ */ r("span", { className: e["thread-footer__last-reply"], children: d })
       ] })
     ] })
   ] }) });
 }
 export {
-  U as default
+  w as default
 };
 //# sourceMappingURL=ThreadFooter.js.map