@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.11

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

@@ -0,0 +1,96 @@
+import { jsx as r, jsxs as t } 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 I({
+  replyCount: s = 3,
+  avatars: l = [],
+  badge: a = "none",
+  mentionCount: i = 1,
+  following: o = !1,
+  lastReplyTime: n,
+  onReply: m,
+  onFollowToggle: f,
+  hovered: d = !1,
+  className: _ = "",
+  ...p
+}) {
+  const u = [
+    e["thread-footer"],
+    o ? e["thread-footer--following"] : "",
+    d ? e["thread-footer--hovered"] : "",
+    _
+  ].filter(Boolean).join(" "), h = a === "mention" ? `${i} mention${i === 1 ? "" : "s"}` : a === "unread" ? "Unread replies" : void 0;
+  return /* @__PURE__ */ r("div", { className: u, ...p, children: /* @__PURE__ */ t("div", { className: e["thread-footer__inner"], children: [
+    /* @__PURE__ */ t("div", { className: e["thread-footer__avatars-group"], children: [
+      h && /* @__PURE__ */ r("span", { className: e["thread-footer__status-hint"], children: h }),
+      (a === "unread" || a === "mention") && /* @__PURE__ */ t(
+        "div",
+        {
+          className: e["thread-footer__badge-container"],
+          "aria-hidden": !0,
+          children: [
+            a === "unread" && /* @__PURE__ */ r("span", { className: e["thread-footer__unread-dot"] }),
+            a === "mention" && /* @__PURE__ */ r("span", { className: e["thread-footer__mention-badge"], children: /* @__PURE__ */ r(
+              b,
+              {
+                count: i,
+                location: "channel",
+                size: "medium"
+              }
+            ) })
+          ]
+        }
+      ),
+      l.length > 0 && /* @__PURE__ */ r(y, { avatars: l, max: 3, size: "20" })
+    ] }),
+    /* @__PURE__ */ t("div", { className: e["thread-footer__buttons"], children: [
+      /* @__PURE__ */ r(
+        c,
+        {
+          emphasis: "quaternary",
+          size: "x-small",
+          className: [
+            e["thread-footer__reply-btn"],
+            d ? e["thread-footer__reply-btn--hovered"] : ""
+          ].filter(Boolean).join(" "),
+          onClick: m,
+          "aria-label": `${s} repl${s === 1 ? "y" : "ies"}`,
+          leadingIcon: /* @__PURE__ */ r(N, { size: "12", glyph: /* @__PURE__ */ r(v, {}) }),
+          children: /* @__PURE__ */ t("span", { className: e["thread-footer__btn-label"], children: [
+            s,
+            " ",
+            s === 1 ? "reply" : "replies"
+          ] })
+        }
+      ),
+      /* @__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"] : ""
+          ].filter(Boolean).join(" "),
+          onClick: f,
+          "aria-pressed": o,
+          "aria-label": o ? "Unfollow thread" : "Follow thread",
+          children: o ? "Following" : "Follow"
+        }
+      ),
+      o && n && /* @__PURE__ */ t("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: n })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  I as default
+};
+//# sourceMappingURL=ThreadFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadFooter.js","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' || 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={`${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":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadFooter.css');const e={"thread-footer":"_thread-footer_b5kji_2","thread-footer__inner":"_thread-footer__inner_b5kji_8","thread-footer__avatars-group":"_thread-footer__avatars-group_b5kji_14","thread-footer__status-hint":"_thread-footer__status-hint_b5kji_19","thread-footer__badge-container":"_thread-footer__badge-container_b5kji_30","thread-footer__unread-dot":"_thread-footer__unread-dot_b5kji_39","thread-footer__mention-badge":"_thread-footer__mention-badge_b5kji_46","thread-footer__buttons":"_thread-footer__buttons_b5kji_49","thread-footer__reply-btn":"_thread-footer__reply-btn_b5kji_54","thread-footer__follow-btn":"_thread-footer__follow-btn_b5kji_54","thread-footer__follow-btn--following":"_thread-footer__follow-btn--following_b5kji_57","thread-footer__reply-btn--hovered":"_thread-footer__reply-btn--hovered_b5kji_63","thread-footer__btn-label":"_thread-footer__btn-label_b5kji_73","thread-footer__divider":"_thread-footer__divider_b5kji_80","thread-footer__last-reply-group":"_thread-footer__last-reply-group_b5kji_93","thread-footer--following":"_thread-footer--following_b5kji_112","thread-footer--hovered":"_thread-footer--hovered_b5kji_112","thread-footer__last-reply":"_thread-footer__last-reply_b5kji_93"};exports.default=e;
+//# sourceMappingURL=ThreadFooter.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadFooter.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,24 @@
+import './ThreadFooter.css';const _ = {
+  "thread-footer": "_thread-footer_b5kji_2",
+  "thread-footer__inner": "_thread-footer__inner_b5kji_8",
+  "thread-footer__avatars-group": "_thread-footer__avatars-group_b5kji_14",
+  "thread-footer__status-hint": "_thread-footer__status-hint_b5kji_19",
+  "thread-footer__badge-container": "_thread-footer__badge-container_b5kji_30",
+  "thread-footer__unread-dot": "_thread-footer__unread-dot_b5kji_39",
+  "thread-footer__mention-badge": "_thread-footer__mention-badge_b5kji_46",
+  "thread-footer__buttons": "_thread-footer__buttons_b5kji_49",
+  "thread-footer__reply-btn": "_thread-footer__reply-btn_b5kji_54",
+  "thread-footer__follow-btn": "_thread-footer__follow-btn_b5kji_54",
+  "thread-footer__follow-btn--following": "_thread-footer__follow-btn--following_b5kji_57",
+  "thread-footer__reply-btn--hovered": "_thread-footer__reply-btn--hovered_b5kji_63",
+  "thread-footer__btn-label": "_thread-footer__btn-label_b5kji_73",
+  "thread-footer__divider": "_thread-footer__divider_b5kji_80",
+  "thread-footer__last-reply-group": "_thread-footer__last-reply-group_b5kji_93",
+  "thread-footer--following": "_thread-footer--following_b5kji_112",
+  "thread-footer--hovered": "_thread-footer--hovered_b5kji_112",
+  "thread-footer__last-reply": "_thread-footer__last-reply_b5kji_93"
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=ThreadFooter.module.scss.js.map

package/dist/components/thread-footer/ThreadFooter.module.scss.js.map

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ThreadFooter.cjs");exports.ThreadFooter=e.default;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,9 @@
+export { default as ThreadFooter } from './ThreadFooter';
+export type { ThreadFooterProps } from './ThreadFooter';
+export type { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
+/** @deprecated Use `UserAvatarGroupItem` (`key`, `name`, optional `src`). */
+export interface AvatarData {
+    src: string;
+    alt: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAE9E,6EAA6E;AAC7E,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb"}

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

@@ -0,0 +1,5 @@
+import { default as r } from "./ThreadFooter.js";
+export {
+  r as ThreadFooter
+};
+//# sourceMappingURL=index.js.map

package/dist/components/thread-footer/index.js.map

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

package/dist/components/thread-list-item/ThreadListItem.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__I=require("@mattermost/compass-icons/components/dots-horizontal.js"),I=__I?.default??__I,q=require("../icon/Icon.cjs"),A=require("../icon-button/IconButton.cjs"),b=require("../tag/Tag.cjs"),R=require("../mention-badge/MentionBadge.cjs"),M=require("../unread-badge/UnreadBadge.cjs"),S=require("../user-avatar-group/UserAvatarGroup.cjs"),t=require("./ThreadListItem.module.scss.cjs"),B=[{key:"leonard",name:"Leonard Riley"},{key:"aiko",name:"Aiko Tan"},{key:"arjun",name:"Arjun Patel"},{key:"marco",name:"Marco Rinaldi"},{key:"sofia",name:"Sofia Bauer"}];function D({active:l=!1,badge:i="none",mentionCount:n=1,authorName:f="Martin Kraft",channelLabel:p="ENTERPRISE TEAM",previewText:j="Do we have a guideline for what minimum width we should support in the system console? I know that…",timestamp:x="5 mins ago",replyCount:d=3,participants:o,threadTitle:u,className:N="",onClick:a,onMenuClick:c}){const m=o===void 0?B:o,v=m.length>0,h=!l&&(i==="unread"||i==="mention"),g=d===1?"1 reply":`${d} replies`,y=[t.default["thread-list-item"],l?t.default["thread-list-item--active"]:"",N].filter(Boolean).join(" "),_=i==="mention"?`${n} mention${n===1?"":"s"}`:i==="unread"?"unread":void 0,w=s=>{const r=window.getSelection();(r==null?void 0:r.type)==="Range"&&r.toString().length>0&&s.currentTarget.contains(r.getRangeAt(0).commonAncestorContainer)||a==null||a()},T=s=>{s.key!=="Enter"&&s.key!==" "||(s.preventDefault(),a==null||a())};return e.jsxs("div",{className:y,children:[e.jsx("div",{className:t.default["thread-list-item__main"],role:a?"button":void 0,tabIndex:a?0:void 0,onClick:a?w:void 0,onKeyDown:a?T:void 0,"aria-current":l?!0:void 0,children:e.jsx("div",{className:t.default["thread-list-item__thread"],children:e.jsxs("div",{className:t.default["thread-list-item__container"],children:[e.jsxs("div",{className:t.default["thread-list-item__post-content"],children:[e.jsxs("div",{className:t.default["thread-list-item__gutter"],children:[h&&i==="unread"&&e.jsx("span",{className:t.default["thread-list-item__unread-gutter"],"aria-hidden":!0,children:e.jsx(M.default,{className:t.default["thread-list-item__unread-badge"],context:"icon-button"})}),h&&i==="mention"&&e.jsx("span",{className:t.default["thread-list-item__mention-gutter"],"aria-hidden":!0,children:e.jsx(R.default,{count:n,location:"channel",size:"medium"})})]}),e.jsx("div",{className:t.default["thread-list-item__post-body"],children:e.jsxs("div",{className:t.default["thread-list-item__post-body-content"],children:[e.jsxs("div",{className:t.default["thread-list-item__name-row"],children:[e.jsxs("div",{className:t.default["thread-list-item__name-group"],children:[e.jsx("span",{className:t.default["thread-list-item__author"],children:f}),e.jsx(b.default,{casing:"all-caps",label:p}),_&&e.jsx("span",{className:t.default["thread-list-item__status-hint"],children:_})]}),e.jsx("span",{className:t.default["thread-list-item__timestamp"],children:x})]}),u!=null&&e.jsx("div",{className:t.default["thread-list-item__title-row"],children:e.jsx("p",{className:t.default["thread-list-item__title"],children:u})}),e.jsx("p",{className:t.default["thread-list-item__preview"],children:j})]})})]}),e.jsx("div",{className:t.default["thread-list-item__replies"],children:e.jsxs("div",{className:t.default["thread-list-item__replies-inner"],children:[v&&e.jsx(S.default,{avatars:m,className:t.default["thread-list-item__avatar-group"],max:3,size:"20"}),e.jsx("span",{className:t.default["thread-list-item__reply-count"],children:g})]})})]})})}),c&&e.jsx("div",{className:t.default["thread-list-item__actions"],children:e.jsx("span",{className:t.default["thread-list-item__menu-button"],children:e.jsx(A.default,{"aria-label":"Thread actions",icon:e.jsx(q.default,{size:"16",glyph:e.jsx(I,{})}),padding:"compact",size:"small",style:"default",type:"button",onClick:s=>{s.stopPropagation(),c(s)}})})})]})}exports.default=D;
+//# sourceMappingURL=ThreadListItem.cjs.map

package/dist/components/thread-list-item/ThreadListItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListItem.cjs","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"sourcesContent":["import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '../mention-badge/MentionBadge';\nimport UnreadBadge from '../unread-badge/UnreadBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '../user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadListItem.module.scss';\n\nconst DEFAULT_PARTICIPANTS: UserAvatarGroupItem[] = [\n  { key: 'leonard', name: 'Leonard Riley' },\n  { key: 'aiko', name: 'Aiko Tan' },\n  { key: 'arjun', name: 'Arjun Patel' },\n  { key: 'marco', name: 'Marco Rinaldi' },\n  { key: 'sofia', name: 'Sofia Bauer' },\n];\n\nexport interface ThreadListItemProps {\n  /** Whether this item is the active/selected thread. */\n  active?: boolean;\n  /** Badge in the left gutter. Default: None. Hidden when `active` is true. */\n  badge?: 'none' | 'unread' | 'mention';\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Author name. */\n  authorName?: string;\n  /** Channel/team label. */\n  channelLabel?: string;\n  /** Message preview text. */\n  previewText?: string;\n  /** Timestamp label. */\n  timestamp?: string;\n  /** Number of replies. */\n  replyCount?: number;\n  /** Stacked avatars for recent participants. Pass `[]` to hide. When omitted, uses demo participants. */\n  participants?: UserAvatarGroupItem[];\n  /** Optional thread title. */\n  threadTitle?: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Opens the thread. Sibling of the overflow menu for keyboard reachability. */\n  onClick?: () => void;\n  /** Thread overflow menu handler. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * The Thread List Item is a single entry in the Threads view. Each row gives the user enough\n * context — who, where, what, when — to decide whether to open the thread without opening\n * it.\n */\nexport default function ThreadListItem({\n  active = false,\n  badge = 'none',\n  mentionCount = 1,\n  authorName = 'Martin Kraft',\n  channelLabel = 'ENTERPRISE TEAM',\n  previewText = 'Do we have a guideline for what minimum width we should support in the system console? I know that…',\n  timestamp = '5 mins ago',\n  replyCount = 3,\n  participants: participantsProp,\n  threadTitle,\n  className = '',\n  onClick,\n  onMenuClick,\n}: ThreadListItemProps) {\n  const participants =\n    participantsProp === undefined ? DEFAULT_PARTICIPANTS : participantsProp;\n  const showParticipants = participants.length > 0;\n  const showGutterBadge =\n    !active && (badge === 'unread' || badge === 'mention');\n  const replyLabel = replyCount === 1 ? '1 reply' : `${replyCount} replies`;\n\n  const rootClass = [\n    styles['thread-list-item'],\n    active ? styles['thread-list-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const statusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'unread'\n        : undefined;\n\n  const handleMainClick = (event: MouseEvent<HTMLDivElement>) => {\n    const selection = window.getSelection();\n    if (\n      selection?.type === 'Range' &&\n      selection.toString().length > 0 &&\n      event.currentTarget.contains(\n        selection.getRangeAt(0).commonAncestorContainer,\n      )\n    ) {\n      return;\n    }\n    onClick?.();\n  };\n\n  const handleMainKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n    event.preventDefault();\n    onClick?.();\n  };\n\n  return (\n    <div className={rootClass}>\n      <div\n        className={styles['thread-list-item__main']}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        onClick={onClick ? handleMainClick : undefined}\n        onKeyDown={onClick ? handleMainKeyDown : undefined}\n        aria-current={active ? true : undefined}\n      >\n        <div className={styles['thread-list-item__thread']}>\n          <div className={styles['thread-list-item__container']}>\n            <div className={styles['thread-list-item__post-content']}>\n              <div className={styles['thread-list-item__gutter']}>\n                {showGutterBadge && badge === 'unread' && (\n                  <span\n                    className={styles['thread-list-item__unread-gutter']}\n                    aria-hidden\n                  >\n                    <UnreadBadge\n                      className={styles['thread-list-item__unread-badge']}\n                      context=\"icon-button\"\n                    />\n                  </span>\n                )}\n                {showGutterBadge && badge === 'mention' && (\n                  <span\n                    className={styles['thread-list-item__mention-gutter']}\n                    aria-hidden\n                  >\n                    <MentionBadge\n                      count={mentionCount}\n                      location=\"channel\"\n                      size=\"medium\"\n                    />\n                  </span>\n                )}\n              </div>\n              <div className={styles['thread-list-item__post-body']}>\n                <div className={styles['thread-list-item__post-body-content']}>\n                  <div className={styles['thread-list-item__name-row']}>\n                    <div className={styles['thread-list-item__name-group']}>\n                      <span className={styles['thread-list-item__author']}>\n                        {authorName}\n                      </span>\n                      <Tag casing=\"all-caps\" label={channelLabel} />\n                      {statusHint && (\n                        <span\n                          className={styles['thread-list-item__status-hint']}\n                        >\n                          {statusHint}\n                        </span>\n                      )}\n                    </div>\n                    <span className={styles['thread-list-item__timestamp']}>\n                      {timestamp}\n                    </span>\n                  </div>\n                  {threadTitle != null && (\n                    <div className={styles['thread-list-item__title-row']}>\n                      <p className={styles['thread-list-item__title']}>\n                        {threadTitle}\n                      </p>\n                    </div>\n                  )}\n                  <p className={styles['thread-list-item__preview']}>\n                    {previewText}\n                  </p>\n                </div>\n              </div>\n            </div>\n            <div className={styles['thread-list-item__replies']}>\n              <div className={styles['thread-list-item__replies-inner']}>\n                {showParticipants && (\n                  <UserAvatarGroup\n                    avatars={participants}\n                    className={styles['thread-list-item__avatar-group']}\n                    max={3}\n                    size=\"20\"\n                  />\n                )}\n                <span className={styles['thread-list-item__reply-count']}>\n                  {replyLabel}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      {onMenuClick && (\n        <div className={styles['thread-list-item__actions']}>\n          <span className={styles['thread-list-item__menu-button']}>\n            <IconButton\n              aria-label=\"Thread actions\"\n              icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n              padding=\"compact\"\n              size=\"small\"\n              style=\"default\"\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onMenuClick(event);\n              }}\n            />\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_PARTICIPANTS","ThreadListItem","active","badge","mentionCount","authorName","channelLabel","previewText","timestamp","replyCount","participantsProp","threadTitle","className","onClick","onMenuClick","participants","showParticipants","showGutterBadge","replyLabel","rootClass","styles","statusHint","handleMainClick","event","selection","handleMainKeyDown","jsxs","jsx","UnreadBadge","MentionBadge","Tag","UserAvatarGroup","IconButton","Icon","DotsHorizontalIcon"],"mappings":"mfAYMA,EAA8C,CAClD,CAAE,IAAK,UAAW,KAAM,eAAA,EACxB,CAAE,IAAK,OAAQ,KAAM,UAAA,EACrB,CAAE,IAAK,QAAS,KAAM,aAAA,EACtB,CAAE,IAAK,QAAS,KAAM,eAAA,EACtB,CAAE,IAAK,QAAS,KAAM,aAAA,CACxB,EAoCA,SAAwBC,EAAe,CACrC,OAAAC,EAAS,GACT,MAAAC,EAAQ,OACR,aAAAC,EAAe,EACf,WAAAC,EAAa,eACb,aAAAC,EAAe,kBACf,YAAAC,EAAc,sGACd,UAAAC,EAAY,aACZ,WAAAC,EAAa,EACb,aAAcC,EACd,YAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,EACA,YAAAC,CACF,EAAwB,CACtB,MAAMC,EACJL,IAAqB,OAAYV,EAAuBU,EACpDM,EAAmBD,EAAa,OAAS,EACzCE,EACJ,CAACf,IAAWC,IAAU,UAAYA,IAAU,WACxCe,EAAaT,IAAe,EAAI,UAAY,GAAGA,CAAU,WAEzDU,EAAY,CAChBC,EAAAA,QAAO,kBAAkB,EACzBlB,EAASkB,EAAAA,QAAO,0BAA0B,EAAI,GAC9CR,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELS,EACJlB,IAAU,UACN,GAAGC,CAAY,WAAWA,IAAiB,EAAI,GAAK,GAAG,GACvDD,IAAU,SACR,SACA,OAEFmB,EAAmBC,GAAsC,CAC7D,MAAMC,EAAY,OAAO,aAAA,GAEvBA,GAAA,YAAAA,EAAW,QAAS,SACpBA,EAAU,WAAW,OAAS,GAC9BD,EAAM,cAAc,SAClBC,EAAU,WAAW,CAAC,EAAE,uBAAA,GAK5BX,GAAA,MAAAA,GACF,EAEMY,EAAqBF,GAAyC,CAC9DA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,MAG3CA,EAAM,eAAA,EACNV,GAAA,MAAAA,IACF,EAEA,OACEa,EAAAA,KAAC,MAAA,CAAI,UAAWP,EACd,SAAA,CAAAQ,EAAAA,IAAC,MAAA,CACC,UAAWP,EAAAA,QAAO,wBAAwB,EAC1C,KAAMP,EAAU,SAAW,OAC3B,SAAUA,EAAU,EAAI,OACxB,QAASA,EAAUS,EAAkB,OACrC,UAAWT,EAAUY,EAAoB,OACzC,eAAcvB,EAAS,GAAO,OAE9B,SAAAyB,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,0BAA0B,EAC/C,SAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,6BAA6B,EAClD,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,gCAAgC,EACrD,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,0BAA0B,EAC9C,SAAA,CAAAH,GAAmBd,IAAU,UAC5BwB,EAAAA,IAAC,OAAA,CACC,UAAWP,EAAAA,QAAO,iCAAiC,EACnD,cAAW,GAEX,SAAAO,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWR,EAAAA,QAAO,gCAAgC,EAClD,QAAQ,aAAA,CAAA,CACV,CAAA,EAGHH,GAAmBd,IAAU,WAC5BwB,EAAAA,IAAC,OAAA,CACC,UAAWP,EAAAA,QAAO,kCAAkC,EACpD,cAAW,GAEX,SAAAO,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAOzB,EACP,SAAS,UACT,KAAK,QAAA,CAAA,CACP,CAAA,CACF,EAEJ,EACAuB,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,6BAA6B,EAClD,SAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,qCAAqC,EAC1D,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,8BAA8B,EACnD,SAAA,CAAAO,MAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,0BAA0B,EAC/C,SAAAf,EACH,EACAsB,EAAAA,IAACG,EAAAA,QAAA,CAAI,OAAO,WAAW,MAAOxB,EAAc,EAC3Ce,GACCM,EAAAA,IAAC,OAAA,CACC,UAAWP,EAAAA,QAAO,+BAA+B,EAEhD,SAAAC,CAAA,CAAA,CACH,EAEJ,QACC,OAAA,CAAK,UAAWD,EAAAA,QAAO,6BAA6B,EAClD,SAAAZ,CAAA,CACH,CAAA,EACF,EACCG,GAAe,MACdgB,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,6BAA6B,EAClD,SAAAO,EAAAA,IAAC,KAAE,UAAWP,UAAO,yBAAyB,EAC3C,WACH,EACF,QAED,IAAA,CAAE,UAAWA,EAAAA,QAAO,2BAA2B,EAC7C,SAAAb,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CACF,CAAA,EACF,EACAoB,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,2BAA2B,EAChD,SAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,iCAAiC,EACrD,SAAA,CAAAJ,GACCW,EAAAA,IAACI,EAAAA,QAAA,CACC,QAAShB,EACT,UAAWK,EAAAA,QAAO,gCAAgC,EAClD,IAAK,EACL,KAAK,IAAA,CAAA,QAGR,OAAA,CAAK,UAAWA,EAAAA,QAAO,+BAA+B,EACpD,SAAAF,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CAAA,EAEDJ,GACCa,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,2BAA2B,EAChD,SAAAO,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,+BAA+B,EACrD,SAAAO,EAAAA,IAACK,EAAAA,QAAA,CACC,aAAW,iBACX,WAAOC,UAAA,CAAK,KAAK,KAAK,MAAON,MAACO,IAAmB,EAAI,EACrD,QAAQ,UACR,KAAK,QACL,MAAM,UACN,KAAK,SACL,QAAUX,GAAU,CAClBA,EAAM,gBAAA,EACNT,EAAYS,CAAK,CACnB,CAAA,CAAA,EAEJ,CAAA,CACF,CAAA,EAEJ,CAEJ"}

package/dist/components/thread-list-item/ThreadListItem.css

@@ -0,0 +1 @@
+._thread-list-item_5rzhy_2{position:relative;display:flex;flex-direction:column;align-items:flex-end;background-color:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.08)}._thread-list-item__actions_5rzhy_10{position:absolute;top:var(--spacing-m);right:var(--spacing-m);z-index:2}._thread-list-item_5rzhy_2:hover ._thread-list-item__timestamp_5rzhy_16,._thread-list-item_5rzhy_2:focus-within ._thread-list-item__timestamp_5rzhy_16{visibility:hidden}._thread-list-item__menu-button_5rzhy_19{display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-list-item_5rzhy_2:hover ._thread-list-item__menu-button_5rzhy_19,._thread-list-item_5rzhy_2:focus-within ._thread-list-item__menu-button_5rzhy_19{opacity:1;pointer-events:auto}._thread-list-item_5rzhy_2:not(:hover):not(:focus-within) ._thread-list-item__menu-button_5rzhy_19{pointer-events:none}._thread-list-item_5rzhy_2:hover:not(._thread-list-item--active_5rzhy_33),._thread-list-item_5rzhy_2:focus-within:not(._thread-list-item--active_5rzhy_33){background-color:rgba(var(--center-channel-color-rgb),.04)}._thread-list-item__main_5rzhy_36{position:relative;z-index:0;display:flex;flex-direction:column;align-items:flex-end;width:100%;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left;-webkit-user-select:text;user-select:text}._thread-list-item__main_5rzhy_36:focus{outline:none}._thread-list-item__main_5rzhy_36:focus-visible{box-shadow:inset 0 0 0 2px rgba(var(--center-channel-color-rgb),.32)}._thread-list-item--active_5rzhy_33{background-color:rgba(var(--button-bg-rgb),.04)}._thread-list-item--active_5rzhy_33:hover,._thread-list-item--active_5rzhy_33:focus-within{background-color:rgba(var(--button-bg-rgb),.08)}._thread-list-item__thread_5rzhy_62{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-l);width:100%}._thread-list-item__container_5rzhy_69{display:flex;flex-direction:column;gap:var(--spacing-s);align-items:flex-start;border-radius:var(--radius-s);width:100%}._thread-list-item__post-content_5rzhy_77{display:flex;gap:var(--spacing-xxxxs, 4px);align-items:flex-start;width:100%}._thread-list-item__gutter_5rzhy_83{position:relative;flex-shrink:0;width:8px;min-height:21px;display:flex;align-items:flex-start;justify-content:flex-start}._thread-list-item__unread-gutter_5rzhy_92{position:absolute;top:var(--spacing-xxs);left:-4px;display:flex;align-items:center;justify-content:center}._thread-list-item__unread-badge_5rzhy_100{position:static}._thread-list-item__mention-gutter_5rzhy_103{position:absolute;top:1px;left:-12px;display:flex;align-items:center;justify-content:center}._thread-list-item__post-body_5rzhy_111{display:flex;flex-direction:column;flex:1 0 0;align-items:flex-start;min-width:0}._thread-list-item__post-body-content_5rzhy_118{display:flex;flex-direction:column;gap:var(--spacing-xxxxs, 4px);align-items:flex-start;width:100%}._thread-list-item__name-row_5rzhy_125{position:relative;height:20px;width:100%;display:flex;align-items:center;justify-content:space-between;overflow:hidden}._thread-list-item__name-group_5rzhy_134{display:flex;gap:var(--spacing-xs);align-items:center;overflow:hidden}._thread-list-item__author_5rzhy_140{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);white-space:nowrap;flex-shrink:0}._thread-list-item__status-hint_5rzhy_148{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-list-item__timestamp_5rzhy_16{font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-25);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;flex-shrink:0}._thread-list-item__title-row_5rzhy_167{display:flex;align-items:center;width:100%}._thread-list-item__title_5rzhy_167{flex:1 0 0;font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:var(--center-channel-color);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}._thread-list-item__preview_5rzhy_183{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;width:100%}._thread-list-item__replies_5rzhy_194{display:flex;flex-direction:column;align-items:flex-start;padding-left:var(--spacing-m)}._thread-list-item__replies-inner_5rzhy_200{display:flex;align-items:center;gap:var(--spacing-xxxxs, 4px);min-height:24px;border-radius:var(--radius-s)}._thread-list-item__avatar-group_5rzhy_207{flex-shrink:0}._thread-list-item__reply-count_5rzhy_210{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-25);color:rgba(var(--center-channel-color-rgb),.64);padding:4.5px var(--spacing-s)}

package/dist/components/thread-list-item/ThreadListItem.d.ts

@@ -0,0 +1,37 @@
+import { MouseEvent } from 'react';
+import { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
+export interface ThreadListItemProps {
+    /** Whether this item is the active/selected thread. */
+    active?: boolean;
+    /** Badge in the left gutter. Default: None. Hidden when `active` is true. */
+    badge?: 'none' | 'unread' | 'mention';
+    /** Shown when `badge` is Mention. Default: 1. */
+    mentionCount?: number;
+    /** Author name. */
+    authorName?: string;
+    /** Channel/team label. */
+    channelLabel?: string;
+    /** Message preview text. */
+    previewText?: string;
+    /** Timestamp label. */
+    timestamp?: string;
+    /** Number of replies. */
+    replyCount?: number;
+    /** Stacked avatars for recent participants. Pass `[]` to hide. When omitted, uses demo participants. */
+    participants?: UserAvatarGroupItem[];
+    /** Optional thread title. */
+    threadTitle?: string;
+    /** Optional CSS class name. */
+    className?: string;
+    /** Opens the thread. Sibling of the overflow menu for keyboard reachability. */
+    onClick?: () => void;
+    /** Thread overflow menu handler. */
+    onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * The Thread List Item is a single entry in the Threads view. Each row gives the user enough
+ * context — who, where, what, when — to decide whether to open the thread without opening
+ * it.
+ */
+export default function ThreadListItem({ active, badge, mentionCount, authorName, channelLabel, previewText, timestamp, replyCount, participants: participantsProp, threadTitle, className, onClick, onMenuClick, }: ThreadListItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThreadListItem.d.ts.map

package/dist/components/thread-list-item/ThreadListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListItem.d.ts","sourceRoot":"","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMvD,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,oCAAoC,CAAC;AAW5C,MAAM,WAAW,mBAAmB;IAClC,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtC,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wGAAwG;IACxG,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAc,EACd,KAAc,EACd,YAAgB,EAChB,UAA2B,EAC3B,YAAgC,EAChC,WAAmH,EACnH,SAAwB,EACxB,UAAc,EACd,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EACX,SAAc,EACd,OAAO,EACP,WAAW,GACZ,EAAE,mBAAmB,2CA0JrB"}

package/dist/components/thread-list-item/ThreadListItem.js

@@ -0,0 +1,140 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import __b from "@mattermost/compass-icons/components/dots-horizontal.js";const b=__b&&__b.default?__b.default:__b;
+import x from "../icon/Icon.js";
+import B from "../icon-button/IconButton.js";
+import D from "../tag/Tag.js";
+import E from "../mention-badge/MentionBadge.js";
+import j from "../unread-badge/UnreadBadge.js";
+import z from "../user-avatar-group/UserAvatarGroup.js";
+import e from "./ThreadListItem.module.scss.js";
+const M = [
+  { key: "leonard", name: "Leonard Riley" },
+  { key: "aiko", name: "Aiko Tan" },
+  { key: "arjun", name: "Arjun Patel" },
+  { key: "marco", name: "Marco Rinaldi" },
+  { key: "sofia", name: "Sofia Bauer" }
+];
+function q({
+  active: l = !1,
+  badge: r = "none",
+  mentionCount: d = 1,
+  authorName: N = "Martin Kraft",
+  channelLabel: v = "ENTERPRISE TEAM",
+  previewText: f = "Do we have a guideline for what minimum width we should support in the system console? I know that…",
+  timestamp: y = "5 mins ago",
+  replyCount: o = 3,
+  participants: m,
+  threadTitle: c,
+  className: g = "",
+  onClick: a,
+  onMenuClick: h
+}) {
+  const _ = m === void 0 ? M : m, w = _.length > 0, p = !l && (r === "unread" || r === "mention"), A = o === 1 ? "1 reply" : `${o} replies`, I = [
+    e["thread-list-item"],
+    l ? e["thread-list-item--active"] : "",
+    g
+  ].filter(Boolean).join(" "), u = r === "mention" ? `${d} mention${d === 1 ? "" : "s"}` : r === "unread" ? "unread" : void 0, T = (i) => {
+    const n = window.getSelection();
+    (n == null ? void 0 : n.type) === "Range" && n.toString().length > 0 && i.currentTarget.contains(
+      n.getRangeAt(0).commonAncestorContainer
+    ) || a == null || a();
+  }, R = (i) => {
+    i.key !== "Enter" && i.key !== " " || (i.preventDefault(), a == null || a());
+  };
+  return /* @__PURE__ */ s("div", { className: I, children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: e["thread-list-item__main"],
+        role: a ? "button" : void 0,
+        tabIndex: a ? 0 : void 0,
+        onClick: a ? T : void 0,
+        onKeyDown: a ? R : void 0,
+        "aria-current": l ? !0 : void 0,
+        children: /* @__PURE__ */ t("div", { className: e["thread-list-item__thread"], children: /* @__PURE__ */ s("div", { className: e["thread-list-item__container"], children: [
+          /* @__PURE__ */ s("div", { className: e["thread-list-item__post-content"], children: [
+            /* @__PURE__ */ s("div", { className: e["thread-list-item__gutter"], children: [
+              p && r === "unread" && /* @__PURE__ */ t(
+                "span",
+                {
+                  className: e["thread-list-item__unread-gutter"],
+                  "aria-hidden": !0,
+                  children: /* @__PURE__ */ t(
+                    j,
+                    {
+                      className: e["thread-list-item__unread-badge"],
+                      context: "icon-button"
+                    }
+                  )
+                }
+              ),
+              p && r === "mention" && /* @__PURE__ */ t(
+                "span",
+                {
+                  className: e["thread-list-item__mention-gutter"],
+                  "aria-hidden": !0,
+                  children: /* @__PURE__ */ t(
+                    E,
+                    {
+                      count: d,
+                      location: "channel",
+                      size: "medium"
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t("div", { className: e["thread-list-item__post-body"], children: /* @__PURE__ */ s("div", { className: e["thread-list-item__post-body-content"], children: [
+              /* @__PURE__ */ s("div", { className: e["thread-list-item__name-row"], children: [
+                /* @__PURE__ */ s("div", { className: e["thread-list-item__name-group"], children: [
+                  /* @__PURE__ */ t("span", { className: e["thread-list-item__author"], children: N }),
+                  /* @__PURE__ */ t(D, { casing: "all-caps", label: v }),
+                  u && /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: e["thread-list-item__status-hint"],
+                      children: u
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t("span", { className: e["thread-list-item__timestamp"], children: y })
+              ] }),
+              c != null && /* @__PURE__ */ t("div", { className: e["thread-list-item__title-row"], children: /* @__PURE__ */ t("p", { className: e["thread-list-item__title"], children: c }) }),
+              /* @__PURE__ */ t("p", { className: e["thread-list-item__preview"], children: f })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ t("div", { className: e["thread-list-item__replies"], children: /* @__PURE__ */ s("div", { className: e["thread-list-item__replies-inner"], children: [
+            w && /* @__PURE__ */ t(
+              z,
+              {
+                avatars: _,
+                className: e["thread-list-item__avatar-group"],
+                max: 3,
+                size: "20"
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: e["thread-list-item__reply-count"], children: A })
+          ] }) })
+        ] }) })
+      }
+    ),
+    h && /* @__PURE__ */ t("div", { className: e["thread-list-item__actions"], children: /* @__PURE__ */ t("span", { className: e["thread-list-item__menu-button"], children: /* @__PURE__ */ t(
+      B,
+      {
+        "aria-label": "Thread actions",
+        icon: /* @__PURE__ */ t(x, { size: "16", glyph: /* @__PURE__ */ t(b, {}) }),
+        padding: "compact",
+        size: "small",
+        style: "default",
+        type: "button",
+        onClick: (i) => {
+          i.stopPropagation(), h(i);
+        }
+      }
+    ) }) })
+  ] });
+}
+export {
+  q as default
+};
+//# sourceMappingURL=ThreadListItem.js.map

package/dist/components/thread-list-item/ThreadListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListItem.js","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"sourcesContent":["import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '../mention-badge/MentionBadge';\nimport UnreadBadge from '../unread-badge/UnreadBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '../user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadListItem.module.scss';\n\nconst DEFAULT_PARTICIPANTS: UserAvatarGroupItem[] = [\n  { key: 'leonard', name: 'Leonard Riley' },\n  { key: 'aiko', name: 'Aiko Tan' },\n  { key: 'arjun', name: 'Arjun Patel' },\n  { key: 'marco', name: 'Marco Rinaldi' },\n  { key: 'sofia', name: 'Sofia Bauer' },\n];\n\nexport interface ThreadListItemProps {\n  /** Whether this item is the active/selected thread. */\n  active?: boolean;\n  /** Badge in the left gutter. Default: None. Hidden when `active` is true. */\n  badge?: 'none' | 'unread' | 'mention';\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Author name. */\n  authorName?: string;\n  /** Channel/team label. */\n  channelLabel?: string;\n  /** Message preview text. */\n  previewText?: string;\n  /** Timestamp label. */\n  timestamp?: string;\n  /** Number of replies. */\n  replyCount?: number;\n  /** Stacked avatars for recent participants. Pass `[]` to hide. When omitted, uses demo participants. */\n  participants?: UserAvatarGroupItem[];\n  /** Optional thread title. */\n  threadTitle?: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Opens the thread. Sibling of the overflow menu for keyboard reachability. */\n  onClick?: () => void;\n  /** Thread overflow menu handler. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * The Thread List Item is a single entry in the Threads view. Each row gives the user enough\n * context — who, where, what, when — to decide whether to open the thread without opening\n * it.\n */\nexport default function ThreadListItem({\n  active = false,\n  badge = 'none',\n  mentionCount = 1,\n  authorName = 'Martin Kraft',\n  channelLabel = 'ENTERPRISE TEAM',\n  previewText = 'Do we have a guideline for what minimum width we should support in the system console? I know that…',\n  timestamp = '5 mins ago',\n  replyCount = 3,\n  participants: participantsProp,\n  threadTitle,\n  className = '',\n  onClick,\n  onMenuClick,\n}: ThreadListItemProps) {\n  const participants =\n    participantsProp === undefined ? DEFAULT_PARTICIPANTS : participantsProp;\n  const showParticipants = participants.length > 0;\n  const showGutterBadge =\n    !active && (badge === 'unread' || badge === 'mention');\n  const replyLabel = replyCount === 1 ? '1 reply' : `${replyCount} replies`;\n\n  const rootClass = [\n    styles['thread-list-item'],\n    active ? styles['thread-list-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const statusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'unread'\n        : undefined;\n\n  const handleMainClick = (event: MouseEvent<HTMLDivElement>) => {\n    const selection = window.getSelection();\n    if (\n      selection?.type === 'Range' &&\n      selection.toString().length > 0 &&\n      event.currentTarget.contains(\n        selection.getRangeAt(0).commonAncestorContainer,\n      )\n    ) {\n      return;\n    }\n    onClick?.();\n  };\n\n  const handleMainKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n    event.preventDefault();\n    onClick?.();\n  };\n\n  return (\n    <div className={rootClass}>\n      <div\n        className={styles['thread-list-item__main']}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        onClick={onClick ? handleMainClick : undefined}\n        onKeyDown={onClick ? handleMainKeyDown : undefined}\n        aria-current={active ? true : undefined}\n      >\n        <div className={styles['thread-list-item__thread']}>\n          <div className={styles['thread-list-item__container']}>\n            <div className={styles['thread-list-item__post-content']}>\n              <div className={styles['thread-list-item__gutter']}>\n                {showGutterBadge && badge === 'unread' && (\n                  <span\n                    className={styles['thread-list-item__unread-gutter']}\n                    aria-hidden\n                  >\n                    <UnreadBadge\n                      className={styles['thread-list-item__unread-badge']}\n                      context=\"icon-button\"\n                    />\n                  </span>\n                )}\n                {showGutterBadge && badge === 'mention' && (\n                  <span\n                    className={styles['thread-list-item__mention-gutter']}\n                    aria-hidden\n                  >\n                    <MentionBadge\n                      count={mentionCount}\n                      location=\"channel\"\n                      size=\"medium\"\n                    />\n                  </span>\n                )}\n              </div>\n              <div className={styles['thread-list-item__post-body']}>\n                <div className={styles['thread-list-item__post-body-content']}>\n                  <div className={styles['thread-list-item__name-row']}>\n                    <div className={styles['thread-list-item__name-group']}>\n                      <span className={styles['thread-list-item__author']}>\n                        {authorName}\n                      </span>\n                      <Tag casing=\"all-caps\" label={channelLabel} />\n                      {statusHint && (\n                        <span\n                          className={styles['thread-list-item__status-hint']}\n                        >\n                          {statusHint}\n                        </span>\n                      )}\n                    </div>\n                    <span className={styles['thread-list-item__timestamp']}>\n                      {timestamp}\n                    </span>\n                  </div>\n                  {threadTitle != null && (\n                    <div className={styles['thread-list-item__title-row']}>\n                      <p className={styles['thread-list-item__title']}>\n                        {threadTitle}\n                      </p>\n                    </div>\n                  )}\n                  <p className={styles['thread-list-item__preview']}>\n                    {previewText}\n                  </p>\n                </div>\n              </div>\n            </div>\n            <div className={styles['thread-list-item__replies']}>\n              <div className={styles['thread-list-item__replies-inner']}>\n                {showParticipants && (\n                  <UserAvatarGroup\n                    avatars={participants}\n                    className={styles['thread-list-item__avatar-group']}\n                    max={3}\n                    size=\"20\"\n                  />\n                )}\n                <span className={styles['thread-list-item__reply-count']}>\n                  {replyLabel}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      {onMenuClick && (\n        <div className={styles['thread-list-item__actions']}>\n          <span className={styles['thread-list-item__menu-button']}>\n            <IconButton\n              aria-label=\"Thread actions\"\n              icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n              padding=\"compact\"\n              size=\"small\"\n              style=\"default\"\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onMenuClick(event);\n              }}\n            />\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_PARTICIPANTS","ThreadListItem","active","badge","mentionCount","authorName","channelLabel","previewText","timestamp","replyCount","participantsProp","threadTitle","className","onClick","onMenuClick","participants","showParticipants","showGutterBadge","replyLabel","rootClass","styles","statusHint","handleMainClick","event","selection","handleMainKeyDown","jsxs","jsx","UnreadBadge","MentionBadge","Tag","UserAvatarGroup","IconButton","Icon","DotsHorizontalIcon"],"mappings":"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"}

package/dist/components/thread-list-item/ThreadListItem.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadListItem.css');const t={"thread-list-item":"_thread-list-item_5rzhy_2","thread-list-item__actions":"_thread-list-item__actions_5rzhy_10","thread-list-item__timestamp":"_thread-list-item__timestamp_5rzhy_16","thread-list-item__menu-button":"_thread-list-item__menu-button_5rzhy_19","thread-list-item--active":"_thread-list-item--active_5rzhy_33","thread-list-item__main":"_thread-list-item__main_5rzhy_36","thread-list-item__thread":"_thread-list-item__thread_5rzhy_62","thread-list-item__container":"_thread-list-item__container_5rzhy_69","thread-list-item__post-content":"_thread-list-item__post-content_5rzhy_77","thread-list-item__gutter":"_thread-list-item__gutter_5rzhy_83","thread-list-item__unread-gutter":"_thread-list-item__unread-gutter_5rzhy_92","thread-list-item__unread-badge":"_thread-list-item__unread-badge_5rzhy_100","thread-list-item__mention-gutter":"_thread-list-item__mention-gutter_5rzhy_103","thread-list-item__post-body":"_thread-list-item__post-body_5rzhy_111","thread-list-item__post-body-content":"_thread-list-item__post-body-content_5rzhy_118","thread-list-item__name-row":"_thread-list-item__name-row_5rzhy_125","thread-list-item__name-group":"_thread-list-item__name-group_5rzhy_134","thread-list-item__author":"_thread-list-item__author_5rzhy_140","thread-list-item__status-hint":"_thread-list-item__status-hint_5rzhy_148","thread-list-item__title-row":"_thread-list-item__title-row_5rzhy_167","thread-list-item__title":"_thread-list-item__title_5rzhy_167","thread-list-item__preview":"_thread-list-item__preview_5rzhy_183","thread-list-item__replies":"_thread-list-item__replies_5rzhy_194","thread-list-item__replies-inner":"_thread-list-item__replies-inner_5rzhy_200","thread-list-item__avatar-group":"_thread-list-item__avatar-group_5rzhy_207","thread-list-item__reply-count":"_thread-list-item__reply-count_5rzhy_210"};exports.default=t;
+//# sourceMappingURL=ThreadListItem.module.scss.cjs.map

package/dist/components/thread-list-item/ThreadListItem.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListItem.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/thread-list-item/ThreadListItem.module.scss.js

@@ -0,0 +1,32 @@
+import './ThreadListItem.css';const t = {
+  "thread-list-item": "_thread-list-item_5rzhy_2",
+  "thread-list-item__actions": "_thread-list-item__actions_5rzhy_10",
+  "thread-list-item__timestamp": "_thread-list-item__timestamp_5rzhy_16",
+  "thread-list-item__menu-button": "_thread-list-item__menu-button_5rzhy_19",
+  "thread-list-item--active": "_thread-list-item--active_5rzhy_33",
+  "thread-list-item__main": "_thread-list-item__main_5rzhy_36",
+  "thread-list-item__thread": "_thread-list-item__thread_5rzhy_62",
+  "thread-list-item__container": "_thread-list-item__container_5rzhy_69",
+  "thread-list-item__post-content": "_thread-list-item__post-content_5rzhy_77",
+  "thread-list-item__gutter": "_thread-list-item__gutter_5rzhy_83",
+  "thread-list-item__unread-gutter": "_thread-list-item__unread-gutter_5rzhy_92",
+  "thread-list-item__unread-badge": "_thread-list-item__unread-badge_5rzhy_100",
+  "thread-list-item__mention-gutter": "_thread-list-item__mention-gutter_5rzhy_103",
+  "thread-list-item__post-body": "_thread-list-item__post-body_5rzhy_111",
+  "thread-list-item__post-body-content": "_thread-list-item__post-body-content_5rzhy_118",
+  "thread-list-item__name-row": "_thread-list-item__name-row_5rzhy_125",
+  "thread-list-item__name-group": "_thread-list-item__name-group_5rzhy_134",
+  "thread-list-item__author": "_thread-list-item__author_5rzhy_140",
+  "thread-list-item__status-hint": "_thread-list-item__status-hint_5rzhy_148",
+  "thread-list-item__title-row": "_thread-list-item__title-row_5rzhy_167",
+  "thread-list-item__title": "_thread-list-item__title_5rzhy_167",
+  "thread-list-item__preview": "_thread-list-item__preview_5rzhy_183",
+  "thread-list-item__replies": "_thread-list-item__replies_5rzhy_194",
+  "thread-list-item__replies-inner": "_thread-list-item__replies-inner_5rzhy_200",
+  "thread-list-item__avatar-group": "_thread-list-item__avatar-group_5rzhy_207",
+  "thread-list-item__reply-count": "_thread-list-item__reply-count_5rzhy_210"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=ThreadListItem.module.scss.js.map

package/dist/components/thread-list-item/ThreadListItem.module.scss.js.map

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

package/dist/components/thread-list-item/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ThreadListItem.cjs");exports.ThreadListItem=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/thread-list-item/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/thread-list-item/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ThreadListItem } from './ThreadListItem';
+export type { ThreadListItemProps } from './ThreadListItem';
+export type { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/thread-list-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/thread-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/components/thread-list-item/index.js

@@ -0,0 +1,5 @@
+import { default as a } from "./ThreadListItem.js";
+export {
+  a as ThreadListItem
+};
+//# sourceMappingURL=index.js.map

package/dist/components/thread-list-item/index.js.map

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

package/dist/components/toast/Toast.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__o=require("@mattermost/compass-icons/components/alert-circle-outline.js"),o=__o?.default??__o,__x=require("@mattermost/compass-icons/components/alert-outline.js"),x=__x?.default??__x,__m=require("@mattermost/compass-icons/components/check.js"),m=__m?.default??__m,___=require("@mattermost/compass-icons/components/close.js"),_=___?.default??___,__h=require("@mattermost/compass-icons/components/information-outline.js"),h=__h?.default??__h,C=require("../button/Button.cjs"),a=require("../icon/Icon.cjs"),p=require("../icon-button/IconButton.cjs"),s=require("./Toast.module.scss.cjs"),q={general:e.jsx(o,{}),info:e.jsx(h,{}),success:e.jsx(m,{}),danger:e.jsx(x,{}),warning:e.jsx(o,{})};function I({className:r="",message:i,type:l="general",icon:c,actionLabel:n,onAction:u,onDismiss:t}){const d=s.default[`toast--type-${l.toLowerCase()}`],f=t==null?s.default["toast--no-dismiss"]:"",j=[s.default.toast,d,f,r].filter(Boolean).join(" ");return e.jsxs("div",{className:j,role:"status","aria-live":"polite",children:[e.jsxs("div",{className:s.default.toast__content,children:[e.jsx("span",{className:s.default.toast__icon,"aria-hidden":!0,children:e.jsx(a.IconSlotContext.Provider,{value:{size:"16"},children:c??e.jsx(a.default,{glyph:q[l]})})}),e.jsx("span",{className:s.default.toast__message,children:i}),n!=null&&e.jsx(C.default,{appearance:"default",emphasis:"tertiary",size:"x-small",className:s.default["toast__action-btn--on-dark"],onClick:u,children:n})]}),t!=null&&e.jsx(p.default,{"aria-label":"Dismiss",size:"small",className:s.default.toast__dismiss,icon:e.jsx(a.default,{glyph:e.jsx(_,{}),size:"16"}),onClick:t})]})}exports.default=I;
+//# sourceMappingURL=Toast.cjs.map

package/dist/components/toast/Toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.cjs","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './Toast.module.scss';\n\nexport type ToastType = 'general' | 'info' | 'success' | 'warning' | 'danger';\n\nexport interface ToastProps {\n  className?: string;\n  /** Toast message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  type?: ToastType;\n  /** Optional icon override — pass `<Icon glyph={<SomeIcon />} />`; replaces the default type icon. Toast provides the correct size via context. */\n  icon?: ReactNode;\n  actionLabel?: ReactNode;\n  onAction?: () => void;\n  onDismiss?: () => void;\n}\n\nconst TYPE_ICONS: Record<ToastType, ReactNode> = {\n  general: <AlertCircleOutlineIcon />,\n  info: <InformationOutlineIcon />,\n  success: <CheckIcon />,\n  danger: <AlertOutlineIcon />,\n  warning: <AlertCircleOutlineIcon />,\n};\n\n/**\n * Toasts notify the user that an action has completed or surface a brief message about a\n * system process. They sit on top of the workflow without interrupting it, don't require\n * user input to disappear, and auto-dismiss after a short duration.\n */\nexport default function Toast({\n  className = '',\n  message,\n  type = 'general',\n  icon,\n  actionLabel,\n  onAction,\n  onDismiss,\n}: ToastProps) {\n  const typeClass = styles[`toast--type-${type.toLowerCase()}`];\n  const noDismissClass = onDismiss == null ? styles['toast--no-dismiss'] : '';\n  const rootClass = [styles.toast, typeClass, noDismissClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} role=\"status\" aria-live=\"polite\">\n      <div className={styles['toast__content']}>\n        <span className={styles['toast__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '16' }}>\n            {icon ?? <Icon glyph={TYPE_ICONS[type]} />}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['toast__message']}>{message}</span>\n        {actionLabel != null && (\n          <Button\n            appearance=\"default\"\n            emphasis=\"tertiary\"\n            size=\"x-small\"\n            className={styles['toast__action-btn--on-dark']}\n            onClick={onAction}\n          >\n            {actionLabel}\n          </Button>\n        )}\n      </div>\n      {onDismiss != null && (\n        <IconButton\n          aria-label=\"Dismiss\"\n          size=\"small\"\n          className={styles['toast__dismiss']}\n          icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n          onClick={onDismiss}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TYPE_ICONS","AlertCircleOutlineIcon","InformationOutlineIcon","CheckIcon","AlertOutlineIcon","Toast","className","message","type","icon","actionLabel","onAction","onDismiss","typeClass","styles","noDismissClass","rootClass","jsxs","jsx","IconSlotContext","Icon","Button","IconButton","CloseIcon"],"mappings":"6lBA0BMA,EAA2C,CAC/C,cAAUC,EAAA,EAAuB,EACjC,WAAOC,EAAA,EAAuB,EAC9B,cAAUC,EAAA,EAAU,EACpB,aAASC,EAAA,EAAiB,EAC1B,cAAUH,EAAA,CAAA,CAAuB,CACnC,EAOA,SAAwBI,EAAM,CAC5B,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAe,CACb,MAAMC,EAAYC,EAAAA,QAAO,eAAeN,EAAK,YAAA,CAAa,EAAE,EACtDO,EAAiBH,GAAa,KAAOE,EAAAA,QAAO,mBAAmB,EAAI,GACnEE,EAAY,CAACF,UAAO,MAAOD,EAAWE,EAAgBT,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,MAAA,CAAI,UAAWU,EAAW,KAAK,SAAS,YAAU,SACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,eACrB,SAAA,CAAAI,EAAAA,IAAC,OAAA,CAAK,UAAWJ,EAAAA,QAAO,YAAgB,cAAW,GACjD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAV,GAAQS,EAAAA,IAACE,EAAAA,QAAA,CAAK,MAAOpB,EAAWQ,CAAI,CAAA,CAAG,CAAA,CAC1C,CAAA,CACF,QACC,OAAA,CAAK,UAAWM,EAAAA,QAAO,eAAoB,SAAAP,EAAQ,EACnDG,GAAe,MACdQ,EAAAA,IAACG,EAAAA,QAAA,CACC,WAAW,UACX,SAAS,WACT,KAAK,UACL,UAAWP,EAAAA,QAAO,4BAA4B,EAC9C,QAASH,EAER,SAAAD,CAAA,CAAA,CACH,EAEJ,EACCE,GAAa,MACZM,EAAAA,IAACI,EAAAA,QAAA,CACC,aAAW,UACX,KAAK,QACL,UAAWR,EAAAA,QAAO,eAClB,WAAOM,UAAA,CAAK,YAAQG,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASX,CAAA,CAAA,CACX,EAEJ,CAEJ"}

package/dist/components/toast/Toast.css

@@ -0,0 +1 @@
+._toast_1x4xn_2{display:inline-flex;gap:var(--spacing-xxs);align-items:center;width:fit-content;max-width:440px;padding:var(--spacing-xxxs);background-color:var(--neutral-900);border-radius:var(--radius-s);box-shadow:var(--elevation-2)}._toast__content_1x4xn_13{display:flex;align-items:center;gap:var(--spacing-xs);height:32px;padding-left:var(--spacing-xs);min-width:0}._toast__icon_1x4xn_21{display:inline-flex;align-items:center;flex-shrink:0;color:var(--neutral-0)}._toast__message_1x4xn_27{flex:0 1 auto;min-width:0;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--neutral-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._toast__action-btn--on-dark_1x4xn_38{flex-shrink:0;background-color:color-mix(in srgb,var(--neutral-0) 8%,transparent)!important;color:var(--neutral-0)!important;border-color:transparent!important}._toast__action-btn--on-dark_1x4xn_38:hover:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 12%,transparent)!important;color:var(--neutral-0)!important}._toast__action-btn--on-dark_1x4xn_38:active:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 16%,transparent)!important;color:var(--neutral-0)!important}._toast__action-btn--on-dark_1x4xn_38:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--neutral-0) 56%,transparent)!important}._toast__action-btn--on-dark_1x4xn_38:disabled{color:color-mix(in srgb,var(--neutral-0) 40%,transparent)!important;background-color:color-mix(in srgb,var(--neutral-0) 6%,transparent)!important}._toast__dismiss_1x4xn_59{flex-shrink:0;color:color-mix(in srgb,var(--neutral-0) 64%,transparent)!important}._toast__dismiss_1x4xn_59:hover:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 12%,transparent)!important;color:var(--neutral-0)!important}._toast__dismiss_1x4xn_59:active:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 20%,transparent)!important;color:var(--neutral-0)!important}._toast__dismiss_1x4xn_59:focus-visible{outline:2px solid color-mix(in srgb,var(--neutral-0) 56%,transparent)!important;outline-offset:2px!important;box-shadow:none!important}._toast--type-info_1x4xn_76{background-color:rgb(var(--semantic-color-info))}._toast--type-success_1x4xn_79{background-color:rgb(var(--semantic-color-success))}._toast--type-danger_1x4xn_82{background-color:rgb(var(--semantic-color-danger))}._toast--type-warning_1x4xn_85{background-color:rgb(var(--semantic-color-warning))}._toast--no-dismiss_1x4xn_88 ._toast__content_1x4xn_13{padding-right:var(--spacing-xs)}

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export type ToastType = 'general' | 'info' | 'success' | 'warning' | 'danger';
+export interface ToastProps {
+    className?: string;
+    /** Toast message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    message: ReactNode;
+    type?: ToastType;
+    /** Optional icon override — pass `<Icon glyph={<SomeIcon />} />`; replaces the default type icon. Toast provides the correct size via context. */
+    icon?: ReactNode;
+    actionLabel?: ReactNode;
+    onAction?: () => void;
+    onDismiss?: () => void;
+}
+/**
+ * Toasts notify the user that an action has completed or surface a brief message about a
+ * system process. They sit on top of the workflow without interrupting it, don't require
+ * user input to disappear, and auto-dismiss after a short duration.
+ */
+export default function Toast({ className, message, type, icon, actionLabel, onAction, onDismiss, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

package/dist/components/toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9E,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kJAAkJ;IAClJ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAUD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,OAAO,EACP,IAAgB,EAChB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,UAAU,2CAuCZ"}