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

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

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

package/dist/components/card-button/CardButtonGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("react/jsx-runtime"),k=require("react"),E=require("./CardButtonGroup.module.scss.cjs");function h(n){return[...n.querySelectorAll('[role="radio"]')]}function m(n){return h(n).filter(o=>!o.disabled)}function b(n,o){const a=h(n);if(a.length===0)return;const u=m(n),l=u.find(r=>r.getAttribute("aria-checked")==="true")??a.find(r=>r.getAttribute("aria-checked")==="true"),f=o&&a.includes(o)&&!o.disabled?o:l??u[0]??a[0];a.forEach(r=>{r.tabIndex=r===f?0:-1})}function S({children:n,className:o="",role:a="radiogroup",onKeyDown:u,onFocus:l,...f}){const r=k.useRef(null);k.useLayoutEffect(()=>{const e=r.current;e!=null&&b(e)},[n]);const p=e=>{l==null||l(e);const c=e.currentTarget;if(h(c).length===0)return;const t=e.target;if(!(t instanceof HTMLElement))return;const i=t.closest('[role="radio"]');i==null||!c.contains(i)||b(c,i)},A=e=>{if(u==null||u(e),e.defaultPrevented)return;const c=r.current;if(c==null)return;const t=m(c);if(t.length===0)return;const i=document.activeElement;if(!(i instanceof HTMLElement)||!c.contains(i))return;const v=i.closest('[role="radio"]'),g=t.findIndex(s=>s===v);if(g<0)return;const d=s=>{e.preventDefault(),b(c,s),s.focus({focusVisible:!0}),s.getAttribute("aria-checked")!=="true"&&s.click()};switch(e.key){case"ArrowRight":case"ArrowDown":d(t[(g+1)%t.length]);break;case"ArrowLeft":case"ArrowUp":d(t[(g-1+t.length)%t.length]);break;case"Home":d(t[0]);break;case"End":d(t[t.length-1]);break}};return R.jsx("div",{role:a,className:[E.default["card-button-group"],o].filter(Boolean).join(" "),...f,ref:r,onKeyDown:A,onFocus:p,children:n})}exports.default=S;
+//# sourceMappingURL=CardButtonGroup.cjs.map

package/dist/components/card-button/CardButtonGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.cjs","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './CardButtonGroup.module.scss';\n\nexport interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nfunction radiosIn(group: ParentNode): HTMLButtonElement[] {\n  return [...group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')];\n}\n\nfunction enabledRadiosIn(group: ParentNode): HTMLButtonElement[] {\n  return radiosIn(group).filter((radio) => !radio.disabled);\n}\n\nfunction syncRadioTabStops(group: HTMLElement, preferred?: HTMLButtonElement) {\n  const radios = radiosIn(group);\n  if (radios.length === 0) return;\n\n  const enabled = enabledRadiosIn(group);\n  const checked =\n    enabled.find((radio) => radio.getAttribute('aria-checked') === 'true') ??\n    radios.find((radio) => radio.getAttribute('aria-checked') === 'true');\n  const tabStop =\n    preferred && radios.includes(preferred) && !preferred.disabled\n      ? preferred\n      : (checked ?? enabled[0] ?? radios[0]);\n\n  radios.forEach((radio) => {\n    radio.tabIndex = radio === tabStop ? 0 : -1;\n  });\n}\n\n/**\n * Lays out Card Buttons in a horizontal row (Figma Card Button Group).\n * Defaults to `role=\"radiogroup\"` — set child cards to `role=\"radio\"`.\n * When children use `role=\"radio\"`, applies the ARIA radio keyboard model\n * (roving tabindex + arrow selection with wrapping).\n */\nexport default function CardButtonGroup({\n  children,\n  className = '',\n  role = 'radiogroup',\n  onKeyDown,\n  onFocus,\n  ...rest\n}: CardButtonGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const group = ref.current;\n    if (group == null) return;\n    syncRadioTabStops(group);\n  }, [children]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    const group = e.currentTarget;\n    if (radiosIn(group).length === 0) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const radio = target.closest<HTMLButtonElement>('[role=\"radio\"]');\n    if (radio == null || !group.contains(radio)) return;\n    syncRadioTabStops(group, radio);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    const group = ref.current;\n    if (group == null) return;\n    const radios = enabledRadiosIn(group);\n    if (radios.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !group.contains(active)) return;\n    const radio = active.closest<HTMLButtonElement>('[role=\"radio\"]');\n    const index = radios.findIndex((r) => r === radio);\n    if (index < 0) return;\n\n    const selectRadio = (next: HTMLButtonElement) => {\n      e.preventDefault();\n      syncRadioTabStops(group, next);\n      next.focus({ focusVisible: true } as FocusOptions);\n      if (next.getAttribute('aria-checked') !== 'true') {\n        next.click();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        selectRadio(radios[(index + 1) % radios.length]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        selectRadio(radios[(index - 1 + radios.length) % radios.length]);\n        break;\n      case 'Home':\n        selectRadio(radios[0]);\n        break;\n      case 'End':\n        selectRadio(radios[radios.length - 1]);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      role={role}\n      className={[styles['card-button-group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n      ref={ref}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["radiosIn","group","enabledRadiosIn","radio","syncRadioTabStops","preferred","radios","enabled","checked","tabStop","CardButtonGroup","children","className","role","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","handleFocus","target","handleKeyDown","active","index","r","selectRadio","next","jsx","styles"],"mappings":"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"}

package/dist/components/card-button/CardButtonGroup.css

@@ -0,0 +1 @@
+._card-button-group_klxnm_13{display:flex;flex-direction:row;align-items:stretch;gap:var(--spacing-xs);width:100%}._card-button-group_klxnm_13>*{flex:1 1 0;min-width:0}

package/dist/components/card-button/CardButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Lays out Card Buttons in a horizontal row (Figma Card Button Group).
+ * Defaults to `role="radiogroup"` — set child cards to `role="radio"`.
+ * When children use `role="radio"`, applies the ARIA radio keyboard model
+ * (roving tabindex + arrow selection with wrapping).
+ */
+export default function CardButtonGroup({ children, className, role, onKeyDown, onFocus, ...rest }: CardButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardButtonGroup.d.ts.map

package/dist/components/card-button/CardButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,QAAQ,EACR,SAAc,EACd,IAAmB,EACnB,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,oBAAoB,2CA8EtB"}

package/dist/components/card-button/CardButtonGroup.js

@@ -0,0 +1,85 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useRef as v, useLayoutEffect as R } from "react";
+import w from "./CardButtonGroup.module.scss.js";
+function h(n) {
+  return [...n.querySelectorAll('[role="radio"]')];
+}
+function m(n) {
+  return h(n).filter((o) => !o.disabled);
+}
+function b(n, o) {
+  const a = h(n);
+  if (a.length === 0) return;
+  const s = m(n), l = s.find((r) => r.getAttribute("aria-checked") === "true") ?? a.find((r) => r.getAttribute("aria-checked") === "true"), f = o && a.includes(o) && !o.disabled ? o : l ?? s[0] ?? a[0];
+  a.forEach((r) => {
+    r.tabIndex = r === f ? 0 : -1;
+  });
+}
+function y({
+  children: n,
+  className: o = "",
+  role: a = "radiogroup",
+  onKeyDown: s,
+  onFocus: l,
+  ...f
+}) {
+  const r = v(null);
+  R(() => {
+    const e = r.current;
+    e != null && b(e);
+  }, [n]);
+  const k = (e) => {
+    l == null || l(e);
+    const c = e.currentTarget;
+    if (h(c).length === 0) return;
+    const t = e.target;
+    if (!(t instanceof HTMLElement)) return;
+    const i = t.closest('[role="radio"]');
+    i == null || !c.contains(i) || b(c, i);
+  }, p = (e) => {
+    if (s == null || s(e), e.defaultPrevented) return;
+    const c = r.current;
+    if (c == null) return;
+    const t = m(c);
+    if (t.length === 0) return;
+    const i = document.activeElement;
+    if (!(i instanceof HTMLElement) || !c.contains(i)) return;
+    const A = i.closest('[role="radio"]'), g = t.findIndex((u) => u === A);
+    if (g < 0) return;
+    const d = (u) => {
+      e.preventDefault(), b(c, u), u.focus({ focusVisible: !0 }), u.getAttribute("aria-checked") !== "true" && u.click();
+    };
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        d(t[(g + 1) % t.length]);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        d(t[(g - 1 + t.length) % t.length]);
+        break;
+      case "Home":
+        d(t[0]);
+        break;
+      case "End":
+        d(t[t.length - 1]);
+        break;
+    }
+  };
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      role: a,
+      className: [w["card-button-group"], o].filter(Boolean).join(" "),
+      ...f,
+      ref: r,
+      onKeyDown: p,
+      onFocus: k,
+      children: n
+    }
+  );
+}
+export {
+  y as default
+};
+//# sourceMappingURL=CardButtonGroup.js.map

package/dist/components/card-button/CardButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.js","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './CardButtonGroup.module.scss';\n\nexport interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nfunction radiosIn(group: ParentNode): HTMLButtonElement[] {\n  return [...group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')];\n}\n\nfunction enabledRadiosIn(group: ParentNode): HTMLButtonElement[] {\n  return radiosIn(group).filter((radio) => !radio.disabled);\n}\n\nfunction syncRadioTabStops(group: HTMLElement, preferred?: HTMLButtonElement) {\n  const radios = radiosIn(group);\n  if (radios.length === 0) return;\n\n  const enabled = enabledRadiosIn(group);\n  const checked =\n    enabled.find((radio) => radio.getAttribute('aria-checked') === 'true') ??\n    radios.find((radio) => radio.getAttribute('aria-checked') === 'true');\n  const tabStop =\n    preferred && radios.includes(preferred) && !preferred.disabled\n      ? preferred\n      : (checked ?? enabled[0] ?? radios[0]);\n\n  radios.forEach((radio) => {\n    radio.tabIndex = radio === tabStop ? 0 : -1;\n  });\n}\n\n/**\n * Lays out Card Buttons in a horizontal row (Figma Card Button Group).\n * Defaults to `role=\"radiogroup\"` — set child cards to `role=\"radio\"`.\n * When children use `role=\"radio\"`, applies the ARIA radio keyboard model\n * (roving tabindex + arrow selection with wrapping).\n */\nexport default function CardButtonGroup({\n  children,\n  className = '',\n  role = 'radiogroup',\n  onKeyDown,\n  onFocus,\n  ...rest\n}: CardButtonGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const group = ref.current;\n    if (group == null) return;\n    syncRadioTabStops(group);\n  }, [children]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    const group = e.currentTarget;\n    if (radiosIn(group).length === 0) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const radio = target.closest<HTMLButtonElement>('[role=\"radio\"]');\n    if (radio == null || !group.contains(radio)) return;\n    syncRadioTabStops(group, radio);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    const group = ref.current;\n    if (group == null) return;\n    const radios = enabledRadiosIn(group);\n    if (radios.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !group.contains(active)) return;\n    const radio = active.closest<HTMLButtonElement>('[role=\"radio\"]');\n    const index = radios.findIndex((r) => r === radio);\n    if (index < 0) return;\n\n    const selectRadio = (next: HTMLButtonElement) => {\n      e.preventDefault();\n      syncRadioTabStops(group, next);\n      next.focus({ focusVisible: true } as FocusOptions);\n      if (next.getAttribute('aria-checked') !== 'true') {\n        next.click();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        selectRadio(radios[(index + 1) % radios.length]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        selectRadio(radios[(index - 1 + radios.length) % radios.length]);\n        break;\n      case 'Home':\n        selectRadio(radios[0]);\n        break;\n      case 'End':\n        selectRadio(radios[radios.length - 1]);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      role={role}\n      className={[styles['card-button-group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n      ref={ref}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["radiosIn","group","enabledRadiosIn","radio","syncRadioTabStops","preferred","radios","enabled","checked","tabStop","CardButtonGroup","children","className","role","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","handleFocus","target","handleKeyDown","active","index","r","selectRadio","next","jsx","styles"],"mappings":"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"}

package/dist/components/card-button/CardButtonGroup.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButtonGroup.css');const e={"card-button-group":"_card-button-group_klxnm_13"};exports.default=e;
+//# sourceMappingURL=CardButtonGroup.module.scss.cjs.map

package/dist/components/card-button/CardButtonGroup.module.scss.cjs.map

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

package/dist/components/card-button/CardButtonGroup.module.scss.js

@@ -0,0 +1,7 @@
+import './CardButtonGroup.css';const t = {
+  "card-button-group": "_card-button-group_klxnm_13"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=CardButtonGroup.module.scss.js.map

package/dist/components/card-button/CardButtonGroup.module.scss.js.map

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

package/dist/components/card-button/index.cjs

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

package/dist/components/card-button/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CardButton } from './CardButton';
+export type { CardButtonProps } from './CardButton';
+export { default as CardButtonGroup } from './CardButtonGroup';
+export type { CardButtonGroupProps } from './CardButtonGroup';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/card-button/index.js

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

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

@@ -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

@@ -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,CAAC,MAAOA,EAAa,QAASC,EAAe,EAC7CC,GAAQ,CAAC,CAAC,MAAO,eAAgB,OAAQ,GAAK,EAE/CI,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"}
+{"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.css

@@ -0,0 +1 @@
+._channel-info-msg-header_q2jjo_13{display:flex;align-items:center;padding:0 var(--spacing-xs)}._channel-info-msg-header__container_q2jjo_18{display:flex;align-items:center;flex-shrink:0}._channel-info-msg-header__tab-area_q2jjo_23{display:flex;align-items:flex-start;padding:0}._channel-info-msg-header__tab-area_q2jjo_23:not(:last-child){border-right:1px solid rgba(var(--center-channel-color-rgb),.16)}._channel-info-msg-header__tab-area--active_q2jjo_31 ._channel-info-msg-header__tab_q2jjo_23{color:var(--center-channel-color);font-weight:var(--font-weight-semibold)}._channel-info-msg-header__tab_q2jjo_23{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xxs);height:24px;padding:var(--spacing-xxxs) var(--spacing-s);border-radius:var(--radius-s);border:none;background:transparent;cursor:pointer;font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.75);white-space:nowrap}._channel-info-msg-header__tab_q2jjo_23:hover{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}._channel-info-msg-header__tab--active_q2jjo_56{color:var(--center-channel-color)}._channel-info-msg-header__team_q2jjo_59{display:flex;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-s)}._channel-info-msg-header__team-name_q2jjo_64{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),.75);white-space:nowrap}

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

@@ -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

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

@@ -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

@@ -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,EAAC,OAAOA,GAAa,SAASC,GAAe,IAC7CC,KAAQ,CAAC,EAAC,OAAO,gBAAgB,QAAQ,IAAK,GAE/CI,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;"}
+{"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-info-msg-header/ChannelInfoMsgHeader.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChannelInfoMsgHeader.module.css');const e={"channel-info-msg-header":"_channel-info-msg-header_1vrlp_2","channel-info-msg-header__container":"_channel-info-msg-header__container_1vrlp_7","channel-info-msg-header__tab-area":"_channel-info-msg-header__tab-area_1vrlp_12","channel-info-msg-header__tab-area--active":"_channel-info-msg-header__tab-area--active_1vrlp_20","channel-info-msg-header__tab":"_channel-info-msg-header__tab_1vrlp_12","channel-info-msg-header__tab--active":"_channel-info-msg-header__tab--active_1vrlp_46","channel-info-msg-header__team":"_channel-info-msg-header__team_1vrlp_49","channel-info-msg-header__team-name":"_channel-info-msg-header__team-name_1vrlp_54"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ChannelInfoMsgHeader.css');const e={"channel-info-msg-header":"_channel-info-msg-header_q2jjo_13","channel-info-msg-header__container":"_channel-info-msg-header__container_q2jjo_18","channel-info-msg-header__tab-area":"_channel-info-msg-header__tab-area_q2jjo_23","channel-info-msg-header__tab-area--active":"_channel-info-msg-header__tab-area--active_q2jjo_31","channel-info-msg-header__tab":"_channel-info-msg-header__tab_q2jjo_23","channel-info-msg-header__tab--active":"_channel-info-msg-header__tab--active_q2jjo_56","channel-info-msg-header__team":"_channel-info-msg-header__team_q2jjo_59","channel-info-msg-header__team-name":"_channel-info-msg-header__team-name_q2jjo_64"};exports.default=e;
 //# sourceMappingURL=ChannelInfoMsgHeader.module.scss.cjs.map

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.module.scss.js

@@ -1,12 +1,12 @@
-import './ChannelInfoMsgHeader.module.css';const e = {
-  "channel-info-msg-header": "_channel-info-msg-header_1vrlp_2",
-  "channel-info-msg-header__container": "_channel-info-msg-header__container_1vrlp_7",
-  "channel-info-msg-header__tab-area": "_channel-info-msg-header__tab-area_1vrlp_12",
-  "channel-info-msg-header__tab-area--active": "_channel-info-msg-header__tab-area--active_1vrlp_20",
-  "channel-info-msg-header__tab": "_channel-info-msg-header__tab_1vrlp_12",
-  "channel-info-msg-header__tab--active": "_channel-info-msg-header__tab--active_1vrlp_46",
-  "channel-info-msg-header__team": "_channel-info-msg-header__team_1vrlp_49",
-  "channel-info-msg-header__team-name": "_channel-info-msg-header__team-name_1vrlp_54"
+import './ChannelInfoMsgHeader.css';const e = {
+  "channel-info-msg-header": "_channel-info-msg-header_q2jjo_13",
+  "channel-info-msg-header__container": "_channel-info-msg-header__container_q2jjo_18",
+  "channel-info-msg-header__tab-area": "_channel-info-msg-header__tab-area_q2jjo_23",
+  "channel-info-msg-header__tab-area--active": "_channel-info-msg-header__tab-area--active_q2jjo_31",
+  "channel-info-msg-header__tab": "_channel-info-msg-header__tab_q2jjo_23",
+  "channel-info-msg-header__tab--active": "_channel-info-msg-header__tab--active_q2jjo_56",
+  "channel-info-msg-header__team": "_channel-info-msg-header__team_q2jjo_59",
+  "channel-info-msg-header__team-name": "_channel-info-msg-header__team-name_q2jjo_64"
 };
 export {
   e as default

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__M=require("@mattermost/compass-icons/components/globe.js"),M=__M?.default??__M,__D=require("@mattermost/compass-icons/components/lock-outline.js"),D=__D?.default??__D,__y=require("@mattermost/compass-icons/components/message-text-outline.js"),y=__y?.default??__y,__O=require("@mattermost/compass-icons/components/send-outline.js"),O=__O?.default??__O,__B=require("@mattermost/compass-icons/components/chart-line.js"),B=__B?.default??__B,__S=require("@mattermost/compass-icons/components/circle-multiple-outline.js"),S=__S?.default??__S,__w=require("@mattermost/compass-icons/components/phone-in-talk.js"),w=__w?.default??__w,__P=require("@mattermost/compass-icons/components/dots-vertical.js"),P=__P?.default??__P,__T=require("@mattermost/compass-icons/components/dialpad.js"),T=__T?.default??__T,A=require("../user-avatar/UserAvatar.cjs"),G=require("../mention-badge/MentionBadge.cjs"),K=require("../icon-button/IconButton.cjs"),s=require("./ChannelSidebarItem.module.scss.cjs");function R({leadingVisual:c,memberCount:l,avatarSrc:a,avatarAlt:n,showAvatarStatus:i}){switch(c){case"private":return e.jsx(D,{size:16});case"group-message":return e.jsx("div",{className:s.default["channel-sidebar-item__group-icon"],children:l??2});case"direct-message":return e.jsx(A.default,{src:a??"",alt:n??"",size:"20",status:!!i});case"drafts":return e.jsx(O,{size:16});case"insights":return e.jsx(B,{size:16});case"threads":return e.jsx(y,{size:16});case"dial-pad":return e.jsx(T,{size:16});case"public":default:return e.jsx(M,{size:16})}}function U({className:c,name:l,hideLeadingVisual:a=!1,leadingVisual:n="public",status:i="read",active:d=!1,muted:h=!1,callActive:b=!1,sharedChannel:x=!1,mentionCount:j,memberCount:_,avatarSrc:p,avatarAlt:v,showAvatarStatus:q=!1,customStatusEmoji:o,onClick:r}){const u=!a&&n==="direct-message",m=!a&&n==="drafts",f=m&&i==="unread"?"read":i,I=f==="mention",N=!a&&["public","private","group-message","direct-message"].includes(n),g=[s.default["channel-sidebar-item"],a?s.default["channel-sidebar-item--text-only"]:"",d?s.default["channel-sidebar-item--active"]:"",h?s.default["channel-sidebar-item--muted"]:"",s.default[`channel-sidebar-item--status-${f.toLowerCase()}`],m?s.default["channel-sidebar-item--drafts"]:"",c].filter(Boolean).join(" "),z=[s.default["channel-sidebar-item__icon-container"],u?s.default["channel-sidebar-item__icon-container--dm"]:""].filter(Boolean).join(" "),C=s.default["channel-sidebar-item__right"];return e.jsxs("div",{role:"button",tabIndex:0,className:g,onClick:r,onKeyDown:t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),r==null||r())},children:[d&&e.jsx("div",{className:s.default["channel-sidebar-item__active-border"]}),e.jsxs("div",{className:s.default["channel-sidebar-item__left"],children:[!a&&e.jsx("div",{className:z,children:e.jsx(R,{leadingVisual:n,memberCount:_,avatarSrc:p,avatarAlt:v,showAvatarStatus:q})}),e.jsxs("div",{className:s.default["channel-sidebar-item__content"],children:[e.jsx("span",{className:s.default["channel-sidebar-item__name"],children:l}),x&&e.jsx("span",{className:s.default["channel-sidebar-item__shared-icon"],children:e.jsx(S,{size:12})}),u&&o&&e.jsx("span",{className:s.default["channel-sidebar-item__custom-status"],children:o})]})]}),e.jsxs("div",{className:C,children:[b&&e.jsx("div",{className:s.default["channel-sidebar-item__call"],children:e.jsx(w,{size:12})}),I&&e.jsx("span",{className:s.default["channel-sidebar-item__mention-badge"],children:e.jsx(G.default,{count:j??1,location:"sidebar",size:"medium"})}),N&&e.jsx("span",{className:s.default["channel-sidebar-item__menu-button"],children:e.jsx(K.default,{size:"x-small",style:"inverted",icon:e.jsx(P,{size:12}),"aria-label":"Channel options",onClick:t=>t.stopPropagation()})})]})]})}exports.default=U;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__P=require("@mattermost/compass-icons/components/globe.js"),P=__P?.default??__P,__ee=require("@mattermost/compass-icons/components/lock-outline.js"),ee=__ee?.default??__ee,__ae=require("@mattermost/compass-icons/components/message-text-outline.js"),ae=__ae?.default??__ae,__se=require("@mattermost/compass-icons/components/send-outline.js"),se=__se?.default??__se,__ne=require("@mattermost/compass-icons/components/chart-line.js"),ne=__ne?.default??__ne,__ie=require("@mattermost/compass-icons/components/circle-multiple-outline.js"),ie=__ie?.default??__ie,__te=require("@mattermost/compass-icons/components/phone-in-talk.js"),te=__te?.default??__te,__re=require("@mattermost/compass-icons/components/dots-vertical.js"),re=__re?.default??__re,__le=require("@mattermost/compass-icons/components/dialpad.js"),le=__le?.default??__le,__ce=require("@mattermost/compass-icons/components/chevron-down.js"),ce=__ce?.default??__ce,__de=require("@mattermost/compass-icons/components/chevron-right.js"),de=__de?.default??__de,ue=require("../user-avatar/UserAvatar.cjs"),oe=require("../mention-badge/MentionBadge.cjs"),c=require("../icon/Icon.cjs"),me=require("../icon-button/IconButton.cjs"),T=require("../../utils/props.cjs"),a=require("./ChannelSidebarItem.module.scss.cjs"),he=s=>`${s} mention${s===1?"":"s"}`;function A(s){return s===void 0||typeof s=="string"}function fe({leadingVisual:s,memberCount:f,avatarSrc:i,showAvatarStatus:t}){switch(s){case"private":return e.jsx(ee,{size:16});case"group-message":return e.jsx("div",{className:a.default["channel-sidebar-item__group-icon"],children:f??2});case"direct-message":return e.jsx(ue.default,{src:i??"",alt:"",size:"20",status:!!t});case"drafts":return e.jsx(se,{size:16});case"insights":return e.jsx(ne,{size:16});case"threads":return e.jsx(ae,{size:16});case"dial-pad":return e.jsx(le,{size:16});case"public":default:return e.jsx(P,{size:16})}}function be({className:s,name:f,hideLeadingVisual:i=!1,leadingVisual:t,trailingVisual:b,status:I="read",active:_=!1,muted:$=!1,callActive:H=!1,sharedChannel:R=!1,mentionCount:q,memberCount:k,avatarSrc:F,showAvatarStatus:G=!1,customStatusEmoji:p,customStatusLabel:z,onClick:U,onMenuClick:j,formatMentionLabel:J=he,unreadLabel:K="unread",menuLabel:Q="Channel options",actions:x,actionsReveal:W="hover",actionsOpen:y=!1,hideMenu:X=!1,expanded:d,onExpandedChange:v,controlsId:C,toggleLabel:Y="Toggle",toggleButtonProps:n}){const r=!i&&t!==null&&!A(t),u=A(t)?t??"public":"public",N=!i&&u==="direct-message"&&!r,w=!i&&u==="drafts"&&!r,o=w&&I==="unread"?"read":I,Z=o==="mention",L=!i&&(r||["public","private","group-message","direct-message"].includes(u)),l=x!=null&&x!==!1,m=l&&W==="always",D=L&&!X&&!l,M=D||l&&!m,E=d!==void 0,V=[a.default["channel-sidebar-item"],i?a.default["channel-sidebar-item--text-only"]:"",_?a.default["channel-sidebar-item--active"]:"",$?a.default["channel-sidebar-item--muted"]:"",a.default[`channel-sidebar-item--status-${o.toLowerCase()}`],w?a.default["channel-sidebar-item--drafts"]:"",m?a.default["channel-sidebar-item--actions-always"]:"",M?"":a.default["channel-sidebar-item--no-hover-menu"],l&&y&&!m?a.default["channel-sidebar-item--actions-open"]:"",s].filter(Boolean).join(" "),g=[a.default["channel-sidebar-item__icon-container"],N?a.default["channel-sidebar-item__icon-container--dm"]:"",r?a.default["channel-sidebar-item__icon-container--custom"]:""].filter(Boolean).join(" "),B=a.default["channel-sidebar-item__right"],O=o==="mention"?J(q??1):o==="unread"?K:void 0;return e.jsxs("div",{className:V,children:[_&&e.jsx("div",{className:a.default["channel-sidebar-item__active-border"]}),e.jsxs("button",{type:"button",className:a.default["channel-sidebar-item__left"],onClick:U,"aria-current":_?!0:void 0,children:[!i&&e.jsx("div",{className:g,"aria-hidden":!0,children:r?e.jsx(c.IconSlotContext.Provider,{value:{size:"16"},children:t}):e.jsx(fe,{leadingVisual:u,memberCount:k,avatarSrc:F,showAvatarStatus:G})}),e.jsxs("div",{className:a.default["channel-sidebar-item__content"],children:[e.jsx("span",{className:a.default["channel-sidebar-item__name"],children:f}),O&&e.jsx("span",{className:a.default["channel-sidebar-item__status-hint"],children:O}),R&&e.jsx("span",{className:a.default["channel-sidebar-item__shared-icon"],"aria-hidden":!0,children:e.jsx(c.default,{glyph:e.jsx(ie,{}),size:"12"})}),(N||r)&&z&&e.jsx("span",{className:a.default["channel-sidebar-item__status-hint"],children:z}),(N||r)&&p&&e.jsx("span",{className:a.default["channel-sidebar-item__custom-status"],"aria-hidden":!0,children:p})]})]}),E&&e.jsx("button",{type:"button",...n,...C?{"aria-controls":C}:{},className:T.mergeClassNames(a.default["channel-sidebar-item__toggle"],n==null?void 0:n.className),"aria-expanded":d,"aria-label":Y,onClick:h=>{var S;(S=n==null?void 0:n.onClick)==null||S.call(n,h),v==null||v(!d)},children:e.jsx(c.default,{glyph:d?e.jsx(ce,{}):e.jsx(de,{}),size:"12"})}),e.jsxs("div",{className:B,children:[b!=null&&b!==!1&&e.jsx("span",{className:[a.default["channel-sidebar-item__trailing-visual"],M?a.default["channel-sidebar-item__trailing-visual--with-menu"]:""].filter(Boolean).join(" "),children:e.jsx(c.IconSlotContext.Provider,{value:{size:"16"},children:b})}),H&&e.jsx("div",{className:a.default["channel-sidebar-item__call"],"aria-hidden":!0,children:e.jsx(te,{size:12})}),Z&&e.jsx("span",{className:a.default["channel-sidebar-item__mention-badge"],"aria-hidden":!0,children:e.jsx(oe.default,{count:q??1,location:"sidebar",size:"medium"})}),l&&e.jsx("span",{className:T.mergeClassNames(a.default["channel-sidebar-item__actions"],m&&a.default["channel-sidebar-item__actions--always"],y&&a.default["channel-sidebar-item__actions--open"]),children:x}),D&&e.jsx("span",{className:a.default["channel-sidebar-item__menu-button"],children:e.jsx(me.default,{className:a.default["channel-sidebar-item__menu-icon"],size:"x-small",style:"inverted",icon:e.jsx(c.default,{glyph:e.jsx(re,{})}),"aria-label":Q,onClick:h=>{h.stopPropagation(),j==null||j(h)}})})]})]})}exports.default=be;
 //# sourceMappingURL=ChannelSidebarItem.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import 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}\n\nfunction LeadingVisualContent({\n  leadingVisual,\n  memberCount,\n  avatarSrc,\n  avatarAlt,\n  showAvatarStatus,\n}: {\n  leadingVisual: ChannelSidebarItemLeadingVisual;\n  memberCount: number | undefined;\n  avatarSrc: string | undefined;\n  avatarAlt: 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={avatarAlt ?? ''}\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  avatarAlt,\n  showAvatarStatus = false,\n  customStatusEmoji,\n  onClick,\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  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      className={rootClass}\n      onClick={onClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onClick?.();\n        }\n      }}\n    >\n      {active && (\n        <div className={styles['channel-sidebar-item__active-border']} />\n      )}\n      <div className={styles['channel-sidebar-item__left']}>\n        {!hideLeadingVisual && (\n          <div className={iconContainerClass}>\n            <LeadingVisualContent\n              leadingVisual={leadingVisual}\n              memberCount={memberCount}\n              avatarSrc={avatarSrc}\n              avatarAlt={avatarAlt}\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          {sharedChannel && (\n            <span className={styles['channel-sidebar-item__shared-icon']}>\n              <CircleMultipleOutlineIcon size={12} />\n            </span>\n          )}\n          {isDM && customStatusEmoji && (\n            <span className={styles['channel-sidebar-item__custom-status']}>\n              {customStatusEmoji}\n            </span>\n          )}\n        </div>\n      </div>\n      <div className={rightClass}>\n        {callActive && (\n          <div className={styles['channel-sidebar-item__call']}>\n            <PhoneInTalkIcon size={12} />\n          </div>\n        )}\n        {hasMentionBadge && (\n          <span className={styles['channel-sidebar-item__mention-badge']}>\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              size=\"x-small\"\n              style=\"inverted\"\n              icon={<DotsVerticalIcon size={12} />}\n              aria-label=\"Channel options\"\n              onClick={(e) => e.stopPropagation()}\n            />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["LeadingVisualContent","leadingVisual","memberCount","avatarSrc","avatarAlt","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","jsxs","e","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon"],"mappings":"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"}
+{"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 ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport Icon, { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { mergeClassNames, type BuiltInButtonProps } from '@/utils/props';\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  /**\n   * Leading visual. A built-in type string (`'public'`, `'private'`, …) keeps its\n   * glyph; any other node (not a string) replaces the icon, like `MenuItem`. Custom\n   * nodes render in the same 24px icon column, so the label stays aligned. For an\n   * icon use `<Icon glyph={<SomeIcon />} />` — the size (16) comes from context.\n   * A 16–24px element such as a 20px avatar is centered in the column.\n   * Default: Public. Ignored when `hideLeadingVisual`.\n   */\n  leadingVisual?: ChannelSidebarItemLeadingVisual | ReactNode;\n  /**\n   * Custom content for the trailing slot, after the name and before the mention\n   * badge / menu button (e.g. a responding indicator). Status-only: on rows with\n   * the overflow menu it fades out on hover / focus, like the mention badge, so\n   * don't put interactive content in it. `status` styling is independent of it.\n   * When omitted, nothing is rendered.\n   */\n  trailingVisual?: ReactNode;\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' (not used with a custom node). */\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' (not used with a custom node). */\n  showAvatarStatus?: boolean;\n  /** Custom status emoji after the name for a direct message or a custom leading visual. A node can carry a tooltip trigger. */\n  customStatusEmoji?: ReactNode;\n  /**\n   * Visually hidden description of the custom status (for example \"🌴 Out of\n   * office\"), read with the row name. The emoji itself stays `aria-hidden`, so\n   * pass this whenever `customStatusEmoji` carries meaning. Accepts translated\n   * nodes.\n   */\n  customStatusLabel?: ReactNode;\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   * Interactive controls (e.g. an `IconButton`) shown at the right edge, in the\n   * overflow menu's place: it replaces the built-in menu. Unlike\n   * `trailingVisual`, actions stay clickable. See `actionsReveal`.\n   */\n  actions?: ReactNode;\n  /**\n   * When `actions` show. `hover` (default): hidden until the row is hovered or\n   * has focus, like the built-in menu (the mention badge and `trailingVisual`\n   * give way). `always`: visible, slightly dimmed, at rest and at full\n   * strength on hover / focus; the badge and `trailingVisual` stay visible\n   * beside it.\n   */\n  actionsReveal?: 'hover' | 'always';\n  /** Keeps `actions` revealed, e.g. while a menu opened from them is open. */\n  actionsOpen?: boolean;\n  /** Hides the built-in overflow menu without adding `actions`. */\n  hideMenu?: boolean;\n  /**\n   * Turns the row into the parent of a collapsible group: shows a chevron\n   * toggle in the left gutter (revealed on hover / focus) and sets\n   * `aria-expanded` on it. The row itself stays a navigation control; the\n   * group's list and animation are up to the host. Omit for a normal row.\n   */\n  expanded?: boolean;\n  /** Called with the next state when the chevron toggle is activated. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** `id` of the list the toggle controls (`aria-controls`). */\n  controlsId?: string;\n  /**\n   * Accessible name of the toggle. It stays the same in both states;\n   * `aria-expanded` carries the state. Default: \"Toggle\".\n   */\n  toggleLabel?: string;\n  /** Extra attributes for the chevron toggle button. */\n  toggleButtonProps?: BuiltInButtonProps;\n}\n\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction isBuiltInLeadingVisual(\n  value: unknown,\n): value is ChannelSidebarItemLeadingVisual | undefined {\n  // Strings (and omitted) keep today's built-in behavior, including the\n  // fallback to the public glyph for unknown strings.\n  return value === undefined || typeof value === 'string';\n}\n\nfunction LeadingVisualContent({\n  leadingVisual,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus,\n}: {\n  leadingVisual: ChannelSidebarItemLeadingVisual | undefined;\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,\n  trailingVisual,\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  customStatusLabel,\n  onClick,\n  onMenuClick,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Channel options',\n  actions,\n  actionsReveal = 'hover',\n  actionsOpen = false,\n  hideMenu = false,\n  expanded,\n  onExpandedChange,\n  controlsId,\n  toggleLabel = 'Toggle',\n  toggleButtonProps,\n}: ChannelSidebarItemProps) {\n  const isCustomVisual =\n    !hideLeadingVisual &&\n    leadingVisual !== null &&\n    !isBuiltInLeadingVisual(leadingVisual);\n  const builtInVisual: ChannelSidebarItemLeadingVisual = isBuiltInLeadingVisual(\n    leadingVisual,\n  )\n    ? (leadingVisual ?? 'public')\n    : 'public';\n  const isDM =\n    !hideLeadingVisual && builtInVisual === 'direct-message' && !isCustomVisual;\n  const isDrafts =\n    !hideLeadingVisual && builtInVisual === 'drafts' && !isCustomVisual;\n  const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n  const hasMentionBadge = effectiveStatus === 'mention';\n  const isChannelOrDM =\n    !hideLeadingVisual &&\n    (isCustomVisual ||\n      ['public', 'private', 'group-message', 'direct-message'].includes(\n        builtInVisual,\n      ));\n\n  const hasActions = actions != null && actions !== false;\n  const actionsAlways = hasActions && actionsReveal === 'always';\n  const showMenu = isChannelOrDM && !hideMenu && !hasActions;\n  // Trailing content gives way on hover only when something takes its place.\n  const revealsOnHover = showMenu || (hasActions && !actionsAlways);\n  const hasToggle = expanded !== undefined;\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    actionsAlways ? styles['channel-sidebar-item--actions-always'] : '',\n    !revealsOnHover ? styles['channel-sidebar-item--no-hover-menu'] : '',\n    hasActions && actionsOpen && !actionsAlways\n      ? styles['channel-sidebar-item--actions-open']\n      : '',\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    isCustomVisual\n      ? styles['channel-sidebar-item__icon-container--custom']\n      : '',\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            {isCustomVisual ? (\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual as ReactNode}\n              </IconSlotContext.Provider>\n            ) : (\n              <LeadingVisualContent\n                leadingVisual={builtInVisual}\n                memberCount={memberCount}\n                avatarSrc={avatarSrc}\n                showAvatarStatus={showAvatarStatus}\n              />\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              <Icon glyph={<CircleMultipleOutlineIcon />} size=\"12\" />\n            </span>\n          )}\n          {(isDM || isCustomVisual) && customStatusLabel && (\n            <span className={styles['channel-sidebar-item__status-hint']}>\n              {customStatusLabel}\n            </span>\n          )}\n          {(isDM || isCustomVisual) && 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      {hasToggle && (\n        <button\n          type=\"button\"\n          {...toggleButtonProps}\n          {...(controlsId ? { 'aria-controls': controlsId } : {})}\n          className={mergeClassNames(\n            styles['channel-sidebar-item__toggle'],\n            toggleButtonProps?.className,\n          )}\n          aria-expanded={expanded}\n          aria-label={toggleLabel}\n          onClick={(e) => {\n            toggleButtonProps?.onClick?.(e);\n            onExpandedChange?.(!expanded);\n          }}\n        >\n          <Icon\n            glyph={expanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n            size=\"12\"\n          />\n        </button>\n      )}\n      <div className={rightClass}>\n        {trailingVisual != null && trailingVisual !== false && (\n          <span\n            className={[\n              styles['channel-sidebar-item__trailing-visual'],\n              revealsOnHover\n                ? styles['channel-sidebar-item__trailing-visual--with-menu']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {trailingVisual}\n            </IconSlotContext.Provider>\n          </span>\n        )}\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        {hasActions && (\n          <span\n            className={mergeClassNames(\n              styles['channel-sidebar-item__actions'],\n              actionsAlways && styles['channel-sidebar-item__actions--always'],\n              actionsOpen && styles['channel-sidebar-item__actions--open'],\n            )}\n          >\n            {actions}\n          </span>\n        )}\n        {showMenu && (\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={<Icon glyph={<DotsVerticalIcon />} />}\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","isBuiltInLeadingVisual","value","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","trailingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","customStatusLabel","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","actions","actionsReveal","actionsOpen","hideMenu","expanded","onExpandedChange","controlsId","toggleLabel","toggleButtonProps","isCustomVisual","builtInVisual","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","hasActions","actionsAlways","showMenu","revealsOnHover","hasToggle","rootClass","iconContainerClass","rightClass","statusHint","jsxs","IconSlotContext","Icon","CircleMultipleOutlineIcon","mergeClassNames","e","_a","ChevronDownIcon","ChevronRightIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon"],"mappings":"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"}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.css

@@ -0,0 +1 @@
+._channel-sidebar-item_1w0n4_13{position:relative;display:flex;align-items:center;height:32px;overflow:hidden;-webkit-user-select:none;user-select:none}._channel-sidebar-item__menu-button_1w0n4_21,._channel-sidebar-item__actions_1w0n4_21{position:absolute;top:50%;right:var(--spacing-l);display:flex;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item__mention-badge_1w0n4_31{display:flex;align-items:center;justify-content:center;min-width:var(--icon-size-24);transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item__actions_1w0n4_21{align-items:center}._channel-sidebar-item__actions--always_1w0n4_41{opacity:var(--opacity-72);pointer-events:auto}._channel-sidebar-item__actions--open_1w0n4_45{opacity:1;pointer-events:auto}._channel-sidebar-item__toggle_1w0n4_49{outline:none}._channel-sidebar-item__toggle_1w0n4_49:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_1w0n4_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._channel-sidebar-item__toggle_1w0n4_49:focus-visible{animation:none}}._channel-sidebar-item__toggle_1w0n4_49:not(._-host-shadow-a_1w0n4_62):not(._-host-shadow-b_1w0n4_62){box-shadow:none;border-radius:var(--radius-s)}@keyframes _focus-ring-in_1w0n4_1{0%{outline-color:transparent;outline-offset:0}}._channel-sidebar-item__toggle_1w0n4_49{position:absolute;top:50%;left:0;z-index:2;display:flex;align-items:center;justify-content:center;width:var(--icon-size-24);height:var(--icon-size-24);margin:0;padding:0;border:0;background:transparent;color:var(--sidebar-text);cursor:pointer;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item_1w0n4_13 ._channel-sidebar-item__menu-icon_1w0n4_93{--focus-ring-color: var(--sidebar-text-active-border)}._channel-sidebar-item_1w0n4_13:hover,._channel-sidebar-item_1w0n4_13:focus-within{overflow:visible}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__menu-button_1w0n4_21,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__menu-button_1w0n4_21{opacity:1;pointer-events:auto}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__mention-badge_1w0n4_31,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__mention-badge_1w0n4_31{opacity:0;pointer-events:none}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__actions_1w0n4_21,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__actions_1w0n4_21{opacity:1;pointer-events:auto}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__toggle_1w0n4_49,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__toggle_1w0n4_49{opacity:var(--opacity-72);pointer-events:auto}._channel-sidebar-item_1w0n4_13:hover:not(._channel-sidebar-item--active_1w0n4_115),._channel-sidebar-item_1w0n4_13:focus-within:not(._channel-sidebar-item--active_1w0n4_115){background:rgba(var(--sidebar-text-rgb),.08)}._channel-sidebar-item__active-border_1w0n4_118{flex-shrink:0;width:2px;align-self:stretch;border-radius:0 var(--radius-xs) var(--radius-xs) 0;background:var(--sidebar-text-active-border)}._channel-sidebar-item__left_1w0n4_125{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:none;background:transparent;display:flex;align-items:center;flex:1;min-width:0;align-self:stretch;gap:var(--spacing-xxxxs);padding:var(--spacing-xxxxs) var(--spacing-xs) var(--spacing-xxxxs) 18px;cursor:pointer;font:inherit;color:inherit;text-align:left}._channel-sidebar-item__left_1w0n4_125:focus{outline:none}._channel-sidebar-item__left_1w0n4_125:focus-visible{box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._channel-sidebar-item__icon-container_1w0n4_148{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs);color:var(--sidebar-text);opacity:.64}._channel-sidebar-item__icon-container--dm_1w0n4_156{padding:var(--spacing-xxxxs);opacity:1;--status-badge-bg: var(--sidebar-bg)}._channel-sidebar-item__icon-container--custom_1w0n4_161{justify-content:center;width:var(--icon-size-24);height:var(--icon-size-24);padding:0;box-sizing:border-box;opacity:.72}._channel-sidebar-item__trailing-visual_1w0n4_169{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--icon-size-24);transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__trailing-visual--with-menu_1w0n4_177,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__trailing-visual--with-menu_1w0n4_177{opacity:0;pointer-events:none}._channel-sidebar-item__group-icon_1w0n4_181{width:var(--icon-size-16);height:var(--icon-size-16);display:flex;align-items:center;justify-content:center;background:rgba(var(--sidebar-text-rgb),.16);border-radius:var(--radius-s);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-25);letter-spacing:.01em;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__content_1w0n4_197{display:flex;align-items:center;flex:1;min-width:0;gap:var(--spacing-xs);padding:var(--spacing-xxxxs)}._channel-sidebar-item__name_1w0n4_205{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);letter-spacing:.02em;color:var(--sidebar-text);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:144px}._channel-sidebar-item__status-hint_1w0n4_218{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._channel-sidebar-item__shared-icon_1w0n4_229{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs) 0;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__custom-status_1w0n4_237{display:flex;align-items:center;flex-shrink:0;font-size:var(--font-size-200);line-height:var(--line-height-25);opacity:.8}._channel-sidebar-item__right_1w0n4_245{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;gap:var(--spacing-xxxxs);padding-right:var(--spacing-l);color:var(--sidebar-text)}._channel-sidebar-item__call_1w0n4_254{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xxxs);border-radius:var(--radius-s)}._channel-sidebar-item--actions-open_1w0n4_261 ._channel-sidebar-item__mention-badge_1w0n4_31,._channel-sidebar-item--actions-open_1w0n4_261 ._channel-sidebar-item__trailing-visual--with-menu_1w0n4_177{opacity:0;pointer-events:none}._channel-sidebar-item--actions-always_1w0n4_266 ._channel-sidebar-item__right_1w0n4_245{padding-right:calc(var(--spacing-l) + var(--icon-size-24))}._channel-sidebar-item--no-hover-menu_1w0n4_269:hover ._channel-sidebar-item__mention-badge_1w0n4_31,._channel-sidebar-item--no-hover-menu_1w0n4_269:focus-within ._channel-sidebar-item__mention-badge_1w0n4_31{opacity:1;pointer-events:auto}._channel-sidebar-item--text-only_1w0n4_276 ._channel-sidebar-item__left_1w0n4_125{gap:0}._channel-sidebar-item--active_1w0n4_115{background:rgba(var(--sidebar-text-rgb),.12)}._channel-sidebar-item--active_1w0n4_115 ._channel-sidebar-item__left_1w0n4_125{padding-left:var(--spacing-l)}._channel-sidebar-item--active_1w0n4_115 ._channel-sidebar-item__name_1w0n4_205,._channel-sidebar-item--status-unread_1w0n4_288 ._channel-sidebar-item__icon-container_1w0n4_148,._channel-sidebar-item--status-mention_1w0n4_288 ._channel-sidebar-item__icon-container_1w0n4_148{opacity:1}._channel-sidebar-item--status-unread_1w0n4_288 ._channel-sidebar-item__name_1w0n4_205,._channel-sidebar-item--status-mention_1w0n4_288 ._channel-sidebar-item__name_1w0n4_205{font-weight:var(--font-weight-semibold);opacity:1}._channel-sidebar-item--drafts_1w0n4_295 ._channel-sidebar-item__icon-container_1w0n4_148{opacity:.64}._channel-sidebar-item--drafts_1w0n4_295 ._channel-sidebar-item__name_1w0n4_205{font-weight:var(--font-weight-regular);opacity:.72}._channel-sidebar-item--drafts_1w0n4_295 ._channel-sidebar-item__mention-badge_1w0n4_31{min-width:0}._channel-sidebar-item--drafts_1w0n4_295 ._channel-sidebar-item__mention-badge_1w0n4_31>*{background-color:transparent;color:var(--sidebar-text);padding-left:0;padding-right:var(--spacing-xxs)}._channel-sidebar-item--drafts_1w0n4_295._channel-sidebar-item--active_1w0n4_115 ._channel-sidebar-item__name_1w0n4_205{opacity:1}._channel-sidebar-item--muted_1w0n4_314 ._channel-sidebar-item__icon-container_1w0n4_148,._channel-sidebar-item--muted_1w0n4_314 ._channel-sidebar-item__name_1w0n4_205,._channel-sidebar-item--muted_1w0n4_314 ._channel-sidebar-item__shared-icon_1w0n4_229{opacity:.4}