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

package/dist/components/attachment-card/AttachmentCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentCard.cjs","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport FileAudioOutlineLargeIcon from '@mattermost/compass-icons/components/file-audio-outline-large';\nimport FileCodeOutlineLargeIcon from '@mattermost/compass-icons/components/file-code-outline-large';\nimport FileExcelOutlineLargeIcon from '@mattermost/compass-icons/components/file-excel-outline-large';\nimport FileGenericOutlineLargeIcon from '@mattermost/compass-icons/components/file-generic-outline-large';\nimport FileImageOutlineLargeIcon from '@mattermost/compass-icons/components/file-image-outline-large';\nimport FilePatchOutlineLargeIcon from '@mattermost/compass-icons/components/file-patch-outline-large';\nimport FilePdfOutlineLargeIcon from '@mattermost/compass-icons/components/file-pdf-outline-large';\nimport FilePowerpointOutlineLargeIcon from '@mattermost/compass-icons/components/file-powerpoint-outline-large';\nimport FileTextOutlineLargeIcon from '@mattermost/compass-icons/components/file-text-outline-large';\nimport FileVideoOutlineLargeIcon from '@mattermost/compass-icons/components/file-video-outline-large';\nimport FileWordOutlineLargeIcon from '@mattermost/compass-icons/components/file-word-outline-large';\nimport FileZipOutlineLargeIcon from '@mattermost/compass-icons/components/file-zip-outline-large';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AttachmentCard.module.scss';\n\nexport type AttachmentCardFileType =\n  | 'text'\n  | 'word'\n  | 'excel'\n  | 'powerpoint'\n  | 'pdf'\n  | 'image-icon'\n  | 'image-thumbnail'\n  | 'video'\n  | 'audio'\n  | 'generic'\n  | 'patch'\n  | 'zip'\n  | 'code';\n\nexport type AttachmentCardState = 'default' | 'uploading' | 'uploaded';\n\nexport interface AttachmentCardProps {\n  className?: string;\n  /** File name to display. */\n  fileName: string;\n  /** File type + size string shown below the filename, e.g. \"TXT 15KB\". */\n  fileMeta?: string;\n  /** Controls the icon shown on the left. Default: \"generic\". */\n  fileType?: AttachmentCardFileType;\n  /** Card state. Default: \"default\" (browsing context). */\n  state?: AttachmentCardState;\n  /** Upload progress 0–100. Used when state=\"uploading\". */\n  progress?: number;\n  /** Thumbnail image URL. Used when fileType=\"image-thumbnail\". */\n  thumbnailSrc?: string;\n  /** Optional channel tag label shown below the filename, e.g. \"UX Design\". */\n  channelTag?: string;\n  /** Optional date/time stamp, e.g. \"Sep 24 5:14 PM\". */\n  dateTimeStamp?: string;\n  /** Called when the remove or cancel button is clicked. */\n  onRemove?: () => void;\n  /** Called when the download button is clicked (visible on hover in default state). */\n  onDownload?: () => void;\n  /** Called when the more-options button is clicked (visible on hover in default state). */\n  onMore?: () => void;\n}\n\ntype IconComponent = ComponentType<{ size: number; className?: string }>;\n\nconst FILE_TYPE_ICONS: Record<\n  Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n  IconComponent\n> = {\n  audio: FileAudioOutlineLargeIcon,\n  code: FileCodeOutlineLargeIcon,\n  excel: FileExcelOutlineLargeIcon,\n  generic: FileGenericOutlineLargeIcon,\n  'image-icon': FileImageOutlineLargeIcon,\n  patch: FilePatchOutlineLargeIcon,\n  pdf: FilePdfOutlineLargeIcon,\n  powerpoint: FilePowerpointOutlineLargeIcon,\n  text: FileTextOutlineLargeIcon,\n  video: FileVideoOutlineLargeIcon,\n  word: FileWordOutlineLargeIcon,\n  zip: FileZipOutlineLargeIcon,\n};\n\nconst FILE_TYPE_COLORS: Record<\n  Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n  string | undefined\n> = {\n  audio: 'var(--attachment-blue)',\n  code: undefined,\n  excel: 'var(--attachment-green)',\n  generic: undefined,\n  'image-icon': 'var(--attachment-blue)',\n  patch: undefined,\n  pdf: 'var(--attachment-red)',\n  powerpoint: 'var(--attachment-orange)',\n  text: undefined,\n  video: 'var(--attachment-blue)',\n  word: 'var(--attachment-blue)',\n  zip: undefined,\n};\n\n/**\n * Attachment Cards represent a file shared in a channel, message, or task. Each card shows\n * the file's identity at a glance — type, name, size — and hosts the actions a viewer can\n * take on it.\n */\nexport default function AttachmentCard({\n  className = '',\n  fileName,\n  fileMeta,\n  fileType = 'generic',\n  state = 'default',\n  progress = 0,\n  thumbnailSrc,\n  channelTag,\n  dateTimeStamp,\n  onRemove,\n  onDownload,\n  onMore,\n}: AttachmentCardProps) {\n  const isUploading = state === 'uploading';\n  const isUploaded = state === 'uploaded';\n  const isDefault = state === 'default';\n\n  const stateClass = !isDefault ? styles[`attachment-card--${state}`] : '';\n  const rootClass = [styles['attachment-card'], stateClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const FileIcon =\n    fileType !== 'image-thumbnail'\n      ? FILE_TYPE_ICONS[fileType]\n      : FileGenericOutlineLargeIcon;\n\n  const iconColor =\n    fileType !== 'image-thumbnail' ? FILE_TYPE_COLORS[fileType] : undefined;\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['attachment-card__container']}>\n        <div className={styles['attachment-card__inner']}>\n          <div className={styles['attachment-card__left']}>\n            {fileType === 'image-thumbnail' && thumbnailSrc ? (\n              <img\n                src={thumbnailSrc}\n                alt=\"\"\n                className={styles['attachment-card__thumbnail']}\n              />\n            ) : (\n              <div\n                className={styles['attachment-card__icon']}\n                style={iconColor ? { color: iconColor } : undefined}\n              >\n                <Icon glyph={<FileIcon size={40} />} size=\"40\" />\n              </div>\n            )}\n\n            <div className={styles['attachment-card__text']}>\n              <p className={styles['attachment-card__filename']}>{fileName}</p>\n              <div className={styles['attachment-card__secondary-details']}>\n                {isUploading ? (\n                  <span className={styles['attachment-card__uploading-text']}>\n                    {`Uploading… (${progress}%)`}\n                  </span>\n                ) : (\n                  <>\n                    {channelTag && <Tag label={channelTag} />}\n                    {fileMeta && (\n                      <div className={styles['attachment-card__details']}>\n                        <span>{fileMeta}</span>\n                        {dateTimeStamp && (\n                          <span className={styles['attachment-card__datetime']}>\n                            <span>{'•'}</span>\n                            <span>{dateTimeStamp}</span>\n                          </span>\n                        )}\n                      </div>\n                    )}\n                  </>\n                )}\n              </div>\n            </div>\n          </div>\n\n          <div className={styles['attachment-card__right']}>\n            <div className={styles['attachment-card__actions']}>\n              {(isUploaded || isUploading) && (\n                <IconButton\n                  size=\"small\"\n                  icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n                  aria-label={\n                    isUploading ? 'Cancel upload' : 'Remove attachment'\n                  }\n                  onClick={onRemove}\n                />\n              )}\n              {isDefault && (\n                <>\n                  <IconButton\n                    size=\"small\"\n                    icon={<Icon glyph={<DotsVerticalIcon />} size=\"16\" />}\n                    aria-label=\"More options\"\n                    onClick={onMore}\n                  />\n                  <IconButton\n                    size=\"small\"\n                    icon={<Icon glyph={<DownloadOutlineIcon />} size=\"16\" />}\n                    aria-label=\"Download\"\n                    onClick={onDownload}\n                  />\n                </>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {isUploading && (\n        <div className={styles['attachment-card__progress-bar']}>\n          <div\n            className={styles['attachment-card__progress-fill']}\n            style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["FILE_TYPE_ICONS","FileAudioOutlineLargeIcon","FileCodeOutlineLargeIcon","FileExcelOutlineLargeIcon","FileGenericOutlineLargeIcon","FileImageOutlineLargeIcon","FilePatchOutlineLargeIcon","FilePdfOutlineLargeIcon","FilePowerpointOutlineLargeIcon","FileTextOutlineLargeIcon","FileVideoOutlineLargeIcon","FileWordOutlineLargeIcon","FileZipOutlineLargeIcon","FILE_TYPE_COLORS","AttachmentCard","className","fileName","fileMeta","fileType","state","progress","thumbnailSrc","channelTag","dateTimeStamp","onRemove","onDownload","onMore","isUploading","isUploaded","isDefault","stateClass","styles","rootClass","FileIcon","iconColor","jsxs","jsx","Icon","Fragment","Tag","IconButton","CloseIcon","DotsVerticalIcon","DownloadOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"AttachmentCard.cjs","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport FileAudioOutlineLargeIcon from '@mattermost/compass-icons/components/file-audio-outline-large';\nimport FileCodeOutlineLargeIcon from '@mattermost/compass-icons/components/file-code-outline-large';\nimport FileExcelOutlineLargeIcon from '@mattermost/compass-icons/components/file-excel-outline-large';\nimport FileGenericOutlineLargeIcon from '@mattermost/compass-icons/components/file-generic-outline-large';\nimport FileImageOutlineLargeIcon from '@mattermost/compass-icons/components/file-image-outline-large';\nimport FilePatchOutlineLargeIcon from '@mattermost/compass-icons/components/file-patch-outline-large';\nimport FilePdfOutlineLargeIcon from '@mattermost/compass-icons/components/file-pdf-outline-large';\nimport FilePowerpointOutlineLargeIcon from '@mattermost/compass-icons/components/file-powerpoint-outline-large';\nimport FileTextOutlineLargeIcon from '@mattermost/compass-icons/components/file-text-outline-large';\nimport FileVideoOutlineLargeIcon from '@mattermost/compass-icons/components/file-video-outline-large';\nimport FileWordOutlineLargeIcon from '@mattermost/compass-icons/components/file-word-outline-large';\nimport FileZipOutlineLargeIcon from '@mattermost/compass-icons/components/file-zip-outline-large';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AttachmentCard.module.scss';\n\nexport type AttachmentCardFileType =\n  | 'text'\n  | 'word'\n  | 'excel'\n  | 'powerpoint'\n  | 'pdf'\n  | 'image-icon'\n  | 'image-thumbnail'\n  | 'video'\n  | 'audio'\n  | 'generic'\n  | 'patch'\n  | 'zip'\n  | 'code';\n\nexport type AttachmentCardState = 'default' | 'uploading' | 'uploaded';\n\nexport interface AttachmentCardProps {\n  className?: string;\n  /** File name to display. Also used in the default open-button name. */\n  fileName: string;\n  /** File type + size string shown below the filename, e.g. \"TXT 15KB\". */\n  fileMeta?: ReactNode;\n  /** Controls the icon shown on the left. Default: \"generic\". */\n  fileType?: AttachmentCardFileType;\n  /** Card state. Default: \"default\" (browsing context). */\n  state?: AttachmentCardState;\n  /** Upload progress 0–100. Used when state=\"uploading\". */\n  progress?: number;\n  /** Thumbnail image URL. Used when fileType=\"image-thumbnail\". */\n  thumbnailSrc?: string;\n  /** Optional channel tag label shown below the filename, e.g. \"UX Design\". */\n  channelTag?: ReactNode;\n  /** Optional date/time stamp, e.g. \"Sep 24 5:14 PM\". */\n  dateTimeStamp?: ReactNode;\n  /** Called when the card is activated to open the file or its preview. */\n  onOpen?: () => void;\n  /** Called when the remove or cancel button is clicked. */\n  onRemove?: () => void;\n  /** Called when the download button is clicked (visible on hover in default state). */\n  onDownload?: () => void;\n  /** Called when the more-options button is clicked (visible on hover in default state). */\n  onMore?: () => void;\n  /** Uploading status text. Default: `Uploading… ({progress}%)`. */\n  formatUploadingLabel?: (progress: number) => ReactNode;\n  /** Accessible name for the open button. Default: `Open {fileName}`. */\n  formatOpenLabel?: (fileName: string) => string;\n  /** Accessible name for the cancel button while uploading. Default: \"Cancel upload\". */\n  cancelUploadLabel?: string;\n  /** Accessible name for the remove button once uploaded. Default: \"Remove attachment\". */\n  removeLabel?: string;\n  /** Accessible name for the more-options button. Default: \"More options\". */\n  moreLabel?: string;\n  /** Accessible name for the download button. Default: \"Download\". */\n  downloadLabel?: string;\n}\n\nconst defaultFormatUploadingLabel = (progress: number) =>\n  `Uploading… (${progress}%)`;\nconst defaultFormatOpenLabel = (fileName: string) => `Open ${fileName}`;\n\ntype IconComponent = ComponentType<{ size: number; className?: string }>;\n\nconst FILE_TYPE_ICONS: Record<\n  Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n  IconComponent\n> = {\n  audio: FileAudioOutlineLargeIcon,\n  code: FileCodeOutlineLargeIcon,\n  excel: FileExcelOutlineLargeIcon,\n  generic: FileGenericOutlineLargeIcon,\n  'image-icon': FileImageOutlineLargeIcon,\n  patch: FilePatchOutlineLargeIcon,\n  pdf: FilePdfOutlineLargeIcon,\n  powerpoint: FilePowerpointOutlineLargeIcon,\n  text: FileTextOutlineLargeIcon,\n  video: FileVideoOutlineLargeIcon,\n  word: FileWordOutlineLargeIcon,\n  zip: FileZipOutlineLargeIcon,\n};\n\nconst FILE_TYPE_COLORS: Record<\n  Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n  string | undefined\n> = {\n  audio: 'var(--attachment-blue)',\n  code: undefined,\n  excel: 'var(--attachment-green)',\n  generic: undefined,\n  'image-icon': 'var(--attachment-blue)',\n  patch: undefined,\n  pdf: 'var(--attachment-red)',\n  powerpoint: 'var(--attachment-orange)',\n  text: undefined,\n  video: 'var(--attachment-blue)',\n  word: 'var(--attachment-blue)',\n  zip: undefined,\n};\n\n/**\n * Attachment Cards represent a file shared in a channel, message, or task. Each card shows\n * the file's identity at a glance — type, name, size — and hosts the actions a viewer can\n * take on it.\n */\nexport default function AttachmentCard({\n  className = '',\n  fileName,\n  fileMeta,\n  fileType = 'generic',\n  state = 'default',\n  progress = 0,\n  thumbnailSrc,\n  channelTag,\n  dateTimeStamp,\n  onOpen,\n  onRemove,\n  onDownload,\n  onMore,\n  formatUploadingLabel = defaultFormatUploadingLabel,\n  formatOpenLabel = defaultFormatOpenLabel,\n  cancelUploadLabel = 'Cancel upload',\n  removeLabel = 'Remove attachment',\n  moreLabel = 'More options',\n  downloadLabel = 'Download',\n}: AttachmentCardProps) {\n  const isUploading = state === 'uploading';\n  const isUploaded = state === 'uploaded';\n  const isDefault = state === 'default';\n\n  const stateClass = !isDefault ? styles[`attachment-card--${state}`] : '';\n  const rootClass = [styles['attachment-card'], stateClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const FileIcon =\n    fileType !== 'image-thumbnail'\n      ? FILE_TYPE_ICONS[fileType]\n      : FileGenericOutlineLargeIcon;\n\n  const iconColor =\n    fileType !== 'image-thumbnail' ? FILE_TYPE_COLORS[fileType] : undefined;\n\n  const fileIdentity = (\n    <>\n      {fileType === 'image-thumbnail' && thumbnailSrc ? (\n        <img\n          src={thumbnailSrc}\n          alt=\"\"\n          className={styles['attachment-card__thumbnail']}\n        />\n      ) : (\n        <div\n          className={styles['attachment-card__icon']}\n          style={iconColor ? { color: iconColor } : undefined}\n        >\n          <Icon glyph={<FileIcon size={40} />} size=\"40\" />\n        </div>\n      )}\n\n      <div className={styles['attachment-card__text']}>\n        <span className={styles['attachment-card__filename']}>{fileName}</span>\n        <div className={styles['attachment-card__secondary-details']}>\n          {isUploading ? (\n            <span className={styles['attachment-card__uploading-text']}>\n              {formatUploadingLabel(progress)}\n            </span>\n          ) : (\n            <>\n              {channelTag && <Tag label={channelTag} />}\n              {fileMeta && (\n                <div className={styles['attachment-card__details']}>\n                  <span>{fileMeta}</span>\n                  {dateTimeStamp && (\n                    <span className={styles['attachment-card__datetime']}>\n                      <span>{'•'}</span>\n                      <span>{dateTimeStamp}</span>\n                    </span>\n                  )}\n                </div>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['attachment-card__container']}>\n        <div className={styles['attachment-card__inner']}>\n          {isDefault && onOpen ? (\n            <button\n              type=\"button\"\n              className={`${styles['attachment-card__left']} ${styles['attachment-card__open']}`}\n              onClick={onOpen}\n              aria-label={formatOpenLabel(fileName)}\n            >\n              {fileIdentity}\n            </button>\n          ) : (\n            <div className={styles['attachment-card__left']}>\n              {fileIdentity}\n            </div>\n          )}\n\n          <div className={styles['attachment-card__right']}>\n            <div className={styles['attachment-card__actions']}>\n              {(isUploaded || isUploading) && (\n                <IconButton\n                  size=\"small\"\n                  icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n                  aria-label={isUploading ? cancelUploadLabel : removeLabel}\n                  onClick={onRemove}\n                />\n              )}\n              {isDefault && (\n                <>\n                  <IconButton\n                    size=\"small\"\n                    icon={<Icon glyph={<DotsVerticalIcon />} size=\"16\" />}\n                    aria-label={moreLabel}\n                    onClick={onMore}\n                  />\n                  <IconButton\n                    size=\"small\"\n                    icon={<Icon glyph={<DownloadOutlineIcon />} size=\"16\" />}\n                    aria-label={downloadLabel}\n                    onClick={onDownload}\n                  />\n                </>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {isUploading && (\n        <div className={styles['attachment-card__progress-bar']}>\n          <div\n            className={styles['attachment-card__progress-fill']}\n            style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["defaultFormatUploadingLabel","progress","defaultFormatOpenLabel","fileName","FILE_TYPE_ICONS","FileAudioOutlineLargeIcon","FileCodeOutlineLargeIcon","FileExcelOutlineLargeIcon","FileGenericOutlineLargeIcon","FileImageOutlineLargeIcon","FilePatchOutlineLargeIcon","FilePdfOutlineLargeIcon","FilePowerpointOutlineLargeIcon","FileTextOutlineLargeIcon","FileVideoOutlineLargeIcon","FileWordOutlineLargeIcon","FileZipOutlineLargeIcon","FILE_TYPE_COLORS","AttachmentCard","className","fileMeta","fileType","state","thumbnailSrc","channelTag","dateTimeStamp","onOpen","onRemove","onDownload","onMore","formatUploadingLabel","formatOpenLabel","cancelUploadLabel","removeLabel","moreLabel","downloadLabel","isUploading","isUploaded","isDefault","stateClass","styles","rootClass","FileIcon","iconColor","fileIdentity","jsxs","Fragment","jsx","Icon","Tag","IconButton","CloseIcon","DotsVerticalIcon","DownloadOutlineIcon"],"mappings":"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"}

package/dist/components/attachment-card/AttachmentCard.css

@@ -0,0 +1 @@
+._attachment-card_1hq2c_13{display:flex;flex-direction:column;width:320px;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-1);overflow:hidden;transition:box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._attachment-card_1hq2c_13:hover,._attachment-card_1hq2c_13:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);overflow:visible}._attachment-card_1hq2c_13:hover{cursor:pointer}._attachment-card_1hq2c_13:hover ._attachment-card__inner_1hq2c_32,._attachment-card_1hq2c_13:focus-within ._attachment-card__inner_1hq2c_32{overflow:visible}._attachment-card__container_1hq2c_35{display:flex;flex-direction:column;padding:var(--spacing-xxs);width:100%}._attachment-card__inner_1hq2c_32{display:flex;align-items:stretch;overflow:hidden;border-radius:var(--radius-s);width:100%}._attachment-card__left_1hq2c_48{display:flex;flex:1 0 0;gap:var(--spacing-m);align-items:center;min-width:0;padding:var(--spacing-xxs)}._attachment-card__open_1hq2c_56{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;text-align:left;align-self:stretch;border-radius:var(--radius-s);outline:none}._attachment-card__open_1hq2c_56:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_1hq2c_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._attachment-card__open_1hq2c_56:focus-visible{animation:none}}._attachment-card__open_1hq2c_56:not(._-host-shadow-a_1hq2c_79):not(._-host-shadow-b_1hq2c_79){box-shadow:none;border-radius:var(--radius-s)}@keyframes _focus-ring-in_1hq2c_1{0%{outline-color:transparent;outline-offset:0}}._attachment-card__icon_1hq2c_89{display:flex;align-items:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._attachment-card__thumbnail_1hq2c_95{width:var(--icon-size-40);height:var(--icon-size-40);border-radius:var(--radius-s);border:1px solid rgba(var(--center-channel-color-rgb),.04);object-fit:cover;flex-shrink:0;display:block}._attachment-card__text_1hq2c_104{display:flex;flex-direction:column;flex:1 0 0;min-width:0;overflow:hidden}._attachment-card__filename_1hq2c_111{display:block;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;flex-shrink:0;margin:0}._attachment-card__secondary-details_1hq2c_125{display:flex;align-items:flex-start;gap:var(--spacing-xxxs);width:100%;flex-shrink:0;overflow:hidden}._attachment-card__details_1hq2c_133{display:flex;align-items:flex-start;gap:var(--spacing-xxxs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;overflow:hidden;flex-shrink:0}._attachment-card__datetime_1hq2c_146{display:flex;gap:var(--spacing-xxxs);align-items:flex-start;flex-shrink:0;overflow:hidden}._attachment-card__datetime_1hq2c_146 span:last-child{overflow:hidden;text-overflow:ellipsis}._attachment-card__uploading-text_1hq2c_157{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.56);white-space:nowrap;flex-shrink:0}._attachment-card__right_1hq2c_166{display:flex;align-items:stretch;justify-content:flex-end;flex-shrink:0;align-self:stretch}._attachment-card__actions_1hq2c_173{display:flex;align-items:center;justify-content:flex-end;padding:var(--spacing-xs);gap:var(--spacing-xxxs);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._attachment-card_1hq2c_13:hover ._attachment-card__actions_1hq2c_173,._attachment-card_1hq2c_13:focus-within ._attachment-card__actions_1hq2c_173{opacity:1;pointer-events:auto}._attachment-card__progress-bar_1hq2c_187{height:4px;width:100%;background-color:rgba(var(--center-channel-color-rgb),.16);border-radius:0 0 var(--radius-xs) var(--radius-xs);flex-shrink:0}._attachment-card__progress-fill_1hq2c_194{height:100%;background-color:var(--button-bg);border-radius:var(--radius-xs)}._attachment-card--uploading_1hq2c_199{box-shadow:none}._attachment-card--uploading_1hq2c_199:hover,._attachment-card--uploading_1hq2c_199:focus-within{box-shadow:none}._attachment-card--uploading_1hq2c_199 ._attachment-card__container_1hq2c_35{padding-bottom:var(--spacing-xxxxs)}._attachment-card--uploading_1hq2c_199 ._attachment-card__actions_1hq2c_173,._attachment-card--uploaded_1hq2c_212 ._attachment-card__actions_1hq2c_173{opacity:1;pointer-events:auto}

package/dist/components/attachment-card/AttachmentCard.d.ts

@@ -1,11 +1,12 @@
+import { ReactNode } from 'react';
 export type AttachmentCardFileType = 'text' | 'word' | 'excel' | 'powerpoint' | 'pdf' | 'image-icon' | 'image-thumbnail' | 'video' | 'audio' | 'generic' | 'patch' | 'zip' | 'code';
 export type AttachmentCardState = 'default' | 'uploading' | 'uploaded';
 export interface AttachmentCardProps {
     className?: string;
-    /** File name to display. */
+    /** File name to display. Also used in the default open-button name. */
     fileName: string;
     /** File type + size string shown below the filename, e.g. "TXT 15KB". */
-    fileMeta?: string;
+    fileMeta?: ReactNode;
     /** Controls the icon shown on the left. Default: "generic". */
     fileType?: AttachmentCardFileType;
     /** Card state. Default: "default" (browsing context). */
@@ -15,20 +16,34 @@ export interface AttachmentCardProps {
     /** Thumbnail image URL. Used when fileType="image-thumbnail". */
     thumbnailSrc?: string;
     /** Optional channel tag label shown below the filename, e.g. "UX Design". */
-    channelTag?: string;
+    channelTag?: ReactNode;
     /** Optional date/time stamp, e.g. "Sep 24 5:14 PM". */
-    dateTimeStamp?: string;
+    dateTimeStamp?: ReactNode;
+    /** Called when the card is activated to open the file or its preview. */
+    onOpen?: () => void;
     /** Called when the remove or cancel button is clicked. */
     onRemove?: () => void;
     /** Called when the download button is clicked (visible on hover in default state). */
     onDownload?: () => void;
     /** Called when the more-options button is clicked (visible on hover in default state). */
     onMore?: () => void;
+    /** Uploading status text. Default: `Uploading… ({progress}%)`. */
+    formatUploadingLabel?: (progress: number) => ReactNode;
+    /** Accessible name for the open button. Default: `Open {fileName}`. */
+    formatOpenLabel?: (fileName: string) => string;
+    /** Accessible name for the cancel button while uploading. Default: "Cancel upload". */
+    cancelUploadLabel?: string;
+    /** Accessible name for the remove button once uploaded. Default: "Remove attachment". */
+    removeLabel?: string;
+    /** Accessible name for the more-options button. Default: "More options". */
+    moreLabel?: string;
+    /** Accessible name for the download button. Default: "Download". */
+    downloadLabel?: string;
 }
 /**
  * Attachment Cards represent a file shared in a channel, message, or task. Each card shows
  * the file's identity at a glance — type, name, size — and hosts the actions a viewer can
  * take on it.
  */
-export default function AttachmentCard({ className, fileName, fileMeta, fileType, state, progress, thumbnailSrc, channelTag, dateTimeStamp, onRemove, onDownload, onMore, }: AttachmentCardProps): import("react/jsx-runtime").JSX.Element;
+export default function AttachmentCard({ className, fileName, fileMeta, fileType, state, progress, thumbnailSrc, channelTag, dateTimeStamp, onOpen, onRemove, onDownload, onMore, formatUploadingLabel, formatOpenLabel, cancelUploadLabel, removeLabel, moreLabel, downloadLabel, }: AttachmentCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AttachmentCard.d.ts.map

package/dist/components/attachment-card/AttachmentCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentCard.d.ts","sourceRoot":"","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,MAAM,GACN,OAAO,GACP,YAAY,GACZ,KAAK,GACL,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,GACP,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,yDAAyD;IACzD,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAwCD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAoB,EACpB,KAAiB,EACjB,QAAY,EACZ,YAAY,EACZ,UAAU,EACV,aAAa,EACb,QAAQ,EACR,UAAU,EACV,MAAM,GACP,EAAE,mBAAmB,2CA4GrB"}
+{"version":3,"file":"AttachmentCard.d.ts","sourceRoot":"","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBtD,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,MAAM,GACN,OAAO,GACP,YAAY,GACZ,KAAK,GACL,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,GACP,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,QAAQ,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,yDAAyD;IACzD,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IACvD,uEAAuE;IACvE,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA4CD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAoB,EACpB,KAAiB,EACjB,QAAY,EACZ,YAAY,EACZ,UAAU,EACV,aAAa,EACb,MAAM,EACN,QAAQ,EACR,UAAU,EACV,MAAM,EACN,oBAAkD,EAClD,eAAwC,EACxC,iBAAmC,EACnC,WAAiC,EACjC,SAA0B,EAC1B,aAA0B,GAC3B,EAAE,mBAAmB,2CA2HrB"}

package/dist/components/attachment-card/AttachmentCard.js

@@ -1,37 +1,37 @@
-import { jsxs as t, jsx as a, Fragment as u } from "react/jsx-runtime";
-import __C from "@mattermost/compass-icons/components/close.js";const C=__C&&__C.default?__C.default:__C;
-import __z from "@mattermost/compass-icons/components/dots-vertical.js";const z=__z&&__z.default?__z.default:__z;
-import __w from "@mattermost/compass-icons/components/download-outline.js";const w=__w&&__w.default?__w.default:__w;
-import __E from "@mattermost/compass-icons/components/file-audio-outline-large.js";const E=__E&&__E.default?__E.default:__E;
-import __P from "@mattermost/compass-icons/components/file-code-outline-large.js";const P=__P&&__P.default?__P.default:__P;
-import __y from "@mattermost/compass-icons/components/file-excel-outline-large.js";const y=__y&&__y.default?__y.default:__y;
-import ___ from "@mattermost/compass-icons/components/file-generic-outline-large.js";const _=___&&___.default?___.default:___;
-import __D from "@mattermost/compass-icons/components/file-image-outline-large.js";const D=__D&&__D.default?__D.default:__D;
-import __j from "@mattermost/compass-icons/components/file-patch-outline-large.js";const j=__j&&__j.default?__j.default:__j;
-import __k from "@mattermost/compass-icons/components/file-pdf-outline-large.js";const k=__k&&__k.default?__k.default:__k;
-import __U from "@mattermost/compass-icons/components/file-powerpoint-outline-large.js";const U=__U&&__U.default?__U.default:__U;
-import __$ from "@mattermost/compass-icons/components/file-text-outline-large.js";const $=__$&&__$.default?__$.default:__$;
-import __A from "@mattermost/compass-icons/components/file-video-outline-large.js";const A=__A&&__A.default?__A.default:__A;
-import __B from "@mattermost/compass-icons/components/file-word-outline-large.js";const B=__B&&__B.default?__B.default:__B;
-import __M from "@mattermost/compass-icons/components/file-zip-outline-large.js";const M=__M&&__M.default?__M.default:__M;
-import n from "../icon/Icon.js";
-import r from "../icon-button/IconButton.js";
-import R from "../tag/Tag.js";
+import { jsxs as t, Fragment as m, jsx as a } from "react/jsx-runtime";
+import __D from "@mattermost/compass-icons/components/close.js";const D=__D&&__D.default?__D.default:__D;
+import __U from "@mattermost/compass-icons/components/dots-vertical.js";const U=__U&&__U.default?__U.default:__U;
+import __j from "@mattermost/compass-icons/components/download-outline.js";const j=__j&&__j.default?__j.default:__j;
+import __A from "@mattermost/compass-icons/components/file-audio-outline-large.js";const A=__A&&__A.default?__A.default:__A;
+import __B from "@mattermost/compass-icons/components/file-code-outline-large.js";const B=__B&&__B.default?__B.default:__B;
+import __M from "@mattermost/compass-icons/components/file-excel-outline-large.js";const M=__M&&__M.default?__M.default:__M;
+import __F from "@mattermost/compass-icons/components/file-generic-outline-large.js";const F=__F&&__F.default?__F.default:__F;
+import __R from "@mattermost/compass-icons/components/file-image-outline-large.js";const R=__R&&__R.default?__R.default:__R;
+import __V from "@mattermost/compass-icons/components/file-patch-outline-large.js";const V=__V&&__V.default?__V.default:__V;
+import __Y from "@mattermost/compass-icons/components/file-pdf-outline-large.js";const Y=__Y&&__Y.default?__Y.default:__Y;
+import __G from "@mattermost/compass-icons/components/file-powerpoint-outline-large.js";const G=__G&&__G.default?__G.default:__G;
+import __W from "@mattermost/compass-icons/components/file-text-outline-large.js";const W=__W&&__W.default?__W.default:__W;
+import __Z from "@mattermost/compass-icons/components/file-video-outline-large.js";const Z=__Z&&__Z.default?__Z.default:__Z;
+import __q from "@mattermost/compass-icons/components/file-word-outline-large.js";const q=__q&&__q.default?__q.default:__q;
+import __H from "@mattermost/compass-icons/components/file-zip-outline-large.js";const H=__H&&__H.default?__H.default:__H;
+import r from "../icon/Icon.js";
+import d from "../icon-button/IconButton.js";
+import J from "../tag/Tag.js";
 import e from "./AttachmentCard.module.scss.js";
-const V = {
-  audio: E,
-  code: P,
-  excel: y,
-  generic: _,
-  "image-icon": D,
-  patch: j,
-  pdf: k,
-  powerpoint: U,
-  text: $,
-  video: A,
-  word: B,
-  zip: M
-}, Y = {
+const K = (i) => `Uploading… (${i}%)`, Q = (i) => `Open ${i}`, S = {
+  audio: A,
+  code: B,
+  excel: M,
+  generic: F,
+  "image-icon": R,
+  patch: V,
+  pdf: Y,
+  powerpoint: G,
+  text: W,
+  video: Z,
+  word: q,
+  zip: H
+}, X = {
   audio: "var(--attachment-blue)",
   code: void 0,
   excel: "var(--attachment-green)",
@@ -45,80 +45,96 @@ const V = {
   word: "var(--attachment-blue)",
   zip: void 0
 };
-function ma({
-  className: v = "",
-  fileName: f,
-  fileMeta: l,
-  fileType: i = "generic",
+function Ia({
+  className: i = "",
+  fileName: s,
+  fileMeta: h,
+  fileType: n = "generic",
   state: o = "default",
-  progress: m = 0,
-  thumbnailSrc: d,
-  channelTag: s,
-  dateTimeStamp: h,
-  onRemove: I,
-  onDownload: N,
-  onMore: F
+  progress: p = 0,
+  thumbnailSrc: u,
+  channelTag: _,
+  dateTimeStamp: g,
+  onOpen: f,
+  onRemove: b,
+  onDownload: L,
+  onMore: N,
+  formatUploadingLabel: O = K,
+  formatOpenLabel: C = Q,
+  cancelUploadLabel: x = "Cancel upload",
+  removeLabel: z = "Remove attachment",
+  moreLabel: w = "More options",
+  downloadLabel: y = "Download"
 }) {
-  const c = o === "uploading", O = o === "uploaded", p = o === "default", L = p ? "" : e[`attachment-card--${o}`], b = [e["attachment-card"], L, v].filter(Boolean).join(" "), x = i !== "image-thumbnail" ? V[i] : _, g = i !== "image-thumbnail" ? Y[i] : void 0;
-  return /* @__PURE__ */ t("div", { className: b, children: [
-    /* @__PURE__ */ a("div", { className: e["attachment-card__container"], children: /* @__PURE__ */ t("div", { className: e["attachment-card__inner"], children: [
-      /* @__PURE__ */ t("div", { className: e["attachment-card__left"], children: [
-        i === "image-thumbnail" && d ? /* @__PURE__ */ a(
-          "img",
-          {
-            src: d,
-            alt: "",
-            className: e["attachment-card__thumbnail"]
-          }
-        ) : /* @__PURE__ */ a(
-          "div",
-          {
-            className: e["attachment-card__icon"],
-            style: g ? { color: g } : void 0,
-            children: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(x, { size: 40 }), size: "40" })
-          }
-        ),
-        /* @__PURE__ */ t("div", { className: e["attachment-card__text"], children: [
-          /* @__PURE__ */ a("p", { className: e["attachment-card__filename"], children: f }),
-          /* @__PURE__ */ a("div", { className: e["attachment-card__secondary-details"], children: c ? /* @__PURE__ */ a("span", { className: e["attachment-card__uploading-text"], children: `Uploading… (${m}%)` }) : /* @__PURE__ */ t(u, { children: [
-            s && /* @__PURE__ */ a(R, { label: s }),
-            l && /* @__PURE__ */ t("div", { className: e["attachment-card__details"], children: [
-              /* @__PURE__ */ a("span", { children: l }),
-              h && /* @__PURE__ */ t("span", { className: e["attachment-card__datetime"], children: [
-                /* @__PURE__ */ a("span", { children: "•" }),
-                /* @__PURE__ */ a("span", { children: h })
-              ] })
-            ] })
-          ] }) })
+  const c = o === "uploading", $ = o === "uploaded", l = o === "default", E = l ? "" : e[`attachment-card--${o}`], P = [e["attachment-card"], E, i].filter(Boolean).join(" "), k = n !== "image-thumbnail" ? S[n] : F, v = n !== "image-thumbnail" ? X[n] : void 0, I = /* @__PURE__ */ t(m, { children: [
+    n === "image-thumbnail" && u ? /* @__PURE__ */ a(
+      "img",
+      {
+        src: u,
+        alt: "",
+        className: e["attachment-card__thumbnail"]
+      }
+    ) : /* @__PURE__ */ a(
+      "div",
+      {
+        className: e["attachment-card__icon"],
+        style: v ? { color: v } : void 0,
+        children: /* @__PURE__ */ a(r, { glyph: /* @__PURE__ */ a(k, { size: 40 }), size: "40" })
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: e["attachment-card__text"], children: [
+      /* @__PURE__ */ a("span", { className: e["attachment-card__filename"], children: s }),
+      /* @__PURE__ */ a("div", { className: e["attachment-card__secondary-details"], children: c ? /* @__PURE__ */ a("span", { className: e["attachment-card__uploading-text"], children: O(p) }) : /* @__PURE__ */ t(m, { children: [
+        _ && /* @__PURE__ */ a(J, { label: _ }),
+        h && /* @__PURE__ */ t("div", { className: e["attachment-card__details"], children: [
+          /* @__PURE__ */ a("span", { children: h }),
+          g && /* @__PURE__ */ t("span", { className: e["attachment-card__datetime"], children: [
+            /* @__PURE__ */ a("span", { children: "•" }),
+            /* @__PURE__ */ a("span", { children: g })
+          ] })
         ] })
-      ] }),
+      ] }) })
+    ] })
+  ] });
+  return /* @__PURE__ */ t("div", { className: P, children: [
+    /* @__PURE__ */ a("div", { className: e["attachment-card__container"], children: /* @__PURE__ */ t("div", { className: e["attachment-card__inner"], children: [
+      l && f ? /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: `${e["attachment-card__left"]} ${e["attachment-card__open"]}`,
+          onClick: f,
+          "aria-label": C(s),
+          children: I
+        }
+      ) : /* @__PURE__ */ a("div", { className: e["attachment-card__left"], children: I }),
       /* @__PURE__ */ a("div", { className: e["attachment-card__right"], children: /* @__PURE__ */ t("div", { className: e["attachment-card__actions"], children: [
-        (O || c) && /* @__PURE__ */ a(
-          r,
+        ($ || c) && /* @__PURE__ */ a(
+          d,
           {
             size: "small",
-            icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(C, {}), size: "16" }),
-            "aria-label": c ? "Cancel upload" : "Remove attachment",
-            onClick: I
+            icon: /* @__PURE__ */ a(r, { glyph: /* @__PURE__ */ a(D, {}), size: "16" }),
+            "aria-label": c ? x : z,
+            onClick: b
           }
         ),
-        p && /* @__PURE__ */ t(u, { children: [
+        l && /* @__PURE__ */ t(m, { children: [
           /* @__PURE__ */ a(
-            r,
+            d,
             {
               size: "small",
-              icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(z, {}), size: "16" }),
-              "aria-label": "More options",
-              onClick: F
+              icon: /* @__PURE__ */ a(r, { glyph: /* @__PURE__ */ a(U, {}), size: "16" }),
+              "aria-label": w,
+              onClick: N
             }
           ),
           /* @__PURE__ */ a(
-            r,
+            d,
             {
               size: "small",
-              icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(w, {}), size: "16" }),
-              "aria-label": "Download",
-              onClick: N
+              icon: /* @__PURE__ */ a(r, { glyph: /* @__PURE__ */ a(j, {}), size: "16" }),
+              "aria-label": y,
+              onClick: L
             }
           )
         ] })
@@ -128,12 +144,12 @@ function ma({
       "div",
       {
         className: e["attachment-card__progress-fill"],
-        style: { width: `${Math.min(100, Math.max(0, m))}%` }
+        style: { width: `${Math.min(100, Math.max(0, p))}%` }
       }
     ) })
   ] });
 }
 export {
-  ma as default
+  Ia as default
 };
 //# sourceMappingURL=AttachmentCard.js.map

package/dist/components/attachment-card/AttachmentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentCard.js","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport FileAudioOutlineLargeIcon from '@mattermost/compass-icons/components/file-audio-outline-large';\nimport FileCodeOutlineLargeIcon from '@mattermost/compass-icons/components/file-code-outline-large';\nimport FileExcelOutlineLargeIcon from '@mattermost/compass-icons/components/file-excel-outline-large';\nimport FileGenericOutlineLargeIcon from '@mattermost/compass-icons/components/file-generic-outline-large';\nimport FileImageOutlineLargeIcon from '@mattermost/compass-icons/components/file-image-outline-large';\nimport FilePatchOutlineLargeIcon from '@mattermost/compass-icons/components/file-patch-outline-large';\nimport FilePdfOutlineLargeIcon from '@mattermost/compass-icons/components/file-pdf-outline-large';\nimport FilePowerpointOutlineLargeIcon from '@mattermost/compass-icons/components/file-powerpoint-outline-large';\nimport FileTextOutlineLargeIcon from '@mattermost/compass-icons/components/file-text-outline-large';\nimport FileVideoOutlineLargeIcon from '@mattermost/compass-icons/components/file-video-outline-large';\nimport FileWordOutlineLargeIcon from '@mattermost/compass-icons/components/file-word-outline-large';\nimport FileZipOutlineLargeIcon from '@mattermost/compass-icons/components/file-zip-outline-large';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AttachmentCard.module.scss';\n\nexport type AttachmentCardFileType =\n  | 'text'\n  | 'word'\n  | 'excel'\n  | 'powerpoint'\n  | 'pdf'\n  | 'image-icon'\n  | 'image-thumbnail'\n  | 'video'\n  | 'audio'\n  | 'generic'\n  | 'patch'\n  | 'zip'\n  | 'code';\n\nexport type AttachmentCardState = 'default' | 'uploading' | 'uploaded';\n\nexport interface AttachmentCardProps {\n  className?: string;\n  /** File name to display. */\n  fileName: string;\n  /** File type + size string shown below the filename, e.g. \"TXT 15KB\". */\n  fileMeta?: string;\n  /** Controls the icon shown on the left. Default: \"generic\". */\n  fileType?: AttachmentCardFileType;\n  /** Card state. Default: \"default\" (browsing context). */\n  state?: AttachmentCardState;\n  /** Upload progress 0–100. Used when state=\"uploading\". */\n  progress?: number;\n  /** Thumbnail image URL. Used when fileType=\"image-thumbnail\". */\n  thumbnailSrc?: string;\n  /** Optional channel tag label shown below the filename, e.g. \"UX Design\". */\n  channelTag?: string;\n  /** Optional date/time stamp, e.g. \"Sep 24 5:14 PM\". */\n  dateTimeStamp?: string;\n  /** Called when the remove or cancel button is clicked. */\n  onRemove?: () => void;\n  /** Called when the download button is clicked (visible on hover in default state). */\n  onDownload?: () => void;\n  /** Called when the more-options button is clicked (visible on hover in default state). */\n  onMore?: () => void;\n}\n\ntype IconComponent = ComponentType<{ size: number; className?: string }>;\n\nconst FILE_TYPE_ICONS: Record<\n  Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n  IconComponent\n> = {\n  audio: FileAudioOutlineLargeIcon,\n  code: FileCodeOutlineLargeIcon,\n  excel: FileExcelOutlineLargeIcon,\n  generic: FileGenericOutlineLargeIcon,\n  'image-icon': FileImageOutlineLargeIcon,\n  patch: FilePatchOutlineLargeIcon,\n  pdf: FilePdfOutlineLargeIcon,\n  powerpoint: FilePowerpointOutlineLargeIcon,\n  text: FileTextOutlineLargeIcon,\n  video: FileVideoOutlineLargeIcon,\n  word: FileWordOutlineLargeIcon,\n  zip: FileZipOutlineLargeIcon,\n};\n\nconst FILE_TYPE_COLORS: Record<\n  Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n  string | undefined\n> = {\n  audio: 'var(--attachment-blue)',\n  code: undefined,\n  excel: 'var(--attachment-green)',\n  generic: undefined,\n  'image-icon': 'var(--attachment-blue)',\n  patch: undefined,\n  pdf: 'var(--attachment-red)',\n  powerpoint: 'var(--attachment-orange)',\n  text: undefined,\n  video: 'var(--attachment-blue)',\n  word: 'var(--attachment-blue)',\n  zip: undefined,\n};\n\n/**\n * Attachment Cards represent a file shared in a channel, message, or task. Each card shows\n * the file's identity at a glance — type, name, size — and hosts the actions a viewer can\n * take on it.\n */\nexport default function AttachmentCard({\n  className = '',\n  fileName,\n  fileMeta,\n  fileType = 'generic',\n  state = 'default',\n  progress = 0,\n  thumbnailSrc,\n  channelTag,\n  dateTimeStamp,\n  onRemove,\n  onDownload,\n  onMore,\n}: AttachmentCardProps) {\n  const isUploading = state === 'uploading';\n  const isUploaded = state === 'uploaded';\n  const isDefault = state === 'default';\n\n  const stateClass = !isDefault ? styles[`attachment-card--${state}`] : '';\n  const rootClass = [styles['attachment-card'], stateClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const FileIcon =\n    fileType !== 'image-thumbnail'\n      ? FILE_TYPE_ICONS[fileType]\n      : FileGenericOutlineLargeIcon;\n\n  const iconColor =\n    fileType !== 'image-thumbnail' ? FILE_TYPE_COLORS[fileType] : undefined;\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['attachment-card__container']}>\n        <div className={styles['attachment-card__inner']}>\n          <div className={styles['attachment-card__left']}>\n            {fileType === 'image-thumbnail' && thumbnailSrc ? (\n              <img\n                src={thumbnailSrc}\n                alt=\"\"\n                className={styles['attachment-card__thumbnail']}\n              />\n            ) : (\n              <div\n                className={styles['attachment-card__icon']}\n                style={iconColor ? { color: iconColor } : undefined}\n              >\n                <Icon glyph={<FileIcon size={40} />} size=\"40\" />\n              </div>\n            )}\n\n            <div className={styles['attachment-card__text']}>\n              <p className={styles['attachment-card__filename']}>{fileName}</p>\n              <div className={styles['attachment-card__secondary-details']}>\n                {isUploading ? (\n                  <span className={styles['attachment-card__uploading-text']}>\n                    {`Uploading… (${progress}%)`}\n                  </span>\n                ) : (\n                  <>\n                    {channelTag && <Tag label={channelTag} />}\n                    {fileMeta && (\n                      <div className={styles['attachment-card__details']}>\n                        <span>{fileMeta}</span>\n                        {dateTimeStamp && (\n                          <span className={styles['attachment-card__datetime']}>\n                            <span>{'•'}</span>\n                            <span>{dateTimeStamp}</span>\n                          </span>\n                        )}\n                      </div>\n                    )}\n                  </>\n                )}\n              </div>\n            </div>\n          </div>\n\n          <div className={styles['attachment-card__right']}>\n            <div className={styles['attachment-card__actions']}>\n              {(isUploaded || isUploading) && (\n                <IconButton\n                  size=\"small\"\n                  icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n                  aria-label={\n                    isUploading ? 'Cancel upload' : 'Remove attachment'\n                  }\n                  onClick={onRemove}\n                />\n              )}\n              {isDefault && (\n                <>\n                  <IconButton\n                    size=\"small\"\n                    icon={<Icon glyph={<DotsVerticalIcon />} size=\"16\" />}\n                    aria-label=\"More options\"\n                    onClick={onMore}\n                  />\n                  <IconButton\n                    size=\"small\"\n                    icon={<Icon glyph={<DownloadOutlineIcon />} size=\"16\" />}\n                    aria-label=\"Download\"\n                    onClick={onDownload}\n                  />\n                </>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {isUploading && (\n        <div className={styles['attachment-card__progress-bar']}>\n          <div\n            className={styles['attachment-card__progress-fill']}\n            style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["FILE_TYPE_ICONS","FileAudioOutlineLargeIcon","FileCodeOutlineLargeIcon","FileExcelOutlineLargeIcon","FileGenericOutlineLargeIcon","FileImageOutlineLargeIcon","FilePatchOutlineLargeIcon","FilePdfOutlineLargeIcon","FilePowerpointOutlineLargeIcon","FileTextOutlineLargeIcon","FileVideoOutlineLargeIcon","FileWordOutlineLargeIcon","FileZipOutlineLargeIcon","FILE_TYPE_COLORS","AttachmentCard","className","fileName","fileMeta","fileType","state","progress","thumbnailSrc","channelTag","dateTimeStamp","onRemove","onDownload","onMore","isUploading","isUploaded","isDefault","stateClass","styles","rootClass","FileIcon","iconColor","jsxs","jsx","Icon","Fragment","Tag","IconButton","CloseIcon","DotsVerticalIcon","DownloadOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"AttachmentCard.js","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport FileAudioOutlineLargeIcon from '@mattermost/compass-icons/components/file-audio-outline-large';\nimport FileCodeOutlineLargeIcon from '@mattermost/compass-icons/components/file-code-outline-large';\nimport FileExcelOutlineLargeIcon from '@mattermost/compass-icons/components/file-excel-outline-large';\nimport FileGenericOutlineLargeIcon from '@mattermost/compass-icons/components/file-generic-outline-large';\nimport FileImageOutlineLargeIcon from '@mattermost/compass-icons/components/file-image-outline-large';\nimport FilePatchOutlineLargeIcon from '@mattermost/compass-icons/components/file-patch-outline-large';\nimport FilePdfOutlineLargeIcon from '@mattermost/compass-icons/components/file-pdf-outline-large';\nimport FilePowerpointOutlineLargeIcon from '@mattermost/compass-icons/components/file-powerpoint-outline-large';\nimport FileTextOutlineLargeIcon from '@mattermost/compass-icons/components/file-text-outline-large';\nimport FileVideoOutlineLargeIcon from '@mattermost/compass-icons/components/file-video-outline-large';\nimport FileWordOutlineLargeIcon from '@mattermost/compass-icons/components/file-word-outline-large';\nimport FileZipOutlineLargeIcon from '@mattermost/compass-icons/components/file-zip-outline-large';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AttachmentCard.module.scss';\n\nexport type AttachmentCardFileType =\n  | 'text'\n  | 'word'\n  | 'excel'\n  | 'powerpoint'\n  | 'pdf'\n  | 'image-icon'\n  | 'image-thumbnail'\n  | 'video'\n  | 'audio'\n  | 'generic'\n  | 'patch'\n  | 'zip'\n  | 'code';\n\nexport type AttachmentCardState = 'default' | 'uploading' | 'uploaded';\n\nexport interface AttachmentCardProps {\n  className?: string;\n  /** File name to display. Also used in the default open-button name. */\n  fileName: string;\n  /** File type + size string shown below the filename, e.g. \"TXT 15KB\". */\n  fileMeta?: ReactNode;\n  /** Controls the icon shown on the left. Default: \"generic\". */\n  fileType?: AttachmentCardFileType;\n  /** Card state. Default: \"default\" (browsing context). */\n  state?: AttachmentCardState;\n  /** Upload progress 0–100. Used when state=\"uploading\". */\n  progress?: number;\n  /** Thumbnail image URL. Used when fileType=\"image-thumbnail\". */\n  thumbnailSrc?: string;\n  /** Optional channel tag label shown below the filename, e.g. \"UX Design\". */\n  channelTag?: ReactNode;\n  /** Optional date/time stamp, e.g. \"Sep 24 5:14 PM\". */\n  dateTimeStamp?: ReactNode;\n  /** Called when the card is activated to open the file or its preview. */\n  onOpen?: () => void;\n  /** Called when the remove or cancel button is clicked. */\n  onRemove?: () => void;\n  /** Called when the download button is clicked (visible on hover in default state). */\n  onDownload?: () => void;\n  /** Called when the more-options button is clicked (visible on hover in default state). */\n  onMore?: () => void;\n  /** Uploading status text. Default: `Uploading… ({progress}%)`. */\n  formatUploadingLabel?: (progress: number) => ReactNode;\n  /** Accessible name for the open button. Default: `Open {fileName}`. */\n  formatOpenLabel?: (fileName: string) => string;\n  /** Accessible name for the cancel button while uploading. Default: \"Cancel upload\". */\n  cancelUploadLabel?: string;\n  /** Accessible name for the remove button once uploaded. Default: \"Remove attachment\". */\n  removeLabel?: string;\n  /** Accessible name for the more-options button. Default: \"More options\". */\n  moreLabel?: string;\n  /** Accessible name for the download button. Default: \"Download\". */\n  downloadLabel?: string;\n}\n\nconst defaultFormatUploadingLabel = (progress: number) =>\n  `Uploading… (${progress}%)`;\nconst defaultFormatOpenLabel = (fileName: string) => `Open ${fileName}`;\n\ntype IconComponent = ComponentType<{ size: number; className?: string }>;\n\nconst FILE_TYPE_ICONS: Record<\n  Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n  IconComponent\n> = {\n  audio: FileAudioOutlineLargeIcon,\n  code: FileCodeOutlineLargeIcon,\n  excel: FileExcelOutlineLargeIcon,\n  generic: FileGenericOutlineLargeIcon,\n  'image-icon': FileImageOutlineLargeIcon,\n  patch: FilePatchOutlineLargeIcon,\n  pdf: FilePdfOutlineLargeIcon,\n  powerpoint: FilePowerpointOutlineLargeIcon,\n  text: FileTextOutlineLargeIcon,\n  video: FileVideoOutlineLargeIcon,\n  word: FileWordOutlineLargeIcon,\n  zip: FileZipOutlineLargeIcon,\n};\n\nconst FILE_TYPE_COLORS: Record<\n  Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n  string | undefined\n> = {\n  audio: 'var(--attachment-blue)',\n  code: undefined,\n  excel: 'var(--attachment-green)',\n  generic: undefined,\n  'image-icon': 'var(--attachment-blue)',\n  patch: undefined,\n  pdf: 'var(--attachment-red)',\n  powerpoint: 'var(--attachment-orange)',\n  text: undefined,\n  video: 'var(--attachment-blue)',\n  word: 'var(--attachment-blue)',\n  zip: undefined,\n};\n\n/**\n * Attachment Cards represent a file shared in a channel, message, or task. Each card shows\n * the file's identity at a glance — type, name, size — and hosts the actions a viewer can\n * take on it.\n */\nexport default function AttachmentCard({\n  className = '',\n  fileName,\n  fileMeta,\n  fileType = 'generic',\n  state = 'default',\n  progress = 0,\n  thumbnailSrc,\n  channelTag,\n  dateTimeStamp,\n  onOpen,\n  onRemove,\n  onDownload,\n  onMore,\n  formatUploadingLabel = defaultFormatUploadingLabel,\n  formatOpenLabel = defaultFormatOpenLabel,\n  cancelUploadLabel = 'Cancel upload',\n  removeLabel = 'Remove attachment',\n  moreLabel = 'More options',\n  downloadLabel = 'Download',\n}: AttachmentCardProps) {\n  const isUploading = state === 'uploading';\n  const isUploaded = state === 'uploaded';\n  const isDefault = state === 'default';\n\n  const stateClass = !isDefault ? styles[`attachment-card--${state}`] : '';\n  const rootClass = [styles['attachment-card'], stateClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const FileIcon =\n    fileType !== 'image-thumbnail'\n      ? FILE_TYPE_ICONS[fileType]\n      : FileGenericOutlineLargeIcon;\n\n  const iconColor =\n    fileType !== 'image-thumbnail' ? FILE_TYPE_COLORS[fileType] : undefined;\n\n  const fileIdentity = (\n    <>\n      {fileType === 'image-thumbnail' && thumbnailSrc ? (\n        <img\n          src={thumbnailSrc}\n          alt=\"\"\n          className={styles['attachment-card__thumbnail']}\n        />\n      ) : (\n        <div\n          className={styles['attachment-card__icon']}\n          style={iconColor ? { color: iconColor } : undefined}\n        >\n          <Icon glyph={<FileIcon size={40} />} size=\"40\" />\n        </div>\n      )}\n\n      <div className={styles['attachment-card__text']}>\n        <span className={styles['attachment-card__filename']}>{fileName}</span>\n        <div className={styles['attachment-card__secondary-details']}>\n          {isUploading ? (\n            <span className={styles['attachment-card__uploading-text']}>\n              {formatUploadingLabel(progress)}\n            </span>\n          ) : (\n            <>\n              {channelTag && <Tag label={channelTag} />}\n              {fileMeta && (\n                <div className={styles['attachment-card__details']}>\n                  <span>{fileMeta}</span>\n                  {dateTimeStamp && (\n                    <span className={styles['attachment-card__datetime']}>\n                      <span>{'•'}</span>\n                      <span>{dateTimeStamp}</span>\n                    </span>\n                  )}\n                </div>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['attachment-card__container']}>\n        <div className={styles['attachment-card__inner']}>\n          {isDefault && onOpen ? (\n            <button\n              type=\"button\"\n              className={`${styles['attachment-card__left']} ${styles['attachment-card__open']}`}\n              onClick={onOpen}\n              aria-label={formatOpenLabel(fileName)}\n            >\n              {fileIdentity}\n            </button>\n          ) : (\n            <div className={styles['attachment-card__left']}>\n              {fileIdentity}\n            </div>\n          )}\n\n          <div className={styles['attachment-card__right']}>\n            <div className={styles['attachment-card__actions']}>\n              {(isUploaded || isUploading) && (\n                <IconButton\n                  size=\"small\"\n                  icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n                  aria-label={isUploading ? cancelUploadLabel : removeLabel}\n                  onClick={onRemove}\n                />\n              )}\n              {isDefault && (\n                <>\n                  <IconButton\n                    size=\"small\"\n                    icon={<Icon glyph={<DotsVerticalIcon />} size=\"16\" />}\n                    aria-label={moreLabel}\n                    onClick={onMore}\n                  />\n                  <IconButton\n                    size=\"small\"\n                    icon={<Icon glyph={<DownloadOutlineIcon />} size=\"16\" />}\n                    aria-label={downloadLabel}\n                    onClick={onDownload}\n                  />\n                </>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {isUploading && (\n        <div className={styles['attachment-card__progress-bar']}>\n          <div\n            className={styles['attachment-card__progress-fill']}\n            style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["defaultFormatUploadingLabel","progress","defaultFormatOpenLabel","fileName","FILE_TYPE_ICONS","FileAudioOutlineLargeIcon","FileCodeOutlineLargeIcon","FileExcelOutlineLargeIcon","FileGenericOutlineLargeIcon","FileImageOutlineLargeIcon","FilePatchOutlineLargeIcon","FilePdfOutlineLargeIcon","FilePowerpointOutlineLargeIcon","FileTextOutlineLargeIcon","FileVideoOutlineLargeIcon","FileWordOutlineLargeIcon","FileZipOutlineLargeIcon","FILE_TYPE_COLORS","AttachmentCard","className","fileMeta","fileType","state","thumbnailSrc","channelTag","dateTimeStamp","onOpen","onRemove","onDownload","onMore","formatUploadingLabel","formatOpenLabel","cancelUploadLabel","removeLabel","moreLabel","downloadLabel","isUploading","isUploaded","isDefault","stateClass","styles","rootClass","FileIcon","iconColor","fileIdentity","jsxs","Fragment","jsx","Icon","Tag","IconButton","CloseIcon","DotsVerticalIcon","DownloadOutlineIcon"],"mappings":"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"}

package/dist/components/attachment-card/AttachmentCard.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./AttachmentCard.module.css');const t={"attachment-card":"_attachment-card_86bu7_2","attachment-card__container":"_attachment-card__container_86bu7_18","attachment-card__inner":"_attachment-card__inner_86bu7_24","attachment-card__left":"_attachment-card__left_86bu7_31","attachment-card__icon":"_attachment-card__icon_86bu7_39","attachment-card__thumbnail":"_attachment-card__thumbnail_86bu7_45","attachment-card__text":"_attachment-card__text_86bu7_54","attachment-card__filename":"_attachment-card__filename_86bu7_61","attachment-card__secondary-details":"_attachment-card__secondary-details_86bu7_74","attachment-card__details":"_attachment-card__details_86bu7_82","attachment-card__datetime":"_attachment-card__datetime_86bu7_95","attachment-card__uploading-text":"_attachment-card__uploading-text_86bu7_106","attachment-card__right":"_attachment-card__right_86bu7_115","attachment-card__actions":"_attachment-card__actions_86bu7_122","attachment-card__progress-bar":"_attachment-card__progress-bar_86bu7_136","attachment-card__progress-fill":"_attachment-card__progress-fill_86bu7_143","attachment-card--uploading":"_attachment-card--uploading_86bu7_148","attachment-card--uploaded":"_attachment-card--uploaded_86bu7_161"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./AttachmentCard.css');const t={"attachment-card":"_attachment-card_1hq2c_13","attachment-card__inner":"_attachment-card__inner_1hq2c_32","attachment-card__container":"_attachment-card__container_1hq2c_35","attachment-card__left":"_attachment-card__left_1hq2c_48","attachment-card__open":"_attachment-card__open_1hq2c_56","focus-ring-in":"_focus-ring-in_1hq2c_1","-host-shadow-a":"_-host-shadow-a_1hq2c_79","-host-shadow-b":"_-host-shadow-b_1hq2c_79","attachment-card__icon":"_attachment-card__icon_1hq2c_89","attachment-card__thumbnail":"_attachment-card__thumbnail_1hq2c_95","attachment-card__text":"_attachment-card__text_1hq2c_104","attachment-card__filename":"_attachment-card__filename_1hq2c_111","attachment-card__secondary-details":"_attachment-card__secondary-details_1hq2c_125","attachment-card__details":"_attachment-card__details_1hq2c_133","attachment-card__datetime":"_attachment-card__datetime_1hq2c_146","attachment-card__uploading-text":"_attachment-card__uploading-text_1hq2c_157","attachment-card__right":"_attachment-card__right_1hq2c_166","attachment-card__actions":"_attachment-card__actions_1hq2c_173","attachment-card__progress-bar":"_attachment-card__progress-bar_1hq2c_187","attachment-card__progress-fill":"_attachment-card__progress-fill_1hq2c_194","attachment-card--uploading":"_attachment-card--uploading_1hq2c_199","attachment-card--uploaded":"_attachment-card--uploaded_1hq2c_212"};exports.default=t;
 //# sourceMappingURL=AttachmentCard.module.scss.cjs.map

package/dist/components/attachment-card/AttachmentCard.module.scss.js

@@ -1,22 +1,26 @@
-import './AttachmentCard.module.css';const t = {
-  "attachment-card": "_attachment-card_86bu7_2",
-  "attachment-card__container": "_attachment-card__container_86bu7_18",
-  "attachment-card__inner": "_attachment-card__inner_86bu7_24",
-  "attachment-card__left": "_attachment-card__left_86bu7_31",
-  "attachment-card__icon": "_attachment-card__icon_86bu7_39",
-  "attachment-card__thumbnail": "_attachment-card__thumbnail_86bu7_45",
-  "attachment-card__text": "_attachment-card__text_86bu7_54",
-  "attachment-card__filename": "_attachment-card__filename_86bu7_61",
-  "attachment-card__secondary-details": "_attachment-card__secondary-details_86bu7_74",
-  "attachment-card__details": "_attachment-card__details_86bu7_82",
-  "attachment-card__datetime": "_attachment-card__datetime_86bu7_95",
-  "attachment-card__uploading-text": "_attachment-card__uploading-text_86bu7_106",
-  "attachment-card__right": "_attachment-card__right_86bu7_115",
-  "attachment-card__actions": "_attachment-card__actions_86bu7_122",
-  "attachment-card__progress-bar": "_attachment-card__progress-bar_86bu7_136",
-  "attachment-card__progress-fill": "_attachment-card__progress-fill_86bu7_143",
-  "attachment-card--uploading": "_attachment-card--uploading_86bu7_148",
-  "attachment-card--uploaded": "_attachment-card--uploaded_86bu7_161"
+import './AttachmentCard.css';const t = {
+  "attachment-card": "_attachment-card_1hq2c_13",
+  "attachment-card__inner": "_attachment-card__inner_1hq2c_32",
+  "attachment-card__container": "_attachment-card__container_1hq2c_35",
+  "attachment-card__left": "_attachment-card__left_1hq2c_48",
+  "attachment-card__open": "_attachment-card__open_1hq2c_56",
+  "focus-ring-in": "_focus-ring-in_1hq2c_1",
+  "-host-shadow-a": "_-host-shadow-a_1hq2c_79",
+  "-host-shadow-b": "_-host-shadow-b_1hq2c_79",
+  "attachment-card__icon": "_attachment-card__icon_1hq2c_89",
+  "attachment-card__thumbnail": "_attachment-card__thumbnail_1hq2c_95",
+  "attachment-card__text": "_attachment-card__text_1hq2c_104",
+  "attachment-card__filename": "_attachment-card__filename_1hq2c_111",
+  "attachment-card__secondary-details": "_attachment-card__secondary-details_1hq2c_125",
+  "attachment-card__details": "_attachment-card__details_1hq2c_133",
+  "attachment-card__datetime": "_attachment-card__datetime_1hq2c_146",
+  "attachment-card__uploading-text": "_attachment-card__uploading-text_1hq2c_157",
+  "attachment-card__right": "_attachment-card__right_1hq2c_166",
+  "attachment-card__actions": "_attachment-card__actions_1hq2c_173",
+  "attachment-card__progress-bar": "_attachment-card__progress-bar_1hq2c_187",
+  "attachment-card__progress-fill": "_attachment-card__progress-fill_1hq2c_194",
+  "attachment-card--uploading": "_attachment-card--uploading_1hq2c_199",
+  "attachment-card--uploaded": "_attachment-card--uploaded_1hq2c_212"
 };
 export {
   t as default

package/dist/components/attachment-card/AttachmentCard.module.scss.js.map

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

package/dist/components/button/Button.cjs

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