@mattermost/compass-ui 0.1.0-alpha.12 → 0.1.0-alpha.13

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

@@ -1,66 +1,70 @@
-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 { jsxs as r, jsx as t } from "react/jsx-runtime";
+import __E from "@mattermost/compass-icons/components/dots-horizontal.js";const E=__E&&__E.default?__E.default:__E;
+import M from "../icon/Icon.js";
+import j from "../icon-button/IconButton.js";
+import z from "../tag/Tag.js";
+import P from "../mention-badge/MentionBadge.js";
+import S from "../unread-badge/UnreadBadge.js";
+import L from "../user-avatar-group/UserAvatarGroup.js";
 import e from "./ThreadListItem.module.scss.js";
-const M = [
+const F = [
   { 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",
+], K = (i) => i === 1 ? "1 reply" : `${i} replies`, U = (i) => `${i} mention${i === 1 ? "" : "s"}`;
+function X({
+  active: i = !1,
+  badge: n = "none",
+  mentionCount: o = 1,
+  authorName: u = "Martin Kraft",
+  channelLabel: N = "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,
+  timestamp: v = "5 mins ago",
+  replyCount: y = 3,
+  participants: d,
+  threadTitle: m,
   className: g = "",
   onClick: a,
-  onMenuClick: h
+  onMenuClick: c,
+  formatReplyCount: w = K,
+  formatMentionLabel: A = U,
+  unreadLabel: I = "unread",
+  menuLabel: T = "Thread actions"
 }) {
-  const _ = m === void 0 ? M : m, w = _.length > 0, p = !l && (r === "unread" || r === "mention"), A = o === 1 ? "1 reply" : `${o} replies`, I = [
+  const h = d === void 0 ? F : d, R = h.length > 0, _ = !i && (n === "unread" || n === "mention"), b = w(y), x = [
     e["thread-list-item"],
-    l ? e["thread-list-item--active"] : "",
+    i ? 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
+  ].filter(Boolean).join(" "), p = n === "mention" ? A(o) : n === "unread" ? I : void 0, B = (s) => {
+    const l = window.getSelection();
+    (l == null ? void 0 : l.type) === "Range" && l.toString().length > 0 && s.currentTarget.contains(
+      l.getRangeAt(0).commonAncestorContainer
     ) || a == null || a();
-  }, R = (i) => {
-    i.key !== "Enter" && i.key !== " " || (i.preventDefault(), a == null || a());
+  }, D = (s) => {
+    s.key !== "Enter" && s.key !== " " || (s.preventDefault(), a == null || a());
   };
-  return /* @__PURE__ */ s("div", { className: I, children: [
+  return /* @__PURE__ */ r("div", { className: x, 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(
+        onClick: a ? B : void 0,
+        onKeyDown: a ? D : void 0,
+        "aria-current": i ? !0 : void 0,
+        children: /* @__PURE__ */ t("div", { className: e["thread-list-item__thread"], children: /* @__PURE__ */ r("div", { className: e["thread-list-item__container"], children: [
+          /* @__PURE__ */ r("div", { className: e["thread-list-item__post-content"], children: [
+            /* @__PURE__ */ r("div", { className: e["thread-list-item__gutter"], children: [
+              _ && n === "unread" && /* @__PURE__ */ t(
                 "span",
                 {
                   className: e["thread-list-item__unread-gutter"],
                   "aria-hidden": !0,
                   children: /* @__PURE__ */ t(
-                    j,
+                    S,
                     {
                       className: e["thread-list-item__unread-badge"],
                       context: "icon-button"
@@ -68,15 +72,15 @@ function q({
                   )
                 }
               ),
-              p && r === "mention" && /* @__PURE__ */ t(
+              _ && n === "mention" && /* @__PURE__ */ t(
                 "span",
                 {
                   className: e["thread-list-item__mention-gutter"],
                   "aria-hidden": !0,
                   children: /* @__PURE__ */ t(
-                    E,
+                    P,
                     {
-                      count: d,
+                      count: o,
                       location: "channel",
                       size: "medium"
                     }
@@ -84,57 +88,57 @@ function q({
                 }
               )
             ] }),
-            /* @__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(
+            /* @__PURE__ */ t("div", { className: e["thread-list-item__post-body"], children: /* @__PURE__ */ r("div", { className: e["thread-list-item__post-body-content"], children: [
+              /* @__PURE__ */ r("div", { className: e["thread-list-item__name-row"], children: [
+                /* @__PURE__ */ r("div", { className: e["thread-list-item__name-group"], children: [
+                  /* @__PURE__ */ t("span", { className: e["thread-list-item__author"], children: u }),
+                  /* @__PURE__ */ t(z, { casing: "all-caps", label: N }),
+                  p && /* @__PURE__ */ t(
                     "span",
                     {
                       className: e["thread-list-item__status-hint"],
-                      children: u
+                      children: p
                     }
                   )
                 ] }),
-                /* @__PURE__ */ t("span", { className: e["thread-list-item__timestamp"], children: y })
+                /* @__PURE__ */ t("span", { className: e["thread-list-item__timestamp"], children: v })
               ] }),
-              c != null && /* @__PURE__ */ t("div", { className: e["thread-list-item__title-row"], children: /* @__PURE__ */ t("p", { className: e["thread-list-item__title"], children: c }) }),
+              m != null && /* @__PURE__ */ t("div", { className: e["thread-list-item__title-row"], children: /* @__PURE__ */ t("p", { className: e["thread-list-item__title"], children: m }) }),
               /* @__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,
+          /* @__PURE__ */ t("div", { className: e["thread-list-item__replies"], children: /* @__PURE__ */ r("div", { className: e["thread-list-item__replies-inner"], children: [
+            R && /* @__PURE__ */ t(
+              L,
               {
-                avatars: _,
+                avatars: h,
                 className: e["thread-list-item__avatar-group"],
                 max: 3,
                 size: "20"
               }
             ),
-            /* @__PURE__ */ t("span", { className: e["thread-list-item__reply-count"], children: A })
+            /* @__PURE__ */ t("span", { className: e["thread-list-item__reply-count"], children: b })
           ] }) })
         ] }) })
       }
     ),
-    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,
+    c && /* @__PURE__ */ t("div", { className: e["thread-list-item__actions"], children: /* @__PURE__ */ t("span", { className: e["thread-list-item__menu-button"], children: /* @__PURE__ */ t(
+      j,
       {
-        "aria-label": "Thread actions",
-        icon: /* @__PURE__ */ t(x, { size: "16", glyph: /* @__PURE__ */ t(b, {}) }),
+        "aria-label": T,
+        icon: /* @__PURE__ */ t(M, { size: "16", glyph: /* @__PURE__ */ t(E, {}) }),
         padding: "compact",
         size: "small",
         style: "default",
         type: "button",
-        onClick: (i) => {
-          i.stopPropagation(), h(i);
+        onClick: (s) => {
+          s.stopPropagation(), c(s);
         }
       }
     ) }) })
   ] });
 }
 export {
-  q as default
+  X as default
 };
 //# sourceMappingURL=ThreadListItem.js.map

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

@@ -1 +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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"}
+{"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, ReactNode } 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?: ReactNode;\n  /** Channel/team label. */\n  channelLabel?: ReactNode;\n  /** Message preview text. */\n  previewText?: ReactNode;\n  /** Timestamp label. */\n  timestamp?: ReactNode;\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?: ReactNode;\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  /** Visible reply count. Default: `1 reply` / `{count} replies`. */\n  formatReplyCount?: (count: number) => ReactNode;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"unread\". */\n  unreadLabel?: ReactNode;\n  /** Accessible name for the overflow menu button. Default: \"Thread actions\". */\n  menuLabel?: string;\n}\n\nconst defaultFormatReplies = (count: number) =>\n  count === 1 ? '1 reply' : `${count} replies`;\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\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  formatReplyCount = defaultFormatReplies,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Thread actions',\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 = formatReplyCount(replyCount);\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      ? formatMentionLabel(mentionCount)\n      : badge === 'unread'\n        ? unreadLabel\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={menuLabel}\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","defaultFormatReplies","count","defaultFormatMentions","ThreadListItem","active","badge","mentionCount","authorName","channelLabel","previewText","timestamp","replyCount","participantsProp","threadTitle","className","onClick","onMenuClick","formatReplyCount","formatMentionLabel","unreadLabel","menuLabel","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/toast/Toast.cjs

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

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

@@ -1 +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"}
+{"version":3,"file":"Toast.cjs","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import type { HTMLAttributes, 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 type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './Toast.module.scss';\n\nexport type ToastType = 'general' | 'info' | 'success' | 'warning' | 'danger';\n\nexport interface ToastProps extends HTMLAttributes<HTMLDivElement> {\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  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\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  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n  ...rest\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 {...rest} 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          {...dismissButtonProps}\n          aria-label={dismissLabel}\n          size=\"small\"\n          className={mergeClassNames(\n            styles['toast__dismiss'],\n            dismissButtonProps?.className,\n          )}\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","dismissLabel","dismissButtonProps","rest","typeClass","styles","noDismissClass","rootClass","jsxs","jsx","IconSlotContext","Icon","Button","IconButton","mergeClassNames","CloseIcon"],"mappings":"goBAgCMA,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,EACA,aAAAC,EAAe,UACf,mBAAAC,EACA,GAAGC,CACL,EAAe,CACb,MAAMC,EAAYC,EAAAA,QAAO,eAAeT,EAAK,YAAA,CAAa,EAAE,EACtDU,EAAiBN,GAAa,KAAOK,EAAAA,QAAO,mBAAmB,EAAI,GACnEE,EAAY,CAACF,UAAO,MAAOD,EAAWE,EAAgBZ,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEc,OAAC,OAAK,GAAGL,EAAM,UAAWI,EAAW,KAAK,SAAS,YAAU,SAC3D,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,SAAAb,GAAQY,EAAAA,IAACE,EAAAA,QAAA,CAAK,MAAOvB,EAAWQ,CAAI,CAAA,CAAG,CAAA,CAC1C,CAAA,CACF,QACC,OAAA,CAAK,UAAWS,EAAAA,QAAO,eAAoB,SAAAV,EAAQ,EACnDG,GAAe,MACdW,EAAAA,IAACG,EAAAA,QAAA,CACC,WAAW,UACX,SAAS,WACT,KAAK,UACL,UAAWP,EAAAA,QAAO,4BAA4B,EAC9C,QAASN,EAER,SAAAD,CAAA,CAAA,CACH,EAEJ,EACCE,GAAa,MACZS,EAAAA,IAACI,EAAAA,QAAA,CACE,GAAGX,EACJ,aAAYD,EACZ,KAAK,QACL,UAAWa,EAAAA,gBACTT,EAAAA,QAAO,eACPH,GAAA,YAAAA,EAAoB,SAAA,EAEtB,WAAOS,UAAA,CAAK,YAAQI,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,QAASf,CAAA,CAAA,CACX,EAEJ,CAEJ"}

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

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type ToastType = 'general' | 'info' | 'success' | 'warning' | 'danger';
-export interface ToastProps {
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     /** Toast message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     message: ReactNode;
@@ -10,11 +11,15 @@ export interface ToastProps {
     actionLabel?: ReactNode;
     onAction?: () => void;
     onDismiss?: () => void;
+    /** Accessible name for the dismiss button. Default: "Dismiss". */
+    dismissLabel?: string;
+    /** Extra attributes for the dismiss button (e.g. `data-testid`). */
+    dismissButtonProps?: BuiltInButtonProps;
 }
 /**
  * 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;
+export default function Toast({ className, message, type, icon, actionLabel, onAction, onDismiss, dismissLabel, dismissButtonProps, ...rest }: ToastProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Toast.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9E,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,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;IACvB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AAUD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,OAAO,EACP,IAAgB,EAChB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAwB,EACxB,kBAAkB,EAClB,GAAG,IAAI,EACR,EAAE,UAAU,2CA2CZ"}

package/dist/components/toast/Toast.js

@@ -1,59 +1,67 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import __r from "@mattermost/compass-icons/components/alert-circle-outline.js";const r=__r&&__r.default?__r.default:__r;
-import __h from "@mattermost/compass-icons/components/alert-outline.js";const h=__h&&__h.default?__h.default:__h;
-import __C from "@mattermost/compass-icons/components/check.js";const C=__C&&__C.default?__C.default:__C;
-import ___ from "@mattermost/compass-icons/components/close.js";const _=___&&___.default?___.default:___;
-import __I from "@mattermost/compass-icons/components/information-outline.js";const I=__I&&__I.default?__I.default:__I;
-import g from "../button/Button.js";
-import i, { IconSlotContext as N } from "../icon/Icon.js";
-import v from "../icon-button/IconButton.js";
-import t from "./Toast.module.scss.js";
-const x = {
-  general: /* @__PURE__ */ o(r, {}),
-  info: /* @__PURE__ */ o(I, {}),
-  success: /* @__PURE__ */ o(C, {}),
-  danger: /* @__PURE__ */ o(h, {}),
-  warning: /* @__PURE__ */ o(r, {})
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import __s from "@mattermost/compass-icons/components/alert-circle-outline.js";const s=__s&&__s.default?__s.default:__s;
+import __I from "@mattermost/compass-icons/components/alert-outline.js";const I=__I&&__I.default?__I.default:__I;
+import __N from "@mattermost/compass-icons/components/check.js";const N=__N&&__N.default?__N.default:__N;
+import __g from "@mattermost/compass-icons/components/close.js";const g=__g&&__g.default?__g.default:__g;
+import __v from "@mattermost/compass-icons/components/information-outline.js";const v=__v&&__v.default?__v.default:__v;
+import x from "../button/Button.js";
+import i, { IconSlotContext as y } from "../icon/Icon.js";
+import k from "../icon-button/IconButton.js";
+import { mergeClassNames as z } from "../../utils/props.js";
+import o from "./Toast.module.scss.js";
+const O = {
+  general: /* @__PURE__ */ e(s, {}),
+  info: /* @__PURE__ */ e(v, {}),
+  success: /* @__PURE__ */ e(N, {}),
+  danger: /* @__PURE__ */ e(I, {}),
+  warning: /* @__PURE__ */ e(s, {})
 };
-function T({
-  className: l = "",
-  message: c,
-  type: e = "general",
-  icon: m,
-  actionLabel: a,
+function F({
+  className: c = "",
+  message: m,
+  type: l = "general",
+  icon: f,
+  actionLabel: r,
   onAction: p,
-  onDismiss: s
+  onDismiss: t,
+  dismissLabel: d = "Dismiss",
+  dismissButtonProps: a,
+  ...C
 }) {
-  const d = t[`toast--type-${e.toLowerCase()}`], f = s == null ? t["toast--no-dismiss"] : "", u = [t.toast, d, f, l].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { className: u, role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ n("div", { className: t.toast__content, children: [
-      /* @__PURE__ */ o("span", { className: t.toast__icon, "aria-hidden": !0, children: /* @__PURE__ */ o(N.Provider, { value: { size: "16" }, children: m ?? /* @__PURE__ */ o(i, { glyph: x[e] }) }) }),
-      /* @__PURE__ */ o("span", { className: t.toast__message, children: c }),
-      a != null && /* @__PURE__ */ o(
-        g,
+  const h = o[`toast--type-${l.toLowerCase()}`], u = t == null ? o["toast--no-dismiss"] : "", _ = [o.toast, h, u, c].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { ...C, className: _, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ n("div", { className: o.toast__content, children: [
+      /* @__PURE__ */ e("span", { className: o.toast__icon, "aria-hidden": !0, children: /* @__PURE__ */ e(y.Provider, { value: { size: "16" }, children: f ?? /* @__PURE__ */ e(i, { glyph: O[l] }) }) }),
+      /* @__PURE__ */ e("span", { className: o.toast__message, children: m }),
+      r != null && /* @__PURE__ */ e(
+        x,
         {
           appearance: "default",
           emphasis: "tertiary",
           size: "x-small",
-          className: t["toast__action-btn--on-dark"],
+          className: o["toast__action-btn--on-dark"],
           onClick: p,
-          children: a
+          children: r
         }
       )
     ] }),
-    s != null && /* @__PURE__ */ o(
-      v,
+    t != null && /* @__PURE__ */ e(
+      k,
       {
-        "aria-label": "Dismiss",
+        ...a,
+        "aria-label": d,
         size: "small",
-        className: t.toast__dismiss,
-        icon: /* @__PURE__ */ o(i, { glyph: /* @__PURE__ */ o(_, {}), size: "16" }),
-        onClick: s
+        className: z(
+          o.toast__dismiss,
+          a == null ? void 0 : a.className
+        ),
+        icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(g, {}), size: "16" }),
+        onClick: t
       }
     )
   ] });
 }
 export {
-  T as default
+  F as default
 };
 //# sourceMappingURL=Toast.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","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":";;;;;;;;;;AA0BA,MAAMA,IAA2C;AAAA,EAC/C,2BAAUC,GAAA,EAAuB;AAAA,EACjC,wBAAOC,GAAA,EAAuB;AAAA,EAC9B,2BAAUC,GAAA,EAAU;AAAA,EACpB,0BAASC,GAAA,EAAiB;AAAA,EAC1B,2BAAUH,GAAA,CAAA,CAAuB;AACnC;AAOA,SAAwBI,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAe;AACb,QAAMC,IAAYC,EAAO,eAAeN,EAAK,YAAA,CAAa,EAAE,GACtDO,IAAiBH,KAAa,OAAOE,EAAO,mBAAmB,IAAI,IACnEE,IAAY,CAACF,EAAO,OAAOD,GAAWE,GAAgBT,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWU,GAAW,MAAK,UAAS,aAAU,UACjD,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWH,EAAO,gBACrB,UAAA;AAAA,MAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWJ,EAAO,aAAgB,eAAW,IACjD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,UAAAV,KAAQ,gBAAAS,EAACE,GAAA,EAAK,OAAOpB,EAAWQ,CAAI,EAAA,CAAG,EAAA,CAC1C,EAAA,CACF;AAAA,wBACC,QAAA,EAAK,WAAWM,EAAO,gBAAoB,UAAAP,GAAQ;AAAA,MACnDG,KAAe,QACd,gBAAAQ;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL,WAAWP,EAAO,4BAA4B;AAAA,UAC9C,SAASH;AAAA,UAER,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACCE,KAAa,QACZ,gBAAAM;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,cAAW;AAAA,QACX,MAAK;AAAA,QACL,WAAWR,EAAO;AAAA,QAClB,wBAAOM,GAAA,EAAK,yBAAQG,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,QAC5C,SAASX;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import type { HTMLAttributes, 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 type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './Toast.module.scss';\n\nexport type ToastType = 'general' | 'info' | 'success' | 'warning' | 'danger';\n\nexport interface ToastProps extends HTMLAttributes<HTMLDivElement> {\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  /** Accessible name for the dismiss button. Default: \"Dismiss\". */\n  dismissLabel?: string;\n  /** Extra attributes for the dismiss button (e.g. `data-testid`). */\n  dismissButtonProps?: BuiltInButtonProps;\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  dismissLabel = 'Dismiss',\n  dismissButtonProps,\n  ...rest\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 {...rest} 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          {...dismissButtonProps}\n          aria-label={dismissLabel}\n          size=\"small\"\n          className={mergeClassNames(\n            styles['toast__dismiss'],\n            dismissButtonProps?.className,\n          )}\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","dismissLabel","dismissButtonProps","rest","typeClass","styles","noDismissClass","rootClass","jsxs","jsx","IconSlotContext","Icon","Button","IconButton","mergeClassNames","CloseIcon"],"mappings":";;;;;;;;;;;AAgCA,MAAMA,IAA2C;AAAA,EAC/C,2BAAUC,GAAA,EAAuB;AAAA,EACjC,wBAAOC,GAAA,EAAuB;AAAA,EAC9B,2BAAUC,GAAA,EAAU;AAAA,EACpB,0BAASC,GAAA,EAAiB;AAAA,EAC1B,2BAAUH,GAAA,CAAA,CAAuB;AACnC;AAOA,SAAwBI,EAAM;AAAA,EAC5B,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAYC,EAAO,eAAeT,EAAK,YAAA,CAAa,EAAE,GACtDU,IAAiBN,KAAa,OAAOK,EAAO,mBAAmB,IAAI,IACnEE,IAAY,CAACF,EAAO,OAAOD,GAAWE,GAAgBZ,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAc,EAAC,SAAK,GAAGL,GAAM,WAAWI,GAAW,MAAK,UAAS,aAAU,UAC3D,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWH,EAAO,gBACrB,UAAA;AAAA,MAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWJ,EAAO,aAAgB,eAAW,IACjD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,UAAAb,KAAQ,gBAAAY,EAACE,GAAA,EAAK,OAAOvB,EAAWQ,CAAI,EAAA,CAAG,EAAA,CAC1C,EAAA,CACF;AAAA,wBACC,QAAA,EAAK,WAAWS,EAAO,gBAAoB,UAAAV,GAAQ;AAAA,MACnDG,KAAe,QACd,gBAAAW;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAS;AAAA,UACT,MAAK;AAAA,UACL,WAAWP,EAAO,4BAA4B;AAAA,UAC9C,SAASN;AAAA,UAER,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACCE,KAAa,QACZ,gBAAAS;AAAA,MAACI;AAAA,MAAA;AAAA,QACE,GAAGX;AAAA,QACJ,cAAYD;AAAA,QACZ,MAAK;AAAA,QACL,WAAWa;AAAA,UACTT,EAAO;AAAA,UACPH,KAAA,gBAAAA,EAAoB;AAAA,QAAA;AAAA,QAEtB,wBAAOS,GAAA,EAAK,yBAAQI,GAAA,EAAU,GAAI,MAAK,MAAK;AAAA,QAC5C,SAASf;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;"}

package/dist/components/tour-point/TourPoint.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__x=require("@mattermost/compass-icons/components/close.js"),x=__x?.default??__x,__h=require("@mattermost/compass-icons/components/chevron-right.js"),h=__h?.default??__h,m=require("../button/Button.cjs"),u=require("../icon/Icon.cjs"),g=require("../icon-button/IconButton.cjs"),N=require("../pagination-dots/PaginationDots.cjs"),v=require("../../utils/string.cjs"),t=require("./TourPoint.module.scss.cjs");function q({title:r,children:d,media:n,pointerPosition:o="top-center",showPulsingDot:c=!0,onClose:l,progress:s,primaryAction:a,className:p=""}){const i=o!=="none",_=i&&t.default[`tour-point--pointer-${v.toKebab(o)}`],f=[t.default["tour-point"],_,p].filter(Boolean).join(" "),j=s!=null||a!=null;return e.jsxs("div",{className:f,children:[i&&e.jsxs("span",{className:t.default["tour-point__pointer"],"aria-hidden":!0,children:[e.jsx("span",{className:t.default["tour-point__pointer-triangle"]}),c&&e.jsxs("span",{className:t.default["tour-point__pointer-pulse"],children:[e.jsx("span",{className:t.default["tour-point__pointer-pulse-ring"]}),e.jsx("span",{className:[t.default["tour-point__pointer-pulse-ring"],t.default["tour-point__pointer-pulse-ring--delay"]].join(" ")}),e.jsx("span",{className:t.default["tour-point__pointer-pulse-core"]})]})]}),e.jsxs("div",{className:t.default["tour-point__panel"],children:[e.jsxs("div",{className:t.default["tour-point__header"],children:[e.jsx("h2",{className:t.default["tour-point__title"],children:r}),l&&e.jsx(g.default,{className:t.default["tour-point__close"],"aria-label":"Close",size:"small",padding:"compact",style:"default",icon:e.jsx(u.default,{size:"16",glyph:e.jsx(x,{})}),onClick:l})]}),e.jsxs("div",{className:t.default["tour-point__body"],children:[e.jsx("div",{className:t.default["tour-point__description"],children:d}),n!=null&&e.jsx("div",{className:t.default["tour-point__media"],children:n})]}),j&&e.jsxs("div",{className:t.default["tour-point__footer"],children:[s!=null?e.jsx(N.default,{className:t.default["tour-point__progress"],pages:s.pages,activePage:s.activePage,dotStyle:"on-primary",onPageChange:s.onPageChange}):e.jsx("span",{className:t.default["tour-point__footer-spacer"],"aria-hidden":!0}),a!=null?e.jsx("div",{className:t.default["tour-point__next-wrap"],children:e.jsx(m.default,{emphasis:"primary",size:"small",trailingIcon:e.jsx(u.default,{size:"16",glyph:e.jsx(h,{})}),onClick:a.onClick,children:a.label})}):null]})]})]})}exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__g=require("@mattermost/compass-icons/components/close.js"),g=__g?.default??__g,__N=require("@mattermost/compass-icons/components/chevron-right.js"),N=__N?.default??__N,b=require("../button/Button.cjs"),r=require("../icon/Icon.cjs"),v=require("../icon-button/IconButton.cjs"),q=require("../pagination-dots/PaginationDots.cjs"),C=require("../../utils/props.cjs"),I=require("../../utils/string.cjs"),a=require("./TourPoint.module.scss.cjs");function P({title:d,children:c,media:n,pointerPosition:i="top-center",showPulsingDot:p=!0,onClose:o,closeLabel:_="Close",closeButtonProps:s,progress:t,primaryAction:l,className:f="",...j}){const u=i!=="none",m=u&&a.default[`tour-point--pointer-${I.toKebab(i)}`],x=[a.default["tour-point"],m,f].filter(Boolean).join(" "),h=t!=null||l!=null;return e.jsxs("div",{...j,className:x,children:[u&&e.jsxs("span",{className:a.default["tour-point__pointer"],"aria-hidden":!0,children:[e.jsx("span",{className:a.default["tour-point__pointer-triangle"]}),p&&e.jsxs("span",{className:a.default["tour-point__pointer-pulse"],children:[e.jsx("span",{className:a.default["tour-point__pointer-pulse-ring"]}),e.jsx("span",{className:[a.default["tour-point__pointer-pulse-ring"],a.default["tour-point__pointer-pulse-ring--delay"]].join(" ")}),e.jsx("span",{className:a.default["tour-point__pointer-pulse-core"]})]})]}),e.jsxs("div",{className:a.default["tour-point__panel"],children:[e.jsxs("div",{className:a.default["tour-point__header"],children:[e.jsx("h2",{className:a.default["tour-point__title"],children:d}),o&&e.jsx(v.default,{...s,className:C.mergeClassNames(a.default["tour-point__close"],s==null?void 0:s.className),"aria-label":_,size:"small",padding:"compact",style:"default",icon:e.jsx(r.default,{size:"16",glyph:e.jsx(g,{})}),onClick:o})]}),e.jsxs("div",{className:a.default["tour-point__body"],children:[e.jsx("div",{className:a.default["tour-point__description"],children:c}),n!=null&&e.jsx("div",{className:a.default["tour-point__media"],children:n})]}),h&&e.jsxs("div",{className:a.default["tour-point__footer"],children:[t!=null?e.jsx(q.default,{className:a.default["tour-point__progress"],pages:t.pages,activePage:t.activePage,dotStyle:"on-primary",onPageChange:t.onPageChange,label:t.label,formatPageLabel:t.formatPageLabel}):e.jsx("span",{className:a.default["tour-point__footer-spacer"],"aria-hidden":!0}),l!=null?e.jsx("div",{className:a.default["tour-point__next-wrap"],children:e.jsx(b.default,{emphasis:"primary",size:"small",trailingIcon:e.jsx(r.default,{size:"16",glyph:e.jsx(N,{})}),disabled:l.disabled,loading:l.loading,onClick:l.onClick,children:l.label})}):null]})]})]})}exports.default=P;
 //# sourceMappingURL=TourPoint.cjs.map

package/dist/components/tour-point/TourPoint.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TourPoint.cjs","sources":["../../../src/components/tour-point/TourPoint.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport PaginationDots from '@/components/pagination-dots/PaginationDots';\nimport { toKebab } from '@/utils/string';\nimport styles from './TourPoint.module.scss';\n\nexport type TourPointPointerPosition =\n  | 'top-center'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-center'\n  | 'right-center';\n\nexport interface TourPointProgress {\n  pages: number;\n  activePage: number;\n  onPageChange?: (page: number) => void;\n}\n\nexport interface TourPointPrimaryAction {\n  label: string;\n  onClick?: () => void;\n}\n\nexport interface TourPointProps {\n  title: string;\n  children: ReactNode;\n  /** Optional image between body copy and footer (e.g. screenshot as an img). */\n  media?: ReactNode;\n  /** Where the pointer sits on the card edge; omit or `none` to hide the pointer. */\n  pointerPosition?: TourPointPointerPosition | 'none';\n  /**\n   * Animated marker at the arrow tip (Figma Pulsing Dot). Only applies when a\n   * pointer is shown. Default on; set false for reduced motion preference at the\n   * callsite or a static tour step.\n   */\n  showPulsingDot?: boolean;\n  onClose?: () => void;\n  progress?: TourPointProgress;\n  primaryAction?: TourPointPrimaryAction;\n  className?: string;\n}\n\nexport default function TourPoint({\n  title,\n  children,\n  media,\n  pointerPosition = 'top-center',\n  showPulsingDot = true,\n  onClose,\n  progress,\n  primaryAction,\n  className = '',\n}: TourPointProps) {\n  const showPointer = pointerPosition !== 'none';\n  const pointerModifier =\n    showPointer &&\n    styles[\n      `tour-point--pointer-${toKebab(pointerPosition as TourPointPointerPosition)}`\n    ];\n\n  const rootClass = [styles['tour-point'], pointerModifier, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const showFooter = progress != null || primaryAction != null;\n\n  return (\n    <div className={rootClass}>\n      {showPointer && (\n        <span className={styles['tour-point__pointer']} aria-hidden>\n          <span className={styles['tour-point__pointer-triangle']} />\n          {showPulsingDot && (\n            <span className={styles['tour-point__pointer-pulse']}>\n              <span className={styles['tour-point__pointer-pulse-ring']} />\n              <span\n                className={[\n                  styles['tour-point__pointer-pulse-ring'],\n                  styles['tour-point__pointer-pulse-ring--delay'],\n                ].join(' ')}\n              />\n              <span className={styles['tour-point__pointer-pulse-core']} />\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={styles['tour-point__panel']}>\n        <div className={styles['tour-point__header']}>\n          <h2 className={styles['tour-point__title']}>{title}</h2>\n          {onClose && (\n            <IconButton\n              className={styles['tour-point__close']}\n              aria-label=\"Close\"\n              size=\"small\"\n              padding=\"compact\"\n              style=\"default\"\n              icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n              onClick={onClose}\n            />\n          )}\n        </div>\n\n        <div className={styles['tour-point__body']}>\n          <div className={styles['tour-point__description']}>{children}</div>\n          {media != null && (\n            <div className={styles['tour-point__media']}>{media}</div>\n          )}\n        </div>\n\n        {showFooter && (\n          <div className={styles['tour-point__footer']}>\n            {progress != null ? (\n              <PaginationDots\n                className={styles['tour-point__progress']}\n                pages={progress.pages}\n                activePage={progress.activePage}\n                dotStyle=\"on-primary\"\n                onPageChange={progress.onPageChange}\n              />\n            ) : (\n              <span\n                className={styles['tour-point__footer-spacer']}\n                aria-hidden\n              />\n            )}\n\n            {primaryAction != null ? (\n              <div className={styles['tour-point__next-wrap']}>\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  trailingIcon={<Icon size=\"16\" glyph={<ChevronRightIcon />} />}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TourPoint","title","children","media","pointerPosition","showPulsingDot","onClose","progress","primaryAction","className","showPointer","pointerModifier","styles","toKebab","rootClass","showFooter","jsxs","jsx","IconButton","Icon","CloseIcon","PaginationDots","Button","ChevronRightIcon"],"mappings":"kfAkDA,SAAwBA,EAAU,CAChC,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,gBAAAC,EAAkB,aAClB,eAAAC,EAAiB,GACjB,QAAAC,EACA,SAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,EACd,EAAmB,CACjB,MAAMC,EAAcN,IAAoB,OAClCO,EACJD,GACAE,UACE,uBAAuBC,UAAQT,CAA2C,CAAC,EAC7E,EAEIU,EAAY,CAACF,UAAO,YAAY,EAAGD,EAAiBF,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAELM,EAAaR,GAAY,MAAQC,GAAiB,KAExD,OACEQ,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACb,SAAA,CAAAJ,UACE,OAAA,CAAK,UAAWE,UAAO,qBAAqB,EAAG,cAAW,GACzD,SAAA,CAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,8BAA8B,CAAA,CAAG,EACxDP,GACCW,EAAAA,KAAC,OAAA,CAAK,UAAWJ,UAAO,2BAA2B,EACjD,SAAA,CAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,gCAAgC,CAAA,CAAG,EAC3DK,EAAAA,IAAC,OAAA,CACC,UAAW,CACTL,EAAAA,QAAO,gCAAgC,EACvCA,EAAAA,QAAO,uCAAuC,CAAA,EAC9C,KAAK,GAAG,CAAA,CAAA,EAEZK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,gCAAgC,CAAA,CAAG,CAAA,CAAA,CAC7D,CAAA,EAEJ,EAGFI,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAK,MAAC,KAAA,CAAG,UAAWL,EAAAA,QAAO,mBAAmB,EAAI,SAAAX,EAAM,EAClDK,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWN,EAAAA,QAAO,mBAAmB,EACrC,aAAW,QACX,KAAK,QACL,QAAQ,UACR,MAAM,UACN,WAAOO,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACG,IAAU,EAAI,EAC5C,QAASd,CAAA,CAAA,CACX,EAEJ,EAEAU,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,kBAAkB,EACvC,SAAA,CAAAK,EAAAA,IAAC,MAAA,CAAI,UAAWL,EAAAA,QAAO,yBAAyB,EAAI,SAAAV,EAAS,EAC5DC,GAAS,MACRc,EAAAA,IAAC,MAAA,CAAI,UAAWL,EAAAA,QAAO,mBAAmB,EAAI,SAAAT,CAAA,CAAM,CAAA,EAExD,EAECY,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAWJ,UAAO,oBAAoB,EACxC,SAAA,CAAAL,GAAY,KACXU,EAAAA,IAACI,EAAAA,QAAA,CACC,UAAWT,EAAAA,QAAO,sBAAsB,EACxC,MAAOL,EAAS,MAChB,WAAYA,EAAS,WACrB,SAAS,aACT,aAAcA,EAAS,YAAA,CAAA,EAGzBU,EAAAA,IAAC,OAAA,CACC,UAAWL,EAAAA,QAAO,2BAA2B,EAC7C,cAAW,EAAA,CAAA,EAIdJ,GAAiB,KAChBS,EAAAA,IAAC,OAAI,UAAWL,UAAO,uBAAuB,EAC5C,SAAAK,EAAAA,IAACK,EAAAA,QAAA,CACC,SAAS,UACT,KAAK,QACL,mBAAeH,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACM,IAAiB,EAAI,EAC3D,QAASf,EAAc,QAEtB,SAAAA,EAAc,KAAA,CAAA,EAEnB,EACE,IAAA,CAAA,CACN,CAAA,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"TourPoint.cjs","sources":["../../../src/components/tour-point/TourPoint.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport PaginationDots from '@/components/pagination-dots/PaginationDots';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './TourPoint.module.scss';\n\nexport type TourPointPointerPosition =\n  | 'top-center'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-center'\n  | 'right-center';\n\nexport interface TourPointProgress {\n  pages: number;\n  activePage: number;\n  onPageChange?: (page: number) => void;\n  /** Accessible name for the step dots. Default: \"Pages\". */\n  label?: string;\n  /** Accessible name for each step dot. Default: `Page {page}`. */\n  formatPageLabel?: (page: number) => string;\n}\n\nexport interface TourPointPrimaryAction {\n  /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  /** Shows a spinner in the button and disables it. */\n  loading?: boolean;\n}\n\nexport interface TourPointProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children'\n> {\n  /** Tour step heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  children: ReactNode;\n  /** Optional image between body copy and footer (e.g. screenshot as an img). */\n  media?: ReactNode;\n  /** Where the pointer sits on the card edge; omit or `none` to hide the pointer. */\n  pointerPosition?: TourPointPointerPosition | 'none';\n  /**\n   * Animated marker at the arrow tip (Figma Pulsing Dot). Only applies when a\n   * pointer is shown. Default on; set false for reduced motion preference at the\n   * callsite or a static tour step.\n   */\n  showPulsingDot?: boolean;\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  progress?: TourPointProgress;\n  primaryAction?: TourPointPrimaryAction;\n  className?: string;\n}\n\nexport default function TourPoint({\n  title,\n  children,\n  media,\n  pointerPosition = 'top-center',\n  showPulsingDot = true,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  progress,\n  primaryAction,\n  className = '',\n  ...rest\n}: TourPointProps) {\n  const showPointer = pointerPosition !== 'none';\n  const pointerModifier =\n    showPointer &&\n    styles[\n      `tour-point--pointer-${toKebab(pointerPosition as TourPointPointerPosition)}`\n    ];\n\n  const rootClass = [styles['tour-point'], pointerModifier, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const showFooter = progress != null || primaryAction != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      {showPointer && (\n        <span className={styles['tour-point__pointer']} aria-hidden>\n          <span className={styles['tour-point__pointer-triangle']} />\n          {showPulsingDot && (\n            <span className={styles['tour-point__pointer-pulse']}>\n              <span className={styles['tour-point__pointer-pulse-ring']} />\n              <span\n                className={[\n                  styles['tour-point__pointer-pulse-ring'],\n                  styles['tour-point__pointer-pulse-ring--delay'],\n                ].join(' ')}\n              />\n              <span className={styles['tour-point__pointer-pulse-core']} />\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={styles['tour-point__panel']}>\n        <div className={styles['tour-point__header']}>\n          <h2 className={styles['tour-point__title']}>{title}</h2>\n          {onClose && (\n            <IconButton\n              {...closeButtonProps}\n              className={mergeClassNames(\n                styles['tour-point__close'],\n                closeButtonProps?.className,\n              )}\n              aria-label={closeLabel}\n              size=\"small\"\n              padding=\"compact\"\n              style=\"default\"\n              icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n              onClick={onClose}\n            />\n          )}\n        </div>\n\n        <div className={styles['tour-point__body']}>\n          <div className={styles['tour-point__description']}>{children}</div>\n          {media != null && (\n            <div className={styles['tour-point__media']}>{media}</div>\n          )}\n        </div>\n\n        {showFooter && (\n          <div className={styles['tour-point__footer']}>\n            {progress != null ? (\n              <PaginationDots\n                className={styles['tour-point__progress']}\n                pages={progress.pages}\n                activePage={progress.activePage}\n                dotStyle=\"on-primary\"\n                onPageChange={progress.onPageChange}\n                label={progress.label}\n                formatPageLabel={progress.formatPageLabel}\n              />\n            ) : (\n              <span\n                className={styles['tour-point__footer-spacer']}\n                aria-hidden\n              />\n            )}\n\n            {primaryAction != null ? (\n              <div className={styles['tour-point__next-wrap']}>\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  trailingIcon={<Icon size=\"16\" glyph={<ChevronRightIcon />} />}\n                  disabled={primaryAction.disabled}\n                  loading={primaryAction.loading}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TourPoint","title","children","media","pointerPosition","showPulsingDot","onClose","closeLabel","closeButtonProps","progress","primaryAction","className","rest","showPointer","pointerModifier","styles","toKebab","rootClass","showFooter","jsxs","jsx","IconButton","mergeClassNames","Icon","CloseIcon","PaginationDots","Button","ChevronRightIcon"],"mappings":"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"}