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

package/dist/components/message-actions/index.cjs.map

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

package/dist/components/message-actions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/message-actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EACV,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../tag/Tag.cjs"),s=require("./MessageHeader.module.scss.cjs");function d({username:a,timestamp:r,isBot:t=!1,botLabel:l="Bot"}){return e.jsxs("div",{className:s.default["message-header"],children:[e.jsx("span",{className:s.default["message-header__username"],children:a}),t&&e.jsx(u.default,{label:l}),e.jsx("span",{className:s.default["message-header__timestamp"],children:r})]})}exports.default=d;
+//# sourceMappingURL=MessageHeader.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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"}

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

@@ -0,0 +1,19 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import d from "../tag/Tag.js";
+import s from "./MessageHeader.module.scss.js";
+function c({
+  username: a,
+  timestamp: r,
+  isBot: m = !1,
+  botLabel: l = "Bot"
+}) {
+  return /* @__PURE__ */ t("div", { className: s["message-header"], children: [
+    /* @__PURE__ */ e("span", { className: s["message-header__username"], children: a }),
+    m && /* @__PURE__ */ e(d, { label: l }),
+    /* @__PURE__ */ e("span", { className: s["message-header__timestamp"], children: r })
+  ] });
+}
+export {
+  c as default
+};
+//# sourceMappingURL=MessageHeader.js.map

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

@@ -0,0 +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;"}

package/dist/components/message-header/MessageHeader.module.css

@@ -0,0 +1 @@
+._message-header_1u3ox_2{display:flex;align-items:center;gap:var(--spacing-xxs)}._message-header_1u3ox_2>*{align-self:center}._message-header__username_1u3ox_10{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);white-space:nowrap}._message-header__timestamp_1u3ox_18{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.56);white-space:nowrap}

package/dist/components/message-header/MessageHeader.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageHeader.module.css');const e={"message-header":"_message-header_1u3ox_2","message-header__username":"_message-header__username_1u3ox_10","message-header__timestamp":"_message-header__timestamp_1u3ox_18"};exports.default=e;
+//# sourceMappingURL=MessageHeader.module.scss.cjs.map

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

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

package/dist/components/message-header/MessageHeader.module.scss.js

@@ -0,0 +1,9 @@
+import './MessageHeader.module.css';const e = {
+  "message-header": "_message-header_1u3ox_2",
+  "message-header__username": "_message-header__username_1u3ox_10",
+  "message-header__timestamp": "_message-header__timestamp_1u3ox_18"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=MessageHeader.module.scss.js.map

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

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

package/dist/components/message-header/index.cjs

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/message-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,mBAAmB,iBAAiB,CAAC"}

package/dist/components/message-header/index.js

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

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

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

package/dist/components/message-input/MessageInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),__z=require("@mattermost/compass-icons/components/alert-circle-outline.js"),z=__z?.default??__z,__y=require("@mattermost/compass-icons/components/chevron-down.js"),y=__y?.default??__y,__H=require("@mattermost/compass-icons/components/chevron-up.js"),H=__H?.default??__H,__P=require("@mattermost/compass-icons/components/dots-horizontal.js"),P=__P?.default??__P,__D=require("@mattermost/compass-icons/components/code-tags.js"),D=__D?.default??__D,__L=require("@mattermost/compass-icons/components/creation-outline.js"),L=__L?.default??__L,__E=require("@mattermost/compass-icons/components/emoticon-happy-outline.js"),E=__E?.default??__E,__V=require("@mattermost/compass-icons/components/eye-outline.js"),V=__V?.default??__V,__K=require("@mattermost/compass-icons/components/fire.js"),K=__K?.default??__K,__v=require("@mattermost/compass-icons/components/format-bold.js"),v=__v?.default??__v,__Q=require("@mattermost/compass-icons/components/format-header.js"),Q=__Q?.default??__Q,__N=require("@mattermost/compass-icons/components/format-italic.js"),N=__N?.default??__N,__U=require("@mattermost/compass-icons/components/format-letter-case.js"),U=__U?.default??__U,__W=require("@mattermost/compass-icons/components/format-list-bulleted.js"),W=__W?.default??__W,__G=require("@mattermost/compass-icons/components/format-list-numbered.js"),G=__G?.default??__G,__$=require("@mattermost/compass-icons/components/format-quote-open.js"),$=__$?.default??__$,__J=require("@mattermost/compass-icons/components/format-strikethrough-variant.js"),J=__J?.default??__J,__I=require("@mattermost/compass-icons/components/link-variant.js"),I=__I?.default??__I,__X=require("@mattermost/compass-icons/components/paperclip.js"),X=__X?.default??__X,__Y=require("@mattermost/compass-icons/components/send.js"),Y=__Y?.default??__Y,a=require("../icon/Icon.cjs"),t=require("../icon-button/IconButton.cjs"),Z=require("../tag/Tag.cjs"),q=require("../attachment-card/AttachmentCard.cjs"),s=require("./MessageInput.module.scss.cjs");function ee({className:w="",placeholder:F="Message channel…",showPriorityIndicator:B=!1,showAttachments:M=!1,value:p,onChange:u,onSelectionChange:d,inputRef:x,width:o="wide"}){const[T,O]=r.useState(""),j=p!==void 0,c=j?p:T,S=l=>{j?u==null||u(l):O(l)},[i,A]=r.useState(!1),g=r.useRef(null),k=l=>{g.current=l,x&&(x.current=l)},m=r.useCallback(()=>{const l=g.current;l&&(l.style.height="auto",l.style.height=`${l.scrollHeight}px`)},[]);r.useEffect(()=>{m()},[c,m]);const f=c.trim().length>0,n=(l,b)=>[s.default[l],b?s.default[b]:""].filter(Boolean).join(" "),C=o==="narrow"&&i,_=i&&o==="wide",h=e.jsxs(e.Fragment,{children:[e.jsxs("button",{type:"button",className:n("message-input__format-btn",i?"message-input__format-btn--active":""),"aria-label":i?"Hide formatting toolbar":"Show formatting toolbar","aria-pressed":i,onClick:()=>A(l=>!l),children:[e.jsx(a.default,{glyph:e.jsx(U,{}),size:"16"}),C?e.jsx("span",{className:s.default["message-input__format-chevron"],children:e.jsx(a.default,{glyph:e.jsx(H,{}),size:"12"})}):e.jsx("span",{className:n("message-input__format-chevron",i?"message-input__format-chevron--rotated":""),children:e.jsx(a.default,{glyph:e.jsx(y,{}),size:"12"})})]}),e.jsx("span",{className:s.default["message-input__actions-divider"],"aria-hidden":!0}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(X,{}),size:"16"}),size:"small","aria-label":"Attach a file"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(E,{}),size:"16"}),size:"small","aria-label":"Add an emoji"}),e.jsxs("div",{className:n("message-input__send",f?"":"message-input__send--disabled"),children:[e.jsx("button",{type:"button",className:s.default["message-input__send-main"],"aria-label":"Send message",disabled:!f,children:e.jsx(a.default,{glyph:e.jsx(Y,{}),size:"16"})}),e.jsx("button",{type:"button",className:s.default["message-input__send-dropdown"],"aria-label":"Send options",disabled:!f,children:e.jsx(a.default,{glyph:e.jsx(y,{}),size:"16"})})]})]}),R=[s.default["message-input"],o==="narrow"?s.default["message-input--width-narrow"]:"",w].filter(Boolean).join(" ");return e.jsx("div",{className:R,children:e.jsxs("div",{className:n("message-input__container",i?"message-input__container--formatting-open":""),children:[e.jsx("button",{type:"button",className:n("message-input__preview-btn",i?"message-input__preview-btn--visible":""),"aria-label":"Preview",tabIndex:i?0:-1,children:e.jsx(a.default,{glyph:e.jsx(V,{}),size:"16"})}),e.jsxs("div",{className:n("message-input__body",i?"message-input__body--formatting-open":""),children:[B&&e.jsx("div",{className:s.default["message-input__priority-row"],children:e.jsx(Z.default,{label:"IMPORTANT",type:"info",size:"x-small",casing:"all-caps",leadingIcon:e.jsx(a.default,{glyph:e.jsx(z,{}),size:"10"})})}),e.jsx("textarea",{ref:k,className:s.default["message-input__textarea"],placeholder:F,value:c,onChange:l=>S(l.target.value),onInput:m,onSelect:d,onKeyUp:d,onClick:d,rows:1})]}),M&&e.jsx("div",{className:s.default["message-input__attachments"],children:e.jsxs("div",{className:s.default["message-input__attachments-list"],children:[e.jsx(q.default,{fileName:"Design_Brief.pdf",fileMeta:"PDF 240KB",fileType:"pdf",state:"default",onRemove:()=>{}}),e.jsx(q.default,{fileName:"Wireframes_v3.png",fileMeta:"PNG 1.2MB",fileType:"image-icon",state:"default",onRemove:()=>{}})]})}),e.jsx("div",{className:n("message-input__formatting-bar",_?"message-input__formatting-bar--open":""),"aria-hidden":!_,children:e.jsxs("div",{className:s.default["message-input__toolbar-controls"],children:[e.jsxs("div",{className:s.default["message-input__toolbar-group"],children:[e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(v,{}),size:"16"}),size:"small","aria-label":"Bold"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(N,{}),size:"16"}),size:"small","aria-label":"Italic"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(J,{}),size:"16"}),size:"small","aria-label":"Strikethrough"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(Q,{}),size:"16"}),size:"small","aria-label":"Heading"})]}),e.jsx("span",{className:s.default["message-input__toolbar-divider"],"aria-hidden":!0}),e.jsxs("div",{className:s.default["message-input__toolbar-group"],children:[e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(I,{}),size:"16"}),size:"small","aria-label":"Add link"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(D,{}),size:"16"}),size:"small","aria-label":"Code"})]}),e.jsx("span",{className:s.default["message-input__toolbar-divider"],"aria-hidden":!0}),e.jsxs("div",{className:s.default["message-input__toolbar-group"],children:[e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx($,{}),size:"16"}),size:"small","aria-label":"Quote"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(W,{}),size:"16"}),size:"small","aria-label":"Bulleted list"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(G,{}),size:"16"}),size:"small","aria-label":"Numbered list"})]}),e.jsx("span",{className:s.default["message-input__toolbar-divider"],"aria-hidden":!0}),e.jsxs("div",{className:s.default["message-input__toolbar-group"],children:[e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(z,{}),size:"16"}),size:"small","aria-label":"Message priority"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(K,{}),size:"16"}),size:"small","aria-label":"Burn on read"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(L,{}),size:"16"}),size:"small","aria-label":"AI assistance"})]})]})}),o==="narrow"?e.jsxs("div",{className:s.default["message-input__narrow-chrome"],children:[e.jsx("div",{className:s.default["message-input__narrow-chrome-left"],children:i&&e.jsxs("div",{className:s.default["message-input__formatting-collapsed"],children:[e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(v,{}),size:"16"}),size:"small","aria-label":"Bold"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(N,{}),size:"16"}),size:"small","aria-label":"Italic"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(I,{}),size:"16"}),size:"small","aria-label":"Add link"}),e.jsx(t.default,{icon:e.jsx(a.default,{glyph:e.jsx(P,{}),size:"16"}),size:"small","aria-label":"More formatting options"})]})}),e.jsx("div",{className:[s.default["message-input__actions"],s.default["message-input__actions--narrow-chrome"]].join(" "),children:h})]}):e.jsx("div",{className:s.default["message-input__actions"],children:h})]})})}exports.default=ee;
+//# sourceMappingURL=MessageInput.cjs.map

package/dist/components/message-input/MessageInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.cjs","sources":["../../../src/components/message-input/MessageInput.tsx"],"sourcesContent":["import { useEffect, useState, useRef, useCallback } from 'react';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronUpIcon from '@mattermost/compass-icons/components/chevron-up';\nimport DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport CodeTagsIcon from '@mattermost/compass-icons/components/code-tags';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport EyeOutlineIcon from '@mattermost/compass-icons/components/eye-outline';\nimport FireIcon from '@mattermost/compass-icons/components/fire';\nimport FormatBoldIcon from '@mattermost/compass-icons/components/format-bold';\nimport FormatHeaderIcon from '@mattermost/compass-icons/components/format-header';\nimport FormatItalicIcon from '@mattermost/compass-icons/components/format-italic';\nimport FormatLetterCaseIcon from '@mattermost/compass-icons/components/format-letter-case';\nimport FormatListBulletedIcon from '@mattermost/compass-icons/components/format-list-bulleted';\nimport FormatListNumberedIcon from '@mattermost/compass-icons/components/format-list-numbered';\nimport FormatQuoteOpenIcon from '@mattermost/compass-icons/components/format-quote-open';\nimport FormatStrikethroughVariantIcon from '@mattermost/compass-icons/components/format-strikethrough-variant';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport PaperclipIcon from '@mattermost/compass-icons/components/paperclip';\nimport SendIcon from '@mattermost/compass-icons/components/send';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport AttachmentCard from '@/components/attachment-card/AttachmentCard';\nimport styles from './MessageInput.module.scss';\n\nexport type MessageInputWidth = 'wide' | 'narrow';\n\nexport interface MessageInputProps {\n  className?: string;\n  placeholder?: string;\n  showPriorityIndicator?: boolean;\n  showAttachments?: boolean;\n  value?: string;\n  onChange?: (value: string) => void;\n  onSelectionChange?: () => void;\n  inputRef?: React.RefObject<HTMLTextAreaElement | null>;\n  /** `narrow` matches the Figma Message Input “Narrow” / right-sidebar layout. */\n  width?: MessageInputWidth;\n}\n\nexport default function MessageInput({\n  className = '',\n  placeholder = 'Message channel…',\n  showPriorityIndicator = false,\n  showAttachments = false,\n  value,\n  onChange,\n  onSelectionChange,\n  inputRef,\n  width = 'wide',\n}: MessageInputProps) {\n  const [internalText, setInternalText] = useState('');\n  const isControlled = value !== undefined;\n  const text = isControlled ? value : internalText;\n  const setText = (next: string) => {\n    if (isControlled) onChange?.(next);\n    else setInternalText(next);\n  };\n  const [formattingOpen, setFormattingOpen] = useState(false);\n  const internalRef = useRef<HTMLTextAreaElement>(null);\n\n  const setTextareaRef = (node: HTMLTextAreaElement | null) => {\n    internalRef.current = node;\n    if (inputRef) {\n      (inputRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n    }\n  };\n\n  const handleInput = useCallback(() => {\n    const el = internalRef.current;\n    if (!el) return;\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n  }, []);\n\n  useEffect(() => {\n    handleInput();\n  }, [text, handleInput]);\n\n  const hasSendValue = text.trim().length > 0;\n\n  const cls = (base: string, mod?: string) =>\n    [styles[base], mod ? styles[mod] : ''].filter(Boolean).join(' ');\n\n  const isNarrowFormattingOpen = width === 'narrow' && formattingOpen;\n  const showWideFormattingBar = formattingOpen && width === 'wide';\n\n  const composerActions = (\n    <>\n      <button\n        type=\"button\"\n        className={cls(\n          'message-input__format-btn',\n          formattingOpen ? 'message-input__format-btn--active' : '',\n        )}\n        aria-label={\n          formattingOpen\n            ? 'Hide formatting toolbar'\n            : 'Show formatting toolbar'\n        }\n        aria-pressed={formattingOpen}\n        onClick={() => setFormattingOpen((prev) => !prev)}\n      >\n        <Icon glyph={<FormatLetterCaseIcon />} size=\"16\" />\n        {isNarrowFormattingOpen ? (\n          <span className={styles['message-input__format-chevron']}>\n            <Icon glyph={<ChevronUpIcon />} size=\"12\" />\n          </span>\n        ) : (\n          <span\n            className={cls(\n              'message-input__format-chevron',\n              formattingOpen ? 'message-input__format-chevron--rotated' : '',\n            )}\n          >\n            <Icon glyph={<ChevronDownIcon />} size=\"12\" />\n          </span>\n        )}\n      </button>\n\n      <span\n        className={styles['message-input__actions-divider']}\n        aria-hidden\n      />\n\n      <IconButton\n        icon={<Icon glyph={<PaperclipIcon />} size=\"16\" />}\n        size=\"small\"\n        aria-label=\"Attach a file\"\n      />\n      <IconButton\n        icon={<Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />}\n        size=\"small\"\n        aria-label=\"Add an emoji\"\n      />\n\n      <div\n        className={cls(\n          'message-input__send',\n          !hasSendValue ? 'message-input__send--disabled' : '',\n        )}\n      >\n        <button\n          type=\"button\"\n          className={styles['message-input__send-main']}\n          aria-label=\"Send message\"\n          disabled={!hasSendValue}\n        >\n          <Icon glyph={<SendIcon />} size=\"16\" />\n        </button>\n        <button\n          type=\"button\"\n          className={styles['message-input__send-dropdown']}\n          aria-label=\"Send options\"\n          disabled={!hasSendValue}\n        >\n          <Icon glyph={<ChevronDownIcon />} size=\"16\" />\n        </button>\n      </div>\n    </>\n  );\n\n  const rootClass = [\n    styles['message-input'],\n    width === 'narrow' ? styles['message-input--width-narrow'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div\n        className={cls(\n          'message-input__container',\n          formattingOpen ? 'message-input__container--formatting-open' : '',\n        )}\n      >\n        {/* Preview button — fades in when formatting is open */}\n        <button\n          type=\"button\"\n          className={cls(\n            'message-input__preview-btn',\n            formattingOpen ? 'message-input__preview-btn--visible' : '',\n          )}\n          aria-label=\"Preview\"\n          tabIndex={formattingOpen ? 0 : -1}\n        >\n          <Icon glyph={<EyeOutlineIcon />} size=\"16\" />\n        </button>\n\n        {/* Main text area */}\n        <div\n          className={cls(\n            'message-input__body',\n            formattingOpen ? 'message-input__body--formatting-open' : '',\n          )}\n        >\n          {showPriorityIndicator && (\n            <div className={styles['message-input__priority-row']}>\n              <Tag\n                label=\"IMPORTANT\"\n                type=\"info\"\n                size=\"x-small\"\n                casing=\"all-caps\"\n                leadingIcon={\n                  <Icon glyph={<AlertCircleOutlineIcon />} size=\"10\" />\n                }\n              />\n            </div>\n          )}\n          <textarea\n            ref={setTextareaRef}\n            className={styles['message-input__textarea']}\n            placeholder={placeholder}\n            value={text}\n            onChange={(e) => setText(e.target.value)}\n            onInput={handleInput}\n            onSelect={onSelectionChange}\n            onKeyUp={onSelectionChange}\n            onClick={onSelectionChange}\n            rows={1}\n          />\n        </div>\n\n        {/* Attachment cards */}\n        {showAttachments && (\n          <div className={styles['message-input__attachments']}>\n            <div className={styles['message-input__attachments-list']}>\n              <AttachmentCard\n                fileName=\"Design_Brief.pdf\"\n                fileMeta=\"PDF 240KB\"\n                fileType=\"pdf\"\n                state=\"default\"\n                onRemove={() => {}}\n              />\n              <AttachmentCard\n                fileName=\"Wireframes_v3.png\"\n                fileMeta=\"PNG 1.2MB\"\n                fileType=\"image-icon\"\n                state=\"default\"\n                onRemove={() => {}}\n              />\n            </div>\n          </div>\n        )}\n\n        {/* Formatting toolbar — full bar (wide only); narrow uses collapsed strip in footer */}\n        <div\n          className={cls(\n            'message-input__formatting-bar',\n            showWideFormattingBar ? 'message-input__formatting-bar--open' : '',\n          )}\n          aria-hidden={!showWideFormattingBar}\n        >\n          <div className={styles['message-input__toolbar-controls']}>\n            {/* Style */}\n            <div className={styles['message-input__toolbar-group']}>\n              <IconButton\n                icon={<Icon glyph={<FormatBoldIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Bold\"\n              />\n              <IconButton\n                icon={<Icon glyph={<FormatItalicIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Italic\"\n              />\n              <IconButton\n                icon={\n                  <Icon glyph={<FormatStrikethroughVariantIcon />} size=\"16\" />\n                }\n                size=\"small\"\n                aria-label=\"Strikethrough\"\n              />\n              <IconButton\n                icon={<Icon glyph={<FormatHeaderIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Heading\"\n              />\n            </div>\n\n            <span\n              className={styles['message-input__toolbar-divider']}\n              aria-hidden\n            />\n\n            {/* Links + Code */}\n            <div className={styles['message-input__toolbar-group']}>\n              <IconButton\n                icon={<Icon glyph={<LinkVariantIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Add link\"\n              />\n              <IconButton\n                icon={<Icon glyph={<CodeTagsIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Code\"\n              />\n            </div>\n\n            <span\n              className={styles['message-input__toolbar-divider']}\n              aria-hidden\n            />\n\n            {/* Paragraph */}\n            <div className={styles['message-input__toolbar-group']}>\n              <IconButton\n                icon={<Icon glyph={<FormatQuoteOpenIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Quote\"\n              />\n              <IconButton\n                icon={<Icon glyph={<FormatListBulletedIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Bulleted list\"\n              />\n              <IconButton\n                icon={<Icon glyph={<FormatListNumberedIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Numbered list\"\n              />\n            </div>\n\n            <span\n              className={styles['message-input__toolbar-divider']}\n              aria-hidden\n            />\n\n            {/* Tools */}\n            <div className={styles['message-input__toolbar-group']}>\n              <IconButton\n                icon={<Icon glyph={<AlertCircleOutlineIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Message priority\"\n              />\n              <IconButton\n                icon={<Icon glyph={<FireIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"Burn on read\"\n              />\n              <IconButton\n                icon={<Icon glyph={<CreationOutlineIcon />} size=\"16\" />}\n                size=\"small\"\n                aria-label=\"AI assistance\"\n              />\n            </div>\n          </div>\n        </div>\n\n        {width === 'narrow' ? (\n          <div className={styles['message-input__narrow-chrome']}>\n            <div className={styles['message-input__narrow-chrome-left']}>\n              {formattingOpen && (\n                <div className={styles['message-input__formatting-collapsed']}>\n                  <IconButton\n                    icon={<Icon glyph={<FormatBoldIcon />} size=\"16\" />}\n                    size=\"small\"\n                    aria-label=\"Bold\"\n                  />\n                  <IconButton\n                    icon={<Icon glyph={<FormatItalicIcon />} size=\"16\" />}\n                    size=\"small\"\n                    aria-label=\"Italic\"\n                  />\n                  <IconButton\n                    icon={<Icon glyph={<LinkVariantIcon />} size=\"16\" />}\n                    size=\"small\"\n                    aria-label=\"Add link\"\n                  />\n                  <IconButton\n                    icon={<Icon glyph={<DotsHorizontalIcon />} size=\"16\" />}\n                    size=\"small\"\n                    aria-label=\"More formatting options\"\n                  />\n                </div>\n              )}\n            </div>\n            <div\n              className={[\n                styles['message-input__actions'],\n                styles['message-input__actions--narrow-chrome'],\n              ].join(' ')}\n            >\n              {composerActions}\n            </div>\n          </div>\n        ) : (\n          <div className={styles['message-input__actions']}>{composerActions}</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["MessageInput","className","placeholder","showPriorityIndicator","showAttachments","value","onChange","onSelectionChange","inputRef","width","internalText","setInternalText","useState","isControlled","text","setText","next","formattingOpen","setFormattingOpen","internalRef","useRef","setTextareaRef","node","handleInput","useCallback","el","useEffect","hasSendValue","cls","base","mod","styles","isNarrowFormattingOpen","showWideFormattingBar","composerActions","jsxs","Fragment","prev","jsx","Icon","FormatLetterCaseIcon","ChevronUpIcon","ChevronDownIcon","IconButton","PaperclipIcon","EmoticonHappyOutlineIcon","SendIcon","rootClass","EyeOutlineIcon","Tag","AlertCircleOutlineIcon","e","AttachmentCard","FormatBoldIcon","FormatItalicIcon","FormatStrikethroughVariantIcon","FormatHeaderIcon","LinkVariantIcon","CodeTagsIcon","FormatQuoteOpenIcon","FormatListBulletedIcon","FormatListNumberedIcon","FireIcon","CreationOutlineIcon","DotsHorizontalIcon"],"mappings":"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"}

package/dist/components/message-input/MessageInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/message-input/MessageInput.tsx"],"names":[],"mappings":"AA2BA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACvD,gFAAgF;IAChF,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,WAAgC,EAChC,qBAA6B,EAC7B,eAAuB,EACvB,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,QAAQ,EACR,KAAc,GACf,EAAE,iBAAiB,2CAwVnB"}

package/dist/components/message-input/MessageInput.js

@@ -0,0 +1,407 @@
+import { jsxs as o, Fragment as D, jsx as e } from "react/jsx-runtime";
+import { useState as v, useRef as L, useCallback as E, useEffect as V } from "react";
+import __N from "@mattermost/compass-icons/components/alert-circle-outline.js";const N=__N&&__N.default?__N.default:__N;
+import __I from "@mattermost/compass-icons/components/chevron-down.js";const I=__I&&__I.default?__I.default:__I;
+import __K from "@mattermost/compass-icons/components/chevron-up.js";const K=__K&&__K.default?__K.default:__K;
+import __Q from "@mattermost/compass-icons/components/dots-horizontal.js";const Q=__Q&&__Q.default?__Q.default:__Q;
+import __U from "@mattermost/compass-icons/components/code-tags.js";const U=__U&&__U.default?__U.default:__U;
+import __W from "@mattermost/compass-icons/components/creation-outline.js";const W=__W&&__W.default?__W.default:__W;
+import __G from "@mattermost/compass-icons/components/emoticon-happy-outline.js";const G=__G&&__G.default?__G.default:__G;
+import __$ from "@mattermost/compass-icons/components/eye-outline.js";const $=__$&&__$.default?__$.default:__$;
+import __q from "@mattermost/compass-icons/components/fire.js";const q=__q&&__q.default?__q.default:__q;
+import __w from "@mattermost/compass-icons/components/format-bold.js";const w=__w&&__w.default?__w.default:__w;
+import __J from "@mattermost/compass-icons/components/format-header.js";const J=__J&&__J.default?__J.default:__J;
+import __F from "@mattermost/compass-icons/components/format-italic.js";const F=__F&&__F.default?__F.default:__F;
+import __X from "@mattermost/compass-icons/components/format-letter-case.js";const X=__X&&__X.default?__X.default:__X;
+import __Y from "@mattermost/compass-icons/components/format-list-bulleted.js";const Y=__Y&&__Y.default?__Y.default:__Y;
+import __Z from "@mattermost/compass-icons/components/format-list-numbered.js";const Z=__Z&&__Z.default?__Z.default:__Z;
+import __ee from "@mattermost/compass-icons/components/format-quote-open.js";const ee=__ee&&__ee.default?__ee.default:__ee;
+import __ae from "@mattermost/compass-icons/components/format-strikethrough-variant.js";const ae=__ae&&__ae.default?__ae.default:__ae;
+import __B from "@mattermost/compass-icons/components/link-variant.js";const B=__B&&__B.default?__B.default:__B;
+import __ie from "@mattermost/compass-icons/components/paperclip.js";const ie=__ie&&__ie.default?__ie.default:__ie;
+import __se from "@mattermost/compass-icons/components/send.js";const se=__se&&__se.default?__se.default:__se;
+import i from "../icon/Icon.js";
+import s from "../icon-button/IconButton.js";
+import te from "../tag/Tag.js";
+import x from "../attachment-card/AttachmentCard.js";
+import a from "./MessageInput.module.scss.js";
+function Ce({
+  className: T = "",
+  placeholder: A = "Message channel…",
+  showPriorityIndicator: O = !1,
+  showAttachments: k = !1,
+  value: u,
+  onChange: m,
+  onSelectionChange: c,
+  inputRef: h,
+  width: n = "wide"
+}) {
+  const [C, M] = v(""), _ = u !== void 0, p = _ ? u : C, S = (t) => {
+    _ ? m == null || m(t) : M(t);
+  }, [l, j] = v(!1), f = L(null), H = (t) => {
+    f.current = t, h && (h.current = t);
+  }, d = E(() => {
+    const t = f.current;
+    t && (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`);
+  }, []);
+  V(() => {
+    d();
+  }, [p, d]);
+  const g = p.trim().length > 0, r = (t, y) => [a[t], y ? a[y] : ""].filter(Boolean).join(" "), P = n === "narrow" && l, b = l && n === "wide", z = /* @__PURE__ */ o(D, { children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: r(
+          "message-input__format-btn",
+          l ? "message-input__format-btn--active" : ""
+        ),
+        "aria-label": l ? "Hide formatting toolbar" : "Show formatting toolbar",
+        "aria-pressed": l,
+        onClick: () => j((t) => !t),
+        children: [
+          /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(X, {}), size: "16" }),
+          P ? /* @__PURE__ */ e("span", { className: a["message-input__format-chevron"], children: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(K, {}), size: "12" }) }) : /* @__PURE__ */ e(
+            "span",
+            {
+              className: r(
+                "message-input__format-chevron",
+                l ? "message-input__format-chevron--rotated" : ""
+              ),
+              children: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(I, {}), size: "12" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: a["message-input__actions-divider"],
+        "aria-hidden": !0
+      }
+    ),
+    /* @__PURE__ */ e(
+      s,
+      {
+        icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(ie, {}), size: "16" }),
+        size: "small",
+        "aria-label": "Attach a file"
+      }
+    ),
+    /* @__PURE__ */ e(
+      s,
+      {
+        icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(G, {}), size: "16" }),
+        size: "small",
+        "aria-label": "Add an emoji"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: r(
+          "message-input__send",
+          g ? "" : "message-input__send--disabled"
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: a["message-input__send-main"],
+              "aria-label": "Send message",
+              disabled: !g,
+              children: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(se, {}), size: "16" })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: a["message-input__send-dropdown"],
+              "aria-label": "Send options",
+              disabled: !g,
+              children: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(I, {}), size: "16" })
+            }
+          )
+        ]
+      }
+    )
+  ] }), R = [
+    a["message-input"],
+    n === "narrow" ? a["message-input--width-narrow"] : "",
+    T
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { className: R, children: /* @__PURE__ */ o(
+    "div",
+    {
+      className: r(
+        "message-input__container",
+        l ? "message-input__container--formatting-open" : ""
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: r(
+              "message-input__preview-btn",
+              l ? "message-input__preview-btn--visible" : ""
+            ),
+            "aria-label": "Preview",
+            tabIndex: l ? 0 : -1,
+            children: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e($, {}), size: "16" })
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: r(
+              "message-input__body",
+              l ? "message-input__body--formatting-open" : ""
+            ),
+            children: [
+              O && /* @__PURE__ */ e("div", { className: a["message-input__priority-row"], children: /* @__PURE__ */ e(
+                te,
+                {
+                  label: "IMPORTANT",
+                  type: "info",
+                  size: "x-small",
+                  casing: "all-caps",
+                  leadingIcon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(N, {}), size: "10" })
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                "textarea",
+                {
+                  ref: H,
+                  className: a["message-input__textarea"],
+                  placeholder: A,
+                  value: p,
+                  onChange: (t) => S(t.target.value),
+                  onInput: d,
+                  onSelect: c,
+                  onKeyUp: c,
+                  onClick: c,
+                  rows: 1
+                }
+              )
+            ]
+          }
+        ),
+        k && /* @__PURE__ */ e("div", { className: a["message-input__attachments"], children: /* @__PURE__ */ o("div", { className: a["message-input__attachments-list"], children: [
+          /* @__PURE__ */ e(
+            x,
+            {
+              fileName: "Design_Brief.pdf",
+              fileMeta: "PDF 240KB",
+              fileType: "pdf",
+              state: "default",
+              onRemove: () => {
+              }
+            }
+          ),
+          /* @__PURE__ */ e(
+            x,
+            {
+              fileName: "Wireframes_v3.png",
+              fileMeta: "PNG 1.2MB",
+              fileType: "image-icon",
+              state: "default",
+              onRemove: () => {
+              }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: r(
+              "message-input__formatting-bar",
+              b ? "message-input__formatting-bar--open" : ""
+            ),
+            "aria-hidden": !b,
+            children: /* @__PURE__ */ o("div", { className: a["message-input__toolbar-controls"], children: [
+              /* @__PURE__ */ o("div", { className: a["message-input__toolbar-group"], children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(w, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Bold"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(F, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Italic"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(ae, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Strikethrough"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(J, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Heading"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: a["message-input__toolbar-divider"],
+                  "aria-hidden": !0
+                }
+              ),
+              /* @__PURE__ */ o("div", { className: a["message-input__toolbar-group"], children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(B, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Add link"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(U, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Code"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: a["message-input__toolbar-divider"],
+                  "aria-hidden": !0
+                }
+              ),
+              /* @__PURE__ */ o("div", { className: a["message-input__toolbar-group"], children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(ee, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Quote"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(Y, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Bulleted list"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(Z, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Numbered list"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: a["message-input__toolbar-divider"],
+                  "aria-hidden": !0
+                }
+              ),
+              /* @__PURE__ */ o("div", { className: a["message-input__toolbar-group"], children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(N, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Message priority"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(q, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "Burn on read"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(W, {}), size: "16" }),
+                    size: "small",
+                    "aria-label": "AI assistance"
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        n === "narrow" ? /* @__PURE__ */ o("div", { className: a["message-input__narrow-chrome"], children: [
+          /* @__PURE__ */ e("div", { className: a["message-input__narrow-chrome-left"], children: l && /* @__PURE__ */ o("div", { className: a["message-input__formatting-collapsed"], children: [
+            /* @__PURE__ */ e(
+              s,
+              {
+                icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(w, {}), size: "16" }),
+                size: "small",
+                "aria-label": "Bold"
+              }
+            ),
+            /* @__PURE__ */ e(
+              s,
+              {
+                icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(F, {}), size: "16" }),
+                size: "small",
+                "aria-label": "Italic"
+              }
+            ),
+            /* @__PURE__ */ e(
+              s,
+              {
+                icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(B, {}), size: "16" }),
+                size: "small",
+                "aria-label": "Add link"
+              }
+            ),
+            /* @__PURE__ */ e(
+              s,
+              {
+                icon: /* @__PURE__ */ e(i, { glyph: /* @__PURE__ */ e(Q, {}), size: "16" }),
+                size: "small",
+                "aria-label": "More formatting options"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: [
+                a["message-input__actions"],
+                a["message-input__actions--narrow-chrome"]
+              ].join(" "),
+              children: z
+            }
+          )
+        ] }) : /* @__PURE__ */ e("div", { className: a["message-input__actions"], children: z })
+      ]
+    }
+  ) });
+}
+export {
+  Ce as default
+};
+//# sourceMappingURL=MessageInput.js.map