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

package/dist/components/button/Button.js

@@ -1,60 +1,122 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import { forwardRef as P, isValidElement as c } from "react";
-import { IconSlotContext as m } from "../icon/Icon.js";
-import w from "../spinner/Spinner.js";
-import { toKebab as d } from "../../utils/string.js";
-import t from "./Button.module.scss.js";
-const E = {
+import { jsx as e, jsxs as z, Fragment as G } from "react/jsx-runtime";
+import { forwardRef as H, isValidElement as o } from "react";
+import { IconSlotContext as r } from "../icon/Icon.js";
+import C from "../spinner/Spinner.js";
+import { renderAsChild as J } from "../../utils/slot.js";
+import { toKebab as I } from "../../utils/string.js";
+import a from "./Button.module.scss.js";
+const y = {
   "x-small": "12",
   small: "12",
   medium: "16",
   large: "20"
-}, I = P(function({
-  appearance: n = "default",
-  className: p = "",
-  destructive: b = !1,
-  emphasis: r = "primary",
-  children: f,
-  leadingIcon: a,
-  loading: s = !1,
-  size: i = "medium",
-  trailingIcon: l,
-  disabled: v,
-  type: h = "button",
-  ..._
-}, C) {
-  const o = E[i], N = t[`button--emphasis-${d(r)}`], x = t[`button--size-${d(i)}`], z = n === "inverted" ? t["button--appearance-inverted"] : "", S = b ? t["button--destructive"] : "", B = [
-    t.button,
-    N,
-    x,
-    z,
-    S,
-    p
-  ].filter(Boolean).join(" "), u = r !== "link", j = s || u && c(a);
-  return /* @__PURE__ */ y(
+};
+function S({
+  appearance: m = "default",
+  className: i = "",
+  destructive: n = !1,
+  emphasis: t = "primary",
+  size: d = "medium"
+}) {
+  return [
+    a.button,
+    a[`button--emphasis-${I(t)}`],
+    a[`button--size-${I(d)}`],
+    m === "inverted" ? a["button--appearance-inverted"] : "",
+    n ? a["button--destructive"] : "",
+    i
+  ].filter(Boolean).join(" ");
+}
+const Q = H(function(i, n) {
+  if (i.asChild) {
+    const {
+      appearance: f = "default",
+      className: L = "",
+      destructive: R = !1,
+      emphasis: $ = "primary",
+      children: F,
+      leadingIcon: v,
+      loading: s = !1,
+      size: g = "medium",
+      trailingIcon: N,
+      disabled: K,
+      asChild: W,
+      ...M
+    } = i, O = S({
+      appearance: f,
+      className: L,
+      destructive: R,
+      emphasis: $,
+      size: g
+    }), u = y[g], V = s || o(v), Z = !!(K || s), _ = F, k = V ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: s ? /* @__PURE__ */ e(
+      C,
+      {
+        size: u,
+        inverted: f === "inverted"
+      }
+    ) : /* @__PURE__ */ e(r.Provider, { value: { size: u }, children: v }) }) : null, q = !s && o(N) ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(r.Provider, { value: { size: u }, children: N }) }) : null;
+    return J({
+      child: _,
+      props: {
+        ...M,
+        className: O,
+        ...s ? { "aria-busy": !0 } : null
+      },
+      ref: n,
+      content: /* @__PURE__ */ z(G, { children: [
+        k,
+        /* @__PURE__ */ e("span", { className: a.button__label, children: _.props.children }),
+        q
+      ] }),
+      disabled: Z,
+      disabledClassName: a["button--disabled"]
+    });
+  }
+  const {
+    appearance: t = "default",
+    className: d = "",
+    destructive: B = !1,
+    emphasis: x = "primary",
+    children: P,
+    leadingIcon: p,
+    loading: l = !1,
+    size: h = "medium",
+    trailingIcon: b,
+    disabled: j,
+    type: w = "button",
+    asChild: T,
+    ...D
+  } = i, A = S({
+    appearance: t,
+    className: d,
+    destructive: B,
+    emphasis: x,
+    size: h
+  }), c = y[h], E = l || o(p);
+  return /* @__PURE__ */ z(
     "button",
     {
-      ref: C,
-      className: B,
-      type: h,
-      disabled: v || s,
-      ..._,
+      ref: n,
+      className: A,
+      type: w,
+      disabled: !!(j || l),
+      ...D,
       children: [
-        j ? /* @__PURE__ */ e("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: s ? /* @__PURE__ */ e(
-          w,
+        E ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: l ? /* @__PURE__ */ e(
+          C,
           {
-            size: o,
-            inverted: n === "inverted"
+            size: c,
+            inverted: t === "inverted"
           }
-        ) : /* @__PURE__ */ e(m.Provider, { value: { size: o }, children: a }) }) : null,
-        /* @__PURE__ */ e("span", { className: t.button__label, children: f }),
-        u && !s && c(l) ? /* @__PURE__ */ e("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(m.Provider, { value: { size: o }, children: l }) }) : null
+        ) : /* @__PURE__ */ e(r.Provider, { value: { size: c }, children: p }) }) : null,
+        /* @__PURE__ */ e("span", { className: a.button__label, children: P }),
+        !l && o(b) ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(r.Provider, { value: { size: c }, children: b }) }) : null
       ]
     }
   );
 });
-I.displayName = "Button";
+Q.displayName = "Button";
 export {
-  I as default
+  Q as default
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button. */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    appearance = 'default',\n    className = '',\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const supportsIcons = emphasis !== 'link';\n  const showLeadingSlot =\n    loading || (supportsIcons && isValidElement(leadingIcon));\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled || loading}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {supportsIcons && !loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["SIZE_ICON_MAP","Button","forwardRef","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","ref","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","isValidElement","jsxs","jsx","Spinner","IconSlotContext"],"mappings":";;;;;;AA6CA,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAOMC,IAASC,EAA2C,SACxD;AAAA,EACE,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAWhB,EAAcU,CAAI,GAC7BO,IAAgBC,EAAO,oBAAoBC,EAAQb,CAAQ,CAAC,EAAE,GAC9Dc,IAAYF,EAAO,gBAAgBC,EAAQT,CAAI,CAAC,EAAE,GAClDW,IACJlB,MAAe,aAAae,EAAO,6BAA6B,IAAI,IAChEI,IAAmBjB,IAAca,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAlB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELoB,IAAgBlB,MAAa,QAC7BmB,IACJhB,KAAYe,KAAiBE,EAAelB,CAAW;AAEzD,SACE,gBAAAmB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWQ;AAAA,MACX,MAAAV;AAAA,MACA,UAAUD,KAAYH;AAAA,MACrB,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAAW,IACC,gBAAAG,EAAC,UAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAT,IACC,gBAAAmB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAMb;AAAA,YACN,UAAUb,MAAe;AAAA,UAAA;AAAA,QAAA,IAG3B,gBAAAyB,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GACtC,UAAAR,GACH,EAAA,CAEJ,IACE;AAAA,0BACH,QAAA,EAAK,WAAWU,EAAO,eAAmB,UAAAX,GAAS;AAAA,QACnDiB,KAAiB,CAACf,KAAWiB,EAAef,CAAY,IACvD,gBAAAiB,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAU,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GACtC,UAAAL,EAAA,CACH,EAAA,CACF,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAEDV,EAAO,cAAc;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { renderAsChild } from '@/utils/slot';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\ninterface ButtonOwnProps {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button (or blocks navigation when `asChild`). */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface ButtonProps\n  extends ButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges Button props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /** Button label. */\n  children: ReactNode;\n}\n\nexport interface ButtonAsChildProps\n  extends\n    ButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges Button props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` — it is not forwarded.\n   */\n  asChild: true;\n  /** Single element to render as the Button (e.g. `<a>` or `<Link>`). Its children become the label. */\n  children: ReactElement;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\ntype ButtonComponent = {\n  (props: ButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;\n  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;\n  displayName?: string;\n};\n\nfunction buildRootClass({\n  appearance = 'default',\n  className = '',\n  destructive = false,\n  emphasis = 'primary',\n  size = 'medium',\n}: {\n  appearance?: ButtonAppearance;\n  className?: string;\n  destructive?: boolean;\n  emphasis?: ButtonEmphasis;\n  size?: ButtonSize;\n}): string {\n  return [\n    styles.button,\n    styles[`button--emphasis-${toKebab(emphasis)}`],\n    styles[`button--size-${toKebab(size)}`],\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '',\n    destructive ? styles['button--destructive'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n *\n * Pass `asChild` with a single `<a>` or router `Link` child to render a navigational CTA\n * with Button styling and anatomy (no nested `<button>`).\n */\nconst Button = forwardRef(function Button(\n  props: ButtonProps | ButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      appearance = 'default',\n      className = '',\n      destructive = false,\n      emphasis = 'primary',\n      children,\n      leadingIcon,\n      loading = false,\n      size = 'medium',\n      trailingIcon,\n      disabled,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = buildRootClass({\n      appearance,\n      className,\n      destructive,\n      emphasis,\n      size,\n    });\n    const iconSize = SIZE_ICON_MAP[size];\n    const showLeadingSlot = loading || isValidElement(leadingIcon);\n    const isDisabled = Boolean(disabled || loading);\n    const child = children as ReactElement<{ children?: ReactNode }>;\n\n    const leading = showLeadingSlot ? (\n      <span className={styles['button__icon-slot']} aria-hidden>\n        {loading ? (\n          <Spinner\n            size={iconSize as SpinnerSize}\n            inverted={appearance === 'inverted'}\n          />\n        ) : (\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        )}\n      </span>\n    ) : null;\n\n    const trailing =\n      !loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null;\n\n    return renderAsChild({\n      child,\n      props: {\n        ...rest,\n        className: rootClass,\n        ...(loading ? { 'aria-busy': true } : null),\n      },\n      ref,\n      content: (\n        <>\n          {leading}\n          <span className={styles['button__label']}>\n            {child.props.children}\n          </span>\n          {trailing}\n        </>\n      ),\n      disabled: isDisabled,\n      disabledClassName: styles['button--disabled'],\n    });\n  }\n\n  const {\n    appearance = 'default',\n    className = '',\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    asChild,\n    ...rest\n  } = props;\n  void asChild;\n\n  const rootClass = buildRootClass({\n    appearance,\n    className,\n    destructive,\n    emphasis,\n    size,\n  });\n  const iconSize = SIZE_ICON_MAP[size];\n  const showLeadingSlot = loading || isValidElement(leadingIcon);\n  const isDisabled = Boolean(disabled || loading);\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {!loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n}) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["SIZE_ICON_MAP","buildRootClass","appearance","className","destructive","emphasis","size","styles","toKebab","Button","forwardRef","props","ref","children","leadingIcon","loading","trailingIcon","disabled","asChild","rest","rootClass","iconSize","showLeadingSlot","isValidElement","isDisabled","child","leading","jsx","Spinner","IconSlotContext","trailing","renderAsChild","jsxs","Fragment","type"],"mappings":"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"}

package/dist/components/button/Button.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_doayp_2",o="_button__label_doayp_24",e={button:t,button__label:o,"button__icon-slot":"_button__icon-slot_doayp_27","button--size-x-small":"_button--size-x-small_doayp_33","button--size-small":"_button--size-small_doayp_40","button--size-medium":"_button--size-medium_doayp_47","button--size-large":"_button--size-large_doayp_54","button--emphasis-primary":"_button--emphasis-primary_doayp_61","button--emphasis-secondary":"_button--emphasis-secondary_doayp_75","button--emphasis-tertiary":"_button--emphasis-tertiary_doayp_91","button--emphasis-quaternary":"_button--emphasis-quaternary_doayp_105","button--emphasis-link":"_button--emphasis-link_doayp_118","button--destructive":"_button--destructive_doayp_130","button--appearance-inverted":"_button--appearance-inverted_doayp_193"};exports.button=t;exports.button__label=o;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_aa8j5_2",a="_button__label_aa8j5_31",e={button:t,"button--disabled":"_button--disabled_aa8j5_28",button__label:a,"button__icon-slot":"_button__icon-slot_aa8j5_35","button--size-x-small":"_button--size-x-small_aa8j5_42","button--size-small":"_button--size-small_aa8j5_49","button--size-medium":"_button--size-medium_aa8j5_56","button--size-large":"_button--size-large_aa8j5_63","button--emphasis-primary":"_button--emphasis-primary_aa8j5_70","button--emphasis-secondary":"_button--emphasis-secondary_aa8j5_84","button--emphasis-tertiary":"_button--emphasis-tertiary_aa8j5_100","button--emphasis-quaternary":"_button--emphasis-quaternary_aa8j5_114","button--emphasis-link":"_button--emphasis-link_aa8j5_127","button--destructive":"_button--destructive_aa8j5_141","button--appearance-inverted":"_button--appearance-inverted_aa8j5_204"};exports.button=t;exports.button__label=a;exports.default=e;
 //# sourceMappingURL=Button.module.scss.cjs.map

package/dist/components/button/Button.module.scss.js

@@ -1,22 +1,23 @@
-import './Button.css';const t = "_button_doayp_2", o = "_button__label_doayp_24", _ = {
+import './Button.css';const t = "_button_aa8j5_2", a = "_button__label_aa8j5_31", _ = {
   button: t,
-  button__label: o,
-  "button__icon-slot": "_button__icon-slot_doayp_27",
-  "button--size-x-small": "_button--size-x-small_doayp_33",
-  "button--size-small": "_button--size-small_doayp_40",
-  "button--size-medium": "_button--size-medium_doayp_47",
-  "button--size-large": "_button--size-large_doayp_54",
-  "button--emphasis-primary": "_button--emphasis-primary_doayp_61",
-  "button--emphasis-secondary": "_button--emphasis-secondary_doayp_75",
-  "button--emphasis-tertiary": "_button--emphasis-tertiary_doayp_91",
-  "button--emphasis-quaternary": "_button--emphasis-quaternary_doayp_105",
-  "button--emphasis-link": "_button--emphasis-link_doayp_118",
-  "button--destructive": "_button--destructive_doayp_130",
-  "button--appearance-inverted": "_button--appearance-inverted_doayp_193"
+  "button--disabled": "_button--disabled_aa8j5_28",
+  button__label: a,
+  "button__icon-slot": "_button__icon-slot_aa8j5_35",
+  "button--size-x-small": "_button--size-x-small_aa8j5_42",
+  "button--size-small": "_button--size-small_aa8j5_49",
+  "button--size-medium": "_button--size-medium_aa8j5_56",
+  "button--size-large": "_button--size-large_aa8j5_63",
+  "button--emphasis-primary": "_button--emphasis-primary_aa8j5_70",
+  "button--emphasis-secondary": "_button--emphasis-secondary_aa8j5_84",
+  "button--emphasis-tertiary": "_button--emphasis-tertiary_aa8j5_100",
+  "button--emphasis-quaternary": "_button--emphasis-quaternary_aa8j5_114",
+  "button--emphasis-link": "_button--emphasis-link_aa8j5_127",
+  "button--destructive": "_button--destructive_aa8j5_141",
+  "button--appearance-inverted": "_button--appearance-inverted_aa8j5_204"
 };
 export {
   t as button,
-  o as button__label,
+  a as button__label,
   _ as default
 };
 //# sourceMappingURL=Button.module.scss.js.map

package/dist/components/button/Button.module.scss.js.map

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

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

@@ -1,4 +1,4 @@
 export { default as Button } from './Button';
-export type { ButtonProps, ButtonEmphasis, ButtonSize, ButtonAppearance, } from './Button';
+export type { ButtonProps, ButtonAsChildProps, ButtonEmphasis, ButtonSize, ButtonAppearance, } from './Button';
 export { default as btnStyles } from './Button.module.scss';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EACV,WAAW,EACX,cAAc,EACd,UAAU,EACV,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

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

package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAenD,MAAM,MAAM,+BAA+B,GACvC,QAAQ,GACR,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,gDAAgD;IAChD,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,IAAI,EACJ,iBAAyB,EACzB,aAAwB,EACxB,MAAe,EACf,MAAc,EACd,KAAa,EACb,UAAkB,EAClB,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,kBAA0C,EAC1C,WAAsB,EACtB,SAA6B,GAC9B,EAAE,uBAAuB,2CAyHzB"}
+{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBnD,MAAM,MAAM,+BAA+B,GACvC,QAAQ,GACR,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,gDAAgD;IAChD,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,IAAI,EACJ,iBAAyB,EACzB,aAAwB,EACxB,MAAe,EACf,MAAc,EACd,KAAa,EACb,UAAkB,EAClB,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,kBAA0C,EAC1C,WAAsB,EACtB,SAA6B,GAC9B,EAAE,uBAAuB,2CAyHzB"}

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

@@ -10,14 +10,15 @@ import __H from "@mattermost/compass-icons/components/dots-vertical.js";const H=
 import __U from "@mattermost/compass-icons/components/dialpad.js";const U=__U&&__U.default?__U.default:__U;
 import q from "../user-avatar/UserAvatar.js";
 import J from "../mention-badge/MentionBadge.js";
-import K from "../icon-button/IconButton.js";
+import K from "../icon/Icon.js";
+import L from "../icon-button/IconButton.js";
 import a from "./ChannelSidebarItem.module.scss.js";
-const L = (s) => `${s} mention${s === 1 ? "" : "s"}`;
-function Q({
+const Q = (s) => `${s} mention${s === 1 ? "" : "s"}`;
+function R({
   leadingVisual: s,
   memberCount: c,
   avatarSrc: n,
-  showAvatarStatus: i
+  showAvatarStatus: t
 }) {
   switch (s) {
     case "private":
@@ -31,7 +32,7 @@ function Q({
           src: n ?? "",
           alt: "",
           size: "20",
-          status: !!i
+          status: !!t
         }
       );
     case "drafts":
@@ -47,41 +48,41 @@ function Q({
       return /* @__PURE__ */ e(w, { size: 16 });
   }
 }
-function re({
+function oe({
   className: s,
   name: c,
   hideLeadingVisual: n = !1,
-  leadingVisual: i = "public",
+  leadingVisual: t = "public",
   status: m = "read",
   active: o = !1,
   muted: _ = !1,
   callActive: N = !1,
   sharedChannel: v = !1,
   mentionCount: d,
-  memberCount: z,
-  avatarSrc: I,
-  showAvatarStatus: g = !1,
+  memberCount: I,
+  avatarSrc: g,
+  showAvatarStatus: z = !1,
   customStatusEmoji: h,
   onClick: C,
   onMenuClick: l,
-  formatMentionLabel: x = L,
-  unreadLabel: B = "unread",
-  menuLabel: D = "Channel options"
+  formatMentionLabel: x = Q,
+  unreadLabel: y = "unread",
+  menuLabel: B = "Channel options"
 }) {
-  const u = !n && i === "direct-message", p = !n && i === "drafts", t = p && m === "unread" ? "read" : m, O = t === "mention", y = !n && ["public", "private", "group-message", "direct-message"].includes(
-    i
+  const p = !n && t === "direct-message", u = !n && t === "drafts", i = u && m === "unread" ? "read" : m, D = i === "mention", O = !n && ["public", "private", "group-message", "direct-message"].includes(
+    t
   ), j = [
     a["channel-sidebar-item"],
     n ? a["channel-sidebar-item--text-only"] : "",
     o ? a["channel-sidebar-item--active"] : "",
     _ ? a["channel-sidebar-item--muted"] : "",
-    a[`channel-sidebar-item--status-${t.toLowerCase()}`],
-    p ? a["channel-sidebar-item--drafts"] : "",
+    a[`channel-sidebar-item--status-${i.toLowerCase()}`],
+    u ? a["channel-sidebar-item--drafts"] : "",
     s
   ].filter(Boolean).join(" "), M = [
     a["channel-sidebar-item__icon-container"],
-    u ? a["channel-sidebar-item__icon-container--dm"] : ""
-  ].filter(Boolean).join(" "), $ = a["channel-sidebar-item__right"], f = t === "mention" ? x(d ?? 1) : t === "unread" ? B : void 0;
+    p ? a["channel-sidebar-item__icon-container--dm"] : ""
+  ].filter(Boolean).join(" "), $ = a["channel-sidebar-item__right"], f = i === "mention" ? x(d ?? 1) : i === "unread" ? y : void 0;
   return /* @__PURE__ */ r("div", { className: j, children: [
     o && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__active-border"] }),
     /* @__PURE__ */ r(
@@ -93,12 +94,12 @@ function re({
         "aria-current": o ? !0 : void 0,
         children: [
           !n && /* @__PURE__ */ e("div", { className: M, "aria-hidden": !0, children: /* @__PURE__ */ e(
-            Q,
+            R,
             {
-              leadingVisual: i,
-              memberCount: z,
-              avatarSrc: I,
-              showAvatarStatus: g
+              leadingVisual: t,
+              memberCount: I,
+              avatarSrc: g,
+              showAvatarStatus: z
             }
           ) }),
           /* @__PURE__ */ r("div", { className: a["channel-sidebar-item__content"], children: [
@@ -112,7 +113,7 @@ function re({
                 children: /* @__PURE__ */ e(F, { size: 12 })
               }
             ),
-            u && h && /* @__PURE__ */ e(
+            p && h && /* @__PURE__ */ e(
               "span",
               {
                 className: a["channel-sidebar-item__custom-status"],
@@ -126,7 +127,7 @@ function re({
     ),
     /* @__PURE__ */ r("div", { className: $, children: [
       N && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__call"], "aria-hidden": !0, children: /* @__PURE__ */ e(G, { size: 12 }) }),
-      O && /* @__PURE__ */ e(
+      D && /* @__PURE__ */ e(
         "span",
         {
           className: a["channel-sidebar-item__mention-badge"],
@@ -141,14 +142,14 @@ function re({
           )
         }
       ),
-      y && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__menu-button"], children: /* @__PURE__ */ e(
-        K,
+      O && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__menu-button"], children: /* @__PURE__ */ e(
+        L,
         {
           className: a["channel-sidebar-item__menu-icon"],
           size: "x-small",
           style: "inverted",
-          icon: /* @__PURE__ */ e(H, { size: 12 }),
-          "aria-label": D,
+          icon: /* @__PURE__ */ e(K, { glyph: /* @__PURE__ */ e(H, {}) }),
+          "aria-label": B,
           onClick: (b) => {
             b.stopPropagation(), l == null || l(b);
           }
@@ -158,6 +159,6 @@ function re({
   ] });
 }
 export {
-  re as default
+  oe as default
 };
 //# sourceMappingURL=ChannelSidebarItem.js.map