npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.12 → 0.1.0-alpha.13 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (360) hide show

package/dist/components/attachment-card/AttachmentCard.js CHANGED Viewed

@@ -1,37 +1,37 @@
-import { jsxs as t, jsx as a, Fragment as l } from "react/jsx-runtime";
-import __w from "@mattermost/compass-icons/components/close.js";const w=__w&&__w.default?__w.default:__w;
-import __y from "@mattermost/compass-icons/components/dots-vertical.js";const y=__y&&__y.default?__y.default:__y;
-import __$ from "@mattermost/compass-icons/components/download-outline.js";const $=__$&&__$.default?__$.default:__$;
-import __E from "@mattermost/compass-icons/components/file-audio-outline-large.js";const E=__E&&__E.default?__E.default:__E;
-import __P from "@mattermost/compass-icons/components/file-code-outline-large.js";const P=__P&&__P.default?__P.default:__P;
-import __k from "@mattermost/compass-icons/components/file-excel-outline-large.js";const k=__k&&__k.default?__k.default:__k;
-import __I from "@mattermost/compass-icons/components/file-generic-outline-large.js";const I=__I&&__I.default?__I.default:__I;
-import __D from "@mattermost/compass-icons/components/file-image-outline-large.js";const D=__D&&__D.default?__D.default:__D;
-import __j from "@mattermost/compass-icons/components/file-patch-outline-large.js";const j=__j&&__j.default?__j.default:__j;
-import __U from "@mattermost/compass-icons/components/file-pdf-outline-large.js";const U=__U&&__U.default?__U.default:__U;
-import __A from "@mattermost/compass-icons/components/file-powerpoint-outline-large.js";const A=__A&&__A.default?__A.default:__A;
-import __B from "@mattermost/compass-icons/components/file-text-outline-large.js";const B=__B&&__B.default?__B.default:__B;
-import __M from "@mattermost/compass-icons/components/file-video-outline-large.js";const M=__M&&__M.default?__M.default:__M;
-import __R from "@mattermost/compass-icons/components/file-word-outline-large.js";const R=__R&&__R.default?__R.default:__R;
-import __V from "@mattermost/compass-icons/components/file-zip-outline-large.js";const V=__V&&__V.default?__V.default:__V;
-import o from "../icon/Icon.js";
-import m from "../icon-button/IconButton.js";
-import Y from "../tag/Tag.js";
+import { jsxs as t, Fragment as m, jsx as a } from "react/jsx-runtime";
+import __D from "@mattermost/compass-icons/components/close.js";const D=__D&&__D.default?__D.default:__D;
+import __U from "@mattermost/compass-icons/components/dots-vertical.js";const U=__U&&__U.default?__U.default:__U;
+import __j from "@mattermost/compass-icons/components/download-outline.js";const j=__j&&__j.default?__j.default:__j;
+import __A from "@mattermost/compass-icons/components/file-audio-outline-large.js";const A=__A&&__A.default?__A.default:__A;
+import __B from "@mattermost/compass-icons/components/file-code-outline-large.js";const B=__B&&__B.default?__B.default:__B;
+import __M from "@mattermost/compass-icons/components/file-excel-outline-large.js";const M=__M&&__M.default?__M.default:__M;
+import __F from "@mattermost/compass-icons/components/file-generic-outline-large.js";const F=__F&&__F.default?__F.default:__F;
+import __R from "@mattermost/compass-icons/components/file-image-outline-large.js";const R=__R&&__R.default?__R.default:__R;
+import __V from "@mattermost/compass-icons/components/file-patch-outline-large.js";const V=__V&&__V.default?__V.default:__V;
+import __Y from "@mattermost/compass-icons/components/file-pdf-outline-large.js";const Y=__Y&&__Y.default?__Y.default:__Y;
+import __G from "@mattermost/compass-icons/components/file-powerpoint-outline-large.js";const G=__G&&__G.default?__G.default:__G;
+import __W from "@mattermost/compass-icons/components/file-text-outline-large.js";const W=__W&&__W.default?__W.default:__W;
+import __Z from "@mattermost/compass-icons/components/file-video-outline-large.js";const Z=__Z&&__Z.default?__Z.default:__Z;
+import __q from "@mattermost/compass-icons/components/file-word-outline-large.js";const q=__q&&__q.default?__q.default:__q;
+import __H from "@mattermost/compass-icons/components/file-zip-outline-large.js";const H=__H&&__H.default?__H.default:__H;
+import r from "../icon/Icon.js";
+import d from "../icon-button/IconButton.js";
+import J from "../tag/Tag.js";
 import e from "./AttachmentCard.module.scss.js";
-const G = {
-  audio: E,
-  code: P,
-  excel: k,
-  generic: I,
-  "image-icon": D,
-  patch: j,
-  pdf: U,
-  powerpoint: A,
-  text: B,
-  video: M,
-  word: R,
-  zip: V
-}, W = {
+const K = (i) => `Uploading… (${i}%)`, Q = (i) => `Open ${i}`, S = {
+  audio: A,
+  code: B,
+  excel: M,
+  generic: F,
+  "image-icon": R,
+  patch: V,
+  pdf: Y,
+  powerpoint: G,
+  text: W,
+  video: Z,
+  word: q,
+  zip: H
+}, X = {
   audio: "var(--attachment-blue)",
   code: void 0,
   excel: "var(--attachment-green)",
@@ -45,26 +45,32 @@ const G = {
   word: "var(--attachment-blue)",
   zip: void 0
 };
-function sa({
-  className: N = "",
-  fileName: d,
-  fileMeta: s,
-  fileType: i = "generic",
-  state: n = "default",
-  progress: h = 0,
-  thumbnailSrc: p,
+function Ia({
+  className: i = "",
+  fileName: s,
+  fileMeta: h,
+  fileType: n = "generic",
+  state: o = "default",
+  progress: p = 0,
+  thumbnailSrc: u,
   channelTag: _,
-  dateTimeStamp: u,
-  onOpen: g,
-  onRemove: F,
-  onDownload: O,
-  onMore: b
+  dateTimeStamp: g,
+  onOpen: f,
+  onRemove: b,
+  onDownload: L,
+  onMore: N,
+  formatUploadingLabel: O = K,
+  formatOpenLabel: C = Q,
+  cancelUploadLabel: x = "Cancel upload",
+  removeLabel: z = "Remove attachment",
+  moreLabel: w = "More options",
+  downloadLabel: y = "Download"
 }) {
-  const c = n === "uploading", L = n === "uploaded", r = n === "default", C = r ? "" : e[`attachment-card--${n}`], x = [e["attachment-card"], C, N].filter(Boolean).join(" "), z = i !== "image-thumbnail" ? G[i] : I, v = i !== "image-thumbnail" ? W[i] : void 0, f = /* @__PURE__ */ t(l, { children: [
-    i === "image-thumbnail" && p ? /* @__PURE__ */ a(
+  const c = o === "uploading", $ = o === "uploaded", l = o === "default", E = l ? "" : e[`attachment-card--${o}`], P = [e["attachment-card"], E, i].filter(Boolean).join(" "), k = n !== "image-thumbnail" ? S[n] : F, v = n !== "image-thumbnail" ? X[n] : void 0, I = /* @__PURE__ */ t(m, { children: [
+    n === "image-thumbnail" && u ? /* @__PURE__ */ a(
       "img",
       {
-        src: p,
+        src: u,
         alt: "",
         className: e["attachment-card__thumbnail"]
       }
@@ -73,62 +79,62 @@ function sa({
       {
         className: e["attachment-card__icon"],
         style: v ? { color: v } : void 0,
-        children: /* @__PURE__ */ a(o, { glyph: /* @__PURE__ */ a(z, { size: 40 }), size: "40" })
+        children: /* @__PURE__ */ a(r, { glyph: /* @__PURE__ */ a(k, { size: 40 }), size: "40" })
       }
     ),
     /* @__PURE__ */ t("div", { className: e["attachment-card__text"], children: [
-      /* @__PURE__ */ a("span", { className: e["attachment-card__filename"], children: d }),
-      /* @__PURE__ */ a("div", { className: e["attachment-card__secondary-details"], children: c ? /* @__PURE__ */ a("span", { className: e["attachment-card__uploading-text"], children: `Uploading… (${h}%)` }) : /* @__PURE__ */ t(l, { children: [
-        _ && /* @__PURE__ */ a(Y, { label: _ }),
-        s && /* @__PURE__ */ t("div", { className: e["attachment-card__details"], children: [
-          /* @__PURE__ */ a("span", { children: s }),
-          u && /* @__PURE__ */ t("span", { className: e["attachment-card__datetime"], children: [
+      /* @__PURE__ */ a("span", { className: e["attachment-card__filename"], children: s }),
+      /* @__PURE__ */ a("div", { className: e["attachment-card__secondary-details"], children: c ? /* @__PURE__ */ a("span", { className: e["attachment-card__uploading-text"], children: O(p) }) : /* @__PURE__ */ t(m, { children: [
+        _ && /* @__PURE__ */ a(J, { label: _ }),
+        h && /* @__PURE__ */ t("div", { className: e["attachment-card__details"], children: [
+          /* @__PURE__ */ a("span", { children: h }),
+          g && /* @__PURE__ */ t("span", { className: e["attachment-card__datetime"], children: [
             /* @__PURE__ */ a("span", { children: "•" }),
-            /* @__PURE__ */ a("span", { children: u })
+            /* @__PURE__ */ a("span", { children: g })
           ] })
         ] })
       ] }) })
     ] })
   ] });
-  return /* @__PURE__ */ t("div", { className: x, children: [
+  return /* @__PURE__ */ t("div", { className: P, children: [
     /* @__PURE__ */ a("div", { className: e["attachment-card__container"], children: /* @__PURE__ */ t("div", { className: e["attachment-card__inner"], children: [
-      r && g ? /* @__PURE__ */ a(
+      l && f ? /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           className: `${e["attachment-card__left"]} ${e["attachment-card__open"]}`,
-          onClick: g,
-          "aria-label": `Open ${d}`,
-          children: f
+          onClick: f,
+          "aria-label": C(s),
+          children: I
         }
-      ) : /* @__PURE__ */ a("div", { className: e["attachment-card__left"], children: f }),
+      ) : /* @__PURE__ */ a("div", { className: e["attachment-card__left"], children: I }),
       /* @__PURE__ */ a("div", { className: e["attachment-card__right"], children: /* @__PURE__ */ t("div", { className: e["attachment-card__actions"], children: [
-        (L || c) && /* @__PURE__ */ a(
-          m,
+        ($ || c) && /* @__PURE__ */ a(
+          d,
           {
             size: "small",
-            icon: /* @__PURE__ */ a(o, { glyph: /* @__PURE__ */ a(w, {}), size: "16" }),
-            "aria-label": c ? "Cancel upload" : "Remove attachment",
-            onClick: F
+            icon: /* @__PURE__ */ a(r, { glyph: /* @__PURE__ */ a(D, {}), size: "16" }),
+            "aria-label": c ? x : z,
+            onClick: b
           }
         ),
-        r && /* @__PURE__ */ t(l, { children: [
+        l && /* @__PURE__ */ t(m, { children: [
           /* @__PURE__ */ a(
-            m,
+            d,
             {
               size: "small",
-              icon: /* @__PURE__ */ a(o, { glyph: /* @__PURE__ */ a(y, {}), size: "16" }),
-              "aria-label": "More options",
-              onClick: b
+              icon: /* @__PURE__ */ a(r, { glyph: /* @__PURE__ */ a(U, {}), size: "16" }),
+              "aria-label": w,
+              onClick: N
             }
           ),
           /* @__PURE__ */ a(
-            m,
+            d,
             {
               size: "small",
-              icon: /* @__PURE__ */ a(o, { glyph: /* @__PURE__ */ a($, {}), size: "16" }),
-              "aria-label": "Download",
-              onClick: O
+              icon: /* @__PURE__ */ a(r, { glyph: /* @__PURE__ */ a(j, {}), size: "16" }),
+              "aria-label": y,
+              onClick: L
             }
           )
         ] })
@@ -138,12 +144,12 @@ function sa({
       "div",
       {
         className: e["attachment-card__progress-fill"],
-        style: { width: `${Math.min(100, Math.max(0, h))}%` }
+        style: { width: `${Math.min(100, Math.max(0, p))}%` }
       }
     ) })
   ] });
 }
 export {
-  sa as default
+  Ia as default
 };
 //# sourceMappingURL=AttachmentCard.js.map

package/dist/components/attachment-card/AttachmentCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AttachmentCard.js","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport FileAudioOutlineLargeIcon from '@mattermost/compass-icons/components/file-audio-outline-large';\nimport FileCodeOutlineLargeIcon from '@mattermost/compass-icons/components/file-code-outline-large';\nimport FileExcelOutlineLargeIcon from '@mattermost/compass-icons/components/file-excel-outline-large';\nimport FileGenericOutlineLargeIcon from '@mattermost/compass-icons/components/file-generic-outline-large';\nimport FileImageOutlineLargeIcon from '@mattermost/compass-icons/components/file-image-outline-large';\nimport FilePatchOutlineLargeIcon from '@mattermost/compass-icons/components/file-patch-outline-large';\nimport FilePdfOutlineLargeIcon from '@mattermost/compass-icons/components/file-pdf-outline-large';\nimport FilePowerpointOutlineLargeIcon from '@mattermost/compass-icons/components/file-powerpoint-outline-large';\nimport FileTextOutlineLargeIcon from '@mattermost/compass-icons/components/file-text-outline-large';\nimport FileVideoOutlineLargeIcon from '@mattermost/compass-icons/components/file-video-outline-large';\nimport FileWordOutlineLargeIcon from '@mattermost/compass-icons/components/file-word-outline-large';\nimport FileZipOutlineLargeIcon from '@mattermost/compass-icons/components/file-zip-outline-large';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AttachmentCard.module.scss';\n\nexport type AttachmentCardFileType =\n \| 'text'\n \| 'word'\n \| 'excel'\n \| 'powerpoint'\n \| 'pdf'\n \| 'image-icon'\n \| 'image-thumbnail'\n \| 'video'\n \| 'audio'\n \| 'generic'\n \| 'patch'\n \| 'zip'\n \| 'code';\n\nexport type AttachmentCardState = 'default' \| 'uploading' \| 'uploaded';\n\nexport interface AttachmentCardProps {\n className?: string;\n /** File name to display. /\n fileName: string;\n /* File type + size string shown below the filename, e.g. \"TXT 15KB\". /\n fileMeta?: string;\n /* Controls the icon shown on the left. Default: \"generic\". /\n fileType?: AttachmentCardFileType;\n /* Card state. Default: \"default\" (browsing context). /\n state?: AttachmentCardState;\n /* Upload progress 0–100. Used when state=\"uploading\". /\n progress?: number;\n /* Thumbnail image URL. Used when fileType=\"image-thumbnail\". /\n thumbnailSrc?: string;\n /* Optional channel tag label shown below the filename, e.g. \"UX Design\". /\n channelTag?: string;\n /* Optional date/time stamp, e.g. \"Sep 24 5:14 PM\". /\n dateTimeStamp?: string;\n /* Called when the card is activated to open the file or its preview. /\n onOpen?: () => void;\n /* Called when the remove or cancel button is clicked. /\n onRemove?: () => void;\n /* Called when the download button is clicked (visible on hover in default state). /\n onDownload?: () => void;\n /* Called when the more-options button is clicked (visible on hover in default state). /\n onMore?: () => void;\n}\n\ntype IconComponent = ComponentType<{ size: number; className?: string }>;\n\nconst FILE_TYPE_ICONS: Record<\n Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n IconComponent\n> = {\n audio: FileAudioOutlineLargeIcon,\n code: FileCodeOutlineLargeIcon,\n excel: FileExcelOutlineLargeIcon,\n generic: FileGenericOutlineLargeIcon,\n 'image-icon': FileImageOutlineLargeIcon,\n patch: FilePatchOutlineLargeIcon,\n pdf: FilePdfOutlineLargeIcon,\n powerpoint: FilePowerpointOutlineLargeIcon,\n text: FileTextOutlineLargeIcon,\n video: FileVideoOutlineLargeIcon,\n word: FileWordOutlineLargeIcon,\n zip: FileZipOutlineLargeIcon,\n};\n\nconst FILE_TYPE_COLORS: Record<\n Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n string \| undefined\n> = {\n audio: 'var(--attachment-blue)',\n code: undefined,\n excel: 'var(--attachment-green)',\n generic: undefined,\n 'image-icon': 'var(--attachment-blue)',\n patch: undefined,\n pdf: 'var(--attachment-red)',\n powerpoint: 'var(--attachment-orange)',\n text: undefined,\n video: 'var(--attachment-blue)',\n word: 'var(--attachment-blue)',\n zip: undefined,\n};\n\n/\n Attachment Cards represent a file shared in a channel, message, or task. Each card shows\n * the file's identity at a glance — type, name, size — and hosts the actions a viewer can\n * take on it.\n */\nexport default function AttachmentCard({\n className = '',\n fileName,\n fileMeta,\n fileType = 'generic',\n state = 'default',\n progress = 0,\n thumbnailSrc,\n channelTag,\n dateTimeStamp,\n onOpen,\n onRemove,\n onDownload,\n onMore,\n}: AttachmentCardProps) {\n const isUploading = state === 'uploading';\n const isUploaded = state === 'uploaded';\n const isDefault = state === 'default';\n\n const stateClass = !isDefault ? styles[`attachment-card--${state}`] : '';\n const rootClass = [styles['attachment-card'], stateClass, className]\n .filter(Boolean)\n .join(' ');\n\n const FileIcon =\n fileType !== 'image-thumbnail'\n ? FILE_TYPE_ICONS[fileType]\n : FileGenericOutlineLargeIcon;\n\n const iconColor =\n fileType !== 'image-thumbnail' ? FILE_TYPE_COLORS[fileType] : undefined;\n\n const fileIdentity = (\n <>\n {fileType === 'image-thumbnail' && thumbnailSrc ? (\n <img\n src={thumbnailSrc}\n alt=\"\"\n className={styles['attachment-card__thumbnail']}\n />\n ) : (\n <div\n className={styles['attachment-card__icon']}\n style={iconColor ? { color: iconColor } : undefined}\n >\n <Icon glyph={<FileIcon size={40} />} size=\"40\" />\n </div>\n )}\n\n <div className={styles['attachment-card__text']}>\n <span className={styles['attachment-card__filename']}>{fileName}</span>\n <div className={styles['attachment-card__secondary-details']}>\n {isUploading ? (\n <span className={styles['attachment-card__uploading-text']}>\n {`Uploading… (${progress}%)`}\n </span>\n ) : (\n <>\n {channelTag && <Tag label={channelTag} />}\n {fileMeta && (\n <div className={styles['attachment-card__details']}>\n <span>{fileMeta}</span>\n {dateTimeStamp && (\n <span className={styles['attachment-card__datetime']}>\n <span>{'•'}</span>\n <span>{dateTimeStamp}</span>\n </span>\n )}\n </div>\n )}\n </>\n )}\n </div>\n </div>\n </>\n );\n\n return (\n <div className={rootClass}>\n <div className={styles['attachment-card__container']}>\n <div className={styles['attachment-card__inner']}>\n {isDefault && onOpen ? (\n <button\n type=\"button\"\n className={`${styles['attachment-card__left']} ${styles['attachment-card__open']}`}\n onClick={onOpen}\n aria-label={`Open ${fileName}`}\n >\n {fileIdentity}\n </button>\n ) : (\n <div className={styles['attachment-card__left']}>\n {fileIdentity}\n </div>\n )}\n\n <div className={styles['attachment-card__right']}>\n <div className={styles['attachment-card__actions']}>\n {(isUploaded \|\| isUploading) && (\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n aria-label={\n isUploading ? 'Cancel upload' : 'Remove attachment'\n }\n onClick={onRemove}\n />\n )}\n {isDefault && (\n <>\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<DotsVerticalIcon />} size=\"16\" />}\n aria-label=\"More options\"\n onClick={onMore}\n />\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<DownloadOutlineIcon />} size=\"16\" />}\n aria-label=\"Download\"\n onClick={onDownload}\n />\n </>\n )}\n </div>\n </div>\n </div>\n </div>\n\n {isUploading && (\n <div className={styles['attachment-card__progress-bar']}>\n <div\n className={styles['attachment-card__progress-fill']}\n style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}\n />\n </div>\n )}\n </div>\n );\n}\n"],"names":["FILE_TYPE_ICONS","FileAudioOutlineLargeIcon","FileCodeOutlineLargeIcon","FileExcelOutlineLargeIcon","FileGenericOutlineLargeIcon","FileImageOutlineLargeIcon","FilePatchOutlineLargeIcon","FilePdfOutlineLargeIcon","FilePowerpointOutlineLargeIcon","FileTextOutlineLargeIcon","FileVideoOutlineLargeIcon","FileWordOutlineLargeIcon","FileZipOutlineLargeIcon","FILE_TYPE_COLORS","AttachmentCard","className","fileName","fileMeta","fileType","state","progress","thumbnailSrc","channelTag","dateTimeStamp","onOpen","onRemove","onDownload","onMore","isUploading","isUploaded","isDefault","stateClass","styles","rootClass","FileIcon","iconColor","fileIdentity","jsxs","Fragment","jsx","Icon","Tag","IconButton","CloseIcon","DotsVerticalIcon","DownloadOutlineIcon"],"mappings":"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"}
1	+ {"version":3,"file":"AttachmentCard.js","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport FileAudioOutlineLargeIcon from '@mattermost/compass-icons/components/file-audio-outline-large';\nimport FileCodeOutlineLargeIcon from '@mattermost/compass-icons/components/file-code-outline-large';\nimport FileExcelOutlineLargeIcon from '@mattermost/compass-icons/components/file-excel-outline-large';\nimport FileGenericOutlineLargeIcon from '@mattermost/compass-icons/components/file-generic-outline-large';\nimport FileImageOutlineLargeIcon from '@mattermost/compass-icons/components/file-image-outline-large';\nimport FilePatchOutlineLargeIcon from '@mattermost/compass-icons/components/file-patch-outline-large';\nimport FilePdfOutlineLargeIcon from '@mattermost/compass-icons/components/file-pdf-outline-large';\nimport FilePowerpointOutlineLargeIcon from '@mattermost/compass-icons/components/file-powerpoint-outline-large';\nimport FileTextOutlineLargeIcon from '@mattermost/compass-icons/components/file-text-outline-large';\nimport FileVideoOutlineLargeIcon from '@mattermost/compass-icons/components/file-video-outline-large';\nimport FileWordOutlineLargeIcon from '@mattermost/compass-icons/components/file-word-outline-large';\nimport FileZipOutlineLargeIcon from '@mattermost/compass-icons/components/file-zip-outline-large';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AttachmentCard.module.scss';\n\nexport type AttachmentCardFileType =\n \| 'text'\n \| 'word'\n \| 'excel'\n \| 'powerpoint'\n \| 'pdf'\n \| 'image-icon'\n \| 'image-thumbnail'\n \| 'video'\n \| 'audio'\n \| 'generic'\n \| 'patch'\n \| 'zip'\n \| 'code';\n\nexport type AttachmentCardState = 'default' \| 'uploading' \| 'uploaded';\n\nexport interface AttachmentCardProps {\n className?: string;\n /** File name to display. Also used in the default open-button name. /\n fileName: string;\n /* File type + size string shown below the filename, e.g. \"TXT 15KB\". /\n fileMeta?: ReactNode;\n /* Controls the icon shown on the left. Default: \"generic\". /\n fileType?: AttachmentCardFileType;\n /* Card state. Default: \"default\" (browsing context). /\n state?: AttachmentCardState;\n /* Upload progress 0–100. Used when state=\"uploading\". /\n progress?: number;\n /* Thumbnail image URL. Used when fileType=\"image-thumbnail\". /\n thumbnailSrc?: string;\n /* Optional channel tag label shown below the filename, e.g. \"UX Design\". /\n channelTag?: ReactNode;\n /* Optional date/time stamp, e.g. \"Sep 24 5:14 PM\". /\n dateTimeStamp?: ReactNode;\n /* Called when the card is activated to open the file or its preview. /\n onOpen?: () => void;\n /* Called when the remove or cancel button is clicked. /\n onRemove?: () => void;\n /* Called when the download button is clicked (visible on hover in default state). /\n onDownload?: () => void;\n /* Called when the more-options button is clicked (visible on hover in default state). /\n onMore?: () => void;\n /* Uploading status text. Default: `Uploading… ({progress}%)`. /\n formatUploadingLabel?: (progress: number) => ReactNode;\n /* Accessible name for the open button. Default: `Open {fileName}`. /\n formatOpenLabel?: (fileName: string) => string;\n /* Accessible name for the cancel button while uploading. Default: \"Cancel upload\". /\n cancelUploadLabel?: string;\n /* Accessible name for the remove button once uploaded. Default: \"Remove attachment\". /\n removeLabel?: string;\n /* Accessible name for the more-options button. Default: \"More options\". /\n moreLabel?: string;\n /* Accessible name for the download button. Default: \"Download\". /\n downloadLabel?: string;\n}\n\nconst defaultFormatUploadingLabel = (progress: number) =>\n `Uploading… (${progress}%)`;\nconst defaultFormatOpenLabel = (fileName: string) => `Open ${fileName}`;\n\ntype IconComponent = ComponentType<{ size: number; className?: string }>;\n\nconst FILE_TYPE_ICONS: Record<\n Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n IconComponent\n> = {\n audio: FileAudioOutlineLargeIcon,\n code: FileCodeOutlineLargeIcon,\n excel: FileExcelOutlineLargeIcon,\n generic: FileGenericOutlineLargeIcon,\n 'image-icon': FileImageOutlineLargeIcon,\n patch: FilePatchOutlineLargeIcon,\n pdf: FilePdfOutlineLargeIcon,\n powerpoint: FilePowerpointOutlineLargeIcon,\n text: FileTextOutlineLargeIcon,\n video: FileVideoOutlineLargeIcon,\n word: FileWordOutlineLargeIcon,\n zip: FileZipOutlineLargeIcon,\n};\n\nconst FILE_TYPE_COLORS: Record<\n Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n string \| undefined\n> = {\n audio: 'var(--attachment-blue)',\n code: undefined,\n excel: 'var(--attachment-green)',\n generic: undefined,\n 'image-icon': 'var(--attachment-blue)',\n patch: undefined,\n pdf: 'var(--attachment-red)',\n powerpoint: 'var(--attachment-orange)',\n text: undefined,\n video: 'var(--attachment-blue)',\n word: 'var(--attachment-blue)',\n zip: undefined,\n};\n\n/\n Attachment Cards represent a file shared in a channel, message, or task. Each card shows\n * the file's identity at a glance — type, name, size — and hosts the actions a viewer can\n * take on it.\n */\nexport default function AttachmentCard({\n className = '',\n fileName,\n fileMeta,\n fileType = 'generic',\n state = 'default',\n progress = 0,\n thumbnailSrc,\n channelTag,\n dateTimeStamp,\n onOpen,\n onRemove,\n onDownload,\n onMore,\n formatUploadingLabel = defaultFormatUploadingLabel,\n formatOpenLabel = defaultFormatOpenLabel,\n cancelUploadLabel = 'Cancel upload',\n removeLabel = 'Remove attachment',\n moreLabel = 'More options',\n downloadLabel = 'Download',\n}: AttachmentCardProps) {\n const isUploading = state === 'uploading';\n const isUploaded = state === 'uploaded';\n const isDefault = state === 'default';\n\n const stateClass = !isDefault ? styles[`attachment-card--${state}`] : '';\n const rootClass = [styles['attachment-card'], stateClass, className]\n .filter(Boolean)\n .join(' ');\n\n const FileIcon =\n fileType !== 'image-thumbnail'\n ? FILE_TYPE_ICONS[fileType]\n : FileGenericOutlineLargeIcon;\n\n const iconColor =\n fileType !== 'image-thumbnail' ? FILE_TYPE_COLORS[fileType] : undefined;\n\n const fileIdentity = (\n <>\n {fileType === 'image-thumbnail' && thumbnailSrc ? (\n <img\n src={thumbnailSrc}\n alt=\"\"\n className={styles['attachment-card__thumbnail']}\n />\n ) : (\n <div\n className={styles['attachment-card__icon']}\n style={iconColor ? { color: iconColor } : undefined}\n >\n <Icon glyph={<FileIcon size={40} />} size=\"40\" />\n </div>\n )}\n\n <div className={styles['attachment-card__text']}>\n <span className={styles['attachment-card__filename']}>{fileName}</span>\n <div className={styles['attachment-card__secondary-details']}>\n {isUploading ? (\n <span className={styles['attachment-card__uploading-text']}>\n {formatUploadingLabel(progress)}\n </span>\n ) : (\n <>\n {channelTag && <Tag label={channelTag} />}\n {fileMeta && (\n <div className={styles['attachment-card__details']}>\n <span>{fileMeta}</span>\n {dateTimeStamp && (\n <span className={styles['attachment-card__datetime']}>\n <span>{'•'}</span>\n <span>{dateTimeStamp}</span>\n </span>\n )}\n </div>\n )}\n </>\n )}\n </div>\n </div>\n </>\n );\n\n return (\n <div className={rootClass}>\n <div className={styles['attachment-card__container']}>\n <div className={styles['attachment-card__inner']}>\n {isDefault && onOpen ? (\n <button\n type=\"button\"\n className={`${styles['attachment-card__left']} ${styles['attachment-card__open']}`}\n onClick={onOpen}\n aria-label={formatOpenLabel(fileName)}\n >\n {fileIdentity}\n </button>\n ) : (\n <div className={styles['attachment-card__left']}>\n {fileIdentity}\n </div>\n )}\n\n <div className={styles['attachment-card__right']}>\n <div className={styles['attachment-card__actions']}>\n {(isUploaded \|\| isUploading) && (\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n aria-label={isUploading ? cancelUploadLabel : removeLabel}\n onClick={onRemove}\n />\n )}\n {isDefault && (\n <>\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<DotsVerticalIcon />} size=\"16\" />}\n aria-label={moreLabel}\n onClick={onMore}\n />\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<DownloadOutlineIcon />} size=\"16\" />}\n aria-label={downloadLabel}\n onClick={onDownload}\n />\n </>\n )}\n </div>\n </div>\n </div>\n </div>\n\n {isUploading && (\n <div className={styles['attachment-card__progress-bar']}>\n <div\n className={styles['attachment-card__progress-fill']}\n style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}\n />\n </div>\n )}\n </div>\n );\n}\n"],"names":["defaultFormatUploadingLabel","progress","defaultFormatOpenLabel","fileName","FILE_TYPE_ICONS","FileAudioOutlineLargeIcon","FileCodeOutlineLargeIcon","FileExcelOutlineLargeIcon","FileGenericOutlineLargeIcon","FileImageOutlineLargeIcon","FilePatchOutlineLargeIcon","FilePdfOutlineLargeIcon","FilePowerpointOutlineLargeIcon","FileTextOutlineLargeIcon","FileVideoOutlineLargeIcon","FileWordOutlineLargeIcon","FileZipOutlineLargeIcon","FILE_TYPE_COLORS","AttachmentCard","className","fileMeta","fileType","state","thumbnailSrc","channelTag","dateTimeStamp","onOpen","onRemove","onDownload","onMore","formatUploadingLabel","formatOpenLabel","cancelUploadLabel","removeLabel","moreLabel","downloadLabel","isUploading","isUploaded","isDefault","stateClass","styles","rootClass","FileIcon","iconColor","fileIdentity","jsxs","Fragment","jsx","Icon","Tag","IconButton","CloseIcon","DotsVerticalIcon","DownloadOutlineIcon"],"mappings":"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"}

package/dist/components/card-button/CardButton.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._card-~~button_1l92t_2~~{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-m);margin:0;padding:var(--spacing-m) var(--spacing-xl) var(--spacing-m) var(--spacing-m);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);background-color:var(--center-channel-bg);box-shadow:var(--elevation-1);cursor:pointer;text-align:left;color:var(--center-channel-color);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._card-~~button_1l92t_2~~:hover:not(:disabled):not(._card-button--~~selected_1l92t_22~~){border-color:rgba(var(--center-channel-color-rgb),.24);box-shadow:var(--elevation-2)}._card-~~button_1l92t_2~~:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._card-~~button_1l92t_2~~:disabled{cursor:not-allowed;opacity:.48}._card-button--~~selected_1l92t_22~~{border-color:rgba(var(--button-bg-rgb),.32)}._card-button--~~selected_1l92t_22~~ ._card-~~button__icon_1l92t_37~~{background-color:rgba(var(--button-bg-rgb),.08);color:var(--button-bg)}._card-button--~~selected_1l92t_22~~ ._card-~~button__check_1l92t_41~~{visibility:visible}._card-~~button__icon_1l92t_37~~{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs);border-radius:var(--radius-~~full~~);background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.56)}._card-~~button__text_1l92t_54~~{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}._card-~~button__title_1l92t_62~~{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)}._card-~~button__description_1l92t_69~~{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),.72)}._card-~~button__check_1l92t_41~~{flex-shrink:0;display:inline-flex;align-items:center;color:var(--button-bg);visibility:hidden}
1	+ ._card-button_1i688_2{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-m);margin:0;padding:var(--spacing-m) var(--spacing-xl) var(--spacing-m) var(--spacing-m);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);background-color:var(--center-channel-bg);box-shadow:var(--elevation-1);cursor:pointer;text-align:left;color:var(--center-channel-color);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._card-button_1i688_2:hover:not(:disabled):not(._card-button--selected_1i688_22){border-color:rgba(var(--center-channel-color-rgb),.24);box-shadow:var(--elevation-2)}._card-button_1i688_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._card-button_1i688_2:disabled{cursor:not-allowed;opacity:.48}._card-button--selected_1i688_22{border-color:rgba(var(--button-bg-rgb),.32)}._card-button--selected_1i688_22 ._card-button__icon_1i688_37{background-color:rgba(var(--button-bg-rgb),.08);color:var(--button-bg)}._card-button--selected_1i688_22 ._card-button__check_1i688_41{visibility:visible}._card-button__icon_1i688_37{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs);border-radius:var(--radius-pill);background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.56)}._card-button__text_1i688_54{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}._card-button__title_1i688_62{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)}._card-button__description_1i688_69{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),.72)}._card-button__check_1i688_41{flex-shrink:0;display:inline-flex;align-items:center;color:var(--button-bg);visibility:hidden}

package/dist/components/card-button/CardButton.module.scss.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButton.css');const t={"card-button":"_card-button_1l92t_2","card-button--selected":"_card-button--selected_1l92t_22","card-button__icon":"_card-button__icon_1l92t_37","card-button__check":"_card-button__check_1l92t_41","card-button__text":"_card-button__text_1l92t_54","card-button__title":"_card-button__title_1l92t_62","card-button__description":"_card-button__description_1l92t_69"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButton.css');const t={"card-button":"_card-button_1i688_2","card-button--selected":"_card-button--selected_1i688_22","card-button__icon":"_card-button__icon_1i688_37","card-button__check":"_card-button__check_1i688_41","card-button__text":"_card-button__text_1i688_54","card-button__title":"_card-button__title_1i688_62","card-button__description":"_card-button__description_1i688_69"};exports.default=t;
 //# sourceMappingURL=CardButton.module.scss.cjs.map

package/dist/components/card-button/CardButton.module.scss.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import './CardButton.css';const t = {
-  "card-button": "_card-button_1l92t_2",
-  "card-button--selected": "_card-button--selected_1l92t_22",
-  "card-button__icon": "_card-button__icon_1l92t_37",
-  "card-button__check": "_card-button__check_1l92t_41",
-  "card-button__text": "_card-button__text_1l92t_54",
-  "card-button__title": "_card-button__title_1l92t_62",
-  "card-button__description": "_card-button__description_1l92t_69"
+  "card-button": "_card-button_1i688_2",
+  "card-button--selected": "_card-button--selected_1i688_22",
+  "card-button__icon": "_card-button__icon_1i688_37",
+  "card-button__check": "_card-button__check_1i688_41",
+  "card-button__text": "_card-button__text_1i688_54",
+  "card-button__title": "_card-button__title_1i688_62",
+  "card-button__description": "_card-button__description_1i688_69"
 };
 export {
   t as default

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),e=require("./ChannelInfoMsgHeader.module.scss.cjs");function u({channelName:l,onChannelClick:i,tabs:o,teamName:s,className:t=""}){const r=l!=null&&l!==""?[{label:l,onClick:i}]:o??[{label:"Spec Reviews",active:!0}],c=[e.default["channel-info-msg-header"],t].filter(Boolean).join(" ");return a.jsx("div",{className:c,children:a.jsxs("div",{className:e.default["channel-info-msg-header__container"],children:[r.map((n,d)=>a.jsx("div",{className:[e.default["channel-info-msg-header__tab-area"],n.active?e.default["channel-info-msg-header__tab-area--active"]:""].filter(Boolean).join(" "),children:a.jsx("button",{type:"button",className:[e.default["channel-info-msg-header__tab"],n.active?e.default["channel-info-msg-header__tab--active"]:""].filter(Boolean).join(" "),onClick:n.onClick,children:n.label})},`${n.label}-${d}`)),s!=null&&s!==""&&a.jsx("div",{className:e.default["channel-info-msg-header__team"],children:a.jsx("span",{className:e.default["channel-info-msg-header__team-name"],children:s})})]})})}exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),e=require("./ChannelInfoMsgHeader.module.scss.cjs");function u({channelName:n,onChannelClick:o,tabs:t,teamName:s,className:r=""}){const c=n!=null&&n!==""?[{label:n,onClick:o}]:t??[{label:"Spec Reviews",active:!0}],d=[e.default["channel-info-msg-header"],r].filter(Boolean).join(" ");return l.jsx("div",{className:d,children:l.jsxs("div",{className:e.default["channel-info-msg-header__container"],children:[c.map((a,i)=>l.jsx("div",{className:[e.default["channel-info-msg-header__tab-area"],a.active?e.default["channel-info-msg-header__tab-area--active"]:""].filter(Boolean).join(" "),children:l.jsx("button",{type:"button",className:[e.default["channel-info-msg-header__tab"],a.active?e.default["channel-info-msg-header__tab--active"]:""].filter(Boolean).join(" "),onClick:a.onClick,children:a.label})},typeof a.label=="string"?`${a.label}-${i}`:i)),s!=null&&s!==""&&l.jsx("div",{className:e.default["channel-info-msg-header__team"],children:l.jsx("span",{className:e.default["channel-info-msg-header__team-name"],children:s})})]})})}exports.default=u;
 //# sourceMappingURL=ChannelInfoMsgHeader.cjs.map

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChannelInfoMsgHeader.cjs","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"sourcesContent":["import styles from './ChannelInfoMsgHeader.module.scss';\n\nexport interface ChannelInfoMsgHeaderTab {\n /** Label text for this tab. /\n label: ~~string~~;\n /* Whether this tab is currently active/selected. /\n active?: boolean;\n /* Click handler. /\n onClick?: () => void;\n}\n\nexport interface ChannelInfoMsgHeaderProps {\n /\n Channel (or section) label — primary API for Mentions / Saved message\n * indicators. Prefer this over `tabs` for a single channel chip.\n /\n channelName?: ~~string~~;\n /* Called when the channel label is pressed (`channelName` mode). /\n onChannelClick?: () => void;\n /\n Multi-section tabs for channel info panels. Used when `channelName` is\n * omitted.\n /\n tabs?: ChannelInfoMsgHeaderTab[];\n /\n Team name after the channel divider. Omit when the workspace has only one\n * team or the team is already clear from context.\n /\n teamName?: ~~string~~;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n The Channel Info Message Header names a channel (or section) and, when useful, the team it\n * belongs to. Use it above posts in Mentions and Saved lists, or as section tabs at the top\n * of a channel info panel.\n */\nexport default function ChannelInfoMsgHeader({\n channelName,\n onChannelClick,\n tabs,\n teamName,\n className = '',\n}: ChannelInfoMsgHeaderProps) {\n const resolvedTabs: ChannelInfoMsgHeaderTab[] =\n channelName != null && channelName !== ''\n ? [{ label: channelName, onClick: onChannelClick }]\n : (tabs ?? [{ label: 'Spec Reviews', active: true }]);\n\n const rootClass = [styles['channel-info-msg-header'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['channel-info-msg-header__container']}>\n {resolvedTabs.map((tab, index) => (\n <div\n key={`${tab.label}-${index}`}\n className={[\n styles['channel-info-msg-header__tab-area'],\n tab.active\n ? styles['channel-info-msg-header__tab-area--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <button\n type=\"button\"\n className={[\n styles['channel-info-msg-header__tab'],\n tab.active\n ? styles['channel-info-msg-header__tab--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={tab.onClick}\n >\n {tab.label}\n </button>\n </div>\n ))}\n {teamName != null && teamName !== '' && (\n <div className={styles['channel-info-msg-header__team']}>\n <span className={styles['channel-info-msg-header__team-name']}>\n {teamName}\n </span>\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ChannelInfoMsgHeader","channelName","onChannelClick","tabs","teamName","className","resolvedTabs","rootClass","styles","jsx","tab","index"],"mappings":"~~qMAsCA~~,SAAwBA,EAAqB,CAC3C,YAAAC,EACA,eAAAC,EACA,KAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,EACd,EAA8B,CAC5B,MAAMC,EACJL,GAAe,MAAQA,IAAgB,GACnC,CAAC,CAAE,MAAOA,EAAa,QAASC,EAAgB,EAC/CC,GAAQ,CAAC,CAAE,MAAO,eAAgB,OAAQ,GAAM,EAEjDI,EAAY,CAACC,UAAO,yBAAyB,EAAGH,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,IAAC,OAAI,UAAWF,EACd,gBAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,oCAAoC,EACxD,SAAA,CAAAF,EAAa,IAAI,CAACI,EAAKC,IACtBF,EAAAA,IAAC,MAAA,~~CAEC~~,UAAW,CACTD,EAAAA,QAAO,mCAAmC,EAC1CE,EAAI,OACAF,UAAO,2CAA2C,EAClD,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAAC,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,8BAA8B,EACrCE,EAAI,OACAF,UAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASE,EAAI,QAEZ,SAAAA,EAAI,KAAA,CAAA,CACP,~~EAvBK~~,GAAGA,EAAI,KAAK,IAAIC,CAAK,~~EAAA~~,~~CAyB7B~~,EACAP,GAAY,MAAQA,IAAa,IAChCK,EAAAA,IAAC,OAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACpD,eAAC,OAAA,CAAK,UAAWA,EAAAA,QAAO,oCAAoC,EACzD,WACH,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}
1	+ {"version":3,"file":"ChannelInfoMsgHeader.cjs","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './ChannelInfoMsgHeader.module.scss';\n\nexport interface ChannelInfoMsgHeaderTab {\n /** Label text for this tab. Accepts translated nodes. /\n label: ReactNode;\n /* Whether this tab is currently active/selected. /\n active?: boolean;\n /* Click handler. /\n onClick?: () => void;\n}\n\nexport interface ChannelInfoMsgHeaderProps {\n /\n Channel (or section) label — primary API for Mentions / Saved message\n * indicators. Prefer this over `tabs` for a single channel chip.\n /\n channelName?: ReactNode;\n /* Called when the channel label is pressed (`channelName` mode). /\n onChannelClick?: () => void;\n /\n Multi-section tabs for channel info panels. Used when `channelName` is\n * omitted.\n /\n tabs?: ChannelInfoMsgHeaderTab[];\n /\n Team name after the channel divider. Omit when the workspace has only one\n * team or the team is already clear from context.\n /\n teamName?: ReactNode;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n The Channel Info Message Header names a channel (or section) and, when useful, the team it\n * belongs to. Use it above posts in Mentions and Saved lists, or as section tabs at the top\n * of a channel info panel.\n */\nexport default function ChannelInfoMsgHeader({\n channelName,\n onChannelClick,\n tabs,\n teamName,\n className = '',\n}: ChannelInfoMsgHeaderProps) {\n const resolvedTabs: ChannelInfoMsgHeaderTab[] =\n channelName != null && channelName !== ''\n ? [{ label: channelName, onClick: onChannelClick }]\n : (tabs ?? [{ label: 'Spec Reviews', active: true }]);\n\n const rootClass = [styles['channel-info-msg-header'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['channel-info-msg-header__container']}>\n {resolvedTabs.map((tab, index) => (\n <div\n key={\n typeof tab.label === 'string' ? `${tab.label}-${index}` : index\n }\n className={[\n styles['channel-info-msg-header__tab-area'],\n tab.active\n ? styles['channel-info-msg-header__tab-area--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <button\n type=\"button\"\n className={[\n styles['channel-info-msg-header__tab'],\n tab.active\n ? styles['channel-info-msg-header__tab--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={tab.onClick}\n >\n {tab.label}\n </button>\n </div>\n ))}\n {teamName != null && teamName !== '' && (\n <div className={styles['channel-info-msg-header__team']}>\n <span className={styles['channel-info-msg-header__team-name']}>\n {teamName}\n </span>\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ChannelInfoMsgHeader","channelName","onChannelClick","tabs","teamName","className","resolvedTabs","rootClass","styles","jsx","tab","index"],"mappings":"qMAuCA,SAAwBA,EAAqB,CAC3C,YAAAC,EACA,eAAAC,EACA,KAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,EACd,EAA8B,CAC5B,MAAMC,EACJL,GAAe,MAAQA,IAAgB,GACnC,CAAC,CAAE,MAAOA,EAAa,QAASC,EAAgB,EAC/CC,GAAQ,CAAC,CAAE,MAAO,eAAgB,OAAQ,GAAM,EAEjDI,EAAY,CAACC,UAAO,yBAAyB,EAAGH,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,IAAC,OAAI,UAAWF,EACd,gBAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,oCAAoC,EACxD,SAAA,CAAAF,EAAa,IAAI,CAACI,EAAKC,IACtBF,EAAAA,IAAC,MAAA,CAIC,UAAW,CACTD,EAAAA,QAAO,mCAAmC,EAC1CE,EAAI,OACAF,UAAO,2CAA2C,EAClD,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAAC,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,8BAA8B,EACrCE,EAAI,OACAF,UAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASE,EAAI,QAEZ,SAAAA,EAAI,KAAA,CAAA,CACP,EAxBE,OAAOA,EAAI,OAAU,SAAW,GAAGA,EAAI,KAAK,IAAIC,CAAK,GAAKA,CAAA,CA0B/D,EACAP,GAAY,MAAQA,IAAa,IAChCK,EAAAA,IAAC,OAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACpD,eAAC,OAAA,CAAK,UAAWA,EAAAA,QAAO,oCAAoC,EACzD,WACH,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 export interface ChannelInfoMsgHeaderTab {
-    /** Label text for this tab. */
-    label: string;
+    /** Label text for this tab. Accepts translated nodes. */
+    label: ReactNode;
     /** Whether this tab is currently active/selected. */
     active?: boolean;
     /** Click handler. */
@@ -11,7 +12,7 @@ export interface ChannelInfoMsgHeaderProps {
      * Channel (or section) label — primary API for Mentions / Saved message
      * indicators. Prefer this over `tabs` for a single channel chip.
      */
-    channelName?: string;
+    channelName?: ReactNode;
     /** Called when the channel label is pressed (`channelName` mode). */
     onChannelClick?: () => void;
     /**
@@ -23,7 +24,7 @@ export interface ChannelInfoMsgHeaderProps {
      * Team name after the channel divider. Omit when the workspace has only one
      * team or the team is already clear from context.
      */
-    teamName?: string;
+    teamName?: ReactNode;
     /** Optional CSS class name. */
     className?: string;
 }

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChannelInfoMsgHeader.d.ts","sourceRoot":"","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"names":[],"mappings":"~~AAEA~~,MAAM,WAAW,uBAAuB;IACtC~~,+BAA+B~~;~~IAC/B~~,KAAK,EAAE,~~MAAM~~,CAAC;~~IACd~~,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,~~MAAM~~,CAAC;~~IACrB~~,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,~~MAAM~~,CAAC;~~IAClB~~,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,WAAW,EACX,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,SAAc,GACf,EAAE,yBAAyB,~~2CAmD3B~~"}
1	+ {"version":3,"file":"ChannelInfoMsgHeader.d.ts","sourceRoot":"","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,uBAAuB;IACtC,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAC;IACjB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,WAAW,EACX,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,SAAc,GACf,EAAE,yBAAyB,2CAqD3B"}

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.js CHANGED Viewed

@@ -1,15 +1,15 @@
-import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
 import e from "./ChannelInfoMsgHeader.module.scss.js";
 function _({
   channelName: l,
-  onChannelClick: o,
-  tabs: s,
+  onChannelClick: s,
+  tabs: r,
   teamName: i,
   className: c = ""
 }) {
-  const r = l != null && l !== "" ? [{ label: l, onClick: o }] : s ?? [{ label: "Spec Reviews", active: !0 }], t = [e["channel-info-msg-header"], c].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: t, children: /* @__PURE__ */ h("div", { className: e["channel-info-msg-header__container"], children: [
-    r.map((n, d) => /* @__PURE__ */ a(
+  const t = l != null && l !== "" ? [{ label: l, onClick: s }] : r ?? [{ label: "Spec Reviews", active: !0 }], h = [e["channel-info-msg-header"], c].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ d("div", { className: e["channel-info-msg-header__container"], children: [
+    t.map((n, o) => /* @__PURE__ */ a(
       "div",
       {
         className: [
@@ -29,7 +29,7 @@ function _({
           }
         )
       },
-      `${n.label}-${d}`
+      typeof n.label == "string" ? `${n.label}-${o}` : o
     )),
     i != null && i !== "" && /* @__PURE__ */ a("div", { className: e["channel-info-msg-header__team"], children: /* @__PURE__ */ a("span", { className: e["channel-info-msg-header__team-name"], children: i }) })
   ] }) });

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChannelInfoMsgHeader.js","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"sourcesContent":["import styles from './ChannelInfoMsgHeader.module.scss';\n\nexport interface ChannelInfoMsgHeaderTab {\n /** Label text for this tab. /\n label: ~~string~~;\n /* Whether this tab is currently active/selected. /\n active?: boolean;\n /* Click handler. /\n onClick?: () => void;\n}\n\nexport interface ChannelInfoMsgHeaderProps {\n /\n Channel (or section) label — primary API for Mentions / Saved message\n * indicators. Prefer this over `tabs` for a single channel chip.\n /\n channelName?: ~~string~~;\n /* Called when the channel label is pressed (`channelName` mode). /\n onChannelClick?: () => void;\n /\n Multi-section tabs for channel info panels. Used when `channelName` is\n * omitted.\n /\n tabs?: ChannelInfoMsgHeaderTab[];\n /\n Team name after the channel divider. Omit when the workspace has only one\n * team or the team is already clear from context.\n /\n teamName?: ~~string~~;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n The Channel Info Message Header names a channel (or section) and, when useful, the team it\n * belongs to. Use it above posts in Mentions and Saved lists, or as section tabs at the top\n * of a channel info panel.\n */\nexport default function ChannelInfoMsgHeader({\n channelName,\n onChannelClick,\n tabs,\n teamName,\n className = '',\n}: ChannelInfoMsgHeaderProps) {\n const resolvedTabs: ChannelInfoMsgHeaderTab[] =\n channelName != null && channelName !== ''\n ? [{ label: channelName, onClick: onChannelClick }]\n : (tabs ?? [{ label: 'Spec Reviews', active: true }]);\n\n const rootClass = [styles['channel-info-msg-header'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['channel-info-msg-header__container']}>\n {resolvedTabs.map((tab, index) => (\n <div\n key={`${tab.label}-${index}`}\n className={[\n styles['channel-info-msg-header__tab-area'],\n tab.active\n ? styles['channel-info-msg-header__tab-area--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <button\n type=\"button\"\n className={[\n styles['channel-info-msg-header__tab'],\n tab.active\n ? styles['channel-info-msg-header__tab--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={tab.onClick}\n >\n {tab.label}\n </button>\n </div>\n ))}\n {teamName != null && teamName !== '' && (\n <div className={styles['channel-info-msg-header__team']}>\n <span className={styles['channel-info-msg-header__team-name']}>\n {teamName}\n </span>\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ChannelInfoMsgHeader","channelName","onChannelClick","tabs","teamName","className","resolvedTabs","rootClass","styles","jsx","tab","index"],"mappings":";;~~AAsCA~~,SAAwBA,EAAqB;AAAA,EAC3C,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA8B;AAC5B,QAAMC,IACJL,KAAe,QAAQA,MAAgB,KACnC,CAAC,EAAE,OAAOA,GAAa,SAASC,GAAgB,IAC/CC,KAAQ,CAAC,EAAE,OAAO,gBAAgB,QAAQ,IAAM,GAEjDI,IAAY,CAACC,EAAO,yBAAyB,GAAGH,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,SAAI,WAAWF,GACd,4BAAC,OAAA,EAAI,WAAWC,EAAO,oCAAoC,GACxD,UAAA;AAAA,IAAAF,EAAa,IAAI,CAACI,GAAKC,MACtB,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,~~QAEC~~,WAAW;AAAA,UACTD,EAAO,mCAAmC;AAAA,UAC1CE,EAAI,SACAF,EAAO,2CAA2C,IAClD;AAAA,QAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEX,UAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW;AAAA,cACTD,EAAO,8BAA8B;AAAA,cACrCE,EAAI,SACAF,EAAO,sCAAsC,IAC7C;AAAA,YAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YACX,SAASE,EAAI;AAAA,YAEZ,UAAAA,EAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,~~MAvBK~~,GAAGA,EAAI,KAAK,IAAIC,CAAK;AAAA,IAAA,~~CAyB7B~~;AAAA,IACAP,KAAY,QAAQA,MAAa,MAChC,gBAAAK,EAAC,SAAI,WAAWD,EAAO,+BAA+B,GACpD,4BAAC,QAAA,EAAK,WAAWA,EAAO,oCAAoC,GACzD,aACH,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}
1	+ {"version":3,"file":"ChannelInfoMsgHeader.js","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './ChannelInfoMsgHeader.module.scss';\n\nexport interface ChannelInfoMsgHeaderTab {\n /** Label text for this tab. Accepts translated nodes. /\n label: ReactNode;\n /* Whether this tab is currently active/selected. /\n active?: boolean;\n /* Click handler. /\n onClick?: () => void;\n}\n\nexport interface ChannelInfoMsgHeaderProps {\n /\n Channel (or section) label — primary API for Mentions / Saved message\n * indicators. Prefer this over `tabs` for a single channel chip.\n /\n channelName?: ReactNode;\n /* Called when the channel label is pressed (`channelName` mode). /\n onChannelClick?: () => void;\n /\n Multi-section tabs for channel info panels. Used when `channelName` is\n * omitted.\n /\n tabs?: ChannelInfoMsgHeaderTab[];\n /\n Team name after the channel divider. Omit when the workspace has only one\n * team or the team is already clear from context.\n /\n teamName?: ReactNode;\n /* Optional CSS class name. /\n className?: string;\n}\n\n/\n The Channel Info Message Header names a channel (or section) and, when useful, the team it\n * belongs to. Use it above posts in Mentions and Saved lists, or as section tabs at the top\n * of a channel info panel.\n */\nexport default function ChannelInfoMsgHeader({\n channelName,\n onChannelClick,\n tabs,\n teamName,\n className = '',\n}: ChannelInfoMsgHeaderProps) {\n const resolvedTabs: ChannelInfoMsgHeaderTab[] =\n channelName != null && channelName !== ''\n ? [{ label: channelName, onClick: onChannelClick }]\n : (tabs ?? [{ label: 'Spec Reviews', active: true }]);\n\n const rootClass = [styles['channel-info-msg-header'], className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass}>\n <div className={styles['channel-info-msg-header__container']}>\n {resolvedTabs.map((tab, index) => (\n <div\n key={\n typeof tab.label === 'string' ? `${tab.label}-${index}` : index\n }\n className={[\n styles['channel-info-msg-header__tab-area'],\n tab.active\n ? styles['channel-info-msg-header__tab-area--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <button\n type=\"button\"\n className={[\n styles['channel-info-msg-header__tab'],\n tab.active\n ? styles['channel-info-msg-header__tab--active']\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={tab.onClick}\n >\n {tab.label}\n </button>\n </div>\n ))}\n {teamName != null && teamName !== '' && (\n <div className={styles['channel-info-msg-header__team']}>\n <span className={styles['channel-info-msg-header__team-name']}>\n {teamName}\n </span>\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ChannelInfoMsgHeader","channelName","onChannelClick","tabs","teamName","className","resolvedTabs","rootClass","styles","jsx","tab","index"],"mappings":";;AAuCA,SAAwBA,EAAqB;AAAA,EAC3C,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA8B;AAC5B,QAAMC,IACJL,KAAe,QAAQA,MAAgB,KACnC,CAAC,EAAE,OAAOA,GAAa,SAASC,GAAgB,IAC/CC,KAAQ,CAAC,EAAE,OAAO,gBAAgB,QAAQ,IAAM,GAEjDI,IAAY,CAACC,EAAO,yBAAyB,GAAGH,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAI,EAAC,SAAI,WAAWF,GACd,4BAAC,OAAA,EAAI,WAAWC,EAAO,oCAAoC,GACxD,UAAA;AAAA,IAAAF,EAAa,IAAI,CAACI,GAAKC,MACtB,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QAIC,WAAW;AAAA,UACTD,EAAO,mCAAmC;AAAA,UAC1CE,EAAI,SACAF,EAAO,2CAA2C,IAClD;AAAA,QAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEX,UAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW;AAAA,cACTD,EAAO,8BAA8B;AAAA,cACrCE,EAAI,SACAF,EAAO,sCAAsC,IAC7C;AAAA,YAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YACX,SAASE,EAAI;AAAA,YAEZ,UAAAA,EAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,MAxBE,OAAOA,EAAI,SAAU,WAAW,GAAGA,EAAI,KAAK,IAAIC,CAAK,KAAKA;AAAA,IAAA,CA0B/D;AAAA,IACAP,KAAY,QAAQA,MAAa,MAChC,gBAAAK,EAAC,SAAI,WAAWD,EAAO,+BAA+B,GACpD,4BAAC,QAAA,EAAK,WAAWA,EAAO,oCAAoC,GACzD,aACH,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__B=require("@mattermost/compass-icons/components/globe.js"),B=__B?.default??__B,__D=require("@mattermost/compass-icons/components/lock-outline.js"),D=__D?.default??__D,__S=require("@mattermost/compass-icons/components/message-text-outline.js"),S=__S?.default??__S,__y=require("@mattermost/compass-icons/components/send-outline.js"),y=__y?.default??__y,__M=require("@mattermost/compass-icons/components/chart-line.js"),M=__M?.default??__M,__P=require("@mattermost/compass-icons/components/circle-multiple-outline.js"),P=__P?.default??__P,__T=require("@mattermost/compass-icons/components/phone-in-talk.js"),T=__T?.default??__T,__$=require("@mattermost/compass-icons/components/dots-vertical.js"),$=__$?.default??__$,__w=require("@mattermost/compass-icons/components/dialpad.js"),w=__w?.default??__w,A=require("../user-avatar/UserAvatar.cjs"),G=require("../mention-badge/MentionBadge.cjs"),H=require("../icon-button/IconButton.cjs"),s=require("./ChannelSidebarItem.module.scss.cjs");function R({leadingVisual:i,memberCount:r,avatarSrc:a,showAvatarStatus:t}){switch(i){case"private":return e.jsx(D,{size:16});case"group-message":return e.jsx("div",{className:s.default["channel-sidebar-item__group-icon"],children:r??2});case"direct-message":return e.jsx(A.default,{src:a??"",alt:"",size:"20",status:!!t});case"drafts":return e.jsx(y,{size:16});case"insights":return e.jsx(M,{size:16});case"threads":return e.jsx(S,{size:16});case"dial-pad":return e.jsx(w,{size:16});case"public":default:return e.jsx(B,{size:16})}}function U({className:i,name:r,hideLeadingVisual:a=!1,leadingVisual:t="public",status:o="read",active:c=!1,muted:_=!1,callActive:x=!1,sharedChannel:j=!1,mentionCount:l,memberCount:p,avatarSrc:v,showAvatarStatus:N=!1,customStatusEmoji:u,onClick:q,onMenuClick:d}){const m=!a&&t==="direct-message",h=!a&&t==="drafts",n=h&&o==="unread"?"read":o,I=n==="mention",g=!a&&["public","private","group-message","direct-message"].includes(t),z=[s.default["channel-sidebar-item"],a?s.default["channel-sidebar-item--text-only"]:"",c?s.default["channel-sidebar-item--active"]:"",_?s.default["channel-sidebar-item--muted"]:"",s.default[`channel-sidebar-item--status-${n.toLowerCase()}`],h?s.default["channel-sidebar-item--drafts"]:"",i].filter(Boolean).join(" "),C=[s.default["channel-sidebar-item__icon-container"],m?s.default["channel-sidebar-item__icon-container--dm"]:""].filter(Boolean).join(" "),O=s.default["channel-sidebar-item__right"],f=n==="mention"?`${l??1} mention${(l??1)===1?"":"s"}`:n==="unread"?"unread":void 0;return e.jsxs("div",{className:z,children:[c&&e.jsx("div",{className:s.default["channel-sidebar-item__active-border"]}),e.jsxs("button",{type:"button",className:s.default["channel-sidebar-item__left"],onClick:q,"aria-current":c?!0:void 0,children:[!a&&e.jsx("div",{className:C,"aria-hidden":!0,children:e.jsx(R,{leadingVisual:t,memberCount:p,avatarSrc:v,showAvatarStatus:N})}),e.jsxs("div",{className:s.default["channel-sidebar-item__content"],children:[e.jsx("span",{className:s.default["channel-sidebar-item__name"],children:r}),f&&e.jsx("span",{className:s.default["channel-sidebar-item__status-hint"],children:f}),j&&e.jsx("span",{className:s.default["channel-sidebar-item__shared-icon"],"aria-hidden":!0,children:e.jsx(P,{size:12})}),m&&u&&e.jsx("span",{className:s.default["channel-sidebar-item__custom-status"],"aria-hidden":!0,children:u})]})]}),e.jsxs("div",{className:O,children:[x&&e.jsx("div",{className:s.default["channel-sidebar-item__call"],"aria-hidden":!0,children:e.jsx(T,{size:12})}),I&&e.jsx("span",{className:s.default["channel-sidebar-item__mention-badge"],"aria-hidden":!0,children:e.jsx(G.default,{count:l??1,location:"sidebar",size:"medium"})}),g&&e.jsx("span",{className:s.default["channel-sidebar-item__menu-button"],children:e.jsx(H.default,{className:s.default["channel-sidebar-item__menu-icon"],size:"x-small",style:"inverted",icon:e.jsx($,{size:12}),"aria-label":"Channel options",onClick:b=>{b.stopPropagation(),d==null||d(b)}})})]})]})}exports.default=U;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__S=require("@mattermost/compass-icons/components/globe.js"),S=__S?.default??__S,__y=require("@mattermost/compass-icons/components/lock-outline.js"),y=__y?.default??__y,__P=require("@mattermost/compass-icons/components/message-text-outline.js"),P=__P?.default??__P,__T=require("@mattermost/compass-icons/components/send-outline.js"),T=__T?.default??__T,__$=require("@mattermost/compass-icons/components/chart-line.js"),$=__$?.default??__$,__w=require("@mattermost/compass-icons/components/circle-multiple-outline.js"),w=__w?.default??__w,__A=require("@mattermost/compass-icons/components/phone-in-talk.js"),A=__A?.default??__A,__F=require("@mattermost/compass-icons/components/dots-vertical.js"),F=__F?.default??__F,__G=require("@mattermost/compass-icons/components/dialpad.js"),G=__G?.default??__G,H=require("../user-avatar/UserAvatar.cjs"),R=require("../mention-badge/MentionBadge.cjs"),U=require("../icon-button/IconButton.cjs"),s=require("./ChannelSidebarItem.module.scss.cjs"),J=t=>`${t} mention${t===1?"":"s"}`;function K({leadingVisual:t,memberCount:r,avatarSrc:a,showAvatarStatus:n}){switch(t){case"private":return e.jsx(y,{size:16});case"group-message":return e.jsx("div",{className:s.default["channel-sidebar-item__group-icon"],children:r??2});case"direct-message":return e.jsx(H.default,{src:a??"",alt:"",size:"20",status:!!n});case"drafts":return e.jsx(T,{size:16});case"insights":return e.jsx($,{size:16});case"threads":return e.jsx(P,{size:16});case"dial-pad":return e.jsx(G,{size:16});case"public":default:return e.jsx(S,{size:16})}}function L({className:t,name:r,hideLeadingVisual:a=!1,leadingVisual:n="public",status:d="read",active:c=!1,muted:_=!1,callActive:x=!1,sharedChannel:j=!1,mentionCount:o,memberCount:p,avatarSrc:v,showAvatarStatus:N=!1,customStatusEmoji:u,onClick:q,onMenuClick:l,formatMentionLabel:I=J,unreadLabel:g="unread",menuLabel:z="Channel options"}){const m=!a&&n==="direct-message",h=!a&&n==="drafts",i=h&&d==="unread"?"read":d,C=i==="mention",O=!a&&["public","private","group-message","direct-message"].includes(n),B=[s.default["channel-sidebar-item"],a?s.default["channel-sidebar-item--text-only"]:"",c?s.default["channel-sidebar-item--active"]:"",_?s.default["channel-sidebar-item--muted"]:"",s.default[`channel-sidebar-item--status-${i.toLowerCase()}`],h?s.default["channel-sidebar-item--drafts"]:"",t].filter(Boolean).join(" "),D=[s.default["channel-sidebar-item__icon-container"],m?s.default["channel-sidebar-item__icon-container--dm"]:""].filter(Boolean).join(" "),M=s.default["channel-sidebar-item__right"],f=i==="mention"?I(o??1):i==="unread"?g:void 0;return e.jsxs("div",{className:B,children:[c&&e.jsx("div",{className:s.default["channel-sidebar-item__active-border"]}),e.jsxs("button",{type:"button",className:s.default["channel-sidebar-item__left"],onClick:q,"aria-current":c?!0:void 0,children:[!a&&e.jsx("div",{className:D,"aria-hidden":!0,children:e.jsx(K,{leadingVisual:n,memberCount:p,avatarSrc:v,showAvatarStatus:N})}),e.jsxs("div",{className:s.default["channel-sidebar-item__content"],children:[e.jsx("span",{className:s.default["channel-sidebar-item__name"],children:r}),f&&e.jsx("span",{className:s.default["channel-sidebar-item__status-hint"],children:f}),j&&e.jsx("span",{className:s.default["channel-sidebar-item__shared-icon"],"aria-hidden":!0,children:e.jsx(w,{size:12})}),m&&u&&e.jsx("span",{className:s.default["channel-sidebar-item__custom-status"],"aria-hidden":!0,children:u})]})]}),e.jsxs("div",{className:M,children:[x&&e.jsx("div",{className:s.default["channel-sidebar-item__call"],"aria-hidden":!0,children:e.jsx(A,{size:12})}),C&&e.jsx("span",{className:s.default["channel-sidebar-item__mention-badge"],"aria-hidden":!0,children:e.jsx(R.default,{count:o??1,location:"sidebar",size:"medium"})}),O&&e.jsx("span",{className:s.default["channel-sidebar-item__menu-button"],children:e.jsx(U.default,{className:s.default["channel-sidebar-item__menu-icon"],size:"x-small",style:"inverted",icon:e.jsx(F,{size:12}),"aria-label":z,onClick:b=>{b.stopPropagation(),l==null||l(b)}})})]})]})}exports.default=L;
 //# sourceMappingURL=ChannelSidebarItem.cjs.map

package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n \| 'public'\n \| 'private'\n \| 'group-message'\n \| 'direct-message'\n \| 'drafts'\n \| 'insights'\n \| 'threads'\n \| 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' \| 'unread' \| 'mention';\n\nexport interface ChannelSidebarItemProps {\n className?: string;\n /** Channel or user display name. /\n name: string;\n /\n Text-only row (e.g. System Console navigation): no channel glyph or\n * overflow menu; name aligns with channel sidebar label padding.\n /\n hideLeadingVisual?: boolean;\n /* Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. /\n leadingVisual?: ChannelSidebarItemLeadingVisual;\n /* Read/unread/mention state. Default: Read. /\n status?: ChannelSidebarItemStatus;\n /* Highlighted as the currently active item. /\n active?: boolean;\n /* Muted channel — reduces visual prominence. /\n muted?: boolean;\n /* Shows a call-in-progress indicator on the right. /\n callActive?: boolean;\n /* Shows the shared-channel icon after the name. /\n sharedChannel?: boolean;\n /* Mention count shown in the badge when status='mention'. /\n mentionCount?: number;\n /* Member count shown in the group icon when leadingVisual='group-message'. /\n memberCount?: number;\n /* Avatar image URL for leadingVisual='direct-message'. /\n avatarSrc?: string;\n /* Avatar alt text for leadingVisual='direct-message'. /\n avatarAlt?: string;\n /* Shows status badge on the avatar when leadingVisual='direct-message'. /\n showAvatarStatus?: boolean;\n /* Custom status emoji shown after the name for leadingVisual='direct-message'. /\n customStatusEmoji?: string;\n onClick?: () => void;\n /* Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. /\n onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number \| undefined;\n avatarSrc: string \| undefined;\n showAvatarStatus: boolean \| undefined;\n}) {\n switch (leadingVisual) {\n case 'private':\n return <LockOutlineIcon size={16} />;\n case 'group-message':\n return (\n <div className={styles['channel-sidebar-item__group-icon']}>\n {memberCount ?? 2}\n </div>\n );\n case 'direct-message':\n return (\n <UserAvatar\n src={avatarSrc ?? ''}\n alt=\"\"\n size=\"20\"\n status={!!showAvatarStatus}\n />\n );\n case 'drafts':\n return <SendOutlineIcon size={16} />;\n case 'insights':\n return <ChartLineIcon size={16} />;\n case 'threads':\n return <MessageTextOutlineIcon size={16} />;\n case 'dial-pad':\n return <DialpadIcon size={16} />;\n case 'public':\n default:\n return <GlobeIcon size={16} />;\n }\n}\n\n/\n The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n className,\n name,\n hideLeadingVisual = false,\n leadingVisual = 'public',\n status = 'read',\n active = false,\n muted = false,\n callActive = false,\n sharedChannel = false,\n mentionCount,\n memberCount,\n avatarSrc,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\n onMenuClick,\n}: ChannelSidebarItemProps) {\n const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n const hasMentionBadge = effectiveStatus === 'mention';\n const isChannelOrDM =\n !hideLeadingVisual &&\n ['public', 'private', 'group-message', 'direct-message'].includes(\n leadingVisual,\n );\n\n const rootClass = [\n styles['channel-sidebar-item'],\n hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n active ? styles['channel-sidebar-item--active'] : '',\n muted ? styles['channel-sidebar-item--muted'] : '',\n styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconContainerClass = [\n styles['channel-sidebar-item__icon-container'],\n isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const rightClass = styles['channel-sidebar-item__right'];\n\n const statusHint =\n effectiveStatus === 'mention'\n ? `${mentionCount ?? 1} mention${(mentionCount ?? 1) === 1 ? '' : 's'}`\n : effectiveStatus === 'unread'\n ? 'unread'\n : undefined;\n\n return (\n <div className={rootClass}>\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <button\n type=\"button\"\n className={styles['channel-sidebar-item__left']}\n onClick={onClick}\n aria-current={active ? true : undefined}\n >\n {!hideLeadingVisual && (\n <div className={iconContainerClass} aria-hidden>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n showAvatarStatus={showAvatarStatus}\n />\n </div>\n )}\n <div className={styles['channel-sidebar-item__content']}>\n <span className={styles['channel-sidebar-item__name']}>{name}</span>\n {statusHint && (\n <span className={styles['channel-sidebar-item__status-hint']}>\n {statusHint}\n </span>\n )}\n {sharedChannel && (\n <span\n className={styles['channel-sidebar-item__shared-icon']}\n aria-hidden\n >\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span\n className={styles['channel-sidebar-item__custom-status']}\n aria-hidden\n >\n {customStatusEmoji}\n </span>\n )}\n </div>\n </button>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']} aria-hidden>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span\n className={styles['channel-sidebar-item__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount ?? 1}\n location=\"sidebar\"\n size=\"medium\"\n />\n </span>\n )}\n {isChannelOrDM && (\n <span className={styles['channel-sidebar-item__menu-button']}>\n <IconButton\n className={styles['channel-sidebar-item__menu-icon']}\n size=\"x-small\"\n style=\"inverted\"\n icon={<DotsVerticalIcon size={12} />}\n aria-label=\"Channel options\"\n onClick={(e) => {\n e.stopPropagation();\n onMenuClick?.(e);\n }}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon","e"],"mappings":"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"}
1	+ {"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n \| 'public'\n \| 'private'\n \| 'group-message'\n \| 'direct-message'\n \| 'drafts'\n \| 'insights'\n \| 'threads'\n \| 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' \| 'unread' \| 'mention';\n\nexport interface ChannelSidebarItemProps {\n className?: string;\n /** Channel or user display name. Accepts translated nodes. /\n name: ReactNode;\n /\n Text-only row (e.g. System Console navigation): no channel glyph or\n * overflow menu; name aligns with channel sidebar label padding.\n /\n hideLeadingVisual?: boolean;\n /* Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. /\n leadingVisual?: ChannelSidebarItemLeadingVisual;\n /* Read/unread/mention state. Default: Read. /\n status?: ChannelSidebarItemStatus;\n /* Highlighted as the currently active item. /\n active?: boolean;\n /* Muted channel — reduces visual prominence. /\n muted?: boolean;\n /* Shows a call-in-progress indicator on the right. /\n callActive?: boolean;\n /* Shows the shared-channel icon after the name. /\n sharedChannel?: boolean;\n /* Mention count shown in the badge when status='mention'. /\n mentionCount?: number;\n /* Member count shown in the group icon when leadingVisual='group-message'. /\n memberCount?: number;\n /* Avatar image URL for leadingVisual='direct-message'. /\n avatarSrc?: string;\n /* Avatar alt text for leadingVisual='direct-message'. /\n avatarAlt?: string;\n /* Shows status badge on the avatar when leadingVisual='direct-message'. /\n showAvatarStatus?: boolean;\n /* Custom status emoji shown after the name for leadingVisual='direct-message'. /\n customStatusEmoji?: string;\n onClick?: () => void;\n /* Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. /\n onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n /* Visually hidden mention hint. Default: `{count} mention(s)`. /\n formatMentionLabel?: (count: number) => ReactNode;\n /* Visually hidden unread hint. Default: \"unread\". /\n unreadLabel?: ReactNode;\n /* Accessible name for the overflow menu button. Default: \"Channel options\". /\n menuLabel?: string;\n}\n\nconst defaultFormatMentions = (count: number) =>\n `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number \| undefined;\n avatarSrc: string \| undefined;\n showAvatarStatus: boolean \| undefined;\n}) {\n switch (leadingVisual) {\n case 'private':\n return <LockOutlineIcon size={16} />;\n case 'group-message':\n return (\n <div className={styles['channel-sidebar-item__group-icon']}>\n {memberCount ?? 2}\n </div>\n );\n case 'direct-message':\n return (\n <UserAvatar\n src={avatarSrc ?? ''}\n alt=\"\"\n size=\"20\"\n status={!!showAvatarStatus}\n />\n );\n case 'drafts':\n return <SendOutlineIcon size={16} />;\n case 'insights':\n return <ChartLineIcon size={16} />;\n case 'threads':\n return <MessageTextOutlineIcon size={16} />;\n case 'dial-pad':\n return <DialpadIcon size={16} />;\n case 'public':\n default:\n return <GlobeIcon size={16} />;\n }\n}\n\n/\n The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n className,\n name,\n hideLeadingVisual = false,\n leadingVisual = 'public',\n status = 'read',\n active = false,\n muted = false,\n callActive = false,\n sharedChannel = false,\n mentionCount,\n memberCount,\n avatarSrc,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\n onMenuClick,\n formatMentionLabel = defaultFormatMentions,\n unreadLabel = 'unread',\n menuLabel = 'Channel options',\n}: ChannelSidebarItemProps) {\n const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n const hasMentionBadge = effectiveStatus === 'mention';\n const isChannelOrDM =\n !hideLeadingVisual &&\n ['public', 'private', 'group-message', 'direct-message'].includes(\n leadingVisual,\n );\n\n const rootClass = [\n styles['channel-sidebar-item'],\n hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n active ? styles['channel-sidebar-item--active'] : '',\n muted ? styles['channel-sidebar-item--muted'] : '',\n styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconContainerClass = [\n styles['channel-sidebar-item__icon-container'],\n isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const rightClass = styles['channel-sidebar-item__right'];\n\n const statusHint =\n effectiveStatus === 'mention'\n ? formatMentionLabel(mentionCount ?? 1)\n : effectiveStatus === 'unread'\n ? unreadLabel\n : undefined;\n\n return (\n <div className={rootClass}>\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <button\n type=\"button\"\n className={styles['channel-sidebar-item__left']}\n onClick={onClick}\n aria-current={active ? true : undefined}\n >\n {!hideLeadingVisual && (\n <div className={iconContainerClass} aria-hidden>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n showAvatarStatus={showAvatarStatus}\n />\n </div>\n )}\n <div className={styles['channel-sidebar-item__content']}>\n <span className={styles['channel-sidebar-item__name']}>{name}</span>\n {statusHint && (\n <span className={styles['channel-sidebar-item__status-hint']}>\n {statusHint}\n </span>\n )}\n {sharedChannel && (\n <span\n className={styles['channel-sidebar-item__shared-icon']}\n aria-hidden\n >\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span\n className={styles['channel-sidebar-item__custom-status']}\n aria-hidden\n >\n {customStatusEmoji}\n </span>\n )}\n </div>\n </button>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']} aria-hidden>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span\n className={styles['channel-sidebar-item__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount ?? 1}\n location=\"sidebar\"\n size=\"medium\"\n />\n </span>\n )}\n {isChannelOrDM && (\n <span className={styles['channel-sidebar-item__menu-button']}>\n <IconButton\n className={styles['channel-sidebar-item__menu-icon']}\n size=\"x-small\"\n style=\"inverted\"\n icon={<DotsVerticalIcon size={12} />}\n aria-label={menuLabel}\n onClick={(e) => {\n e.stopPropagation();\n onMenuClick?.(e);\n }}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["defaultFormatMentions","count","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon","e"],"mappings":"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"}