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

package/dist/components/image-preview/ImagePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.js","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport { useEffect, useRef, type KeyboardEvent } from 'react';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n  const showTriggerRef = useRef<HTMLButtonElement>(null);\n  const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n  const keyboardToggleRef = useRef(false);\n\n  const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      keyboardToggleRef.current = true;\n    }\n  };\n\n  useEffect(() => {\n    if (!keyboardToggleRef.current) return;\n\n    if (collapsed) {\n      if (!labelTransition.mounted || !showTriggerRef.current) return;\n      keyboardToggleRef.current = false;\n      showTriggerRef.current.focus();\n      return;\n    }\n\n    if (!frameTransition.mounted || !collapseTriggerRef.current) return;\n    keyboardToggleRef.current = false;\n    collapseTriggerRef.current.focus();\n  }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            ref={showTriggerRef}\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            onKeyDown={markKeyboardToggle}\n            aria-label=\"Show image preview\"\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              Show Image preview\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img src={src} alt={alt} className={styles['image-preview__img']} />\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                ref={collapseTriggerRef}\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                onKeyDown={markKeyboardToggle}\n                aria-label=\"Collapse image preview\"\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Copy link\"\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Download\"\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"ImagePreview.js","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport { useEffect, useRef, type KeyboardEvent } from 'react';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n  const showTriggerRef = useRef<HTMLButtonElement>(null);\n  const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n  const keyboardToggleRef = useRef(false);\n\n  const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      keyboardToggleRef.current = true;\n    }\n  };\n\n  useEffect(() => {\n    if (!keyboardToggleRef.current) return;\n\n    if (collapsed) {\n      if (!labelTransition.mounted || !showTriggerRef.current) return;\n      keyboardToggleRef.current = false;\n      showTriggerRef.current.focus();\n      return;\n    }\n\n    if (!frameTransition.mounted || !collapseTriggerRef.current) return;\n    keyboardToggleRef.current = false;\n    collapseTriggerRef.current.focus();\n  }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            ref={showTriggerRef}\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            onKeyDown={markKeyboardToggle}\n            aria-label=\"Show image preview\"\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              Show Image preview\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img\n                src={src}\n                alt={alt}\n                className={styles['image-preview__img']}\n              />\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                ref={collapseTriggerRef}\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                onKeyDown={markKeyboardToggle}\n                aria-label=\"Collapse image preview\"\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Copy link\"\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Download\"\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"LinkPreview.cjs","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":"0WAwCA,SAAwBA,EAAY,CAClC,SAAAC,EAAW,iBACX,MAAAC,EAAQ,gFACR,YAAAC,EAAc,oIACd,SAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,OACZ,eAAAC,EAAiB,GACjB,sBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,EACd,EAAqB,CACnB,MAAMC,EACJT,GAAY,MAAQE,IAAc,OAAS,QAAUA,EACjDQ,EAAgBD,IAAsB,SAAWT,GAAY,KAC7DW,EAAgBF,IAAsB,SAAWT,GAAY,KAE7DY,EAAY,CAACC,UAAO,cAAc,EAAGL,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EAELM,EAAY,CAChBD,EAAAA,QAAO,oBAAoB,EAC3BH,EAAgBG,EAAAA,QAAO,iCAAiC,EAAI,GAC5DF,GAAiB,CAACR,EACdU,UAAO,iCAAiC,EACxC,GACJF,GAAiBR,EACbU,UAAO,qCAAqC,EAC5C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACb,SAAA,CAAAL,GAAa,MACZQ,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACC,UAAWJ,EAAAA,QAAO,8BAA8B,EAChD,cAAW,EAAA,CAAA,EAEbI,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,uBAAuB,EACzC,KAAK,UACL,QAAQ,UACR,aAAW,sBACX,WAAOM,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACG,IAAU,EAAI,EAC5C,QAASb,CAAA,CAAA,CACX,EACF,EAGFQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAI,MAAC,IAAA,CAAE,UAAWJ,EAAAA,QAAO,yBAAyB,EAAI,SAAAhB,EAAS,QAC1D,IAAA,CAAE,UAAWgB,EAAAA,QAAO,qBAAqB,EAAI,SAAAf,EAAM,QACnD,IAAA,CAAE,UAAWe,EAAAA,QAAO,2BAA2B,EAAI,SAAAd,CAAA,CAAY,CAAA,EAClE,EAECW,GACCO,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,yBAAyB,EAC9C,SAAAI,EAAAA,IAAC,MAAA,CACC,IAAKjB,EACL,IAAKC,EACL,UAAWY,EAAAA,QAAO,6BAA6B,CAAA,CAAA,EAEnD,EAGDF,GACCM,EAAAA,IAACI,EAAAA,QAAA,CACC,UAAWR,EAAAA,QAAO,6BAA6B,EAC/C,IAAKb,EACL,IAAKC,EACL,UAAWE,EACX,iBAAkBC,EAClB,WAAYC,EACZ,WAAYC,CAAA,CAAA,CACd,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"LinkPreview.cjs","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 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=\"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":"0WAwCA,SAAwBA,EAAY,CAClC,SAAAC,EAAW,iBACX,MAAAC,EAAQ,gFACR,YAAAC,EAAc,oIACd,SAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,OACZ,eAAAC,EAAiB,GACjB,sBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,EACd,EAAqB,CACnB,MAAMC,EACJT,GAAY,MAAQE,IAAc,OAAS,QAAUA,EACjDQ,EAAgBD,IAAsB,SAAWT,GAAY,KAC7DW,EAAgBF,IAAsB,SAAWT,GAAY,KAE7DY,EAAY,CAACC,UAAO,cAAc,EAAGL,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EAELM,EAAY,CAChBD,EAAAA,QAAO,oBAAoB,EAC3BH,EAAgBG,EAAAA,QAAO,iCAAiC,EAAI,GAC5DF,GAAiB,CAACR,EACdU,UAAO,iCAAiC,EACxC,GACJF,GAAiBR,EACbU,UAAO,qCAAqC,EAC5C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACb,SAAA,CAAAL,GAAa,MACZQ,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,MAAC,OAAI,UAAWJ,EAAAA,QAAO,8BAA8B,EAAG,cAAW,GAAC,EACpEI,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,uBAAuB,EACzC,KAAK,UACL,QAAQ,UACR,aAAW,sBACX,WAAOM,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACG,IAAU,EAAI,EAC5C,QAASb,CAAA,CAAA,CACX,EACF,EAGFQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAI,MAAC,IAAA,CAAE,UAAWJ,EAAAA,QAAO,yBAAyB,EAAI,SAAAhB,EAAS,QAC1D,IAAA,CAAE,UAAWgB,EAAAA,QAAO,qBAAqB,EAAI,SAAAf,EAAM,QACnD,IAAA,CAAE,UAAWe,EAAAA,QAAO,2BAA2B,EAAI,SAAAd,CAAA,CAAY,CAAA,EAClE,EAECW,GACCO,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,yBAAyB,EAC9C,SAAAI,EAAAA,IAAC,MAAA,CACC,IAAKjB,EACL,IAAKC,EACL,UAAWY,EAAAA,QAAO,6BAA6B,CAAA,CAAA,EAEnD,EAGDF,GACCM,EAAAA,IAACI,EAAAA,QAAA,CACC,UAAWR,EAAAA,QAAO,6BAA6B,EAC/C,IAAKb,EACL,IAAKC,EACL,UAAWE,EACX,iBAAkBC,EAClB,WAAYC,EACZ,WAAYC,CAAA,CAAA,CACd,CAAA,CAEJ,CAAA,EACF,CAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,8FAA8F;IAC9F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAA2B,EAC3B,KAAuF,EACvF,WAAiJ,EACjJ,QAAQ,EACR,QAAa,EACb,SAAkB,EAClB,cAAsB,EACtB,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,SAAS,EACT,SAAc,GACf,EAAE,gBAAgB,2CAyElB"}
+{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,8FAA8F;IAC9F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAA2B,EAC3B,KAAuF,EACvF,WAAiJ,EACjJ,QAAQ,EACR,QAAa,EACb,SAAkB,EAClB,cAAsB,EACtB,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,SAAS,EACT,SAAc,GACf,EAAE,gBAAgB,2CAsElB"}

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

@@ -26,13 +26,7 @@ function z({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ r("div", { className: u, children: [
     t != null && /* @__PURE__ */ r(g, { 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,
         {

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 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 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=\"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,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,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;"}

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/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,s=require("../icon/Icon.cjs"),b=require("../tag/Tag.cjs"),q=require("../mention-badge/MentionBadge.cjs"),l=require("./MenuItem.module.scss.cjs");function I({label:d,secondaryLabel:t,secondaryLabelPosition:a="below",leadingVisual:m,leadingElement:c=!0,trailingVisual:n,trailingElement:r=!1,customStatusEmoji:u,tag:o=!1,mentionCount:i,destructive:f=!1,active:_=!1,className:j="",disabled:x,type:h="button",...v}){const N=[l.default["menu-item"],f?l.default["menu-item--destructive"]:"",_?l.default["menu-item--active"]:"",j].filter(Boolean).join(" ");return e.jsx("button",{className:N,type:h,disabled:x,...v,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:m??e.jsx(s.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:d}),t&&a==="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}),o&&e.jsx(b.default,{label:"NEW"}),i!=null&&i>0&&e.jsx(q.default,{count:i,location:"menu-item",size:"small"})]}),t&&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:t})})]}),r&&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(g,{}),size:"16"})})})})]})})}exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),I=require("react"),__b=require("@mattermost/compass-icons/components/emoticon-happy-outline.js"),b=__b?.default??__b,__q=require("@mattermost/compass-icons/components/check.js"),q=__q?.default??__q,s=require("../icon/Icon.cjs"),M=require("../tag/Tag.cjs"),w=require("../mention-badge/MentionBadge.cjs"),l=require("./MenuItem.module.scss.cjs"),d=I.forwardRef(function({label:m,secondaryLabel:t,secondaryLabelPosition:i="below",leadingVisual:r,leadingElement:c=!0,trailingVisual:n,trailingElement:o=!1,customStatusEmoji:u,tag:f=!1,mentionCount:a,destructive:_=!1,active:j=!1,className:x="",disabled:h,type:v="button",...N},p){const g=[l.default["menu-item"],_?l.default["menu-item--destructive"]:"",j?l.default["menu-item--active"]:"",x].filter(Boolean).join(" ");return e.jsx("button",{ref:p,className:g,type:v,disabled:h,...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"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"16"},children:r??e.jsx(s.default,{glyph:e.jsx(b,{}),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(M.default,{label:"NEW"}),a!=null&&a>0&&e.jsx(w.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(q,{}),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 { IconSlotContext } 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. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\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  /** 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']} 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=\"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              <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"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"kaAwCA,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,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,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,IAACK,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBd,GAAgB,MAAQA,EAAe,GACtCS,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOf,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,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAf,GAAkBa,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,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 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  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\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  /** 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 */\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    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=\"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              <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","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbAwCMA,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,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,CAAAd,GACCe,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,SAAAlB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CiB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAjB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWW,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAX,CAAA,CACH,EAEDC,GAAOW,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBf,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCR,GAAkBC,IAA2B,SAC5CiB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCZ,GACCa,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCb,EAEG,GADAa,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAhB,GAAkBc,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED5B,EAAS,YAAc"}

package/dist/components/menu-item/MenuItem.d.ts

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Primary label text. */
-    label: string;
+    /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
     /** Optional secondary label. */
     secondaryLabel?: ReactNode;
     /** Where the secondary label appears. Default: 'below'. */
@@ -29,5 +29,6 @@ export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,
  * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.
  */
-export default function MenuItem({ label, secondaryLabel, secondaryLabelPosition, leadingVisual, leadingElement, trailingVisual, trailingElement, customStatusEmoji, tag, mentionCount, destructive, active, className, disabled, type, ...rest }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare const MenuItem: import('react').ForwardRefExoticComponent<MenuItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default MenuItem;
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/components/menu-item/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAS7D,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,cAAc,EACd,sBAAgC,EAChC,aAAa,EACb,cAAqB,EACrB,cAAc,EACd,eAAuB,EACvB,iBAAiB,EACjB,GAAW,EACX,YAAY,EACZ,WAAmB,EACnB,MAAc,EACd,SAAc,EACd,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,aAAa,2CA2Ef"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAqGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","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 { IconSlotContext } 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. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\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  /** 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']} 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=\"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              <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"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":";;;;;;;AAwCA,SAAwBA,EAAS;AAAA,EAC/B,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC,IAAyB;AAAA,EACzB,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAY;AAAA,IAChBC,EAAO,WAAW;AAAA,IAClBP,IAAcO,EAAO,wBAAwB,IAAI;AAAA,IACjDN,IAASM,EAAO,mBAAmB,IAAI;AAAA,IACvCL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAM,EAAC,UAAA,EAAO,WAAWF,GAAW,MAAAF,GAAY,UAAAD,GAAqB,GAAGE,GAChE,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACxC,UAAA;AAAA,IAAAb,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWD,EAAO,iBAAiB,GACtC,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAAG,eAAW,IAC/D,4BAACG,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,eACC,gBAAAF,EAACG,GAAA,EAAK,OAAO,gBAAAH,EAACI,KAAyB,GAAI,MAAK,MAAK,EAAA,CAEzD,GACF,GACF;AAAA,IAEF,gBAAAH,EAAC,OAAA,EAAI,WAAWF,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,kBAAkB,GAAI,UAAAjB,GAAM;AAAA,QACnDC,KAAkBC,MAA2B,YAC5C,gBAAAgB,EAAC,UAAK,WAAWD,EAAO,mCAAmC,GACxD,UAAAhB,EAAA,CACH;AAAA,QAEDM,uBACE,QAAA,EAAK,WAAWU,EAAO,0BAA0B,GAAG,eAAW,IAC7D,UAAAV,EAAA,CACH;AAAA,QAEDC,KAAO,gBAAAU,EAACK,GAAA,EAAI,OAAM,MAAA,CAAM;AAAA,QACxBd,KAAgB,QAAQA,IAAe,KACtC,gBAAAS;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,OAAOf;AAAA,YACP,UAAS;AAAA,YACT,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,GAEJ;AAAA,MACCR,KAAkBC,MAA2B,WAC5C,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC5C,UAAA,gBAAAC,EAAC,UAAK,WAAWD,EAAO,kCAAkC,GACvD,aACH,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IACCX,KACC,gBAAAY,EAAC,OAAA,EAAI,WAAWD,EAAO,kBAAkB,GACvC,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACTD,EAAO,4BAA4B;AAAA,UAClCZ,IAEG,KADAY,EAAO,mCAAmC;AAAA,QAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEX,4BAACG,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,UAAAf,KAAkB,gBAAAa,EAACG,KAAK,OAAO,gBAAAH,EAACO,KAAU,GAAI,MAAK,MAAK,EAAA,CAC3D;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"MenuItem.js","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 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  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\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  /** 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 */\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    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=\"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              <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","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"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"}

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

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

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

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

package/dist/components/message-separator/MessageSeparator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAoBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeL,GAASH,EAAeE,CAAI,EAE3CO,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBR,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAI,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAC9C,SAAAF,EACH,EAECN,IAAS,gBAAkBE,GAC1BQ,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASL,EACT,aAAW,iCAEX,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAC3C,WAAA,CAAA,CAAA,CAET,EAEJ,EAGF,OACEF,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAL,IAAS,cACRU,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,iCAAiC,EAAG,cAAW,GACpE,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,EAAG,EACjE,EACCC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}
+{"version":3,"file":"MessageSeparator.cjs","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>{displayLabel}</span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div\n            className={styles['message-separator__reply-gutter']}\n            aria-hidden\n          >\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":"kSAoBMA,EAAuD,CAC3D,KAAM,QACN,eAAgB,eAChB,cAAe,WACjB,EAOA,SAAwBC,EAAiB,CACvC,KAAAC,EAAO,OACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAeL,GAASH,EAAeE,CAAI,EAE3CO,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BA,EAAAA,QACE,sBAAsBR,IAAS,eAAiB,MAAQA,IAAS,cAAgB,QAAU,MAAM,EACnG,EACAI,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,0BAA0B,EAC/C,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,yBAAyB,EAAI,SAAAF,EAAa,EAEjEN,IAAS,gBAAkBE,GAC1BQ,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,QAASL,EACT,aAAW,iCAEX,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,GAEX,eAACI,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOD,EAAAA,IAACE,IAAoB,CAAA,CAAI,CAAA,CAAA,EAC3C,WAAA,CAAA,CAAA,CAET,EAEJ,EAGF,OACEF,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAW,KAAK,YAAa,GAAGF,EAC7C,SAAAL,IAAS,cACRU,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,iCAAiC,EACnD,cAAW,GAEX,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,qCAAqC,CAAA,CAAG,CAAA,CAAA,EAEhEC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CACE,SAAA,CAAAH,MAAC,OAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAAG,cAAW,GAAC,EAC9DC,QACA,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAAG,cAAW,EAAA,CAAC,CAAA,CAAA,CACjE,CAAA,CAEJ,CAEJ"}

package/dist/components/message-separator/MessageSeparator.css

@@ -1 +1 @@
-@charset "UTF-8";._message-separator_1c3en_3{display:flex;align-items:center;gap:var(--spacing-m);padding:var(--spacing-s) 0;width:100%}._message-separator__line_1c3en_10{flex:1 0 0;min-width:4px;height:1px;background-color:rgba(var(--center-channel-color-rgb),.12)}._message-separator__label_1c3en_16{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0}._message-separator__text_1c3en_22{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--center-channel-color);white-space:nowrap}._message-separator__summarize_1c3en_30{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--color-warning-rgb),.08);color:var(--new-message-separator, var(--color-warning));font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-transition)}._message-separator__summarize_1c3en_30:hover{background-color:rgba(var(--color-warning-rgb),.14)}._message-separator__summarize_1c3en_30:focus-visible{outline:2px solid var(--new-message-separator, var(--color-warning));outline-offset:1px}._message-separator__summarize-icon_1c3en_54{display:inline-flex;align-items:center;flex-shrink:0}._message-separator__reply-gutter_1c3en_62{display:flex;flex-shrink:0;align-items:center;width:var(--icon-size-32)}._message-separator__reply-line-start_1c3en_68{width:100%;height:1px;background-color:rgba(var(--center-channel-color-rgb),.12)}._message-separator--date_1c3en_73 ._message-separator__text_1c3en_22{color:var(--center-channel-color)}._message-separator--new_1c3en_76 ._message-separator__line_1c3en_10{background-color:var(--new-message-separator, var(--color-warning))}._message-separator--new_1c3en_76 ._message-separator__text_1c3en_22{color:var(--new-message-separator, var(--color-warning))}._message-separator--reply_1c3en_82{gap:var(--spacing-m);padding:var(--spacing-xs) var(--spacing-xxl)}._message-separator--reply_1c3en_82 ._message-separator__line_1c3en_10{background-color:rgba(var(--center-channel-color-rgb),.12)}._message-separator--reply_1c3en_82 ._message-separator__text_1c3en_22{color:rgba(var(--center-channel-color-rgb),.75)}
+@charset "UTF-8";._message-separator_143l5_3{display:flex;align-items:center;gap:var(--spacing-m);padding:var(--spacing-xxxs) 0;width:100%}._message-separator__line_143l5_10{flex:1 0 0;min-width:4px;height:1px;background-color:rgba(var(--center-channel-color-rgb),.12)}._message-separator__label_143l5_16{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0}._message-separator__text_143l5_22{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--center-channel-color);white-space:nowrap}._message-separator__summarize_143l5_30{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxxs) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--color-warning-rgb),.08);color:var(--new-message-separator, var(--color-warning));font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-transition)}._message-separator__summarize_143l5_30:hover{background-color:rgba(var(--color-warning-rgb),.14)}._message-separator__summarize_143l5_30:focus-visible{outline:2px solid var(--new-message-separator, var(--color-warning));outline-offset:1px}._message-separator__summarize-icon_143l5_54{display:inline-flex;align-items:center;flex-shrink:0}._message-separator__reply-gutter_143l5_62{display:flex;flex-shrink:0;align-items:center;width:var(--icon-size-32)}._message-separator__reply-line-start_143l5_68{width:100%;height:1px;background-color:rgba(var(--center-channel-color-rgb),.12)}._message-separator--date_143l5_73 ._message-separator__text_143l5_22{color:var(--center-channel-color)}._message-separator--new_143l5_76 ._message-separator__line_143l5_10{background-color:var(--new-message-separator, var(--color-warning))}._message-separator--new_143l5_76 ._message-separator__text_143l5_22{color:var(--new-message-separator, var(--color-warning))}._message-separator--reply_143l5_82{padding:var(--spacing-xxxs) var(--spacing-xxl)}

package/dist/components/message-separator/MessageSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC;AAE3E,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,wCAAwC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAa,EACb,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAyDvB"}
+{"version":3,"file":"MessageSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC;AAE3E,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,wCAAwC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAa,EACb,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CA0DvB"}

package/dist/components/message-separator/MessageSeparator.js

@@ -43,7 +43,14 @@ function w({
     )
   ] });
   return /* @__PURE__ */ a("div", { className: p, role: "separator", ...c, children: s === "reply-count" ? /* @__PURE__ */ r(i, { children: [
-    /* @__PURE__ */ a("div", { className: e["message-separator__reply-gutter"], "aria-hidden": !0, children: /* @__PURE__ */ a("div", { className: e["message-separator__reply-line-start"] }) }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: e["message-separator__reply-gutter"],
+        "aria-hidden": !0,
+        children: /* @__PURE__ */ a("div", { className: e["message-separator__reply-line-start"] })
+      }
+    ),
     t,
     /* @__PURE__ */ a("div", { className: e["message-separator__line"], "aria-hidden": !0 })
   ] }) : /* @__PURE__ */ r(i, { children: [

package/dist/components/message-separator/MessageSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>\n        {displayLabel}\n      </span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div className={styles['message-separator__reply-gutter']} aria-hidden>\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAoBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeL,KAASH,EAAeE,CAAI,GAE3CO,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBR,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAI;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAC9C,UAAAF,GACH;AAAA,IAECN,MAAS,kBAAkBE,KAC1B,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASL;AAAA,QACT,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAET,GAEJ;AAGF,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAL,MAAS,gBACR,gBAAAU,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWH,EAAO,iCAAiC,GAAG,eAAW,IACpE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,GAAG,GACjE;AAAA,IACCC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}
+{"version":3,"file":"MessageSeparator.js","sources":["../../../src/components/message-separator/MessageSeparator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport CreationOutlineIcon from '@mattermost/compass-icons/components/creation-outline';\nimport styles from './MessageSeparator.module.scss';\n\nexport type MessageSeparatorType = 'date' | 'new-messages' | 'reply-count';\n\nexport interface MessageSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  /** Separator variant. Default: Date. */\n  type?: MessageSeparatorType;\n  /** Label text. Defaults: 'Today' / 'New messages' / '4 replies'. */\n  label?: string;\n  /** Show AI summarize button (New Messages type only). Default: false. */\n  showAiSummary?: boolean;\n  /** Called when Summarize button is clicked. */\n  onSummarize?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst DEFAULT_LABELS: Record<MessageSeparatorType, string> = {\n  date: 'Today',\n  'new-messages': 'New messages',\n  'reply-count': '4 replies',\n};\n\n/**\n * Message Separators sit between messages in the stream to group them — by day, by reply\n * count, or to mark the boundary between read and unread. They help readers orient\n * themselves when scrolling back through history or returning to a busy channel.\n */\nexport default function MessageSeparator({\n  type = 'date',\n  label,\n  showAiSummary = false,\n  onSummarize,\n  className = '',\n  ...rest\n}: MessageSeparatorProps) {\n  const displayLabel = label ?? DEFAULT_LABELS[type];\n\n  const rootClass = [\n    styles['message-separator'],\n    styles[\n      `message-separator--${type === 'new-messages' ? 'new' : type === 'reply-count' ? 'reply' : 'date'}`\n    ],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelBlock = (\n    <div className={styles['message-separator__label']}>\n      <span className={styles['message-separator__text']}>{displayLabel}</span>\n\n      {type === 'new-messages' && showAiSummary && (\n        <button\n          type=\"button\"\n          className={styles['message-separator__summarize']}\n          onClick={onSummarize}\n          aria-label=\"Summarize new messages with AI\"\n        >\n          <span\n            className={styles['message-separator__summarize-icon']}\n            aria-hidden\n          >\n            <Icon size=\"12\" glyph={<CreationOutlineIcon />} />\n          </span>\n          Summarize\n        </button>\n      )}\n    </div>\n  );\n\n  return (\n    <div className={rootClass} role=\"separator\" {...rest}>\n      {type === 'reply-count' ? (\n        <>\n          <div\n            className={styles['message-separator__reply-gutter']}\n            aria-hidden\n          >\n            <div className={styles['message-separator__reply-line-start']} />\n          </div>\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      ) : (\n        <>\n          <div className={styles['message-separator__line']} aria-hidden />\n          {labelBlock}\n          <div className={styles['message-separator__line']} aria-hidden />\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","MessageSeparator","type","label","showAiSummary","onSummarize","className","rest","displayLabel","rootClass","styles","labelBlock","jsxs","jsx","Icon","CreationOutlineIcon","Fragment"],"mappings":";;;;AAoBA,MAAMA,IAAuD;AAAA,EAC3D,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAOA,SAAwBC,EAAiB;AAAA,EACvC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAeL,KAASH,EAAeE,CAAI,GAE3CO,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BA,EACE,sBAAsBR,MAAS,iBAAiB,QAAQA,MAAS,gBAAgB,UAAU,MAAM,EACnG;AAAA,IACAI;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELK,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAO,0BAA0B,GAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,yBAAyB,GAAI,UAAAF,GAAa;AAAA,IAEjEN,MAAS,kBAAkBE,KAC1B,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWF,EAAO,8BAA8B;AAAA,QAChD,SAASL;AAAA,QACT,cAAW;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,mCAAmC;AAAA,cACrD,eAAW;AAAA,cAEX,4BAACI,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAD,EAACE,KAAoB,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAET,GAEJ;AAGF,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAWJ,GAAW,MAAK,aAAa,GAAGF,GAC7C,UAAAL,MAAS,gBACR,gBAAAU,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,EAAO,iCAAiC;AAAA,QACnD,eAAW;AAAA,QAEX,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qCAAqC,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhEC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,IAEA,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAI,WAAWH,EAAO,yBAAyB,GAAG,eAAW,IAAC;AAAA,IAC9DC;AAAA,sBACA,OAAA,EAAI,WAAWD,EAAO,yBAAyB,GAAG,eAAW,GAAA,CAAC;AAAA,EAAA,EAAA,CACjE,EAAA,CAEJ;AAEJ;"}

package/dist/components/message-separator/MessageSeparator.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageSeparator.css');const e={"message-separator":"_message-separator_1c3en_3","message-separator__line":"_message-separator__line_1c3en_10","message-separator__label":"_message-separator__label_1c3en_16","message-separator__text":"_message-separator__text_1c3en_22","message-separator__summarize":"_message-separator__summarize_1c3en_30","message-separator__summarize-icon":"_message-separator__summarize-icon_1c3en_54","message-separator__reply-gutter":"_message-separator__reply-gutter_1c3en_62","message-separator__reply-line-start":"_message-separator__reply-line-start_1c3en_68","message-separator--date":"_message-separator--date_1c3en_73","message-separator--new":"_message-separator--new_1c3en_76","message-separator--reply":"_message-separator--reply_1c3en_82"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageSeparator.css');const e={"message-separator":"_message-separator_143l5_3","message-separator__line":"_message-separator__line_143l5_10","message-separator__label":"_message-separator__label_143l5_16","message-separator__text":"_message-separator__text_143l5_22","message-separator__summarize":"_message-separator__summarize_143l5_30","message-separator__summarize-icon":"_message-separator__summarize-icon_143l5_54","message-separator__reply-gutter":"_message-separator__reply-gutter_143l5_62","message-separator__reply-line-start":"_message-separator__reply-line-start_143l5_68","message-separator--date":"_message-separator--date_143l5_73","message-separator--new":"_message-separator--new_143l5_76","message-separator--reply":"_message-separator--reply_143l5_82"};exports.default=e;
 //# sourceMappingURL=MessageSeparator.module.scss.cjs.map