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

package/dist/components/link-preview/LinkPreview.js

@@ -1,10 +1,10 @@
-import { jsxs as r, Fragment as g, jsx as l } from "react/jsx-runtime";
-import N from "../icon/Icon.js";
-import I from "../icon-button/IconButton.js";
-import b from "../image-preview/ImagePreview.js";
-import __x from "@mattermost/compass-icons/components/close.js";const x=__x&&__x.default?__x.default:__x;
+import { jsxs as r, Fragment as I, jsx as l } from "react/jsx-runtime";
+import b from "../icon/Icon.js";
+import x from "../icon-button/IconButton.js";
+import j from "../image-preview/ImagePreview.js";
+import __C from "@mattermost/compass-icons/components/close.js";const C=__C&&__C.default?__C.default:__C;
 import e from "./LinkPreview.module.scss.js";
-function z({
+function F({
   siteName: p = "Mattermost.com",
   title: d = "Mattermost: Open-source, high-trust, developer-centric collaboration platform",
   description: v = "Mattermost is a secure, open source platform for communication, collaboration, and workflow orchestration across tools and teams.",
@@ -16,36 +16,32 @@ function z({
   onCopyImageLink: w,
   onDownloadImage: k,
   onDismiss: t,
-  className: h = ""
+  dismissLabel: h = "Remove link preview",
+  imagePreviewLabels: u,
+  className: f = ""
 }) {
-  const c = i != null && s === "none" ? "large" : s, m = c === "small" && i != null, o = c === "large" && i != null, u = [e["link-preview"], h].filter(Boolean).join(" "), f = [
+  const c = i != null && s === "none" ? "large" : s, m = c === "small" && i != null, o = c === "large" && i != null, g = [e["link-preview"], f].filter(Boolean).join(" "), N = [
     e["link-preview__card"],
     m ? e["link-preview__card--small-image"] : "",
     o && !a ? e["link-preview__card--large-image"] : "",
     o && a ? e["link-preview__card--collapsed-image"] : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", { className: u, children: [
-    t != null && /* @__PURE__ */ r(g, { children: [
+  return /* @__PURE__ */ r("div", { className: g, children: [
+    t != null && /* @__PURE__ */ r(I, { children: [
+      /* @__PURE__ */ l("div", { className: e["link-preview__dismiss-bridge"], "aria-hidden": !0 }),
       /* @__PURE__ */ l(
-        "div",
-        {
-          className: e["link-preview__dismiss-bridge"],
-          "aria-hidden": !0
-        }
-      ),
-      /* @__PURE__ */ l(
-        I,
+        x,
         {
           className: e["link-preview__dismiss"],
           size: "x-small",
           padding: "compact",
-          "aria-label": "Remove link preview",
-          icon: /* @__PURE__ */ l(N, { size: "12", glyph: /* @__PURE__ */ l(x, {}) }),
+          "aria-label": h,
+          icon: /* @__PURE__ */ l(b, { size: "12", glyph: /* @__PURE__ */ l(C, {}) }),
           onClick: t
         }
       )
     ] }),
-    /* @__PURE__ */ r("div", { className: f, children: [
+    /* @__PURE__ */ r("div", { className: N, children: [
       /* @__PURE__ */ r("div", { className: e["link-preview__text"], children: [
         /* @__PURE__ */ l("p", { className: e["link-preview__site-name"], children: p }),
         /* @__PURE__ */ l("p", { className: e["link-preview__title"], children: d }),
@@ -60,8 +56,9 @@ function z({
         }
       ) }),
       o && /* @__PURE__ */ l(
-        b,
+        j,
         {
+          ...u,
           className: e["link-preview__image-preview"],
           src: i,
           alt: n,
@@ -75,6 +72,6 @@ function z({
   ] });
 }
 export {
-  z as default
+  F as default
 };
 //# sourceMappingURL=LinkPreview.js.map

package/dist/components/link-preview/LinkPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkPreview.js","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport ImagePreview from '@/components/image-preview/ImagePreview';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './LinkPreview.module.scss';\n\nexport type LinkPreviewImageSize = 'none' | 'small' | 'large';\n\nexport interface LinkPreviewProps {\n  /** The site/domain label shown above the title. */\n  siteName?: string;\n  /** The main link title. */\n  title?: string;\n  /** Description text. */\n  description?: string;\n  /** Preview image URL. Pair with `imageSize` to choose layout. */\n  imageSrc?: string;\n  /** Alt text for the preview image. */\n  imageAlt?: string;\n  /** Small: square thumbnail on the right. Large: ImagePreview below text. */\n  imageSize?: LinkPreviewImageSize;\n  /** Whether the large image preview is collapsed. Only applies when `imageSize` is `large`. */\n  imageCollapsed?: boolean;\n  /** Callback when the large image collapse toggle is clicked. */\n  onToggleImageCollapse?: () => void;\n  /** Callback when copy-link is clicked on the large image preview. */\n  onCopyImageLink?: () => void;\n  /** Callback when download is clicked on the large image preview. */\n  onDownloadImage?: () => void;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Link Previews appear under a message whenever it contains a URL with rich metadata — a\n * documentation page, a blog post, a product link. They give the recipient enough context to\n * decide whether to click without forcing them to open the link cold.\n */\nexport default function LinkPreview({\n  siteName = 'Mattermost.com',\n  title = 'Mattermost: Open-source, high-trust, developer-centric collaboration platform',\n  description = 'Mattermost is a secure, open source platform for communication, collaboration, and workflow orchestration across tools and teams.',\n  imageSrc,\n  imageAlt = '',\n  imageSize = 'none',\n  imageCollapsed = false,\n  onToggleImageCollapse,\n  onCopyImageLink,\n  onDownloadImage,\n  onDismiss,\n  className = '',\n}: LinkPreviewProps) {\n  const resolvedImageSize =\n    imageSrc != null && imageSize === 'none' ? 'large' : imageSize;\n  const hasSmallImage = resolvedImageSize === 'small' && imageSrc != null;\n  const hasLargeImage = resolvedImageSize === 'large' && imageSrc != null;\n\n  const rootClass = [styles['link-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const cardClass = [\n    styles['link-preview__card'],\n    hasSmallImage ? styles['link-preview__card--small-image'] : '',\n    hasLargeImage && !imageCollapsed\n      ? styles['link-preview__card--large-image']\n      : '',\n    hasLargeImage && imageCollapsed\n      ? styles['link-preview__card--collapsed-image']\n      : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div\n            className={styles['link-preview__dismiss-bridge']}\n            aria-hidden\n          />\n          <IconButton\n            className={styles['link-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label=\"Remove link preview\"\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={cardClass}>\n        <div className={styles['link-preview__text']}>\n          <p className={styles['link-preview__site-name']}>{siteName}</p>\n          <p className={styles['link-preview__title']}>{title}</p>\n          <p className={styles['link-preview__description']}>{description}</p>\n        </div>\n\n        {hasSmallImage && (\n          <div className={styles['link-preview__thumbnail']}>\n            <img\n              src={imageSrc}\n              alt={imageAlt}\n              className={styles['link-preview__thumbnail-img']}\n            />\n          </div>\n        )}\n\n        {hasLargeImage && (\n          <ImagePreview\n            className={styles['link-preview__image-preview']}\n            src={imageSrc}\n            alt={imageAlt}\n            collapsed={imageCollapsed}\n            onToggleCollapse={onToggleImageCollapse}\n            onCopyLink={onCopyImageLink}\n            onDownload={onDownloadImage}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["LinkPreview","siteName","title","description","imageSrc","imageAlt","imageSize","imageCollapsed","onToggleImageCollapse","onCopyImageLink","onDownloadImage","onDismiss","className","resolvedImageSize","hasSmallImage","hasLargeImage","rootClass","styles","cardClass","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","ImagePreview"],"mappings":";;;;;;AAwCA,SAAwBA,EAAY;AAAA,EAClC,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,uBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAqB;AACnB,QAAMC,IACJT,KAAY,QAAQE,MAAc,SAAS,UAAUA,GACjDQ,IAAgBD,MAAsB,WAAWT,KAAY,MAC7DW,IAAgBF,MAAsB,WAAWT,KAAY,MAE7DY,IAAY,CAACC,EAAO,cAAc,GAAGL,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,GAELM,IAAY;AAAA,IAChBD,EAAO,oBAAoB;AAAA,IAC3BH,IAAgBG,EAAO,iCAAiC,IAAI;AAAA,IAC5DF,KAAiB,CAACR,IACdU,EAAO,iCAAiC,IACxC;AAAA,IACJF,KAAiBR,IACbU,EAAO,qCAAqC,IAC5C;AAAA,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAWH,GACb,UAAA;AAAA,IAAAL,KAAa,QACZ,gBAAAQ,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWJ,EAAO,8BAA8B;AAAA,UAChD,eAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAEb,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWL,EAAO,uBAAuB;AAAA,UACzC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,cAAW;AAAA,UACX,wBAAOM,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAU,GAAI;AAAA,UAC5C,SAASb;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,GACF;AAAA,IAGF,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,GACd,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,QAAA,gBAAAI,EAAC,KAAA,EAAE,WAAWJ,EAAO,yBAAyB,GAAI,UAAAhB,GAAS;AAAA,0BAC1D,KAAA,EAAE,WAAWgB,EAAO,qBAAqB,GAAI,UAAAf,GAAM;AAAA,0BACnD,KAAA,EAAE,WAAWe,EAAO,2BAA2B,GAAI,UAAAd,EAAA,CAAY;AAAA,MAAA,GAClE;AAAA,MAECW,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC9C,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKjB;AAAA,UACL,KAAKC;AAAA,UACL,WAAWY,EAAO,6BAA6B;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MAGDF,KACC,gBAAAM;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAWR,EAAO,6BAA6B;AAAA,UAC/C,KAAKb;AAAA,UACL,KAAKC;AAAA,UACL,WAAWE;AAAA,UACX,kBAAkBC;AAAA,UAClB,YAAYC;AAAA,UACZ,YAAYC;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"LinkPreview.js","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport type { ReactNode } from 'react';\nimport ImagePreview from '@/components/image-preview/ImagePreview';\nimport type { ImagePreviewProps } from '@/components/image-preview/ImagePreview';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './LinkPreview.module.scss';\n\nexport type LinkPreviewImageSize = 'none' | 'small' | 'large';\n\nexport interface LinkPreviewProps {\n  /** The site/domain label shown above the title. */\n  siteName?: ReactNode;\n  /** The main link title. Accepts translated nodes. */\n  title?: ReactNode;\n  /** Description text. Accepts translated nodes. */\n  description?: ReactNode;\n  /** Preview image URL. Pair with `imageSize` to choose layout. */\n  imageSrc?: string;\n  /** Alt text for the preview image. */\n  imageAlt?: string;\n  /** Small: square thumbnail on the right. Large: ImagePreview below text. */\n  imageSize?: LinkPreviewImageSize;\n  /** Whether the large image preview is collapsed. Only applies when `imageSize` is `large`. */\n  imageCollapsed?: boolean;\n  /** Callback when the large image collapse toggle is clicked. */\n  onToggleImageCollapse?: () => void;\n  /** Callback when copy-link is clicked on the large image preview. */\n  onCopyImageLink?: () => void;\n  /** Callback when download is clicked on the large image preview. */\n  onDownloadImage?: () => void;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Remove link preview\". */\n  dismissLabel?: string;\n  /** Label overrides for the large image preview. */\n  imagePreviewLabels?: Pick<\n    ImagePreviewProps,\n    | 'showLabel'\n    | 'showAriaLabel'\n    | 'collapseLabel'\n    | 'copyLinkLabel'\n    | 'downloadLabel'\n  >;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Link Previews appear under a message whenever it contains a URL with rich metadata — a\n * documentation page, a blog post, a product link. They give the recipient enough context to\n * decide whether to click without forcing them to open the link cold.\n */\nexport default function LinkPreview({\n  siteName = 'Mattermost.com',\n  title = 'Mattermost: Open-source, high-trust, developer-centric collaboration platform',\n  description = 'Mattermost is a secure, open source platform for communication, collaboration, and workflow orchestration across tools and teams.',\n  imageSrc,\n  imageAlt = '',\n  imageSize = 'none',\n  imageCollapsed = false,\n  onToggleImageCollapse,\n  onCopyImageLink,\n  onDownloadImage,\n  onDismiss,\n  dismissLabel = 'Remove link preview',\n  imagePreviewLabels,\n  className = '',\n}: LinkPreviewProps) {\n  const resolvedImageSize =\n    imageSrc != null && imageSize === 'none' ? 'large' : imageSize;\n  const hasSmallImage = resolvedImageSize === 'small' && imageSrc != null;\n  const hasLargeImage = resolvedImageSize === 'large' && imageSrc != null;\n\n  const rootClass = [styles['link-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const cardClass = [\n    styles['link-preview__card'],\n    hasSmallImage ? styles['link-preview__card--small-image'] : '',\n    hasLargeImage && !imageCollapsed\n      ? styles['link-preview__card--large-image']\n      : '',\n    hasLargeImage && imageCollapsed\n      ? styles['link-preview__card--collapsed-image']\n      : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div className={styles['link-preview__dismiss-bridge']} aria-hidden />\n          <IconButton\n            className={styles['link-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label={dismissLabel}\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={cardClass}>\n        <div className={styles['link-preview__text']}>\n          <p className={styles['link-preview__site-name']}>{siteName}</p>\n          <p className={styles['link-preview__title']}>{title}</p>\n          <p className={styles['link-preview__description']}>{description}</p>\n        </div>\n\n        {hasSmallImage && (\n          <div className={styles['link-preview__thumbnail']}>\n            <img\n              src={imageSrc}\n              alt={imageAlt}\n              className={styles['link-preview__thumbnail-img']}\n            />\n          </div>\n        )}\n\n        {hasLargeImage && (\n          <ImagePreview\n            {...imagePreviewLabels}\n            className={styles['link-preview__image-preview']}\n            src={imageSrc}\n            alt={imageAlt}\n            collapsed={imageCollapsed}\n            onToggleCollapse={onToggleImageCollapse}\n            onCopyLink={onCopyImageLink}\n            onDownload={onDownloadImage}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["LinkPreview","siteName","title","description","imageSrc","imageAlt","imageSize","imageCollapsed","onToggleImageCollapse","onCopyImageLink","onDownloadImage","onDismiss","dismissLabel","imagePreviewLabels","className","resolvedImageSize","hasSmallImage","hasLargeImage","rootClass","styles","cardClass","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","ImagePreview"],"mappings":";;;;;;AAqDA,SAAwBA,EAAY;AAAA,EAClC,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,uBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAqB;AACnB,QAAMC,IACJX,KAAY,QAAQE,MAAc,SAAS,UAAUA,GACjDU,IAAgBD,MAAsB,WAAWX,KAAY,MAC7Da,IAAgBF,MAAsB,WAAWX,KAAY,MAE7Dc,IAAY,CAACC,EAAO,cAAc,GAAGL,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,GAELM,IAAY;AAAA,IAChBD,EAAO,oBAAoB;AAAA,IAC3BH,IAAgBG,EAAO,iCAAiC,IAAI;AAAA,IAC5DF,KAAiB,CAACV,IACdY,EAAO,iCAAiC,IACxC;AAAA,IACJF,KAAiBV,IACbY,EAAO,qCAAqC,IAC5C;AAAA,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAWH,GACb,UAAA;AAAA,IAAAP,KAAa,QACZ,gBAAAU,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAI,WAAWJ,EAAO,8BAA8B,GAAG,eAAW,IAAC;AAAA,MACpE,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWL,EAAO,uBAAuB;AAAA,UACzC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,cAAYP;AAAA,UACZ,wBAAOa,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAF,EAACG,KAAU,GAAI;AAAA,UAC5C,SAASf;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,GACF;AAAA,IAGF,gBAAAU,EAAC,OAAA,EAAI,WAAWD,GACd,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,QAAA,gBAAAI,EAAC,KAAA,EAAE,WAAWJ,EAAO,yBAAyB,GAAI,UAAAlB,GAAS;AAAA,0BAC1D,KAAA,EAAE,WAAWkB,EAAO,qBAAqB,GAAI,UAAAjB,GAAM;AAAA,0BACnD,KAAA,EAAE,WAAWiB,EAAO,2BAA2B,GAAI,UAAAhB,EAAA,CAAY;AAAA,MAAA,GAClE;AAAA,MAECa,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAWJ,EAAO,yBAAyB,GAC9C,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKnB;AAAA,UACL,KAAKC;AAAA,UACL,WAAWc,EAAO,6BAA6B;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MAGDF,KACC,gBAAAM;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAGd;AAAA,UACJ,WAAWM,EAAO,6BAA6B;AAAA,UAC/C,KAAKf;AAAA,UACL,KAAKC;AAAA,UACL,WAAWE;AAAA,UACX,kBAAkBC;AAAA,UAClB,YAAYC;AAAA,UACZ,YAAYC;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/link-preview/LinkPreview.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./LinkPreview.module.css');const e={"link-preview":"_link-preview_1dlj9_2","link-preview__dismiss-bridge":"_link-preview__dismiss-bridge_1dlj9_12","link-preview__dismiss":"_link-preview__dismiss_1dlj9_12","link-preview__card":"_link-preview__card_1dlj9_37","link-preview__card--small-image":"_link-preview__card--small-image_1dlj9_54","link-preview__card--large-image":"_link-preview__card--large-image_1dlj9_57","link-preview__card--collapsed-image":"_link-preview__card--collapsed-image_1dlj9_61","link-preview__text":"_link-preview__text_1dlj9_65","link-preview__site-name":"_link-preview__site-name_1dlj9_80","link-preview__title":"_link-preview__title_1dlj9_88","link-preview__description":"_link-preview__description_1dlj9_99","link-preview__thumbnail":"_link-preview__thumbnail_1dlj9_110","link-preview__thumbnail-img":"_link-preview__thumbnail-img_1dlj9_117","link-preview__image-preview":"_link-preview__image-preview_1dlj9_124"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./LinkPreview.css');const e={"link-preview":"_link-preview_1t849_13","link-preview__dismiss-bridge":"_link-preview__dismiss-bridge_1t849_23","link-preview__dismiss":"_link-preview__dismiss_1t849_23","link-preview__card":"_link-preview__card_1t849_48","link-preview__card--small-image":"_link-preview__card--small-image_1t849_65","link-preview__card--large-image":"_link-preview__card--large-image_1t849_68","link-preview__card--collapsed-image":"_link-preview__card--collapsed-image_1t849_72","link-preview__text":"_link-preview__text_1t849_76","link-preview__site-name":"_link-preview__site-name_1t849_91","link-preview__title":"_link-preview__title_1t849_99","link-preview__description":"_link-preview__description_1t849_110","link-preview__thumbnail":"_link-preview__thumbnail_1t849_121","link-preview__thumbnail-img":"_link-preview__thumbnail-img_1t849_128","link-preview__image-preview":"_link-preview__image-preview_1t849_135"};exports.default=e;
 //# sourceMappingURL=LinkPreview.module.scss.cjs.map

package/dist/components/link-preview/LinkPreview.module.scss.js

@@ -1,18 +1,18 @@
-import './LinkPreview.module.css';const _ = {
-  "link-preview": "_link-preview_1dlj9_2",
-  "link-preview__dismiss-bridge": "_link-preview__dismiss-bridge_1dlj9_12",
-  "link-preview__dismiss": "_link-preview__dismiss_1dlj9_12",
-  "link-preview__card": "_link-preview__card_1dlj9_37",
-  "link-preview__card--small-image": "_link-preview__card--small-image_1dlj9_54",
-  "link-preview__card--large-image": "_link-preview__card--large-image_1dlj9_57",
-  "link-preview__card--collapsed-image": "_link-preview__card--collapsed-image_1dlj9_61",
-  "link-preview__text": "_link-preview__text_1dlj9_65",
-  "link-preview__site-name": "_link-preview__site-name_1dlj9_80",
-  "link-preview__title": "_link-preview__title_1dlj9_88",
-  "link-preview__description": "_link-preview__description_1dlj9_99",
-  "link-preview__thumbnail": "_link-preview__thumbnail_1dlj9_110",
-  "link-preview__thumbnail-img": "_link-preview__thumbnail-img_1dlj9_117",
-  "link-preview__image-preview": "_link-preview__image-preview_1dlj9_124"
+import './LinkPreview.css';const _ = {
+  "link-preview": "_link-preview_1t849_13",
+  "link-preview__dismiss-bridge": "_link-preview__dismiss-bridge_1t849_23",
+  "link-preview__dismiss": "_link-preview__dismiss_1t849_23",
+  "link-preview__card": "_link-preview__card_1t849_48",
+  "link-preview__card--small-image": "_link-preview__card--small-image_1t849_65",
+  "link-preview__card--large-image": "_link-preview__card--large-image_1t849_68",
+  "link-preview__card--collapsed-image": "_link-preview__card--collapsed-image_1t849_72",
+  "link-preview__text": "_link-preview__text_1t849_76",
+  "link-preview__site-name": "_link-preview__site-name_1t849_91",
+  "link-preview__title": "_link-preview__title_1t849_99",
+  "link-preview__description": "_link-preview__description_1t849_110",
+  "link-preview__thumbnail": "_link-preview__thumbnail_1t849_121",
+  "link-preview__thumbnail-img": "_link-preview__thumbnail-img_1t849_128",
+  "link-preview__image-preview": "_link-preview__image-preview_1t849_135"
 };
 export {
   _ as default

package/dist/components/link-preview/index.d.ts

@@ -1,3 +1,3 @@
 export { default as LinkPreview } from './LinkPreview';
-export type { LinkPreviewProps, LinkPreviewImageSize, } from './LinkPreview';
+export type { LinkPreviewProps, LinkPreviewImageSize } from './LinkPreview';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/link-preview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/link-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EACV,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/link-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/mention-badge/MentionBadge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),a=require("../../utils/string.cjs"),t=require("./MentionBadge.module.scss.cjs");function u({className:s="",count:e,location:i="sidebar",size:o="small"}){const n=e>99?"99+":String(e),l=n.length,d=[t.default["mention-badge"],t.default[`mention-badge--size-${a.toKebab(o)}`],t.default[`mention-badge--digits-${l}`],i!=="sidebar"?t.default[`mention-badge--location-${a.toKebab(i)}`]:"",s].filter(Boolean).join(" ");return r.jsx("span",{className:d,"aria-label":`${e} mention${e===1?"":"s"}`,children:n})}exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),o=require("../../utils/string.cjs"),t=require("./MentionBadge.module.scss.cjs"),b=e=>`${e} mention${e===1?"":"s"}`;function g({className:e="",count:n,location:i="sidebar",size:s="small",formatLabel:l=b}){const a=n>99?"99+":String(n),d=a.length,r=[t.default["mention-badge"],t.default[`mention-badge--size-${o.toKebab(s)}`],t.default[`mention-badge--digits-${d}`],i!=="sidebar"?t.default[`mention-badge--location-${o.toKebab(i)}`]:"",e].filter(Boolean).join(" ");return u.jsx("span",{className:r,"aria-label":l(n),children:a})}exports.default=g;
 //# sourceMappingURL=MentionBadge.cjs.map

package/dist/components/mention-badge/MentionBadge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MentionBadge.cjs","sources":["../../../src/components/mention-badge/MentionBadge.tsx"],"sourcesContent":["import { toKebab } from '@/utils/string';\nimport styles from './MentionBadge.module.scss';\n\n/** Figma Mention Badge location context — controls color scheme. */\nexport type MentionBadgeLocation =\n  | 'sidebar'\n  | 'menu-item'\n  | 'icon-button'\n  | 'channel';\n\n/** Figma Mention Badge size. */\nexport type MentionBadgeSize = 'small' | 'medium' | 'large';\n\nexport interface MentionBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Mention count. Displays as-is up to 99; shows \"99+\" above that. */\n  count: number;\n  /** Color context. Figma: Location. Default: Sidebar. */\n  location?: MentionBadgeLocation;\n  /** Size variant. Figma: Size. Default: Small. */\n  size?: MentionBadgeSize;\n}\n\n/**\n * Mention Badges show a numerical count of pending mentions. They appear next to channel\n * names in the sidebar, on app-bar icons, inline in menu items, and on center-channel lists\n * such as thread rows — small, high-contrast pills that pull the eye without dominating the\n * row.\n */\nexport default function MentionBadge({\n  className = '',\n  count,\n  location = 'sidebar',\n  size = 'small',\n}: MentionBadgeProps) {\n  const displayText = count > 99 ? '99+' : String(count);\n  const digitCount = displayText.length; // 1, 2, or 3 (for \"99+\")\n\n  const rootClass = [\n    styles['mention-badge'],\n    styles[`mention-badge--size-${toKebab(size)}`],\n    styles[`mention-badge--digits-${digitCount}`],\n    location !== 'sidebar'\n      ? styles[`mention-badge--location-${toKebab(location)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      aria-label={`${count} mention${count === 1 ? '' : 's'}`}\n    >\n      {displayText}\n    </span>\n  );\n}\n"],"names":["MentionBadge","className","count","location","size","displayText","digitCount","rootClass","styles","toKebab","jsx"],"mappings":"iOA8BA,SAAwBA,EAAa,CACnC,UAAAC,EAAY,GACZ,MAAAC,EACA,SAAAC,EAAW,UACX,KAAAC,EAAO,OACT,EAAsB,CACpB,MAAMC,EAAcH,EAAQ,GAAK,MAAQ,OAAOA,CAAK,EAC/CI,EAAaD,EAAY,OAEzBE,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBA,EAAAA,QAAO,uBAAuBC,EAAAA,QAAQL,CAAI,CAAC,EAAE,EAC7CI,EAAAA,QAAO,yBAAyBF,CAAU,EAAE,EAC5CH,IAAa,UACTK,EAAAA,QAAO,2BAA2BC,EAAAA,QAAQN,CAAQ,CAAC,EAAE,EACrD,GACJF,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACES,EAAAA,IAAC,OAAA,CACC,UAAWH,EACX,aAAY,GAAGL,CAAK,WAAWA,IAAU,EAAI,GAAK,GAAG,GAEpD,SAAAG,CAAA,CAAA,CAGP"}
+{"version":3,"file":"MentionBadge.cjs","sources":["../../../src/components/mention-badge/MentionBadge.tsx"],"sourcesContent":["import { toKebab } from '@/utils/string';\nimport styles from './MentionBadge.module.scss';\n\n/** Figma Mention Badge location context — controls color scheme. */\nexport type MentionBadgeLocation =\n  | 'sidebar'\n  | 'menu-item'\n  | 'icon-button'\n  | 'channel';\n\n/** Figma Mention Badge size. */\nexport type MentionBadgeSize = 'small' | 'medium' | 'large';\n\nexport interface MentionBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Mention count. Displays as-is up to 99; shows \"99+\" above that. */\n  count: number;\n  /** Color context. Figma: Location. Default: Sidebar. */\n  location?: MentionBadgeLocation;\n  /** Size variant. Figma: Size. Default: Small. */\n  size?: MentionBadgeSize;\n  /** Accessible name. Default: `{count} mention(s)`. */\n  formatLabel?: (count: number) => string;\n}\n\nconst defaultFormatMentionLabel = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\n/**\n * Mention Badges show a numerical count of pending mentions. They appear next to channel\n * names in the sidebar, on app-bar icons, inline in menu items, and on center-channel lists\n * such as thread rows — small, high-contrast pills that pull the eye without dominating the\n * row.\n */\nexport default function MentionBadge({\n  className = '',\n  count,\n  location = 'sidebar',\n  size = 'small',\n  formatLabel = defaultFormatMentionLabel,\n}: MentionBadgeProps) {\n  const displayText = count > 99 ? '99+' : String(count);\n  const digitCount = displayText.length; // 1, 2, or 3 (for \"99+\")\n\n  const rootClass = [\n    styles['mention-badge'],\n    styles[`mention-badge--size-${toKebab(size)}`],\n    styles[`mention-badge--digits-${digitCount}`],\n    location !== 'sidebar'\n      ? styles[`mention-badge--location-${toKebab(location)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} aria-label={formatLabel(count)}>\n      {displayText}\n    </span>\n  );\n}\n"],"names":["defaultFormatMentionLabel","count","MentionBadge","className","location","size","formatLabel","displayText","digitCount","rootClass","styles","toKebab","jsx"],"mappings":"iOA0BMA,EAA6BC,GACjC,GAAGA,CAAK,WAAWA,IAAU,EAAI,GAAK,GAAG,GAQ3C,SAAwBC,EAAa,CACnC,UAAAC,EAAY,GACZ,MAAAF,EACA,SAAAG,EAAW,UACX,KAAAC,EAAO,QACP,YAAAC,EAAcN,CAChB,EAAsB,CACpB,MAAMO,EAAcN,EAAQ,GAAK,MAAQ,OAAOA,CAAK,EAC/CO,EAAaD,EAAY,OAEzBE,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBA,EAAAA,QAAO,uBAAuBC,EAAAA,QAAQN,CAAI,CAAC,EAAE,EAC7CK,EAAAA,QAAO,yBAAyBF,CAAU,EAAE,EAC5CJ,IAAa,UACTM,EAAAA,QAAO,2BAA2BC,EAAAA,QAAQP,CAAQ,CAAC,EAAE,EACrD,GACJD,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACES,MAAC,QAAK,UAAWH,EAAW,aAAYH,EAAYL,CAAK,EACtD,SAAAM,CAAA,CACH,CAEJ"}

package/dist/components/mention-badge/MentionBadge.css

@@ -0,0 +1 @@
+._mention-badge_1kx6x_13{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-m);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);white-space:nowrap;background-color:var(--mention-bg);color:var(--mention-color)}._mention-badge--size-small_1kx6x_24{font-size:var(--font-size-25);line-height:11px;padding:.5px 4.5px}._mention-badge--size-medium_1kx6x_29{font-size:var(--font-size-50);line-height:var(--line-height-50);letter-spacing:.22px;padding:0 var(--_mb-px-m, 5.5px)}._mention-badge--size-large_1kx6x_35{font-size:var(--font-size-75);line-height:15px;padding:1.5px var(--_mb-px-l, 5.5px);border-radius:var(--radius-pill)}._mention-badge--digits-1_1kx6x_41{--_mb-px-m: 6.5px;--_mb-px-l: 7.5px}._mention-badge--digits-3_1kx6x_45{--_mb-px-m: 4.5px;--_mb-px-l: 4px}._mention-badge--location-menu-item_1kx6x_49{background-color:rgba(var(--center-channel-color-rgb),.48);color:var(--center-channel-bg)}._mention-badge--location-icon-button_1kx6x_53{background-color:var(--sidebar-text-active-border);color:var(--button-color)}._mention-badge--location-channel_1kx6x_57{background-color:var(--button-bg);color:var(--button-color)}

package/dist/components/mention-badge/MentionBadge.d.ts

@@ -11,6 +11,8 @@ export interface MentionBadgeProps {
     location?: MentionBadgeLocation;
     /** Size variant. Figma: Size. Default: Small. */
     size?: MentionBadgeSize;
+    /** Accessible name. Default: `{count} mention(s)`. */
+    formatLabel?: (count: number) => string;
 }
 /**
  * Mention Badges show a numerical count of pending mentions. They appear next to channel
@@ -18,5 +20,5 @@ export interface MentionBadgeProps {
  * such as thread rows — small, high-contrast pills that pull the eye without dominating the
  * row.
  */
-export default function MentionBadge({ className, count, location, size, }: MentionBadgeProps): import("react/jsx-runtime").JSX.Element;
+export default function MentionBadge({ className, count, location, size, formatLabel, }: MentionBadgeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MentionBadge.d.ts.map

package/dist/components/mention-badge/MentionBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MentionBadge.d.ts","sourceRoot":"","sources":["../../../src/components/mention-badge/MentionBadge.tsx"],"names":[],"mappings":"AAGA,oEAAoE;AACpE,MAAM,MAAM,oBAAoB,GAC5B,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,CAAC;AAEd,gCAAgC;AAChC,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,KAAK,EACL,QAAoB,EACpB,IAAc,GACf,EAAE,iBAAiB,2CAwBnB"}
+{"version":3,"file":"MentionBadge.d.ts","sourceRoot":"","sources":["../../../src/components/mention-badge/MentionBadge.tsx"],"names":[],"mappings":"AAGA,oEAAoE;AACpE,MAAM,MAAM,oBAAoB,GAC5B,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,CAAC;AAEd,gCAAgC;AAChC,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAKD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,KAAK,EACL,QAAoB,EACpB,IAAc,EACd,WAAuC,GACxC,EAAE,iBAAiB,2CAqBnB"}

package/dist/components/mention-badge/MentionBadge.js

@@ -1,29 +1,24 @@
-import { jsx as m } from "react/jsx-runtime";
-import { toKebab as o } from "../../utils/string.js";
-import i from "./MentionBadge.module.scss.js";
-function f({
-  className: a = "",
-  count: e,
-  location: t = "sidebar",
-  size: s = "small"
+import { jsx as d } from "react/jsx-runtime";
+import { toKebab as a } from "../../utils/string.js";
+import t from "./MentionBadge.module.scss.js";
+const b = (e) => `${e} mention${e === 1 ? "" : "s"}`;
+function $({
+  className: e = "",
+  count: n,
+  location: i = "sidebar",
+  size: s = "small",
+  formatLabel: r = b
 }) {
-  const n = e > 99 ? "99+" : String(e), r = n.length, l = [
-    i["mention-badge"],
-    i[`mention-badge--size-${o(s)}`],
-    i[`mention-badge--digits-${r}`],
-    t !== "sidebar" ? i[`mention-badge--location-${o(t)}`] : "",
-    a
+  const o = n > 99 ? "99+" : String(n), l = o.length, m = [
+    t["mention-badge"],
+    t[`mention-badge--size-${a(s)}`],
+    t[`mention-badge--digits-${l}`],
+    i !== "sidebar" ? t[`mention-badge--location-${a(i)}`] : "",
+    e
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ m(
-    "span",
-    {
-      className: l,
-      "aria-label": `${e} mention${e === 1 ? "" : "s"}`,
-      children: n
-    }
-  );
+  return /* @__PURE__ */ d("span", { className: m, "aria-label": r(n), children: o });
 }
 export {
-  f as default
+  $ as default
 };
 //# sourceMappingURL=MentionBadge.js.map

package/dist/components/mention-badge/MentionBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionBadge.js","sources":["../../../src/components/mention-badge/MentionBadge.tsx"],"sourcesContent":["import { toKebab } from '@/utils/string';\nimport styles from './MentionBadge.module.scss';\n\n/** Figma Mention Badge location context — controls color scheme. */\nexport type MentionBadgeLocation =\n  | 'sidebar'\n  | 'menu-item'\n  | 'icon-button'\n  | 'channel';\n\n/** Figma Mention Badge size. */\nexport type MentionBadgeSize = 'small' | 'medium' | 'large';\n\nexport interface MentionBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Mention count. Displays as-is up to 99; shows \"99+\" above that. */\n  count: number;\n  /** Color context. Figma: Location. Default: Sidebar. */\n  location?: MentionBadgeLocation;\n  /** Size variant. Figma: Size. Default: Small. */\n  size?: MentionBadgeSize;\n}\n\n/**\n * Mention Badges show a numerical count of pending mentions. They appear next to channel\n * names in the sidebar, on app-bar icons, inline in menu items, and on center-channel lists\n * such as thread rows — small, high-contrast pills that pull the eye without dominating the\n * row.\n */\nexport default function MentionBadge({\n  className = '',\n  count,\n  location = 'sidebar',\n  size = 'small',\n}: MentionBadgeProps) {\n  const displayText = count > 99 ? '99+' : String(count);\n  const digitCount = displayText.length; // 1, 2, or 3 (for \"99+\")\n\n  const rootClass = [\n    styles['mention-badge'],\n    styles[`mention-badge--size-${toKebab(size)}`],\n    styles[`mention-badge--digits-${digitCount}`],\n    location !== 'sidebar'\n      ? styles[`mention-badge--location-${toKebab(location)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      className={rootClass}\n      aria-label={`${count} mention${count === 1 ? '' : 's'}`}\n    >\n      {displayText}\n    </span>\n  );\n}\n"],"names":["MentionBadge","className","count","location","size","displayText","digitCount","rootClass","styles","toKebab","jsx"],"mappings":";;;AA8BA,SAAwBA,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AACT,GAAsB;AACpB,QAAMC,IAAcH,IAAQ,KAAK,QAAQ,OAAOA,CAAK,GAC/CI,IAAaD,EAAY,QAEzBE,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBA,EAAO,uBAAuBC,EAAQL,CAAI,CAAC,EAAE;AAAA,IAC7CI,EAAO,yBAAyBF,CAAU,EAAE;AAAA,IAC5CH,MAAa,YACTK,EAAO,2BAA2BC,EAAQN,CAAQ,CAAC,EAAE,IACrD;AAAA,IACJF;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,MACX,cAAY,GAAGL,CAAK,WAAWA,MAAU,IAAI,KAAK,GAAG;AAAA,MAEpD,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"MentionBadge.js","sources":["../../../src/components/mention-badge/MentionBadge.tsx"],"sourcesContent":["import { toKebab } from '@/utils/string';\nimport styles from './MentionBadge.module.scss';\n\n/** Figma Mention Badge location context — controls color scheme. */\nexport type MentionBadgeLocation =\n  | 'sidebar'\n  | 'menu-item'\n  | 'icon-button'\n  | 'channel';\n\n/** Figma Mention Badge size. */\nexport type MentionBadgeSize = 'small' | 'medium' | 'large';\n\nexport interface MentionBadgeProps {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Mention count. Displays as-is up to 99; shows \"99+\" above that. */\n  count: number;\n  /** Color context. Figma: Location. Default: Sidebar. */\n  location?: MentionBadgeLocation;\n  /** Size variant. Figma: Size. Default: Small. */\n  size?: MentionBadgeSize;\n  /** Accessible name. Default: `{count} mention(s)`. */\n  formatLabel?: (count: number) => string;\n}\n\nconst defaultFormatMentionLabel = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\n/**\n * Mention Badges show a numerical count of pending mentions. They appear next to channel\n * names in the sidebar, on app-bar icons, inline in menu items, and on center-channel lists\n * such as thread rows — small, high-contrast pills that pull the eye without dominating the\n * row.\n */\nexport default function MentionBadge({\n  className = '',\n  count,\n  location = 'sidebar',\n  size = 'small',\n  formatLabel = defaultFormatMentionLabel,\n}: MentionBadgeProps) {\n  const displayText = count > 99 ? '99+' : String(count);\n  const digitCount = displayText.length; // 1, 2, or 3 (for \"99+\")\n\n  const rootClass = [\n    styles['mention-badge'],\n    styles[`mention-badge--size-${toKebab(size)}`],\n    styles[`mention-badge--digits-${digitCount}`],\n    location !== 'sidebar'\n      ? styles[`mention-badge--location-${toKebab(location)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={rootClass} aria-label={formatLabel(count)}>\n      {displayText}\n    </span>\n  );\n}\n"],"names":["defaultFormatMentionLabel","count","MentionBadge","className","location","size","formatLabel","displayText","digitCount","rootClass","styles","toKebab","jsx"],"mappings":";;;AA0BA,MAAMA,IAA4B,CAACC,MACjC,GAAGA,CAAK,WAAWA,MAAU,IAAI,KAAK,GAAG;AAQ3C,SAAwBC,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,OAAAF;AAAA,EACA,UAAAG,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAcN;AAChB,GAAsB;AACpB,QAAMO,IAAcN,IAAQ,KAAK,QAAQ,OAAOA,CAAK,GAC/CO,IAAaD,EAAY,QAEzBE,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBA,EAAO,uBAAuBC,EAAQN,CAAI,CAAC,EAAE;AAAA,IAC7CK,EAAO,yBAAyBF,CAAU,EAAE;AAAA,IAC5CJ,MAAa,YACTM,EAAO,2BAA2BC,EAAQP,CAAQ,CAAC,EAAE,IACrD;AAAA,IACJD;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAS,EAAC,UAAK,WAAWH,GAAW,cAAYH,EAAYL,CAAK,GACtD,UAAAM,EAAA,CACH;AAEJ;"}

package/dist/components/mention-badge/MentionBadge.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MentionBadge.module.css');const e={"mention-badge":"_mention-badge_1uenr_2","mention-badge--size-small":"_mention-badge--size-small_1uenr_13","mention-badge--size-medium":"_mention-badge--size-medium_1uenr_18","mention-badge--size-large":"_mention-badge--size-large_1uenr_24","mention-badge--digits-1":"_mention-badge--digits-1_1uenr_30","mention-badge--digits-3":"_mention-badge--digits-3_1uenr_34","mention-badge--location-menu-item":"_mention-badge--location-menu-item_1uenr_38","mention-badge--location-icon-button":"_mention-badge--location-icon-button_1uenr_42","mention-badge--location-channel":"_mention-badge--location-channel_1uenr_46"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MentionBadge.css');const e={"mention-badge":"_mention-badge_1kx6x_13","mention-badge--size-small":"_mention-badge--size-small_1kx6x_24","mention-badge--size-medium":"_mention-badge--size-medium_1kx6x_29","mention-badge--size-large":"_mention-badge--size-large_1kx6x_35","mention-badge--digits-1":"_mention-badge--digits-1_1kx6x_41","mention-badge--digits-3":"_mention-badge--digits-3_1kx6x_45","mention-badge--location-menu-item":"_mention-badge--location-menu-item_1kx6x_49","mention-badge--location-icon-button":"_mention-badge--location-icon-button_1kx6x_53","mention-badge--location-channel":"_mention-badge--location-channel_1kx6x_57"};exports.default=e;
 //# sourceMappingURL=MentionBadge.module.scss.cjs.map

package/dist/components/mention-badge/MentionBadge.module.scss.js

@@ -1,13 +1,13 @@
-import './MentionBadge.module.css';const e = {
-  "mention-badge": "_mention-badge_1uenr_2",
-  "mention-badge--size-small": "_mention-badge--size-small_1uenr_13",
-  "mention-badge--size-medium": "_mention-badge--size-medium_1uenr_18",
-  "mention-badge--size-large": "_mention-badge--size-large_1uenr_24",
-  "mention-badge--digits-1": "_mention-badge--digits-1_1uenr_30",
-  "mention-badge--digits-3": "_mention-badge--digits-3_1uenr_34",
-  "mention-badge--location-menu-item": "_mention-badge--location-menu-item_1uenr_38",
-  "mention-badge--location-icon-button": "_mention-badge--location-icon-button_1uenr_42",
-  "mention-badge--location-channel": "_mention-badge--location-channel_1uenr_46"
+import './MentionBadge.css';const e = {
+  "mention-badge": "_mention-badge_1kx6x_13",
+  "mention-badge--size-small": "_mention-badge--size-small_1kx6x_24",
+  "mention-badge--size-medium": "_mention-badge--size-medium_1kx6x_29",
+  "mention-badge--size-large": "_mention-badge--size-large_1kx6x_35",
+  "mention-badge--digits-1": "_mention-badge--digits-1_1kx6x_41",
+  "mention-badge--digits-3": "_mention-badge--digits-3_1kx6x_45",
+  "mention-badge--location-menu-item": "_mention-badge--location-menu-item_1kx6x_49",
+  "mention-badge--location-icon-button": "_mention-badge--location-icon-button_1kx6x_53",
+  "mention-badge--location-channel": "_mention-badge--location-channel_1kx6x_57"
 };
 export {
   e as default

package/dist/components/menu-group-heading/MenuGroupHeading.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("./MenuGroupHeading.module.scss.cjs");function i({label:n,className:r="",...a}){return e.jsx("div",{className:[u.default["menu-group-heading"],r].filter(Boolean).join(" "),...a,children:e.jsx("span",{className:u.default["menu-group-heading__label"],children:n})})}exports.default=i;
+//# sourceMappingURL=MenuGroupHeading.cjs.map

package/dist/components/menu-group-heading/MenuGroupHeading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroupHeading.cjs","sources":["../../../src/components/menu-group-heading/MenuGroupHeading.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport styles from './MenuGroupHeading.module.scss';\n\nexport interface MenuGroupHeadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** The section label text. Rendered in all-caps. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n}\n\n/**\n * Menu Group Heading is an optional all-caps label that titles a grouped\n * section of Menu Items inside a dropdown or context menu.\n */\nexport default function MenuGroupHeading({\n  label,\n  className = '',\n  ...rest\n}: MenuGroupHeadingProps) {\n  return (\n    <div\n      className={[styles['menu-group-heading'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      <span className={styles['menu-group-heading__label']}>{label}</span>\n    </div>\n  );\n}\n"],"names":["MenuGroupHeading","label","className","rest","jsx","styles"],"mappings":"iMAYA,SAAwBA,EAAiB,CACvC,MAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEC,EAAAA,IAAC,MAAA,CACC,UAAW,CAACC,UAAO,oBAAoB,EAAGH,CAAS,EAChD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEJ,eAAC,OAAA,CAAK,UAAWE,EAAAA,QAAO,2BAA2B,EAAI,SAAAJ,CAAA,CAAM,CAAA,CAAA,CAGnE"}

package/dist/components/menu-group-heading/MenuGroupHeading.css

@@ -0,0 +1 @@
+._menu-group-heading_1cgvs_13{display:flex;align-items:center;padding:var(--spacing-xxs) var(--spacing-xl);background-color:var(--center-channel-bg);width:100%}._menu-group-heading__label_1cgvs_20{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);letter-spacing:.05em;text-transform:uppercase;color:rgba(var(--center-channel-color-rgb),.72);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/dist/components/menu-group-heading/MenuGroupHeading.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface MenuGroupHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    /** The section label text. Rendered in all-caps. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
+}
+/**
+ * Menu Group Heading is an optional all-caps label that titles a grouped
+ * section of Menu Items inside a dropdown or context menu.
+ */
+export default function MenuGroupHeading({ label, className, ...rest }: MenuGroupHeadingProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuGroupHeading.d.ts.map

package/dist/components/menu-group-heading/MenuGroupHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroupHeading.d.ts","sourceRoot":"","sources":["../../../src/components/menu-group-heading/MenuGroupHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,2GAA2G;IAC3G,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAWvB"}

package/dist/components/menu-group-heading/MenuGroupHeading.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import n from "./MenuGroupHeading.module.scss.js";
+function s({
+  label: r,
+  className: a = "",
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: [n["menu-group-heading"], a].filter(Boolean).join(" "),
+      ...o,
+      children: /* @__PURE__ */ e("span", { className: n["menu-group-heading__label"], children: r })
+    }
+  );
+}
+export {
+  s as default
+};
+//# sourceMappingURL=MenuGroupHeading.js.map

package/dist/components/menu-group-heading/MenuGroupHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroupHeading.js","sources":["../../../src/components/menu-group-heading/MenuGroupHeading.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport styles from './MenuGroupHeading.module.scss';\n\nexport interface MenuGroupHeadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** The section label text. Rendered in all-caps. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n}\n\n/**\n * Menu Group Heading is an optional all-caps label that titles a grouped\n * section of Menu Items inside a dropdown or context menu.\n */\nexport default function MenuGroupHeading({\n  label,\n  className = '',\n  ...rest\n}: MenuGroupHeadingProps) {\n  return (\n    <div\n      className={[styles['menu-group-heading'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      <span className={styles['menu-group-heading__label']}>{label}</span>\n    </div>\n  );\n}\n"],"names":["MenuGroupHeading","label","className","rest","jsx","styles"],"mappings":";;AAYA,SAAwBA,EAAiB;AAAA,EACvC,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,oBAAoB,GAAGH,CAAS,EAChD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEJ,4BAAC,QAAA,EAAK,WAAWE,EAAO,2BAA2B,GAAI,UAAAJ,EAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAGnE;"}

package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuGroupHeading.css');const e={"menu-group-heading":"_menu-group-heading_1cgvs_13","menu-group-heading__label":"_menu-group-heading__label_1cgvs_20"};exports.default=e;
+//# sourceMappingURL=MenuGroupHeading.module.scss.cjs.map

package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.cjs.map

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

package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.js

@@ -0,0 +1,8 @@
+import './MenuGroupHeading.css';const e = {
+  "menu-group-heading": "_menu-group-heading_1cgvs_13",
+  "menu-group-heading__label": "_menu-group-heading__label_1cgvs_20"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=MenuGroupHeading.module.scss.js.map

package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.js.map

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

package/dist/components/menu-group-heading/index.cjs

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

package/dist/components/menu-group-heading/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MenuGroupHeading } from './MenuGroupHeading';
+export type { MenuGroupHeadingProps } from './MenuGroupHeading';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/menu-group-heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-group-heading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/menu-group-heading/index.js

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

package/dist/components/menu-item/MenuItem.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__p=require("@mattermost/compass-icons/components/emoticon-happy-outline.js"),p=__p?.default??__p,__g=require("@mattermost/compass-icons/components/check.js"),g=__g?.default??__g,u=require("../icon/Icon.cjs"),b=require("../tag/Tag.cjs"),q=require("../mention-badge/MentionBadge.cjs"),l=require("./MenuItem.module.scss.cjs");function w({label:m,secondaryLabel:s,secondaryLabelPosition:a="below",leadingVisual:d,leadingElement:c=!0,trailingVisual:i,trailingElement:r=!1,customStatusEmoji:n,tag:o=!1,mentionCount:t,destructive:f=!1,active:_=!1,className:j="",disabled:x,type:h="button",...N}){const v=[l.default["menu-item"],f?l.default["menu-item--destructive"]:"",_?l.default["menu-item--active"]:"",j].filter(Boolean).join(" ");return e.jsx("button",{className:v,type:h,disabled:x,...N,children:e.jsxs("div",{className:l.default["menu-item__content"],children:[c&&e.jsx("div",{className:l.default["menu-item__left"],children:e.jsx("span",{className:l.default["menu-item__leading-visual"],children:d??e.jsx(u.default,{glyph:e.jsx(p,{}),size:"16"})})}),e.jsxs("div",{className:l.default["menu-item__middle"],children:[e.jsxs("div",{className:l.default["menu-item__top-row"],children:[e.jsx("span",{className:l.default["menu-item__label"],children:m}),s&&a==="inline"&&e.jsx("span",{className:l.default["menu-item__secondary-label-inline"],children:s}),n&&e.jsx("span",{className:l.default["menu-item__custom-status"],"aria-hidden":!0,children:n}),o&&e.jsx(b.default,{label:"NEW"}),t!=null&&t>0&&e.jsx(q.default,{count:t,location:"menu-item",size:"small"})]}),s&&a==="below"&&e.jsx("div",{className:l.default["menu-item__bottom-row"],children:e.jsx("span",{className:l.default["menu-item__secondary-label-below"],children:s})})]}),r&&e.jsx("div",{className:l.default["menu-item__right"],children:e.jsx("span",{className:[l.default["menu-item__trailing-visual"],i?"":l.default["menu-item__trailing-visual--check"]].filter(Boolean).join(" "),children:i??e.jsx(u.default,{glyph:e.jsx(g,{}),size:"16"})})})]})})}exports.default=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("react"),__q=require("@mattermost/compass-icons/components/emoticon-happy-outline.js"),q=__q?.default??__q,__M=require("@mattermost/compass-icons/components/check.js"),M=__M?.default??__M,s=require("../icon/Icon.cjs"),w=require("../tag/Tag.cjs"),z=require("../mention-badge/MentionBadge.cjs"),l=require("./MenuItem.module.scss.cjs"),d=b.forwardRef(function({label:m,secondaryLabel:t,secondaryLabelPosition:i="below",leadingVisual:r,leadingElement:c=!0,trailingVisual:n,trailingElement:o=!1,customStatusEmoji:u,tag:f=!1,tagLabel:_="NEW",mentionCount:a,destructive:j=!1,active:x=!1,className:h="",disabled:v,type:N="button",...p},g){const I=[l.default["menu-item"],j?l.default["menu-item--destructive"]:"",x?l.default["menu-item--active"]:"",h].filter(Boolean).join(" ");return e.jsx("button",{ref:g,className:I,type:N,disabled:v,...p,children:e.jsxs("div",{className:l.default["menu-item__content"],children:[c&&e.jsx("div",{className:l.default["menu-item__left"],children:e.jsx("span",{className:l.default["menu-item__leading-visual"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"16"},children:r??e.jsx(s.default,{glyph:e.jsx(q,{}),size:"16"})})})}),e.jsxs("div",{className:l.default["menu-item__middle"],children:[e.jsxs("div",{className:l.default["menu-item__top-row"],children:[e.jsx("span",{className:l.default["menu-item__label"],children:m}),t&&i==="inline"&&e.jsx("span",{className:l.default["menu-item__secondary-label-inline"],children:t}),u&&e.jsx("span",{className:l.default["menu-item__custom-status"],"aria-hidden":!0,children:u}),f&&e.jsx(w.default,{label:_}),a!=null&&a>0&&e.jsx(z.default,{count:a,location:"menu-item",size:"small"})]}),t&&i==="below"&&e.jsx("div",{className:l.default["menu-item__bottom-row"],children:e.jsx("span",{className:l.default["menu-item__secondary-label-below"],children:t})})]}),o&&e.jsx("div",{className:l.default["menu-item__right"],children:e.jsx("span",{className:[l.default["menu-item__trailing-visual"],n?"":l.default["menu-item__trailing-visual--check"]].filter(Boolean).join(" "),children:e.jsx(s.IconSlotContext.Provider,{value:{size:"16"},children:n??e.jsx(s.default,{glyph:e.jsx(M,{}),size:"16"})})})})]})})});d.displayName="MenuItem";exports.default=d;
 //# sourceMappingURL=MenuItem.cjs.map

package/dist/components/menu-item/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']}>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"kaAuCA,SAAwBA,EAAS,CAC/B,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBP,EAAcO,EAAAA,QAAO,wBAAwB,EAAI,GACjDN,EAASM,EAAAA,QAAO,mBAAmB,EAAI,GACvCL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,SAAA,CAAO,UAAWF,EAAW,KAAAF,EAAY,SAAAD,EAAqB,GAAGE,EAChE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAb,GACCc,EAAAA,IAAC,OAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAChD,SAAAd,GACCe,EAAAA,IAACE,WAAK,MAAOF,EAAAA,IAACG,IAAyB,EAAI,KAAK,IAAA,CAAK,CAAA,CAEzD,CAAA,CACF,EAEFF,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAjB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CgB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAhB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWU,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAV,CAAA,CACH,EAEDC,GAAOU,EAAAA,IAACI,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBb,GAAgB,MAAQA,EAAe,GACtCS,EAAAA,IAACK,EAAAA,QAAA,CACC,MAAOd,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCR,GAAkBC,IAA2B,SAC5CgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCX,GACCY,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCZ,EAEG,GADAY,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAZ,SAAmBe,EAAAA,QAAA,CAAK,YAAQI,EAAA,CAAA,CAAU,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,CAC3D,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /**\n   * Custom content for the leading slot. When omitted, shows placeholder icon.\n   * When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides\n   * the correct size via context. A 24px avatar (User Avatar or Team Avatar)\n   * fills the same slot as that icon, so the label stays on the same line.\n   */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbAuFMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}

package/dist/components/menu-item/MenuItem.css

@@ -0,0 +1 @@
+._menu-item_5zcj8_13{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color)}._menu-item_5zcj8_13:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_5zcj8_13:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_5zcj8_13:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_5zcj8_37:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_5zcj8_37:not(:disabled) ._menu-item__leading-visual_5zcj8_40,._menu-item--active_5zcj8_37:not(:disabled) ._menu-item__trailing-visual_5zcj8_41{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_5zcj8_37:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_5zcj8_37:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_5zcj8_13:disabled{cursor:not-allowed}._menu-item_5zcj8_13:disabled ._menu-item__content_5zcj8_54{opacity:.4}._menu-item__content_5zcj8_54{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_5zcj8_63{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_5zcj8_40,._menu-item__trailing-visual_5zcj8_41{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__leading-visual_5zcj8_40{box-sizing:border-box;min-width:calc(var(--icon-size-16) + var(--spacing-xxxs) * 2);min-height:calc(var(--icon-size-16) + var(--spacing-xxxs) * 2)}._menu-item__trailing-visual_5zcj8_41{padding:var(--spacing-xxxs)}._menu-item__trailing-visual_5zcj8_41 kbd{padding:0;background:transparent;font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.72)}._menu-item__trailing-visual_5zcj8_41 kbd+kbd{margin-inline-start:var(--spacing-xxxs)}._menu-item__trailing-visual--check_5zcj8_92{color:var(--button-bg)}._menu-item__middle_5zcj8_95{align-self:stretch;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--menu-item-label-gap, var(--spacing-xxxs));align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_5zcj8_107{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_5zcj8_115{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}._menu-item__secondary-label-inline_5zcj8_124{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_5zcj8_132{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_5zcj8_139{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_5zcj8_150{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_5zcj8_159{align-self:center;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;height:var(--spacing-xxl)}._menu-item--destructive_5zcj8_167,._menu-item--destructive_5zcj8_167 ._menu-item__leading-visual_5zcj8_40,._menu-item--destructive_5zcj8_167 ._menu-item__trailing-visual_5zcj8_41,._menu-item--destructive_5zcj8_167 ._menu-item__trailing-visual_5zcj8_41 kbd{color:var(--error-text, var(--color-danger))}._menu-item--destructive_5zcj8_167:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_5zcj8_167:hover:not(:disabled) ._menu-item__leading-visual_5zcj8_40,._menu-item--destructive_5zcj8_167:hover:not(:disabled) ._menu-item__trailing-visual_5zcj8_41,._menu-item--destructive_5zcj8_167:hover:not(:disabled) ._menu-item__trailing-visual_5zcj8_41 kbd{color:inherit}._menu-item--destructive_5zcj8_167:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_5zcj8_167:active:not(:disabled) ._menu-item__leading-visual_5zcj8_40,._menu-item--destructive_5zcj8_167:active:not(:disabled) ._menu-item__trailing-visual_5zcj8_41,._menu-item--destructive_5zcj8_167:active:not(:disabled) ._menu-item__trailing-visual_5zcj8_41 kbd{color:inherit}._menu-item--destructive_5zcj8_167:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_5zcj8_167:focus-visible ._menu-item__leading-visual_5zcj8_40,._menu-item--destructive_5zcj8_167:focus-visible ._menu-item__trailing-visual_5zcj8_41,._menu-item--destructive_5zcj8_167:focus-visible ._menu-item__trailing-visual_5zcj8_41 kbd{color:inherit}