@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.6

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 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.\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\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            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            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            <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\n            {onToggleCollapse != null && (\n              <button\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                aria-label=\"Collapse image preview\"\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon","MenuDownIcon"],"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 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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"}

package/dist/components/image-preview/ImagePreview.module.css

@@ -1 +1 @@
-._image-preview_y3zdk_2{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;min-width:0}._image-preview__stage_y3zdk_9{display:grid;align-items:start;container-type:inline-size;width:428px;max-width:100%}._image-preview__stage_y3zdk_9>*{grid-area:1/1}._image-preview__frame_y3zdk_19{position:relative;box-sizing:border-box;border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);overflow:hidden;width:100%;height:0;opacity:0;transform:scale(.98);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit),height var(--duration-quick) var(--ease-exit),border-color var(--duration-quick) var(--ease-exit),box-shadow var(--duration-quick) var(--ease-exit)}._image-preview__frame--visible_y3zdk_33{height:56.25cqw;opacity:1;transform:scale(1);pointer-events:auto;overflow:visible;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance),height var(--duration-quick) var(--ease-entrance),box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._image-preview__frame_y3zdk_19:not(._image-preview__frame--visible_y3zdk_33){border-color:transparent;box-shadow:none}._image-preview__frame_y3zdk_19:hover{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._image-preview__media_y3zdk_50{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:calc(var(--radius-s) - 1px)}._image-preview--ratio-4-3_y3zdk_56 ._image-preview__stage_y3zdk_9{width:320px}._image-preview--ratio-4-3_y3zdk_56 ._image-preview__frame--visible_y3zdk_33{height:75cqw}._image-preview--ratio-1-1_y3zdk_62 ._image-preview__stage_y3zdk_9{width:240px}._image-preview--ratio-1-1_y3zdk_62 ._image-preview__frame--visible_y3zdk_33{height:100cqw}._image-preview__img_y3zdk_68{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}._image-preview__actions_y3zdk_77{position:absolute;top:var(--spacing-s);right:var(--spacing-s);display:flex;gap:0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);padding:var(--spacing-xxxxs);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_y3zdk_19:hover ._image-preview__actions_y3zdk_77{opacity:1}._image-preview__collapse-btn_y3zdk_94{position:absolute;top:-4px;left:-4px;display:flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-full);box-shadow:var(--elevation-1);padding:var(--spacing-xxxs);cursor:pointer;color:var(--center-channel-color);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_y3zdk_19:hover ._image-preview__collapse-btn_y3zdk_94{opacity:1}._image-preview--collapsed_y3zdk_114{min-height:0}._image-preview__collapsed-trigger_y3zdk_117{background:transparent;border:none;cursor:pointer;padding:0;opacity:0;transform:translateY(-2px);transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}._image-preview__collapsed-trigger--visible_y3zdk_126{opacity:1;transform:translateY(0);transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._image-preview__show-label_y3zdk_131{display:flex;align-items:center;gap:1px;padding-right:var(--spacing-s);border-radius:var(--radius-s);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;color:rgba(var(--center-channel-color-rgb),.75)}._image-preview__show-icon_y3zdk_142{display:inline-flex;align-items:center;width:var(--icon-size-12);font-size:var(--font-size-100);color:rgba(var(--center-channel-color-rgb),.75)}
+._image-preview_nf3bn_2{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;min-width:0}._image-preview__stage_nf3bn_9{display:grid;align-items:start;container-type:inline-size;width:428px;max-width:100%}._image-preview__stage_nf3bn_9>*{grid-area:1/1}._image-preview__frame_nf3bn_19{position:relative;box-sizing:border-box;border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);overflow:hidden;width:100%;height:0;opacity:0;transform:scale(.98);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit),height var(--duration-quick) var(--ease-exit),border-color var(--duration-quick) var(--ease-exit),box-shadow var(--duration-quick) var(--ease-exit)}._image-preview__frame--visible_nf3bn_33{height:56.25cqw;opacity:1;transform:scale(1);pointer-events:auto;overflow:visible;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance),height var(--duration-quick) var(--ease-entrance),box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:not(._image-preview__frame--visible_nf3bn_33){border-color:transparent;box-shadow:none}._image-preview__frame_nf3bn_19:hover,._image-preview__frame_nf3bn_19:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._image-preview__media_nf3bn_50{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:calc(var(--radius-s) - 1px)}._image-preview--ratio-4-3_nf3bn_56 ._image-preview__stage_nf3bn_9{width:320px}._image-preview--ratio-4-3_nf3bn_56 ._image-preview__frame--visible_nf3bn_33{height:75cqw}._image-preview--ratio-1-1_nf3bn_62 ._image-preview__stage_nf3bn_9{width:240px}._image-preview--ratio-1-1_nf3bn_62 ._image-preview__frame--visible_nf3bn_33{height:100cqw}._image-preview__img_nf3bn_68{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}._image-preview__actions_nf3bn_77{position:absolute;top:var(--spacing-s);right:var(--spacing-s);display:flex;gap:0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);padding:var(--spacing-xxxxs);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:hover ._image-preview__actions_nf3bn_77,._image-preview__frame_nf3bn_19:focus-within ._image-preview__actions_nf3bn_77{opacity:1}._image-preview__collapse-btn_nf3bn_94{position:absolute;top:-4px;left:-4px;display:flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-full);box-shadow:var(--elevation-1);padding:var(--spacing-xxxs);cursor:pointer;color:var(--center-channel-color);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_nf3bn_19:hover ._image-preview__collapse-btn_nf3bn_94,._image-preview__frame_nf3bn_19:focus-within ._image-preview__collapse-btn_nf3bn_94{opacity:1}._image-preview--collapsed_nf3bn_114{min-height:0}._image-preview__collapsed-trigger_nf3bn_117{background:transparent;border:none;cursor:pointer;padding:0;opacity:0;transform:translateY(-2px);transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}._image-preview__collapsed-trigger--visible_nf3bn_126{opacity:1;transform:translateY(0);transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._image-preview__show-label_nf3bn_131{display:flex;align-items:center;gap:1px;padding-right:var(--spacing-s);border-radius:var(--radius-s);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;color:rgba(var(--center-channel-color-rgb),.75)}._image-preview__show-icon_nf3bn_142{display:inline-flex;align-items:center;width:var(--icon-size-12);font-size:var(--font-size-100);color:rgba(var(--center-channel-color-rgb),.75)}

package/dist/components/image-preview/ImagePreview.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ImagePreview.module.css');const e={"image-preview":"_image-preview_y3zdk_2","image-preview__stage":"_image-preview__stage_y3zdk_9","image-preview__frame":"_image-preview__frame_y3zdk_19","image-preview__frame--visible":"_image-preview__frame--visible_y3zdk_33","image-preview__media":"_image-preview__media_y3zdk_50","image-preview--ratio-4-3":"_image-preview--ratio-4-3_y3zdk_56","image-preview--ratio-1-1":"_image-preview--ratio-1-1_y3zdk_62","image-preview__img":"_image-preview__img_y3zdk_68","image-preview__actions":"_image-preview__actions_y3zdk_77","image-preview__collapse-btn":"_image-preview__collapse-btn_y3zdk_94","image-preview--collapsed":"_image-preview--collapsed_y3zdk_114","image-preview__collapsed-trigger":"_image-preview__collapsed-trigger_y3zdk_117","image-preview__collapsed-trigger--visible":"_image-preview__collapsed-trigger--visible_y3zdk_126","image-preview__show-label":"_image-preview__show-label_y3zdk_131","image-preview__show-icon":"_image-preview__show-icon_y3zdk_142"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ImagePreview.module.css');const e={"image-preview":"_image-preview_nf3bn_2","image-preview__stage":"_image-preview__stage_nf3bn_9","image-preview__frame":"_image-preview__frame_nf3bn_19","image-preview__frame--visible":"_image-preview__frame--visible_nf3bn_33","image-preview__media":"_image-preview__media_nf3bn_50","image-preview--ratio-4-3":"_image-preview--ratio-4-3_nf3bn_56","image-preview--ratio-1-1":"_image-preview--ratio-1-1_nf3bn_62","image-preview__img":"_image-preview__img_nf3bn_68","image-preview__actions":"_image-preview__actions_nf3bn_77","image-preview__collapse-btn":"_image-preview__collapse-btn_nf3bn_94","image-preview--collapsed":"_image-preview--collapsed_nf3bn_114","image-preview__collapsed-trigger":"_image-preview__collapsed-trigger_nf3bn_117","image-preview__collapsed-trigger--visible":"_image-preview__collapsed-trigger--visible_nf3bn_126","image-preview__show-label":"_image-preview__show-label_nf3bn_131","image-preview__show-icon":"_image-preview__show-icon_nf3bn_142"};exports.default=e;
 //# sourceMappingURL=ImagePreview.module.scss.cjs.map

package/dist/components/image-preview/ImagePreview.module.scss.js

@@ -1,19 +1,19 @@
 import './ImagePreview.module.css';const e = {
-  "image-preview": "_image-preview_y3zdk_2",
-  "image-preview__stage": "_image-preview__stage_y3zdk_9",
-  "image-preview__frame": "_image-preview__frame_y3zdk_19",
-  "image-preview__frame--visible": "_image-preview__frame--visible_y3zdk_33",
-  "image-preview__media": "_image-preview__media_y3zdk_50",
-  "image-preview--ratio-4-3": "_image-preview--ratio-4-3_y3zdk_56",
-  "image-preview--ratio-1-1": "_image-preview--ratio-1-1_y3zdk_62",
-  "image-preview__img": "_image-preview__img_y3zdk_68",
-  "image-preview__actions": "_image-preview__actions_y3zdk_77",
-  "image-preview__collapse-btn": "_image-preview__collapse-btn_y3zdk_94",
-  "image-preview--collapsed": "_image-preview--collapsed_y3zdk_114",
-  "image-preview__collapsed-trigger": "_image-preview__collapsed-trigger_y3zdk_117",
-  "image-preview__collapsed-trigger--visible": "_image-preview__collapsed-trigger--visible_y3zdk_126",
-  "image-preview__show-label": "_image-preview__show-label_y3zdk_131",
-  "image-preview__show-icon": "_image-preview__show-icon_y3zdk_142"
+  "image-preview": "_image-preview_nf3bn_2",
+  "image-preview__stage": "_image-preview__stage_nf3bn_9",
+  "image-preview__frame": "_image-preview__frame_nf3bn_19",
+  "image-preview__frame--visible": "_image-preview__frame--visible_nf3bn_33",
+  "image-preview__media": "_image-preview__media_nf3bn_50",
+  "image-preview--ratio-4-3": "_image-preview--ratio-4-3_nf3bn_56",
+  "image-preview--ratio-1-1": "_image-preview--ratio-1-1_nf3bn_62",
+  "image-preview__img": "_image-preview__img_nf3bn_68",
+  "image-preview__actions": "_image-preview__actions_nf3bn_77",
+  "image-preview__collapse-btn": "_image-preview__collapse-btn_nf3bn_94",
+  "image-preview--collapsed": "_image-preview--collapsed_nf3bn_114",
+  "image-preview__collapsed-trigger": "_image-preview__collapsed-trigger_nf3bn_117",
+  "image-preview__collapsed-trigger--visible": "_image-preview__collapsed-trigger--visible_nf3bn_126",
+  "image-preview__show-label": "_image-preview__show-label_nf3bn_131",
+  "image-preview__show-icon": "_image-preview__show-icon_nf3bn_142"
 };
 export {
   e as default

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']}>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"kaAuCA,SAAwBA,EAAS,CAC/B,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBP,EAAcO,EAAAA,QAAO,wBAAwB,EAAI,GACjDN,EAASM,EAAAA,QAAO,mBAAmB,EAAI,GACvCL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,SAAA,CAAO,UAAWF,EAAW,KAAAF,EAAY,SAAAD,EAAqB,GAAGE,EAChE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAb,GACCc,EAAAA,IAAC,OAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAChD,SAAAd,GACCe,EAAAA,IAACE,WAAK,MAAOF,EAAAA,IAACG,IAAyB,EAAI,KAAK,IAAA,CAAK,CAAA,CAEzD,CAAA,CACF,EAEFF,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAjB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CgB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAhB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWU,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAV,CAAA,CACH,EAEDC,GAAOU,EAAAA,IAACI,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBb,GAAgB,MAAQA,EAAe,GACtCS,EAAAA,IAACK,EAAAA,QAAA,CACC,MAAOd,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCR,GAAkBC,IAA2B,SAC5CgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCX,GACCY,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCZ,EAEG,GADAY,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAZ,SAAmBe,EAAAA,QAAA,CAAK,YAAQI,EAAA,CAAA,CAAU,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,CAC3D,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"kaAuCA,SAAwBA,EAAS,CAC/B,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAkB,CAChB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBP,EAAcO,EAAAA,QAAO,wBAAwB,EAAI,GACjDN,EAASM,EAAAA,QAAO,mBAAmB,EAAI,GACvCL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,SAAA,CAAO,UAAWF,EAAW,KAAAF,EAAY,SAAAD,EAAqB,GAAGE,EAChE,SAAAI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACxC,SAAA,CAAAb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC9D,SAAAd,GACCe,EAAAA,IAACE,EAAAA,QAAA,CAAK,MAAOF,EAAAA,IAACG,IAAyB,EAAI,KAAK,IAAA,CAAK,CAAA,CAEzD,CAAA,CACF,EAEFF,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAjB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CgB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAhB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWU,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAV,CAAA,CACH,EAEDC,GAAOU,EAAAA,IAACI,EAAAA,QAAA,CAAI,MAAM,KAAA,CAAM,EACxBb,GAAgB,MAAQA,EAAe,GACtCS,EAAAA,IAACK,EAAAA,QAAA,CACC,MAAOd,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCR,GAAkBC,IAA2B,SAC5CgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCX,GACCY,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCZ,EAEG,GADAY,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAZ,SAAmBe,EAAAA,QAAA,CAAK,YAAQI,EAAA,CAAA,CAAU,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,CAC3D,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}

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

@@ -8,13 +8,13 @@ import i from "./MenuItem.module.scss.js";
 function O({
   label: c,
   secondaryLabel: m,
-  secondaryLabelPosition: t = "below",
+  secondaryLabelPosition: a = "below",
   leadingVisual: o,
   leadingElement: u = !0,
-  trailingVisual: a,
-  trailingElement: _ = !1,
+  trailingVisual: t,
+  trailingElement: d = !1,
   customStatusEmoji: s,
-  tag: d = !1,
+  tag: _ = !1,
   mentionCount: l,
   destructive: h = !1,
   active: p = !1,
@@ -30,13 +30,13 @@ function O({
     f
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e("button", { className: b, type: v, disabled: N, ...g, children: /* @__PURE__ */ n("div", { className: i["menu-item__content"], children: [
-    u && /* @__PURE__ */ e("div", { className: i["menu-item__left"], children: /* @__PURE__ */ e("span", { className: i["menu-item__leading-visual"], children: o ?? /* @__PURE__ */ e(r, { glyph: /* @__PURE__ */ e(w, {}), size: "16" }) }) }),
+    u && /* @__PURE__ */ e("div", { className: i["menu-item__left"], children: /* @__PURE__ */ e("span", { className: i["menu-item__leading-visual"], "aria-hidden": !0, children: o ?? /* @__PURE__ */ e(r, { glyph: /* @__PURE__ */ e(w, {}), 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 }),
+        m && a === "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 }),
-        d && /* @__PURE__ */ e(j, { label: "NEW" }),
+        _ && /* @__PURE__ */ e(j, { label: "NEW" }),
         l != null && l > 0 && /* @__PURE__ */ e(
           x,
           {
@@ -46,16 +46,16 @@ function O({
           }
         )
       ] }),
-      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 }) })
+      m && a === "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(
+    d && /* @__PURE__ */ e("div", { className: i["menu-item__right"], children: /* @__PURE__ */ e(
       "span",
       {
         className: [
           i["menu-item__trailing-visual"],
-          a ? "" : i["menu-item__trailing-visual--check"]
+          t ? "" : i["menu-item__trailing-visual--check"]
         ].filter(Boolean).join(" "),
-        children: a ?? /* @__PURE__ */ e(r, { glyph: /* @__PURE__ */ e(I, {}), size: "16" })
+        children: t ?? /* @__PURE__ */ e(r, { glyph: /* @__PURE__ */ e(I, {}), size: "16" })
       }
     ) })
   ] }) });

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 Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']}>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":";;;;;;;AAuCA,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,SAAI,WAAWD,EAAO,iBAAiB,GACtC,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAChD,UAAAd,KACC,gBAAAe,EAACE,KAAK,OAAO,gBAAAF,EAACG,KAAyB,GAAI,MAAK,KAAA,CAAK,EAAA,CAEzD,EAAA,CACF;AAAA,IAEF,gBAAAF,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,EAACI,GAAA,EAAI,OAAM,MAAA,CAAM;AAAA,QACxBb,KAAgB,QAAQA,IAAe,KACtC,gBAAAS;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAOd;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,QAEV,UAAAZ,uBAAmBe,GAAA,EAAK,yBAAQI,GAAA,CAAA,CAAU,GAAI,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA,EAC3D,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}
+{"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 Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label text. */\n  label: string;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nexport default function MenuItem({\n  label,\n  secondaryLabel,\n  secondaryLabelPosition = 'below',\n  leadingVisual,\n  leadingElement = true,\n  trailingVisual,\n  trailingElement = false,\n  customStatusEmoji,\n  tag = false,\n  mentionCount,\n  destructive = false,\n  active = false,\n  className = '',\n  disabled,\n  type = 'button',\n  ...rest\n}: MenuItemProps) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              {leadingVisual ?? (\n                <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n              )}\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label=\"NEW\" />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n}\n"],"names":["MenuItem","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","mentionCount","destructive","active","className","disabled","type","rest","rootClass","styles","jsx","jsxs","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":";;;;;;;AAuCA,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,IAC9D,UAAAd,KACC,gBAAAe,EAACE,GAAA,EAAK,OAAO,gBAAAF,EAACG,KAAyB,GAAI,MAAK,KAAA,CAAK,EAAA,CAEzD,EAAA,CACF;AAAA,IAEF,gBAAAF,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,EAACI,GAAA,EAAI,OAAM,MAAA,CAAM;AAAA,QACxBb,KAAgB,QAAQA,IAAe,KACtC,gBAAAS;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAOd;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,QAEV,UAAAZ,uBAAmBe,GAAA,EAAK,yBAAQI,GAAA,CAAA,CAAU,GAAI,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA,EAC3D,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

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

@@ -1 +1 @@
-._menu-item_174d8_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_174d8_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_174d8_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_174d8_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_174d8_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_174d8_27:not(:disabled) ._menu-item__leading-visual_174d8_30,._menu-item--active_174d8_27:not(:disabled) ._menu-item__trailing-visual_174d8_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_174d8_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_174d8_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_174d8_2:disabled{cursor:not-allowed}._menu-item_174d8_2:disabled ._menu-item__content_174d8_44{opacity:.4}._menu-item__content_174d8_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_174d8_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_174d8_30,._menu-item__trailing-visual_174d8_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_174d8_65{color:var(--button-bg)}._menu-item__middle_174d8_68{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_174d8_79{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_174d8_87{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}._menu-item__secondary-label-inline_174d8_94{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_174d8_102{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_174d8_109{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_174d8_120{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_174d8_129{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_174d8_135,._menu-item--destructive_174d8_135 ._menu-item__leading-visual_174d8_30,._menu-item--destructive_174d8_135 ._menu-item__trailing-visual_174d8_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_174d8_135:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_174d8_135:hover:not(:disabled) ._menu-item__leading-visual_174d8_30,._menu-item--destructive_174d8_135:hover:not(:disabled) ._menu-item__trailing-visual_174d8_31{color:inherit}._menu-item--destructive_174d8_135:active:not(:disabled){background:linear-gradient(0deg,#0000001a,#0000001a),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_174d8_135:active:not(:disabled) ._menu-item__leading-visual_174d8_30,._menu-item--destructive_174d8_135:active:not(:disabled) ._menu-item__trailing-visual_174d8_31{color:inherit}._menu-item--destructive_174d8_135:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--color-neutral-0-rgb),.6);color:var(--button-color)}._menu-item--destructive_174d8_135:focus-visible ._menu-item__leading-visual_174d8_30,._menu-item--destructive_174d8_135:focus-visible ._menu-item__trailing-visual_174d8_31{color:inherit}
+._menu-item_1nhr4_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1nhr4_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nhr4_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1nhr4_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nhr4_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nhr4_27:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--active_1nhr4_27:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1nhr4_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1nhr4_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nhr4_2:disabled{cursor:not-allowed}._menu-item_1nhr4_2:disabled ._menu-item__content_1nhr4_44{opacity:.4}._menu-item__content_1nhr4_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1nhr4_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1nhr4_30,._menu-item__trailing-visual_1nhr4_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_1nhr4_65{color:var(--button-bg)}._menu-item__middle_1nhr4_68{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1nhr4_79{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1nhr4_87{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}._menu-item__secondary-label-inline_1nhr4_94{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1nhr4_102{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1nhr4_109{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1nhr4_120{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1nhr4_129{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_1nhr4_135,._menu-item--destructive_1nhr4_135 ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135 ._menu-item__trailing-visual_1nhr4_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1nhr4_135:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nhr4_135:hover:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:hover:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:inherit}._menu-item--destructive_1nhr4_135:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nhr4_135:active:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:active:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:inherit}._menu-item--destructive_1nhr4_135:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1nhr4_135:focus-visible ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:focus-visible ._menu-item__trailing-visual_1nhr4_31{color:inherit}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.module.css');const e={"menu-item":"_menu-item_174d8_2","menu-item--active":"_menu-item--active_174d8_27","menu-item__leading-visual":"_menu-item__leading-visual_174d8_30","menu-item__trailing-visual":"_menu-item__trailing-visual_174d8_31","menu-item__content":"_menu-item__content_174d8_44","menu-item__left":"_menu-item__left_174d8_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_174d8_65","menu-item__middle":"_menu-item__middle_174d8_68","menu-item__top-row":"_menu-item__top-row_174d8_79","menu-item__label":"_menu-item__label_174d8_87","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_174d8_94","menu-item__bottom-row":"_menu-item__bottom-row_174d8_102","menu-item__secondary-label-below":"_menu-item__secondary-label-below_174d8_109","menu-item__custom-status":"_menu-item__custom-status_174d8_120","menu-item__right":"_menu-item__right_174d8_129","menu-item--destructive":"_menu-item--destructive_174d8_135"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.module.css');const e={"menu-item":"_menu-item_1nhr4_2","menu-item--active":"_menu-item--active_1nhr4_27","menu-item__leading-visual":"_menu-item__leading-visual_1nhr4_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1nhr4_31","menu-item__content":"_menu-item__content_1nhr4_44","menu-item__left":"_menu-item__left_1nhr4_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1nhr4_65","menu-item__middle":"_menu-item__middle_1nhr4_68","menu-item__top-row":"_menu-item__top-row_1nhr4_79","menu-item__label":"_menu-item__label_1nhr4_87","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1nhr4_94","menu-item__bottom-row":"_menu-item__bottom-row_1nhr4_102","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1nhr4_109","menu-item__custom-status":"_menu-item__custom-status_1nhr4_120","menu-item__right":"_menu-item__right_1nhr4_129","menu-item--destructive":"_menu-item--destructive_1nhr4_135"};exports.default=e;
 //# sourceMappingURL=MenuItem.module.scss.cjs.map

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

@@ -1,20 +1,20 @@
 import './MenuItem.module.css';const _ = {
-  "menu-item": "_menu-item_174d8_2",
-  "menu-item--active": "_menu-item--active_174d8_27",
-  "menu-item__leading-visual": "_menu-item__leading-visual_174d8_30",
-  "menu-item__trailing-visual": "_menu-item__trailing-visual_174d8_31",
-  "menu-item__content": "_menu-item__content_174d8_44",
-  "menu-item__left": "_menu-item__left_174d8_53",
-  "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_174d8_65",
-  "menu-item__middle": "_menu-item__middle_174d8_68",
-  "menu-item__top-row": "_menu-item__top-row_174d8_79",
-  "menu-item__label": "_menu-item__label_174d8_87",
-  "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_174d8_94",
-  "menu-item__bottom-row": "_menu-item__bottom-row_174d8_102",
-  "menu-item__secondary-label-below": "_menu-item__secondary-label-below_174d8_109",
-  "menu-item__custom-status": "_menu-item__custom-status_174d8_120",
-  "menu-item__right": "_menu-item__right_174d8_129",
-  "menu-item--destructive": "_menu-item--destructive_174d8_135"
+  "menu-item": "_menu-item_1nhr4_2",
+  "menu-item--active": "_menu-item--active_1nhr4_27",
+  "menu-item__leading-visual": "_menu-item__leading-visual_1nhr4_30",
+  "menu-item__trailing-visual": "_menu-item__trailing-visual_1nhr4_31",
+  "menu-item__content": "_menu-item__content_1nhr4_44",
+  "menu-item__left": "_menu-item__left_1nhr4_53",
+  "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1nhr4_65",
+  "menu-item__middle": "_menu-item__middle_1nhr4_68",
+  "menu-item__top-row": "_menu-item__top-row_1nhr4_79",
+  "menu-item__label": "_menu-item__label_1nhr4_87",
+  "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1nhr4_94",
+  "menu-item__bottom-row": "_menu-item__bottom-row_1nhr4_102",
+  "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1nhr4_109",
+  "menu-item__custom-status": "_menu-item__custom-status_1nhr4_120",
+  "menu-item__right": "_menu-item__right_1nhr4_129",
+  "menu-item--destructive": "_menu-item--destructive_1nhr4_135"
 };
 export {
   _ as default

package/dist/components/message-reactions/MessageReactions.module.css

@@ -1 +1 @@
-._message-reactions_v1bab_2{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-xxxxs) 0}._message-reactions__pills_v1bab_9{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xxxs)}._message-reactions__pill_v1bab_9{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.08);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._message-reactions__pill_v1bab_9:hover{background-color:rgba(var(--center-channel-color-rgb),.12)}._message-reactions__pill_v1bab_9:focus-visible{outline:2px solid var(--link-color);outline-offset:1px}._message-reactions__pill--mine_v1bab_33{background-color:rgba(var(--link-color-rgb),.08);box-shadow:inset 0 0 0 1px var(--link-color)}._message-reactions__pill--mine_v1bab_33:hover{background-color:rgba(var(--link-color-rgb),.12)}._message-reactions__pill--mine_v1bab_33 ._message-reactions__pill-count_v1bab_40{color:var(--link-color)}._message-reactions__pill-emoji_v1bab_43{font-size:var(--font-size-200);line-height:var(--line-height-50)}._message-reactions__pill-count_v1bab_40{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:rgba(var(--center-channel-color-rgb),.56)}@media(hover:hover)and (pointer:fine){._message-reactions__add-reaction_v1bab_55{opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._message-reactions_v1bab_2:hover ._message-reactions__add-reaction_v1bab_55,._message-reactions_v1bab_2:focus-within ._message-reactions__add-reaction_v1bab_55{opacity:1;pointer-events:auto}}._message-reactions__ack_v1bab_65{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:rgba(var(--color-success-rgb),.12);color:var(--color-success);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition)}._message-reactions__ack_v1bab_65:hover{background-color:rgba(var(--color-success-rgb),.2)}._message-reactions__ack_v1bab_65:focus-visible{outline:2px solid var(--color-success);outline-offset:1px}._message-reactions__ack--active_v1bab_84{background-color:var(--color-success);color:var(--button-color)}._message-reactions__ack--active_v1bab_84:hover{background-image:linear-gradient(#00000014,#00000014);background-color:var(--color-success)}._message-reactions__ack-icon_v1bab_92{display:inline-flex;align-items:center}._message-reactions__ack-count_v1bab_96,._message-reactions__ack-label_v1bab_102{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75)}
+._message-reactions_7zl3e_2{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-xxxxs) 0}._message-reactions__pills_7zl3e_9{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xxxs)}._message-reactions__pill_7zl3e_9{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.08);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._message-reactions__pill_7zl3e_9:hover{background-color:rgba(var(--center-channel-color-rgb),.12)}._message-reactions__pill_7zl3e_9:focus-visible{outline:2px solid var(--link-color);outline-offset:1px}._message-reactions__pill--mine_7zl3e_33{background-color:rgba(var(--link-color-rgb),.08);box-shadow:inset 0 0 0 1px var(--link-color)}._message-reactions__pill--mine_7zl3e_33:hover{background-color:rgba(var(--link-color-rgb),.12)}._message-reactions__pill--mine_7zl3e_33 ._message-reactions__pill-count_7zl3e_40{color:var(--link-color)}._message-reactions__pill-emoji_7zl3e_43{font-size:var(--font-size-200);line-height:var(--line-height-50)}._message-reactions__pill-count_7zl3e_40{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:rgba(var(--center-channel-color-rgb),.56)}@media(hover:hover)and (pointer:fine){._message-reactions__add-reaction_7zl3e_55{opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._message-reactions_7zl3e_2:hover ._message-reactions__add-reaction_7zl3e_55,._message-reactions_7zl3e_2:focus-within ._message-reactions__add-reaction_7zl3e_55{opacity:1;pointer-events:auto}}._message-reactions__ack_7zl3e_65{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding:var(--spacing-xxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:rgba(var(--color-success-rgb),.12);color:var(--color-success);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition)}._message-reactions__ack_7zl3e_65:hover{background-color:rgba(var(--color-success-rgb),.2)}._message-reactions__ack_7zl3e_65:focus-visible{outline:2px solid var(--color-success);outline-offset:1px}._message-reactions__ack--active_7zl3e_84{background-color:var(--color-success);color:var(--button-color)}._message-reactions__ack--active_7zl3e_84:hover{background-color:color-mix(in srgb,black 8%,var(--color-success))}._message-reactions__ack-icon_7zl3e_91{display:inline-flex;align-items:center}._message-reactions__ack-count_7zl3e_95,._message-reactions__ack-label_7zl3e_101{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75)}

package/dist/components/message-reactions/MessageReactions.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageReactions.module.css');const e={"message-reactions":"_message-reactions_v1bab_2","message-reactions__pills":"_message-reactions__pills_v1bab_9","message-reactions__pill":"_message-reactions__pill_v1bab_9","message-reactions__pill--mine":"_message-reactions__pill--mine_v1bab_33","message-reactions__pill-count":"_message-reactions__pill-count_v1bab_40","message-reactions__pill-emoji":"_message-reactions__pill-emoji_v1bab_43","message-reactions__add-reaction":"_message-reactions__add-reaction_v1bab_55","message-reactions__ack":"_message-reactions__ack_v1bab_65","message-reactions__ack--active":"_message-reactions__ack--active_v1bab_84","message-reactions__ack-icon":"_message-reactions__ack-icon_v1bab_92","message-reactions__ack-count":"_message-reactions__ack-count_v1bab_96","message-reactions__ack-label":"_message-reactions__ack-label_v1bab_102"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MessageReactions.module.css');const e={"message-reactions":"_message-reactions_7zl3e_2","message-reactions__pills":"_message-reactions__pills_7zl3e_9","message-reactions__pill":"_message-reactions__pill_7zl3e_9","message-reactions__pill--mine":"_message-reactions__pill--mine_7zl3e_33","message-reactions__pill-count":"_message-reactions__pill-count_7zl3e_40","message-reactions__pill-emoji":"_message-reactions__pill-emoji_7zl3e_43","message-reactions__add-reaction":"_message-reactions__add-reaction_7zl3e_55","message-reactions__ack":"_message-reactions__ack_7zl3e_65","message-reactions__ack--active":"_message-reactions__ack--active_7zl3e_84","message-reactions__ack-icon":"_message-reactions__ack-icon_7zl3e_91","message-reactions__ack-count":"_message-reactions__ack-count_7zl3e_95","message-reactions__ack-label":"_message-reactions__ack-label_7zl3e_101"};exports.default=e;
 //# sourceMappingURL=MessageReactions.module.scss.cjs.map

package/dist/components/message-reactions/MessageReactions.module.scss.js

@@ -1,16 +1,16 @@
 import './MessageReactions.module.css';const e = {
-  "message-reactions": "_message-reactions_v1bab_2",
-  "message-reactions__pills": "_message-reactions__pills_v1bab_9",
-  "message-reactions__pill": "_message-reactions__pill_v1bab_9",
-  "message-reactions__pill--mine": "_message-reactions__pill--mine_v1bab_33",
-  "message-reactions__pill-count": "_message-reactions__pill-count_v1bab_40",
-  "message-reactions__pill-emoji": "_message-reactions__pill-emoji_v1bab_43",
-  "message-reactions__add-reaction": "_message-reactions__add-reaction_v1bab_55",
-  "message-reactions__ack": "_message-reactions__ack_v1bab_65",
-  "message-reactions__ack--active": "_message-reactions__ack--active_v1bab_84",
-  "message-reactions__ack-icon": "_message-reactions__ack-icon_v1bab_92",
-  "message-reactions__ack-count": "_message-reactions__ack-count_v1bab_96",
-  "message-reactions__ack-label": "_message-reactions__ack-label_v1bab_102"
+  "message-reactions": "_message-reactions_7zl3e_2",
+  "message-reactions__pills": "_message-reactions__pills_7zl3e_9",
+  "message-reactions__pill": "_message-reactions__pill_7zl3e_9",
+  "message-reactions__pill--mine": "_message-reactions__pill--mine_7zl3e_33",
+  "message-reactions__pill-count": "_message-reactions__pill-count_7zl3e_40",
+  "message-reactions__pill-emoji": "_message-reactions__pill-emoji_7zl3e_43",
+  "message-reactions__add-reaction": "_message-reactions__add-reaction_7zl3e_55",
+  "message-reactions__ack": "_message-reactions__ack_7zl3e_65",
+  "message-reactions__ack--active": "_message-reactions__ack--active_7zl3e_84",
+  "message-reactions__ack-icon": "_message-reactions__ack-icon_7zl3e_91",
+  "message-reactions__ack-count": "_message-reactions__ack-count_7zl3e_95",
+  "message-reactions__ack-label": "_message-reactions__ack-label_7zl3e_101"
 };
 export {
   e as default

package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.css

@@ -1 +1 @@
-._more-unreads-banner_1fap4_2{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xs) var(--spacing-m);background-color:var(--mention-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._more-unreads-banner_1fap4_2:hover{background-color:rgba(var(--mention-bg-rgb),.92);box-shadow:var(--elevation-2)}._more-unreads-banner_1fap4_2:active{box-shadow:var(--elevation-1)}._more-unreads-banner_1fap4_2:focus-visible{outline:none;box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--link-color)}._more-unreads-banner__icon_1fap4_26{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mention-color)}._more-unreads-banner__label_1fap4_33{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--mention-color);white-space:nowrap}._more-unreads-banner--size-small_1fap4_40{padding:var(--spacing-xxs) var(--spacing-s)}._more-unreads-banner--size-small_1fap4_40 ._more-unreads-banner__label_1fap4_33{font-size:var(--font-size-75)}._more-unreads-banner--size-large_1fap4_46{padding:var(--spacing-s) var(--spacing-l)}._more-unreads-banner--size-large_1fap4_46 ._more-unreads-banner__label_1fap4_33{font-size:var(--font-size-100)}._more-unreads-banner--size-large_1fap4_46 ._more-unreads-banner__icon_1fap4_26 svg{width:var(--icon-size-16);height:var(--icon-size-16)}
+._more-unreads-banner_1jk9k_2{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xs) var(--spacing-m);background-color:var(--mention-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._more-unreads-banner_1jk9k_2:hover{background-color:rgba(var(--mention-bg-rgb),.92);box-shadow:var(--elevation-2)}._more-unreads-banner_1jk9k_2:active{box-shadow:var(--elevation-1)}._more-unreads-banner_1jk9k_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._more-unreads-banner__icon_1jk9k_28{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mention-color)}._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--mention-color);white-space:nowrap}._more-unreads-banner--size-small_1jk9k_42{padding:var(--spacing-xxs) var(--spacing-s)}._more-unreads-banner--size-small_1jk9k_42 ._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-75)}._more-unreads-banner--size-large_1jk9k_48{padding:var(--spacing-s) var(--spacing-l)}._more-unreads-banner--size-large_1jk9k_48 ._more-unreads-banner__label_1jk9k_35{font-size:var(--font-size-100)}._more-unreads-banner--size-large_1jk9k_48 ._more-unreads-banner__icon_1jk9k_28 svg{width:var(--icon-size-16);height:var(--icon-size-16)}

package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MoreUnreadsBanner.module.css');const e={"more-unreads-banner":"_more-unreads-banner_1fap4_2","more-unreads-banner__icon":"_more-unreads-banner__icon_1fap4_26","more-unreads-banner__label":"_more-unreads-banner__label_1fap4_33","more-unreads-banner--size-small":"_more-unreads-banner--size-small_1fap4_40","more-unreads-banner--size-large":"_more-unreads-banner--size-large_1fap4_46"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MoreUnreadsBanner.module.css');const e={"more-unreads-banner":"_more-unreads-banner_1jk9k_2","more-unreads-banner__icon":"_more-unreads-banner__icon_1jk9k_28","more-unreads-banner__label":"_more-unreads-banner__label_1jk9k_35","more-unreads-banner--size-small":"_more-unreads-banner--size-small_1jk9k_42","more-unreads-banner--size-large":"_more-unreads-banner--size-large_1jk9k_48"};exports.default=e;
 //# sourceMappingURL=MoreUnreadsBanner.module.scss.cjs.map

package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.js

@@ -1,9 +1,9 @@
 import './MoreUnreadsBanner.module.css';const e = {
-  "more-unreads-banner": "_more-unreads-banner_1fap4_2",
-  "more-unreads-banner__icon": "_more-unreads-banner__icon_1fap4_26",
-  "more-unreads-banner__label": "_more-unreads-banner__label_1fap4_33",
-  "more-unreads-banner--size-small": "_more-unreads-banner--size-small_1fap4_40",
-  "more-unreads-banner--size-large": "_more-unreads-banner--size-large_1fap4_46"
+  "more-unreads-banner": "_more-unreads-banner_1jk9k_2",
+  "more-unreads-banner__icon": "_more-unreads-banner__icon_1jk9k_28",
+  "more-unreads-banner__label": "_more-unreads-banner__label_1jk9k_35",
+  "more-unreads-banner--size-small": "_more-unreads-banner--size-small_1jk9k_42",
+  "more-unreads-banner--size-large": "_more-unreads-banner--size-large_1jk9k_48"
 };
 export {
   e as default

package/dist/components/pagination-dots/PaginationDots.module.css

@@ -1 +1 @@
-._pagination-dots_1nh7u_2{display:inline-flex;overflow:hidden}._pagination-dots--horizontal_1nh7u_6{flex-direction:row;align-items:center}._pagination-dots--vertical_1nh7u_10{flex-direction:column;justify-content:center}._pagination-dots--inverted_1nh7u_14 ._pagination-dots__dot_1nh7u_14{background-color:rgba(var(--sidebar-text-rgb),.4)}._pagination-dots--inverted_1nh7u_14 ._pagination-dots__dot--active_1nh7u_17{background-color:var(--sidebar-text);box-shadow:0 0 0 4px rgba(var(--sidebar-text-rgb),.16)}._pagination-dots--on-primary_1nh7u_21 ._pagination-dots__dot_1nh7u_14{background-color:rgba(var(--button-color-rgb),.4)}._pagination-dots--on-primary_1nh7u_21 ._pagination-dots__dot--active_1nh7u_17{background-color:var(--button-color);box-shadow:0 0 0 4px rgba(var(--button-color-rgb),.24)}._pagination-dots--on-primary_1nh7u_21 ._pagination-dots__item_1nh7u_28:focus-visible ._pagination-dots__dot_1nh7u_14{box-shadow:0 0 0 3px var(--color-info),0 0 0 5px var(--button-color)}._pagination-dots__item_1nh7u_28{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer;flex-shrink:0}._pagination-dots__item_1nh7u_28:focus-visible{outline:none}._pagination-dots__item_1nh7u_28:focus-visible ._pagination-dots__dot_1nh7u_14{box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--link-color)}._pagination-dots__dot_1nh7u_14{display:block;width:6px;height:6px;border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),width var(--duration-quick) var(--ease-transition),height var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._pagination-dots__dot--active_1nh7u_17{background-color:var(--button-bg);box-shadow:0 0 0 4px rgba(var(--button-bg-rgb),.16)}
+._pagination-dots_1r0u8_2{display:inline-flex;overflow:visible}._pagination-dots--horizontal_1r0u8_6{flex-direction:row;align-items:center}._pagination-dots--vertical_1r0u8_10{flex-direction:column;justify-content:center}._pagination-dots--inverted_1r0u8_14 ._pagination-dots__dot_1r0u8_14{background-color:rgba(var(--sidebar-text-rgb),.4)}._pagination-dots--inverted_1r0u8_14 ._pagination-dots__dot--active_1r0u8_17{background-color:var(--sidebar-text);box-shadow:0 0 0 4px rgba(var(--sidebar-text-rgb),.16)}._pagination-dots--on-primary_1r0u8_21{--focus-ring-color: var(--button-color)}._pagination-dots--on-primary_1r0u8_21 ._pagination-dots__dot_1r0u8_14{background-color:rgba(var(--button-color-rgb),.4)}._pagination-dots--on-primary_1r0u8_21 ._pagination-dots__dot--active_1r0u8_17{background-color:var(--button-color);box-shadow:0 0 0 4px rgba(var(--button-color-rgb),.24)}._pagination-dots__item_1r0u8_31{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;flex-shrink:0;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._pagination-dots__item_1r0u8_31:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._pagination-dots__dot_1r0u8_14{display:block;width:6px;height:6px;border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.24);transition:background-color var(--duration-quick) var(--ease-transition),width var(--duration-quick) var(--ease-transition),height var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._pagination-dots__dot--active_1r0u8_17{background-color:var(--button-bg);box-shadow:0 0 0 4px rgba(var(--button-bg-rgb),.16)}

package/dist/components/pagination-dots/PaginationDots.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.module.css');const t={"pagination-dots":"_pagination-dots_1nh7u_2","pagination-dots--horizontal":"_pagination-dots--horizontal_1nh7u_6","pagination-dots--vertical":"_pagination-dots--vertical_1nh7u_10","pagination-dots--inverted":"_pagination-dots--inverted_1nh7u_14","pagination-dots__dot":"_pagination-dots__dot_1nh7u_14","pagination-dots__dot--active":"_pagination-dots__dot--active_1nh7u_17","pagination-dots--on-primary":"_pagination-dots--on-primary_1nh7u_21","pagination-dots__item":"_pagination-dots__item_1nh7u_28"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.module.css');const t={"pagination-dots":"_pagination-dots_1r0u8_2","pagination-dots--horizontal":"_pagination-dots--horizontal_1r0u8_6","pagination-dots--vertical":"_pagination-dots--vertical_1r0u8_10","pagination-dots--inverted":"_pagination-dots--inverted_1r0u8_14","pagination-dots__dot":"_pagination-dots__dot_1r0u8_14","pagination-dots__dot--active":"_pagination-dots__dot--active_1r0u8_17","pagination-dots--on-primary":"_pagination-dots--on-primary_1r0u8_21","pagination-dots__item":"_pagination-dots__item_1r0u8_31"};exports.default=t;
 //# sourceMappingURL=PaginationDots.module.scss.cjs.map

package/dist/components/pagination-dots/PaginationDots.module.scss.js

@@ -1,12 +1,12 @@
 import './PaginationDots.module.css';const t = {
-  "pagination-dots": "_pagination-dots_1nh7u_2",
-  "pagination-dots--horizontal": "_pagination-dots--horizontal_1nh7u_6",
-  "pagination-dots--vertical": "_pagination-dots--vertical_1nh7u_10",
-  "pagination-dots--inverted": "_pagination-dots--inverted_1nh7u_14",
-  "pagination-dots__dot": "_pagination-dots__dot_1nh7u_14",
-  "pagination-dots__dot--active": "_pagination-dots__dot--active_1nh7u_17",
-  "pagination-dots--on-primary": "_pagination-dots--on-primary_1nh7u_21",
-  "pagination-dots__item": "_pagination-dots__item_1nh7u_28"
+  "pagination-dots": "_pagination-dots_1r0u8_2",
+  "pagination-dots--horizontal": "_pagination-dots--horizontal_1r0u8_6",
+  "pagination-dots--vertical": "_pagination-dots--vertical_1r0u8_10",
+  "pagination-dots--inverted": "_pagination-dots--inverted_1r0u8_14",
+  "pagination-dots__dot": "_pagination-dots__dot_1r0u8_14",
+  "pagination-dots__dot--active": "_pagination-dots__dot--active_1r0u8_17",
+  "pagination-dots--on-primary": "_pagination-dots--on-primary_1r0u8_21",
+  "pagination-dots__item": "_pagination-dots__item_1r0u8_31"
 };
 export {
   t as default

package/dist/components/radio/Radio.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),C=require("react"),h=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),e=require("./Radio.module.scss.cjs");function v({className:r="",size:n="medium",valid:s=!0,children:t,id:d,checked:o,defaultChecked:i,disabled:u,onChange:c,name:_,value:m,...f}){const b=C.useId(),l=d??b,[,j]=h.useControllable(o,i,c),p=e.default[`radio--size-${q.toKebab(n)}`],g=s?"":e.default["radio--invalid"],x=[e.default.radio,p,g,r].filter(Boolean).join(" ");return a.jsxs("label",{className:x,htmlFor:l,children:[a.jsx("input",{id:l,type:"radio",name:_,value:m,className:e.default.radio__input,checked:o,defaultChecked:i,disabled:u,"aria-invalid":s?void 0:!0,onChange:j,...f}),a.jsx("span",{className:e.default.radio__circle,children:a.jsx("span",{className:e.default.radio__dot,"aria-hidden":!0})}),t!=null&&a.jsx("span",{className:e.default.radio__label,children:t})]})}exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),C=require("react"),h=require("../../hooks/use-controllable.cjs"),q=require("../../utils/string.cjs"),e=require("./Radio.module.scss.cjs");function v({className:r="",size:n="medium",invalid:s=!1,children:o,id:d,checked:t,defaultChecked:l,disabled:u,onChange:c,name:_,value:f,...m}){const b=C.useId(),i=d??b,[,j]=h.useControllable(t,l,c),p=e.default[`radio--size-${q.toKebab(n)}`],g=s?e.default["radio--invalid"]:"",x=[e.default.radio,p,g,r].filter(Boolean).join(" ");return a.jsxs("label",{className:x,htmlFor:i,children:[a.jsx("input",{id:i,type:"radio",name:_,value:f,className:e.default.radio__input,checked:t,defaultChecked:l,disabled:u,"aria-invalid":s?!0:void 0,onChange:j,...m}),a.jsx("span",{className:e.default.radio__circle,children:a.jsx("span",{className:e.default.radio__dot,"aria-hidden":!0})}),o!=null&&a.jsx("span",{className:e.default.radio__label,children:o})]})}exports.default=v;
 //# sourceMappingURL=Radio.cjs.map

package/dist/components/radio/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When false, uses error/destructive styling (red when checked). Default: true. */\n  valid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n  className = '',\n  size = 'medium',\n  valid = true,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  name,\n  value,\n  ...rest\n}: RadioProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = valid ? '' : styles['radio--invalid'];\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      <input\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={valid ? undefined : true}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["Radio","className","size","valid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":"0RA2BA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EAAQ,GACR,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAAe,CACb,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAAA,CAAGG,CAAY,EAAIC,EAAAA,gBAAgBX,EAASC,EAAgBE,CAAQ,EAEpES,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQlB,CAAI,CAAC,EAAE,EACjDmB,EAAelB,EAAQ,GAAKgB,EAAAA,QAAO,gBAAgB,EAEnDG,EAAY,CAACH,UAAO,MAAOD,EAAWG,EAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEsB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAASP,EACpC,SAAA,CAAAS,EAAAA,IAAC,QAAA,CACC,GAAAT,EACA,KAAK,QACL,KAAAL,EACA,MAAAC,EACA,UAAWQ,EAAAA,QAAO,aAClB,QAAAb,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAQ,OAAY,GAClC,SAAUa,EACT,GAAGJ,CAAA,CAAA,EAENY,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,WAAe,cAAW,GAAC,EACrD,EACCf,GAAY,MACXoB,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,aAAkB,SAAAf,CAAA,CAAS,CAAA,EAEvD,CAEJ"}
+{"version":3,"file":"Radio.cjs","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Radio.module.scss';\n\nexport type RadioSize = 'small' | 'medium' | 'large';\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */\n  size?: RadioSize;\n  /** When true, uses error/destructive styling (red when checked). */\n  invalid?: boolean;\n  /** Label content. Rendered next to the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * Radios let people pick exactly one option from a small, mutually exclusive set — a\n * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are\n * few enough to show at once and the user benefits from seeing every option side-by-side.\n */\nexport default function Radio({\n  className = '',\n  size = 'medium',\n  invalid = false,\n  children,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  name,\n  value,\n  ...rest\n}: RadioProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [, handleChange] = useControllable(checked, defaultChecked, onChange);\n\n  const sizeClass = styles[`radio--size-${toKebab(size)}`];\n  const invalidClass = invalid ? styles['radio--invalid'] : '';\n\n  const rootClass = [styles.radio, sizeClass, invalidClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props -- invalid form contract; radio has no supported invalid ARIA */}\n      <input\n        id={id}\n        type=\"radio\"\n        name={name}\n        value={value}\n        className={styles['radio__input']}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-invalid={invalid ? true : undefined}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className={styles['radio__circle']}>\n        <span className={styles['radio__dot']} aria-hidden />\n      </span>\n      {children != null && (\n        <span className={styles['radio__label']}>{children}</span>\n      )}\n    </label>\n  );\n}\n"],"names":["Radio","className","size","invalid","children","idProp","checked","defaultChecked","disabled","onChange","name","value","rest","generatedId","useId","id","handleChange","useControllable","sizeClass","styles","toKebab","invalidClass","rootClass","jsxs","jsx"],"mappings":"0RA2BA,SAAwBA,EAAM,CAC5B,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,SAAAC,EACA,GAAIC,EACJ,QAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAAe,CACb,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKV,GAAUQ,EACf,CAAA,CAAGG,CAAY,EAAIC,EAAAA,gBAAgBX,EAASC,EAAgBE,CAAQ,EAEpES,EAAYC,EAAAA,QAAO,eAAeC,EAAAA,QAAQlB,CAAI,CAAC,EAAE,EACjDmB,EAAelB,EAAUgB,UAAO,gBAAgB,EAAI,GAEpDG,EAAY,CAACH,UAAO,MAAOD,EAAWG,EAAcpB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEsB,EAAAA,KAAC,QAAA,CAAM,UAAWD,EAAW,QAASP,EAEpC,SAAA,CAAAS,EAAAA,IAAC,QAAA,CACC,GAAAT,EACA,KAAK,QACL,KAAAL,EACA,MAAAC,EACA,UAAWQ,EAAAA,QAAO,aAClB,QAAAb,EACA,eAAAC,EACA,SAAAC,EACA,eAAcL,EAAU,GAAO,OAC/B,SAAUa,EACT,GAAGJ,CAAA,CAAA,EAENY,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,cACtB,SAAAK,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,WAAe,cAAW,GAAC,EACrD,EACCf,GAAY,MACXoB,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAAA,QAAO,aAAkB,SAAAf,CAAA,CAAS,CAAA,EAEvD,CAEJ"}

package/dist/components/radio/Radio.d.ts

@@ -5,8 +5,8 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     /** Size variant. Figma: Small (12px), Medium (16px), Large (20px). Default: Medium. */
     size?: RadioSize;
-    /** When false, uses error/destructive styling (red when checked). Default: true. */
-    valid?: boolean;
+    /** When true, uses error/destructive styling (red when checked). */
+    invalid?: boolean;
     /** Label content. Rendered next to the radio. */
     children?: React.ReactNode;
 }
@@ -15,5 +15,5 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * workspace plan, a notification cadence, a default theme. Use a Radio when the choices are
  * few enough to show at once and the user benefits from seeing every option side-by-side.
  */
-export default function Radio({ className, size, valid, children, id: idProp, checked, defaultChecked, disabled, onChange, name, value, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default function Radio({ className, size, invalid, children, id: idProp, checked, defaultChecked, disabled, onChange, name, value, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,IAAe,EACf,KAAY,EACZ,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,IAAI,EACR,EAAE,UAAU,2CAmCZ"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,SAAc,EACd,IAAe,EACf,OAAe,EACf,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,IAAI,EACR,EAAE,UAAU,2CAoCZ"}