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

package/dist/components/message-actions/MessageActions.js

@@ -1,163 +1,175 @@
 import { jsxs as o, Fragment as l, jsx as a } from "react/jsx-runtime";
-import c from "../emoji/Emoji.js";
+import t from "../emoji/Emoji.js";
 import i from "../icon-button/IconButton.js";
 import e from "../icon/Icon.js";
-import __R from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const R=__R&&__R.default?__R.default:__R;
-import __t from "@mattermost/compass-icons/components/dots-horizontal.js";const t=__t&&__t.default?__t.default:__t;
-import __m from "@mattermost/compass-icons/components/bookmark-outline.js";const m=__m&&__m.default?__m.default:__m;
-import __j from "@mattermost/compass-icons/components/creation-outline.js";const j=__j&&__j.default?__j.default:__j;
-import __M from "@mattermost/compass-icons/components/apps.js";const M=__M&&__M.default?__M.default:__M;
-import __p from "@mattermost/compass-icons/components/reply-outline.js";const p=__p&&__p.default?__p.default:__p;
-import d from "./MessageActions.module.scss.js";
-function J({
+import __H from "@mattermost/compass-icons/components/emoticon-plus-outline.js";const H=__H&&__H.default?__H.default:__H;
+import __r from "@mattermost/compass-icons/components/dots-horizontal.js";const r=__r&&__r.default?__r.default:__r;
+import __g from "@mattermost/compass-icons/components/bookmark-outline.js";const g=__g&&__g.default?__g.default:__g;
+import __J from "@mattermost/compass-icons/components/creation-outline.js";const J=__J&&__J.default?__J.default:__J;
+import __N from "@mattermost/compass-icons/components/apps.js";const N=__N&&__N.default?__N.default:__N;
+import __h from "@mattermost/compass-icons/components/reply-outline.js";const h=__h&&__h.default?__h.default:__h;
+import z from "./MessageActions.module.scss.js";
+function V({
   type: s = "center-channel",
-  visible: g = !0,
-  collapsedReplyThreads: h = !0,
-  quickReactions: z = !0,
-  className: u = "",
-  ...b
+  visible: u = !0,
+  collapsedReplyThreads: b = !0,
+  quickReactions: f = !0,
+  className: y = "",
+  toolbarLabel: I = "Message actions",
+  reactThumbsUpLabel: j = "React with thumbs up",
+  reactRaisedHandsLabel: R = "React with raised hands",
+  reactOkHandLabel: O = "React with OK hand",
+  addReactionLabel: w = "Add reaction",
+  moreActionsLabel: n = "More actions",
+  saveLabel: m = "Save message",
+  aiActionsLabel: C = "AI actions",
+  pluginActionsLabel: k = "Plugin actions",
+  replyLabel: p = "Reply in thread",
+  jumpLabel: x = "Jump",
+  jumpAriaLabel: B = "Jump to message",
+  ...M
 }) {
-  if (!g) return null;
-  const r = s === "center-channel", f = s === "rhs", n = s === "search-results", y = z && h, I = [d["message-actions"], u].filter(Boolean).join(" ");
+  if (!u) return null;
+  const d = s === "center-channel", S = s === "rhs", c = s === "search-results", A = f && b, E = [z["message-actions"], y].filter(Boolean).join(" ");
   return /* @__PURE__ */ o(
     "div",
     {
-      className: I,
+      className: E,
       role: "toolbar",
-      "aria-label": "Message actions",
-      ...b,
+      "aria-label": I,
+      ...M,
       children: [
-        y && !n && /* @__PURE__ */ o(l, { children: [
+        A && !c && /* @__PURE__ */ o(l, { children: [
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "React with thumbs up",
+              "aria-label": j,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(c, { emoji: "👍", size: "16" })
+              icon: /* @__PURE__ */ a(t, { emoji: "👍", size: "16" })
             }
           ),
-          r && /* @__PURE__ */ o(l, { children: [
+          d && /* @__PURE__ */ o(l, { children: [
             /* @__PURE__ */ a(
               i,
               {
-                "aria-label": "React with raised hands",
+                "aria-label": R,
                 size: "small",
                 padding: "compact",
-                icon: /* @__PURE__ */ a(c, { emoji: "🙌", size: "16" })
+                icon: /* @__PURE__ */ a(t, { emoji: "🙌", size: "16" })
               }
             ),
             /* @__PURE__ */ a(
               i,
               {
-                "aria-label": "React with OK hand",
+                "aria-label": O,
                 size: "small",
                 padding: "compact",
-                icon: /* @__PURE__ */ a(c, { emoji: "👌", size: "16" })
+                icon: /* @__PURE__ */ a(t, { emoji: "👌", size: "16" })
               }
             )
           ] }),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Add reaction",
+              "aria-label": w,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(R, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(H, {}) })
             }
           )
         ] }),
-        n && /* @__PURE__ */ a(
+        c && /* @__PURE__ */ a(
           i,
           {
-            "aria-label": "More actions",
+            "aria-label": n,
             size: "small",
             padding: "compact",
-            icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(t, {}) })
+            icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(r, {}) })
           }
         ),
-        r && /* @__PURE__ */ o(l, { children: [
+        d && /* @__PURE__ */ o(l, { children: [
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Save message",
+              "aria-label": m,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(m, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(g, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "AI actions",
+              "aria-label": C,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(j, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(J, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Plugin actions",
+              "aria-label": k,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(M, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(N, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Reply in thread",
+              "aria-label": p,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(p, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(h, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "More actions",
+              "aria-label": n,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(t, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(r, {}) })
             }
           )
         ] }),
-        f && /* @__PURE__ */ a(
+        S && /* @__PURE__ */ a(
           i,
           {
-            "aria-label": "More actions",
+            "aria-label": n,
             size: "small",
             padding: "compact",
-            icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(t, {}) })
+            icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(r, {}) })
           }
         ),
-        n && /* @__PURE__ */ o(l, { children: [
+        c && /* @__PURE__ */ o(l, { children: [
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Save message",
+              "aria-label": m,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(m, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(g, {}) })
             }
           ),
           /* @__PURE__ */ a(
             i,
             {
-              "aria-label": "Reply in thread",
+              "aria-label": p,
               size: "small",
               padding: "compact",
-              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(p, {}) })
+              icon: /* @__PURE__ */ a(e, { size: "16", glyph: /* @__PURE__ */ a(h, {}) })
             }
           ),
           /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              className: d["message-actions__jump"],
-              "aria-label": "Jump to message",
-              children: "Jump"
+              className: z["message-actions__jump"],
+              "aria-label": B,
+              children: x
             }
           )
         ] })
@@ -166,6 +178,6 @@ function J({
   );
 }
 export {
-  J as default
+  V as default
 };
 //# sourceMappingURL=MessageActions.js.map

package/dist/components/message-actions/MessageActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageActions.js","sources":["../../../src/components/message-actions/MessageActions.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Emoji from '@/components/emoji/Emoji';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport AppsIcon from '@mattermost/compass-icons/components/apps';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport styles from './MessageActions.module.scss';\n\nexport type MessageActionsType = 'center-channel' | 'rhs' | 'search-results';\n\nexport interface MessageActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Context variant. Default: Center Channel. */\n  type?: MessageActionsType;\n  /** Whether the hover toolbar is visible. Default: true. */\n  visible?: boolean;\n  /** Whether collapsed reply threads feature is on. Default: true. */\n  collapsedReplyThreads?: boolean;\n  /** Whether quick reactions are shown. Default: true. */\n  quickReactions?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Message Actions is the floating toolbar that appears on a message when you hover, tab, or\n * long-press it. It bundles the most common per-message actions — react, save, reply, more —\n * into a small, context-aware row that hovers above the post.\n */\nexport default function MessageActions({\n  type = 'center-channel',\n  visible = true,\n  collapsedReplyThreads = true,\n  quickReactions = true,\n  className = '',\n  ...rest\n}: MessageActionsProps) {\n  if (!visible) return null;\n\n  const isCenterChannel = type === 'center-channel';\n  const isRHS = type === 'rhs';\n  const isSearchResults = type === 'search-results';\n  const showQuickReactions = quickReactions && collapsedReplyThreads;\n\n  const rootClass = [styles['message-actions'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      role=\"toolbar\"\n      aria-label=\"Message actions\"\n      {...rest}\n    >\n      {/* Quick reaction emojis — center channel + RHS */}\n      {showQuickReactions && !isSearchResults && (\n        <>\n          <IconButton\n            aria-label=\"React with thumbs up\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Emoji emoji=\"👍\" size=\"16\" />}\n          />\n          {isCenterChannel && (\n            <>\n              <IconButton\n                aria-label=\"React with raised hands\"\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Emoji emoji=\"🙌\" size=\"16\" />}\n              />\n              <IconButton\n                aria-label=\"React with OK hand\"\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Emoji emoji=\"👌\" size=\"16\" />}\n              />\n            </>\n          )}\n          <IconButton\n            aria-label=\"Add reaction\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        </>\n      )}\n\n      {/* Search results only: more button first */}\n      {isSearchResults && (\n        <IconButton\n          aria-label=\"More actions\"\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n        />\n      )}\n\n      {/* Center channel actions */}\n      {isCenterChannel && (\n        <>\n          <IconButton\n            aria-label=\"Save message\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<BookmarkOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label=\"AI actions\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<CreationOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label=\"Plugin actions\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<AppsIcon />} />}\n          />\n          <IconButton\n            aria-label=\"Reply in thread\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<ReplyOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label=\"More actions\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n          />\n        </>\n      )}\n\n      {/* RHS actions */}\n      {isRHS && (\n        <IconButton\n          aria-label=\"More actions\"\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n        />\n      )}\n\n      {/* Search results additional buttons */}\n      {isSearchResults && (\n        <>\n          <IconButton\n            aria-label=\"Save message\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<BookmarkOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label=\"Reply in thread\"\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<ReplyOutlineIcon />} />}\n          />\n          <button\n            type=\"button\"\n            className={styles['message-actions__jump']}\n            aria-label=\"Jump to message\"\n          >\n            Jump\n          </button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["MessageActions","type","visible","collapsedReplyThreads","quickReactions","className","rest","isCenterChannel","isRHS","isSearchResults","showQuickReactions","rootClass","styles","jsxs","Fragment","jsx","IconButton","Emoji","Icon","EmoticonPlusOutlineIcon","DotsHorizontalIcon","BookmarkOutlineIcon","CreationOutlineIcon","AppsIcon","ReplyOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"MessageActions.js","sources":["../../../src/components/message-actions/MessageActions.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Emoji from '@/components/emoji/Emoji';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';\nimport DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport BookmarkOutlineIcon from '@mattermost/compass-icons/components/bookmark-outline';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport AppsIcon from '@mattermost/compass-icons/components/apps';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport styles from './MessageActions.module.scss';\n\nexport type MessageActionsType = 'center-channel' | 'rhs' | 'search-results';\n\nexport interface MessageActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Context variant. Default: Center Channel. */\n  type?: MessageActionsType;\n  /** Whether the hover toolbar is visible. Default: true. */\n  visible?: boolean;\n  /** Whether collapsed reply threads feature is on. Default: true. */\n  collapsedReplyThreads?: boolean;\n  /** Whether quick reactions are shown. Default: true. */\n  quickReactions?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Accessible name for the toolbar. Default: \"Message actions\". An explicit `aria-label` still wins. */\n  toolbarLabel?: string;\n  /** Default: \"React with thumbs up\". */\n  reactThumbsUpLabel?: string;\n  /** Default: \"React with raised hands\". */\n  reactRaisedHandsLabel?: string;\n  /** Default: \"React with OK hand\". */\n  reactOkHandLabel?: string;\n  /** Default: \"Add reaction\". */\n  addReactionLabel?: string;\n  /** Default: \"More actions\". */\n  moreActionsLabel?: string;\n  /** Default: \"Save message\". */\n  saveLabel?: string;\n  /** Default: \"AI actions\". */\n  aiActionsLabel?: string;\n  /** Default: \"Plugin actions\". */\n  pluginActionsLabel?: string;\n  /** Default: \"Reply in thread\". */\n  replyLabel?: string;\n  /** Visible Jump button text (search results). Default: \"Jump\". */\n  jumpLabel?: ReactNode;\n  /** Accessible name for the Jump button. Default: \"Jump to message\". */\n  jumpAriaLabel?: string;\n}\n\n/**\n * Message Actions is the floating toolbar that appears on a message when you hover, tab, or\n * long-press it. It bundles the most common per-message actions — react, save, reply, more —\n * into a small, context-aware row that hovers above the post.\n */\nexport default function MessageActions({\n  type = 'center-channel',\n  visible = true,\n  collapsedReplyThreads = true,\n  quickReactions = true,\n  className = '',\n  toolbarLabel = 'Message actions',\n  reactThumbsUpLabel = 'React with thumbs up',\n  reactRaisedHandsLabel = 'React with raised hands',\n  reactOkHandLabel = 'React with OK hand',\n  addReactionLabel = 'Add reaction',\n  moreActionsLabel = 'More actions',\n  saveLabel = 'Save message',\n  aiActionsLabel = 'AI actions',\n  pluginActionsLabel = 'Plugin actions',\n  replyLabel = 'Reply in thread',\n  jumpLabel = 'Jump',\n  jumpAriaLabel = 'Jump to message',\n  ...rest\n}: MessageActionsProps) {\n  if (!visible) return null;\n\n  const isCenterChannel = type === 'center-channel';\n  const isRHS = type === 'rhs';\n  const isSearchResults = type === 'search-results';\n  const showQuickReactions = quickReactions && collapsedReplyThreads;\n\n  const rootClass = [styles['message-actions'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      role=\"toolbar\"\n      aria-label={toolbarLabel}\n      {...rest}\n    >\n      {/* Quick reaction emojis — center channel + RHS */}\n      {showQuickReactions && !isSearchResults && (\n        <>\n          <IconButton\n            aria-label={reactThumbsUpLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Emoji emoji=\"👍\" size=\"16\" />}\n          />\n          {isCenterChannel && (\n            <>\n              <IconButton\n                aria-label={reactRaisedHandsLabel}\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Emoji emoji=\"🙌\" size=\"16\" />}\n              />\n              <IconButton\n                aria-label={reactOkHandLabel}\n                size=\"small\"\n                padding=\"compact\"\n                icon={<Emoji emoji=\"👌\" size=\"16\" />}\n              />\n            </>\n          )}\n          <IconButton\n            aria-label={addReactionLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<EmoticonPlusOutlineIcon />} />}\n          />\n        </>\n      )}\n\n      {/* Search results only: more button first */}\n      {isSearchResults && (\n        <IconButton\n          aria-label={moreActionsLabel}\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n        />\n      )}\n\n      {/* Center channel actions */}\n      {isCenterChannel && (\n        <>\n          <IconButton\n            aria-label={saveLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<BookmarkOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label={aiActionsLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<CreationOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label={pluginActionsLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<AppsIcon />} />}\n          />\n          <IconButton\n            aria-label={replyLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<ReplyOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label={moreActionsLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n          />\n        </>\n      )}\n\n      {/* RHS actions */}\n      {isRHS && (\n        <IconButton\n          aria-label={moreActionsLabel}\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n        />\n      )}\n\n      {/* Search results additional buttons */}\n      {isSearchResults && (\n        <>\n          <IconButton\n            aria-label={saveLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<BookmarkOutlineIcon />} />}\n          />\n          <IconButton\n            aria-label={replyLabel}\n            size=\"small\"\n            padding=\"compact\"\n            icon={<Icon size=\"16\" glyph={<ReplyOutlineIcon />} />}\n          />\n          <button\n            type=\"button\"\n            className={styles['message-actions__jump']}\n            aria-label={jumpAriaLabel}\n          >\n            {jumpLabel}\n          </button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["MessageActions","type","visible","collapsedReplyThreads","quickReactions","className","toolbarLabel","reactThumbsUpLabel","reactRaisedHandsLabel","reactOkHandLabel","addReactionLabel","moreActionsLabel","saveLabel","aiActionsLabel","pluginActionsLabel","replyLabel","jumpLabel","jumpAriaLabel","rest","isCenterChannel","isRHS","isSearchResults","showQuickReactions","rootClass","styles","jsxs","Fragment","jsx","IconButton","Emoji","Icon","EmoticonPlusOutlineIcon","DotsHorizontalIcon","BookmarkOutlineIcon","CreationOutlineIcon","AppsIcon","ReplyOutlineIcon"],"mappings":"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"}

package/dist/components/message-header/MessageHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.cjs","sources":["../../../src/components/message-header/MessageHeader.tsx"],"sourcesContent":["import Tag from '@/components/tag/Tag';\nimport styles from './MessageHeader.module.scss';\n\ntype MessageHeaderProps = {\n  username: string;\n  timestamp: string;\n  isBot?: boolean;\n  botLabel?: string;\n};\n\n/**\n * The Message Header sits above every message body — username, optional bot or guest tag,\n * and timestamp. It's the byline of the conversation, so the rules are tight: same parts,\n * same order, every time.\n */\nexport default function MessageHeader({\n  username,\n  timestamp,\n  isBot = false,\n  botLabel = 'Bot',\n}: MessageHeaderProps) {\n  return (\n    <div className={styles['message-header']}>\n      <span className={styles['message-header__username']}>{username}</span>\n      {isBot && <Tag label={botLabel} />}\n      <span className={styles['message-header__timestamp']}>{timestamp}</span>\n    </div>\n  );\n}\n"],"names":["MessageHeader","username","timestamp","isBot","botLabel","jsxs","styles","jsx","Tag"],"mappings":"0NAeA,SAAwBA,EAAc,CACpC,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,GACR,SAAAC,EAAW,KACb,EAAuB,CACrB,OACEC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,gBAAgB,EACrC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,0BAA0B,EAAI,SAAAL,EAAS,EAC9DE,GAASI,EAAAA,IAACC,EAAAA,QAAA,CAAI,MAAOJ,CAAA,CAAU,QAC/B,OAAA,CAAK,UAAWE,EAAAA,QAAO,2BAA2B,EAAI,SAAAJ,CAAA,CAAU,CAAA,EACnE,CAEJ"}
+{"version":3,"file":"MessageHeader.cjs","sources":["../../../src/components/message-header/MessageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Tag from '@/components/tag/Tag';\nimport styles from './MessageHeader.module.scss';\n\ntype MessageHeaderProps = {\n  username: ReactNode;\n  timestamp: ReactNode;\n  isBot?: boolean;\n  /** Default: \"Bot\". Accepts translated nodes. */\n  botLabel?: ReactNode;\n};\n\n/**\n * The Message Header sits above every message body — username, optional bot or guest tag,\n * and timestamp. It's the byline of the conversation, so the rules are tight: same parts,\n * same order, every time.\n */\nexport default function MessageHeader({\n  username,\n  timestamp,\n  isBot = false,\n  botLabel = 'Bot',\n}: MessageHeaderProps) {\n  return (\n    <div className={styles['message-header']}>\n      <span className={styles['message-header__username']}>{username}</span>\n      {isBot && <Tag label={botLabel} />}\n      <span className={styles['message-header__timestamp']}>{timestamp}</span>\n    </div>\n  );\n}\n"],"names":["MessageHeader","username","timestamp","isBot","botLabel","jsxs","styles","jsx","Tag"],"mappings":"0NAiBA,SAAwBA,EAAc,CACpC,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,GACR,SAAAC,EAAW,KACb,EAAuB,CACrB,OACEC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,gBAAgB,EACrC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,0BAA0B,EAAI,SAAAL,EAAS,EAC9DE,GAASI,EAAAA,IAACC,EAAAA,QAAA,CAAI,MAAOJ,CAAA,CAAU,QAC/B,OAAA,CAAK,UAAWE,EAAAA,QAAO,2BAA2B,EAAI,SAAAJ,CAAA,CAAU,CAAA,EACnE,CAEJ"}

package/dist/components/message-header/MessageHeader.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 type MessageHeaderProps = {
-    username: string;
-    timestamp: string;
+    username: ReactNode;
+    timestamp: ReactNode;
     isBot?: boolean;
-    botLabel?: string;
+    /** Default: "Bot". Accepts translated nodes. */
+    botLabel?: ReactNode;
 };
 /**
  * The Message Header sits above every message body — username, optional bot or guest tag,

package/dist/components/message-header/MessageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message-header/MessageHeader.tsx"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,KAAa,EACb,QAAgB,GACjB,EAAE,kBAAkB,2CAQpB"}
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message-header/MessageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,KAAa,EACb,QAAgB,GACjB,EAAE,kBAAkB,2CAQpB"}

package/dist/components/message-header/MessageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.js","sources":["../../../src/components/message-header/MessageHeader.tsx"],"sourcesContent":["import Tag from '@/components/tag/Tag';\nimport styles from './MessageHeader.module.scss';\n\ntype MessageHeaderProps = {\n  username: string;\n  timestamp: string;\n  isBot?: boolean;\n  botLabel?: string;\n};\n\n/**\n * The Message Header sits above every message body — username, optional bot or guest tag,\n * and timestamp. It's the byline of the conversation, so the rules are tight: same parts,\n * same order, every time.\n */\nexport default function MessageHeader({\n  username,\n  timestamp,\n  isBot = false,\n  botLabel = 'Bot',\n}: MessageHeaderProps) {\n  return (\n    <div className={styles['message-header']}>\n      <span className={styles['message-header__username']}>{username}</span>\n      {isBot && <Tag label={botLabel} />}\n      <span className={styles['message-header__timestamp']}>{timestamp}</span>\n    </div>\n  );\n}\n"],"names":["MessageHeader","username","timestamp","isBot","botLabel","jsxs","styles","jsx","Tag"],"mappings":";;;AAeA,SAAwBA,EAAc;AAAA,EACpC,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AACb,GAAuB;AACrB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,gBAAgB,GACrC,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,0BAA0B,GAAI,UAAAL,GAAS;AAAA,IAC9DE,KAAS,gBAAAI,EAACC,GAAA,EAAI,OAAOJ,EAAA,CAAU;AAAA,sBAC/B,QAAA,EAAK,WAAWE,EAAO,2BAA2B,GAAI,UAAAJ,EAAA,CAAU;AAAA,EAAA,GACnE;AAEJ;"}
+{"version":3,"file":"MessageHeader.js","sources":["../../../src/components/message-header/MessageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Tag from '@/components/tag/Tag';\nimport styles from './MessageHeader.module.scss';\n\ntype MessageHeaderProps = {\n  username: ReactNode;\n  timestamp: ReactNode;\n  isBot?: boolean;\n  /** Default: \"Bot\". Accepts translated nodes. */\n  botLabel?: ReactNode;\n};\n\n/**\n * The Message Header sits above every message body — username, optional bot or guest tag,\n * and timestamp. It's the byline of the conversation, so the rules are tight: same parts,\n * same order, every time.\n */\nexport default function MessageHeader({\n  username,\n  timestamp,\n  isBot = false,\n  botLabel = 'Bot',\n}: MessageHeaderProps) {\n  return (\n    <div className={styles['message-header']}>\n      <span className={styles['message-header__username']}>{username}</span>\n      {isBot && <Tag label={botLabel} />}\n      <span className={styles['message-header__timestamp']}>{timestamp}</span>\n    </div>\n  );\n}\n"],"names":["MessageHeader","username","timestamp","isBot","botLabel","jsxs","styles","jsx","Tag"],"mappings":";;;AAiBA,SAAwBA,EAAc;AAAA,EACpC,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AACb,GAAuB;AACrB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,gBAAgB,GACrC,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,0BAA0B,GAAI,UAAAL,GAAS;AAAA,IAC9DE,KAAS,gBAAAI,EAACC,GAAA,EAAI,OAAOJ,EAAA,CAAU;AAAA,sBAC/B,QAAA,EAAK,WAAWE,EAAO,2BAA2B,GAAI,UAAAJ,EAAA,CAAU;AAAA,EAAA,GACnE;AAEJ;"}

package/dist/components/message-separator/MessageSeparator.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("../icon/Icon.cjs"),__c=require("@mattermost/compass-icons/components/creation-outline.js"),c=__c?.default??__c,a=require("./MessageSeparator.module.scss.cjs"),g={date:"Today","new-messages":"New messages","reply-count":"4 replies"};function p({type:s="date",label:t,showAiSummary:l=!1,onSummarize:i,className:n="",...d}){const o=t??g[s],u=[a.default["message-separator"],a.default[`message-separator--${s==="new-messages"?"new":s==="reply-count"?"reply":"date"}`],n].filter(Boolean).join(" "),r=e.jsxs("div",{className:a.default["message-separator__label"],children:[e.jsx("span",{className:a.default["message-separator__text"],children:o}),s==="new-messages"&&l&&e.jsxs("button",{type:"button",className:a.default["message-separator__summarize"],onClick:i,"aria-label":"Summarize new messages with AI",children:[e.jsx("span",{className:a.default["message-separator__summarize-icon"],"aria-hidden":!0,children:e.jsx(m.default,{size:"12",glyph:e.jsx(c,{})})}),"Summarize"]})]});return e.jsx("div",{className:u,role:"separator",...d,children:s==="reply-count"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__reply-gutter"],"aria-hidden":!0,children:e.jsx("div",{className:a.default["message-separator__reply-line-start"]})}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]})})}exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("../icon/Icon.cjs"),__p=require("@mattermost/compass-icons/components/creation-outline.js"),p=__p?.default??__p,a=require("./MessageSeparator.module.scss.cjs"),_={date:"Today","new-messages":"New messages","reply-count":"4 replies"};function f({type:s="date",label:t,showAiSummary:l=!1,onSummarize:i,summarizeLabel:n="Summarize",summarizeAriaLabel:d="Summarize new messages with AI",className:o="",...u}){const m=t??_[s],c=[a.default["message-separator"],a.default[`message-separator--${s==="new-messages"?"new":s==="reply-count"?"reply":"date"}`],o].filter(Boolean).join(" "),r=e.jsxs("div",{className:a.default["message-separator__label"],children:[e.jsx("span",{className:a.default["message-separator__text"],children:m}),s==="new-messages"&&l&&e.jsxs("button",{type:"button",className:a.default["message-separator__summarize"],onClick:i,"aria-label":d,children:[e.jsx("span",{className:a.default["message-separator__summarize-icon"],"aria-hidden":!0,children:e.jsx(g.default,{size:"12",glyph:e.jsx(p,{})})}),n]})]});return e.jsx("div",{className:c,role:"separator",...u,children:s==="reply-count"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__reply-gutter"],"aria-hidden":!0,children:e.jsx("div",{className:a.default["message-separator__reply-line-start"]})}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0}),r,e.jsx("div",{className:a.default["message-separator__line"],"aria-hidden":!0})]})})}exports.default=f;
 //# sourceMappingURL=MessageSeparator.cjs.map

package/dist/components/message-separator/MessageSeparator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>{displayLabel}</span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div\n            className={styles['message-separator__reply-gutter']}\n            aria-hidden\n          >\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAoBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeL,GAASH,EAAeE,CAAI,EAE3CO,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBR,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAI,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAAI,SAAAF,EAAa,EAEjEN,IAAS,gBAAkBE,GAC1BQ,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASL,EACT,aAAW,iCAEX,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAC3C,WAAA,CAAA,CAAA,CAET,EAEJ,EAGF,OACEF,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAL,IAAS,cACRU,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,iCAAiC,EACnD,cAAW,GAEX,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,CAAA,CAAG,CAAA,CAAA,EAEhEC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}
+{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. Accepts translated nodes. */\n  label?: ReactNode;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Visible Summarize button text. Default: \"Summarize\". */\n  summarizeLabel?: ReactNode;\n  /** Accessible name for the Summarize button. Default: \"Summarize new messages with AI\". */\n  summarizeAriaLabel?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  summarizeLabel = 'Summarize',\n  summarizeAriaLabel = 'Summarize new messages with AI',\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>{displayLabel}</span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label={summarizeAriaLabel}\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          {summarizeLabel}\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div\n            className={styles['message-separator__reply-gutter']}\n            aria-hidden\n          >\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","summarizeLabel","summarizeAriaLabel","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAwBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,eAAAC,EAAiB,YACjB,mBAAAC,EAAqB,iCACrB,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeP,GAASH,EAAeE,CAAI,EAE3CS,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBV,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAM,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAAI,SAAAF,EAAa,EAEjER,IAAS,gBAAkBE,GAC1BU,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASP,EACT,aAAYE,EAEZ,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAEjDX,CAAA,CAAA,CAAA,CACH,EAEJ,EAGF,OACES,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAP,IAAS,cACRY,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,iCAAiC,EACnD,cAAW,GAEX,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,CAAA,CAAG,CAAA,CAAA,EAEhEC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}

package/dist/components/message-separator/MessageSeparator.d.ts

@@ -1,14 +1,18 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';
 export interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {
     /** Separator variant. Default: Date. */
     type?: MessageSeparatorType;
-    /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */
-    label?: string;
+    /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. Accepts translated nodes. */
+    label?: ReactNode;
     /** Show AI summarize button (New Messages type only). Default: false. */
     showAiSummary?: boolean;
     /** Called when Summarize button is clicked. */
     onSummarize?: () => void;
+    /** Visible Summarize button text. Default: "Summarize". */
+    summarizeLabel?: ReactNode;
+    /** Accessible name for the Summarize button. Default: "Summarize new messages with AI". */
+    summarizeAriaLabel?: string;
     /** Optional CSS class name. */
     className?: string;
 }
@@ -17,5 +21,5 @@ export interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {
  * count, or to mark the boundary between read and unread. They help readers orient
  * themselves when scrolling back through history or returning to a busy channel.
  */
-export default function MessageSeparator({ type, label, showAiSummary, onSummarize, className, ...rest }: MessageSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export default function MessageSeparator({ type, label, showAiSummary, onSummarize, summarizeLabel, summarizeAriaLabel, className, ...rest }: MessageSeparatorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MessageSeparator.d.ts.map

package/dist/components/message-separator/MessageSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC;AAE3E,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,wCAAwC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAa,EACb,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CA0DvB"}
+{"version":3,"file":"MessageSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC;AAE3E,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,wCAAwC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,8FAA8F;IAC9F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2FAA2F;IAC3F,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAa,EACb,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,cAA4B,EAC5B,kBAAqD,EACrD,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CA0DvB"}

package/dist/components/message-separator/MessageSeparator.js

@@ -1,48 +1,50 @@
 import { jsx as a, jsxs as r, Fragment as i } from "react/jsx-runtime";
-import g from "../icon/Icon.js";
-import __u from "@mattermost/compass-icons/components/creation-outline.js";const u=__u&&__u.default?__u.default:__u;
+import _ from "../icon/Icon.js";
+import __h from "@mattermost/compass-icons/components/creation-outline.js";const h=__h&&__h.default?__h.default:__h;
 import e from "./MessageSeparator.module.scss.js";
-const _ = {
+const N = {
   date: "Today",
   "new-messages": "New messages",
   "reply-count": "4 replies"
 };
-function w({
+function b({
   type: s = "date",
   label: l,
   showAiSummary: n = !1,
   onSummarize: o,
-  className: m = "",
-  ...c
+  summarizeLabel: m = "Summarize",
+  summarizeAriaLabel: c = "Summarize new messages with AI",
+  className: d = "",
+  ...p
 }) {
-  const d = l ?? _[s], p = [
+  const g = l ?? N[s], u = [
     e["message-separator"],
     e[`message-separator--${s === "new-messages" ? "new" : s === "reply-count" ? "reply" : "date"}`],
-    m
+    d
   ].filter(Boolean).join(" "), t = /* @__PURE__ */ r("div", { className: e["message-separator__label"], children: [
-    /* @__PURE__ */ a("span", { className: e["message-separator__text"], children: d }),
+    /* @__PURE__ */ a("span", { className: e["message-separator__text"], children: g }),
     s === "new-messages" && n && /* @__PURE__ */ r(
       "button",
       {
         type: "button",
         className: e["message-separator__summarize"],
         onClick: o,
-        "aria-label": "Summarize new messages with AI",
+        "aria-label": c,
         children: [
           /* @__PURE__ */ a(
             "span",
             {
               className: e["message-separator__summarize-icon"],
               "aria-hidden": !0,
-              children: /* @__PURE__ */ a(g, { size: "12", glyph: /* @__PURE__ */ a(u, {}) })
+              children: /* @__PURE__ */ a(_, { size: "12", glyph: /* @__PURE__ */ a(h, {}) })
             }
           ),
-          "Summarize"
+          m
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ a("div", { className: p, role: "separator", ...c, children: s === "reply-count" ? /* @__PURE__ */ r(i, { children: [
+  return /* @__PURE__ */ a("div", { className: u, role: "separator", ...p, children: s === "reply-count" ? /* @__PURE__ */ r(i, { children: [
     /* @__PURE__ */ a(
       "div",
       {
@@ -60,6 +62,6 @@ function w({
   ] }) });
 }
 export {
-  w as default
+  b as default
 };
 //# sourceMappingURL=MessageSeparator.js.map

package/dist/components/message-separator/MessageSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>{displayLabel}</span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div\n            className={styles['message-separator__reply-gutter']}\n            aria-hidden\n          >\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAoBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeL,KAASH,EAAeE,CAAI,GAE3CO,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBR,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAI;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAAI,UAAAF,GAAa;AAAA,IAEjEN,MAAS,kBAAkBE,KAC1B,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASL;AAAA,QACT,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAET,GAEJ;AAGF,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAL,MAAS,gBACR,gBAAAU,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,EAAO,iCAAiC;AAAA,QACnD,eAAW;AAAA,QAEX,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhEC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}
+{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. Accepts translated nodes. */\n  label?: ReactNode;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Visible Summarize button text. Default: \"Summarize\". */\n  summarizeLabel?: ReactNode;\n  /** Accessible name for the Summarize button. Default: \"Summarize new messages with AI\". */\n  summarizeAriaLabel?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  summarizeLabel = 'Summarize',\n  summarizeAriaLabel = 'Summarize new messages with AI',\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>{displayLabel}</span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label={summarizeAriaLabel}\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          {summarizeLabel}\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div\n            className={styles['message-separator__reply-gutter']}\n            aria-hidden\n          >\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","summarizeLabel","summarizeAriaLabel","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAwBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,oBAAAC,IAAqB;AAAA,EACrB,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeP,KAASH,EAAeE,CAAI,GAE3CS,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBV,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAM;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAAI,UAAAF,GAAa;AAAA,IAEjER,MAAS,kBAAkBE,KAC1B,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASP;AAAA,QACT,cAAYE;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEjDX;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAGF,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAP,MAAS,gBACR,gBAAAY,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,EAAO,iCAAiC;AAAA,QACnD,eAAW;AAAA,QAEX,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhEC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}

package/dist/components/modal/Modal.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),S=require("react"),p=require("../scrollbar/Scrollbar.cjs"),w=require("../modal-footer/ModalFooter.cjs"),z=require("../modal-header/ModalHeader.cjs"),B=require("../../utils/string.cjs"),l=require("./Modal.module.scss.cjs");function C({className:t="",style:i,size:u="small",title:c,subtitle:m,subtitlePlacement:b="below",hideTitle:f=!1,showBackButton:_=!1,onBack:j,onClose:q,headerDivider:v=!0,headerAction:x,bodyPadding:s="default",scrollable:y=!0,children:M,footer:o,footerLeading:r,footerType:a="2-actions",footerDivider:h=!0}){const d=S.useId(),g=l.default[`modal--size-${B.toKebab(u)}`],I=[l.default["modal__body-inner"],s==="menu"&&l.default["modal__body-inner--menu"],s==="none"&&l.default["modal__body-inner--none"]].filter(Boolean).join(" "),n=e.jsx("div",{className:I,children:M}),N=o!=null||r!=null||a==="spacer-small"||a==="spacer-large";return e.jsxs("div",{className:[l.default.modal,g,t].filter(Boolean).join(" "),style:i,role:"dialog","aria-modal":"true","aria-labelledby":d,children:[e.jsx(z.default,{title:c,titleId:d,subtitle:m,subtitlePlacement:b,hideTitle:f,showBackButton:_,onBack:j,onClose:q,divider:v,headerAction:x}),e.jsx("div",{className:l.default.modal__body,children:y?e.jsx(p.default,{children:n}):n}),N&&e.jsx(w.default,{type:a,divider:h,leading:r,children:o})]})}exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),F=require("react"),R=require("../scrollbar/Scrollbar.cjs"),H=require("../modal-footer/ModalFooter.cjs"),K=require("../modal-header/ModalHeader.cjs"),O=require("../../utils/string.cjs"),l=require("./Modal.module.scss.cjs");function $({className:t="",style:i,size:u="small",title:c,subtitle:m,subtitlePlacement:b="below",hideTitle:f=!1,showBackButton:_=!1,onBack:j,backLabel:q,backButtonProps:v,onClose:x,closeLabel:y,closeButtonProps:M,headerDivider:h=!0,headerAction:g,headerSlot:I,bodyPadding:s="default",scrollable:N=!0,children:S,footer:o,footerLeading:r,footerType:a="2-actions",footerDivider:p=!0,...w}){const d=F.useId(),z=l.default[`modal--size-${O.toKebab(u)}`],B=[l.default["modal__body-inner"],s==="menu"&&l.default["modal__body-inner--menu"],s==="none"&&l.default["modal__body-inner--none"]].filter(Boolean).join(" "),n=e.jsx("div",{className:B,children:S}),C=o!=null||r!=null||a==="spacer-small"||a==="spacer-large";return e.jsxs("div",{...w,className:[l.default.modal,z,t].filter(Boolean).join(" "),style:i,role:"dialog","aria-modal":"true","aria-labelledby":d,children:[e.jsx(K.default,{title:c,titleId:d,subtitle:m,subtitlePlacement:b,hideTitle:f,showBackButton:_,onBack:j,backLabel:q,backButtonProps:v,onClose:x,closeLabel:y,closeButtonProps:M,divider:h,headerAction:g,headerSlot:I}),e.jsx("div",{className:l.default.modal__body,children:N?e.jsx(R.default,{children:n}):n}),C&&e.jsx(H.default,{type:a,divider:p,leading:r,children:o})]})}exports.default=$;
 //# sourceMappingURL=Modal.cjs.map

package/dist/components/modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useId } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Show divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Host owns portal, overlay, focus trap, and open/close.\n */\nexport default function Modal({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  onClose,\n  headerDivider = true,\n  headerAction,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      className={[styles.modal, sizeClass, className].filter(Boolean).join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        onClose={onClose}\n        divider={headerDivider}\n        headerAction={headerAction}\n      />\n\n      <div className={styles['modal__body']}>\n        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","onClose","headerDivider","headerAction","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter"],"mappings":"6WA2EA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,QACP,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,OAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,GAChB,aAAAC,EACA,YAAAC,EAAc,UACd,WAAAC,EAAa,GACb,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EAAa,YACb,cAAAC,EAAgB,EAClB,EAAe,CACb,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQrB,CAAI,CAAC,EAAE,EACjDsB,EAAiB,CACrBF,EAAAA,QAAO,mBAAmB,EAC1BV,IAAgB,QAAUU,EAAAA,QAAO,yBAAyB,EAC1DV,IAAgB,QAAUU,EAAAA,QAAO,yBAAyB,CAAA,EAEzD,OAAO,OAAO,EACd,KAAK,GAAG,EAELG,EAAYC,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAiB,SAAAV,EAAS,EACtDa,EACJZ,GAAU,MACVC,GAAiB,MACjBC,IAAe,gBACfA,IAAe,eAEjB,OACEW,EAAAA,KAAC,MAAA,CACC,UAAW,CAACN,EAAAA,QAAO,MAAOD,EAAWrB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACxE,MAAAC,EACA,KAAK,SACL,aAAW,OACX,kBAAiBkB,EAEjB,SAAA,CAAAO,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAA1B,EACA,QAAAgB,EACA,SAAAf,EACA,kBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,OAAAC,EACA,QAAAC,EACA,QAASC,EACT,aAAAC,CAAA,CAAA,EAGFe,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,YACpB,SAAAT,EAAaa,EAAAA,IAACI,EAAAA,QAAA,CAAW,SAAAL,CAAA,CAAU,EAAeA,EACrD,EAECE,GACCD,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAMd,EACN,QAASC,EACT,QAASF,EAER,SAAAD,CAAA,CAAA,CACH,CAAA,CAAA,CAIR"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport { useId } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'style'\n> {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × close button is clicked. */\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  /** Show divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the header divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   */\n  headerSlot?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When true (default), wraps body content in Scrollbar. Set false when the\n   * host manages scroll inside panes.\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Host owns portal, overlay, focus trap, and open/close.\n */\nexport default function Modal({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  backLabel,\n  backButtonProps,\n  onClose,\n  closeLabel,\n  closeButtonProps,\n  headerDivider = true,\n  headerAction,\n  headerSlot,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n  ...rest\n}: ModalProps) {\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      {...rest}\n      className={[styles.modal, sizeClass, className].filter(Boolean).join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        backLabel={backLabel}\n        backButtonProps={backButtonProps}\n        onClose={onClose}\n        closeLabel={closeLabel}\n        closeButtonProps={closeButtonProps}\n        divider={headerDivider}\n        headerAction={headerAction}\n        headerSlot={headerSlot}\n      />\n\n      <div className={styles['modal__body']}>\n        {scrollable ? <Scrollbar>{bodyInner}</Scrollbar> : bodyInner}\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n"],"names":["Modal","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","headerDivider","headerAction","headerSlot","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","rest","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter"],"mappings":"6WA4FA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EAAO,QACP,MAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,QACpB,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,OAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,WAAAC,EACA,iBAAAC,EACA,cAAAC,EAAgB,GAChB,aAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,UACd,WAAAC,EAAa,GACb,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,WAAAC,EAAa,YACb,cAAAC,EAAgB,GAChB,GAAGC,CACL,EAAe,CACb,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQ3B,CAAI,CAAC,EAAE,EACjD4B,EAAiB,CACrBF,EAAAA,QAAO,mBAAmB,EAC1BX,IAAgB,QAAUW,EAAAA,QAAO,yBAAyB,EAC1DX,IAAgB,QAAUW,EAAAA,QAAO,yBAAyB,CAAA,EAEzD,OAAO,OAAO,EACd,KAAK,GAAG,EAELG,EAAYC,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAiB,SAAAX,EAAS,EACtDc,EACJb,GAAU,MACVC,GAAiB,MACjBC,IAAe,gBACfA,IAAe,eAEjB,OACEY,EAAAA,KAAC,MAAA,CACE,GAAGV,EACJ,UAAW,CAACI,EAAAA,QAAO,MAAOD,EAAW3B,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACxE,MAAAC,EACA,KAAK,SACL,aAAW,OACX,kBAAiBwB,EAEjB,SAAA,CAAAO,EAAAA,IAACG,EAAAA,QAAA,CACC,MAAAhC,EACA,QAAAsB,EACA,SAAArB,EACA,kBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,OAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,WAAAC,EACA,iBAAAC,EACA,QAASC,EACT,aAAAC,EACA,WAAAC,CAAA,CAAA,EAGFgB,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,YACpB,SAAAV,EAAac,EAAAA,IAACI,EAAAA,QAAA,CAAW,SAAAL,CAAA,CAAU,EAAeA,EACrD,EAECE,GACCD,EAAAA,IAACK,EAAAA,QAAA,CACC,KAAMf,EACN,QAASC,EACT,QAASF,EAER,SAAAD,CAAA,CAAA,CACH,CAAA,CAAA,CAIR"}