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

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

@@ -0,0 +1 @@
+._attachment-card_ffd4i_2{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_ffd4i_2:hover,._attachment-card_ffd4i_2:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);overflow:visible}._attachment-card_ffd4i_2:hover{cursor:pointer}._attachment-card_ffd4i_2:hover ._attachment-card__inner_ffd4i_21,._attachment-card_ffd4i_2:focus-within ._attachment-card__inner_ffd4i_21{overflow:visible}._attachment-card__container_ffd4i_24{display:flex;flex-direction:column;padding:var(--spacing-xxs);width:100%}._attachment-card__inner_ffd4i_21{display:flex;align-items:stretch;overflow:hidden;border-radius:var(--radius-s);width:100%}._attachment-card__left_ffd4i_37{display:flex;flex:1 0 0;gap:var(--spacing-m);align-items:center;min-width:0;padding:var(--spacing-xxs)}._attachment-card__open_ffd4i_45{-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: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)}._attachment-card__open_ffd4i_45:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._attachment-card__icon_ffd4i_64{display:flex;align-items:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._attachment-card__thumbnail_ffd4i_70{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_ffd4i_79{display:flex;flex-direction:column;flex:1 0 0;min-width:0;overflow:hidden}._attachment-card__filename_ffd4i_86{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_ffd4i_100{display:flex;align-items:flex-start;gap:var(--spacing-xxxs);width:100%;flex-shrink:0;overflow:hidden}._attachment-card__details_ffd4i_108{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_ffd4i_121{display:flex;gap:var(--spacing-xxxs);align-items:flex-start;flex-shrink:0;overflow:hidden}._attachment-card__datetime_ffd4i_121 span:last-child{overflow:hidden;text-overflow:ellipsis}._attachment-card__uploading-text_ffd4i_132{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_ffd4i_141{display:flex;align-items:stretch;justify-content:flex-end;flex-shrink:0;align-self:stretch}._attachment-card__actions_ffd4i_148{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_ffd4i_2:hover ._attachment-card__actions_ffd4i_148,._attachment-card_ffd4i_2:focus-within ._attachment-card__actions_ffd4i_148{opacity:1;pointer-events:auto}._attachment-card__progress-bar_ffd4i_162{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_ffd4i_169{height:100%;background-color:var(--button-bg);border-radius:var(--radius-xs)}._attachment-card--uploading_ffd4i_174{box-shadow:none}._attachment-card--uploading_ffd4i_174:hover,._attachment-card--uploading_ffd4i_174:focus-within{box-shadow:none}._attachment-card--uploading_ffd4i_174 ._attachment-card__container_ffd4i_24{padding-bottom:var(--spacing-xxxxs)}._attachment-card--uploading_ffd4i_174 ._attachment-card__actions_ffd4i_148,._attachment-card--uploaded_ffd4i_187 ._attachment-card__actions_ffd4i_148{opacity:1;pointer-events:auto}

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

@@ -0,0 +1,36 @@
+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. */
+    fileName: string;
+    /** File type + size string shown below the filename, e.g. "TXT 15KB". */
+    fileMeta?: string;
+    /** Controls the icon shown on the left. Default: "generic". */
+    fileType?: AttachmentCardFileType;
+    /** Card state. Default: "default" (browsing context). */
+    state?: AttachmentCardState;
+    /** Upload progress 0–100. Used when state="uploading". */
+    progress?: number;
+    /** Thumbnail image URL. Used when fileType="image-thumbnail". */
+    thumbnailSrc?: string;
+    /** Optional channel tag label shown below the filename, e.g. "UX Design". */
+    channelTag?: string;
+    /** Optional date/time stamp, e.g. "Sep 24 5:14 PM". */
+    dateTimeStamp?: string;
+    /** 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;
+}
+/**
+ * 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, onOpen, onRemove, onDownload, onMore, }: AttachmentCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AttachmentCard.d.ts.map

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

@@ -0,0 +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,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;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,MAAM,EACN,QAAQ,EACR,UAAU,EACV,MAAM,GACP,EAAE,mBAAmB,2CA2HrB"}

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

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

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

@@ -0,0 +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 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}\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}: 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              {`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    </>\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={`Open ${fileName}`}\n            >\n              {fileIdentity}\n            </button>\n          ) : (\n            <div className={styles['attachment-card__left']}>{fileIdentity}</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={\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","onOpen","onRemove","onDownload","onMore","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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./AttachmentCard.css');const t={"attachment-card":"_attachment-card_ffd4i_2","attachment-card__inner":"_attachment-card__inner_ffd4i_21","attachment-card__container":"_attachment-card__container_ffd4i_24","attachment-card__left":"_attachment-card__left_ffd4i_37","attachment-card__open":"_attachment-card__open_ffd4i_45","attachment-card__icon":"_attachment-card__icon_ffd4i_64","attachment-card__thumbnail":"_attachment-card__thumbnail_ffd4i_70","attachment-card__text":"_attachment-card__text_ffd4i_79","attachment-card__filename":"_attachment-card__filename_ffd4i_86","attachment-card__secondary-details":"_attachment-card__secondary-details_ffd4i_100","attachment-card__details":"_attachment-card__details_ffd4i_108","attachment-card__datetime":"_attachment-card__datetime_ffd4i_121","attachment-card__uploading-text":"_attachment-card__uploading-text_ffd4i_132","attachment-card__right":"_attachment-card__right_ffd4i_141","attachment-card__actions":"_attachment-card__actions_ffd4i_148","attachment-card__progress-bar":"_attachment-card__progress-bar_ffd4i_162","attachment-card__progress-fill":"_attachment-card__progress-fill_ffd4i_169","attachment-card--uploading":"_attachment-card--uploading_ffd4i_174","attachment-card--uploaded":"_attachment-card--uploaded_ffd4i_187"};exports.default=t;
+//# sourceMappingURL=AttachmentCard.module.scss.cjs.map

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

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

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

@@ -0,0 +1,25 @@
+import './AttachmentCard.css';const t = {
+  "attachment-card": "_attachment-card_ffd4i_2",
+  "attachment-card__inner": "_attachment-card__inner_ffd4i_21",
+  "attachment-card__container": "_attachment-card__container_ffd4i_24",
+  "attachment-card__left": "_attachment-card__left_ffd4i_37",
+  "attachment-card__open": "_attachment-card__open_ffd4i_45",
+  "attachment-card__icon": "_attachment-card__icon_ffd4i_64",
+  "attachment-card__thumbnail": "_attachment-card__thumbnail_ffd4i_70",
+  "attachment-card__text": "_attachment-card__text_ffd4i_79",
+  "attachment-card__filename": "_attachment-card__filename_ffd4i_86",
+  "attachment-card__secondary-details": "_attachment-card__secondary-details_ffd4i_100",
+  "attachment-card__details": "_attachment-card__details_ffd4i_108",
+  "attachment-card__datetime": "_attachment-card__datetime_ffd4i_121",
+  "attachment-card__uploading-text": "_attachment-card__uploading-text_ffd4i_132",
+  "attachment-card__right": "_attachment-card__right_ffd4i_141",
+  "attachment-card__actions": "_attachment-card__actions_ffd4i_148",
+  "attachment-card__progress-bar": "_attachment-card__progress-bar_ffd4i_162",
+  "attachment-card__progress-fill": "_attachment-card__progress-fill_ffd4i_169",
+  "attachment-card--uploading": "_attachment-card--uploading_ffd4i_174",
+  "attachment-card--uploaded": "_attachment-card--uploaded_ffd4i_187"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=AttachmentCard.module.scss.js.map

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

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

package/dist/components/attachment-card/index.cjs

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

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

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

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

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

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

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

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

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

package/dist/components/button/Button.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),c=require("react"),d=require("../icon/Icon.cjs"),N=require("../spinner/Spinner.cjs"),b=require("../../utils/string.cjs"),e=require("./Button.module.scss.cjs"),I={"x-small":"12",small:"12",medium:"16",large:"20"};function P({appearance:l="default",className:m="",destructive:f=!1,emphasis:o="primary",children:v,leadingIcon:u,loading:s=!1,size:a="medium",trailingIcon:i,disabled:_,type:p="button",...x}){const n=I[a],j=e.default[`button--emphasis-${b.toKebab(o)}`],h=e.default[`button--size-${b.toKebab(a)}`],C=l==="inverted"?e.default["button--appearance-inverted"]:"",S=f?e.default["button--destructive"]:"",q=[e.default.button,j,h,C,S,m].filter(Boolean).join(" "),r=o!=="link",z=s||r&&c.isValidElement(u);return t.jsxs("button",{className:q,type:p,disabled:_||s,...x,children:[z?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:s?t.jsx(N.default,{size:n,inverted:l==="inverted"}):t.jsx(d.IconSlotContext.Provider,{value:{size:n},children:u})}):null,t.jsx("span",{className:e.default.button__label,children:v}),r&&!s&&c.isValidElement(i)?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:t.jsx(d.IconSlotContext.Provider,{value:{size:n},children:i})}):null]})}exports.default=P;
+//# sourceMappingURL=Button.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: React.ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button. */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nexport default function Button({\n  appearance = 'default',\n  className = '',\n  destructive = false,\n  emphasis = 'primary',\n  children,\n  leadingIcon,\n  loading = false,\n  size = 'medium',\n  trailingIcon,\n  disabled,\n  type = 'button',\n  ...rest\n}: ButtonProps) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const supportsIcons = emphasis !== 'link';\n  const showLeadingSlot = loading || (supportsIcons && React.isValidElement(leadingIcon));\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled || loading} {...rest}>\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading\n            ? <Spinner size={iconSize as SpinnerSize} inverted={appearance === 'inverted'} />\n            : <IconSlotContext.Provider value={{ size: iconSize }}>{leadingIcon}</IconSlotContext.Provider>}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {supportsIcons && !loading && React.isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>{trailingIcon}</IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","React","jsxs","jsx","Spinner","IconSlotContext"],"mappings":"gTAwCMA,EAA8C,CAClD,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAOA,SAAwBC,EAAO,CAC7B,WAAAC,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,aAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAWd,EAAcS,CAAI,EAC7BM,EAAgBC,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQZ,CAAQ,CAAC,EAAE,EAC9Da,EAAYF,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EAClDU,EACJjB,IAAe,WAAac,EAAAA,QAAO,6BAA6B,EAAI,GAChEI,EAAmBhB,EAAcY,UAAO,qBAAqB,EAAI,GAEjEK,EAAY,CAChBL,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAC,EACAjB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELmB,EAAgBjB,IAAa,OAC7BkB,EAAkBf,GAAYc,GAAiBE,EAAM,eAAejB,CAAW,EAErF,OACEkB,OAAC,UAAO,UAAWJ,EAAW,KAAAT,EAAY,SAAUD,GAAYH,EAAU,GAAGK,EAC1E,SAAA,CAAAU,EACCG,EAAAA,IAAC,OAAA,CAAK,UAAWV,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAR,EACGkB,EAAAA,IAACC,EAAAA,QAAA,CAAQ,KAAMb,EAAyB,SAAUZ,IAAe,UAAA,CAAY,EAC7EwB,EAAAA,IAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMd,CAAA,EAAa,SAAAP,CAAA,CAAY,CAAA,CACxE,EACE,WACH,OAAA,CAAK,UAAWS,EAAAA,QAAO,cAAmB,SAAAV,EAAS,EACnDgB,GAAiB,CAACd,GAAWgB,EAAM,eAAed,CAAY,EAC7DgB,MAAC,OAAA,CAAK,UAAWV,UAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAU,EAAAA,IAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMd,CAAA,EAAa,SAAAJ,CAAA,CAAa,CAAA,CACrE,EACE,IAAA,EACN,CAEJ"}

package/dist/components/button/Button.css

@@ -0,0 +1 @@
+._button_doayp_2{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),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}._button_doayp_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_doayp_2:disabled{cursor:not-allowed}._button__label_doayp_24{line-height:1}._button__icon-slot_doayp_27{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-small_doayp_33{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_doayp_33 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_doayp_40{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_doayp_40 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_doayp_47{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_doayp_47 ._button__label_doayp_24{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_doayp_54{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_doayp_54 ._button__label_doayp_24{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_doayp_61{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-secondary_doayp_75{--focus-ring-color: var(--link-color);background-color:transparent;color:var(--link-color);box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-quaternary_doayp_105{background-color:transparent;color:var(--link-color)}._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-link_doayp_118{--focus-ring-color: var(--link-color);padding:0;background-color:transparent;color:var(--link-color)}._button--emphasis-link_doayp_118:hover:not(:disabled) ._button__label_doayp_24{text-decoration:underline}._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-link_doayp_118{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118:disabled{color:rgba(var(--sidebar-text-rgb),.32)}

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

@@ -0,0 +1,31 @@
+import { default as React, ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'link';
+export type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';
+export type ButtonAppearance = 'default' | 'inverted';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** default | inverted (for use on dark backgrounds). Maps to Figma "Style". */
+    appearance?: ButtonAppearance;
+    /** Optional CSS class name. */
+    className?: string;
+    /** Button label. */
+    children: React.ReactNode;
+    /** When true, uses destructive (danger) styling. */
+    destructive?: boolean;
+    /** Visual emphasis. Default: primary. */
+    emphasis?: ButtonEmphasis;
+    /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */
+    leadingIcon?: ReactNode;
+    /** When true, shows a Spinner in the leading slot and disables the button. */
+    loading?: boolean;
+    /** Size variant. Default: medium. */
+    size?: ButtonSize;
+    /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */
+    trailingIcon?: ReactNode;
+}
+/**
+ * Buttons let people take actions or make decisions with a single tap or click — saving a
+ * form, sending a message, confirming a dialog. Compass ships several button variants, each
+ * with the same anatomy and rhythm so they feel like members of the same family.
+ */
+export default function Button({ appearance, className, destructive, emphasis, children, leadingIcon, loading, size, trailingIcon, disabled, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQzE,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4IAA4I;IAC5I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6IAA6I;IAC7I,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AASD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,UAAsB,EACtB,SAAc,EACd,WAAmB,EACnB,QAAoB,EACpB,QAAQ,EACR,WAAW,EACX,OAAe,EACf,IAAe,EACf,YAAY,EACZ,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,WAAW,2CAuCb"}

package/dist/components/button/Button.js

@@ -0,0 +1,44 @@
+import { jsxs as E, jsx as e } from "react/jsx-runtime";
+import c from "react";
+import { IconSlotContext as m } from "../icon/Icon.js";
+import P from "../spinner/Spinner.js";
+import { toKebab as d } from "../../utils/string.js";
+import t from "./Button.module.scss.js";
+const y = {
+  "x-small": "12",
+  small: "12",
+  medium: "16",
+  large: "20"
+};
+function A({
+  appearance: n = "default",
+  className: p = "",
+  destructive: b = !1,
+  emphasis: r = "primary",
+  children: f,
+  leadingIcon: i,
+  loading: s = !1,
+  size: l = "medium",
+  trailingIcon: a,
+  disabled: v,
+  type: _ = "button",
+  ...h
+}) {
+  const o = y[l], C = t[`button--emphasis-${d(r)}`], x = t[`button--size-${d(l)}`], z = n === "inverted" ? t["button--appearance-inverted"] : "", N = b ? t["button--destructive"] : "", S = [
+    t.button,
+    C,
+    x,
+    z,
+    N,
+    p
+  ].filter(Boolean).join(" "), u = r !== "link", j = s || u && c.isValidElement(i);
+  return /* @__PURE__ */ E("button", { className: S, type: _, disabled: v || s, ...h, children: [
+    j ? /* @__PURE__ */ e("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: s ? /* @__PURE__ */ e(P, { size: o, inverted: n === "inverted" }) : /* @__PURE__ */ e(m.Provider, { value: { size: o }, children: i }) }) : null,
+    /* @__PURE__ */ e("span", { className: t.button__label, children: f }),
+    u && !s && c.isValidElement(a) ? /* @__PURE__ */ e("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(m.Provider, { value: { size: o }, children: a }) }) : null
+  ] });
+}
+export {
+  A as default
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: React.ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button. */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nexport default function Button({\n  appearance = 'default',\n  className = '',\n  destructive = false,\n  emphasis = 'primary',\n  children,\n  leadingIcon,\n  loading = false,\n  size = 'medium',\n  trailingIcon,\n  disabled,\n  type = 'button',\n  ...rest\n}: ButtonProps) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const supportsIcons = emphasis !== 'link';\n  const showLeadingSlot = loading || (supportsIcons && React.isValidElement(leadingIcon));\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled || loading} {...rest}>\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading\n            ? <Spinner size={iconSize as SpinnerSize} inverted={appearance === 'inverted'} />\n            : <IconSlotContext.Provider value={{ size: iconSize }}>{leadingIcon}</IconSlotContext.Provider>}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {supportsIcons && !loading && React.isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>{trailingIcon}</IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","React","jsxs","jsx","Spinner","IconSlotContext"],"mappings":";;;;;;AAwCA,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAOA,SAAwBC,EAAO;AAAA,EAC7B,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAWd,EAAcS,CAAI,GAC7BM,IAAgBC,EAAO,oBAAoBC,EAAQZ,CAAQ,CAAC,EAAE,GAC9Da,IAAYF,EAAO,gBAAgBC,EAAQR,CAAI,CAAC,EAAE,GAClDU,IACJjB,MAAe,aAAac,EAAO,6BAA6B,IAAI,IAChEI,IAAmBhB,IAAcY,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAjB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELmB,IAAgBjB,MAAa,QAC7BkB,IAAkBf,KAAYc,KAAiBE,EAAM,eAAejB,CAAW;AAErF,SACE,gBAAAkB,EAAC,YAAO,WAAWJ,GAAW,MAAAT,GAAY,UAAUD,KAAYH,GAAU,GAAGK,GAC1E,UAAA;AAAA,IAAAU,IACC,gBAAAG,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAR,IACG,gBAAAkB,EAACC,GAAA,EAAQ,MAAMb,GAAyB,UAAUZ,MAAe,WAAA,CAAY,IAC7E,gBAAAwB,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GAAa,UAAAP,EAAA,CAAY,EAAA,CACxE,IACE;AAAA,sBACH,QAAA,EAAK,WAAWS,EAAO,eAAmB,UAAAV,GAAS;AAAA,IACnDgB,KAAiB,CAACd,KAAWgB,EAAM,eAAed,CAAY,IAC7D,gBAAAgB,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAU,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GAAa,UAAAJ,EAAA,CAAa,EAAA,CACrE,IACE;AAAA,EAAA,GACN;AAEJ;"}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import './Button.css';const t = "_button_doayp_2", o = "_button__label_doayp_24", _ = {
+  button: t,
+  button__label: o,
+  "button__icon-slot": "_button__icon-slot_doayp_27",
+  "button--size-x-small": "_button--size-x-small_doayp_33",
+  "button--size-small": "_button--size-small_doayp_40",
+  "button--size-medium": "_button--size-medium_doayp_47",
+  "button--size-large": "_button--size-large_doayp_54",
+  "button--emphasis-primary": "_button--emphasis-primary_doayp_61",
+  "button--emphasis-secondary": "_button--emphasis-secondary_doayp_75",
+  "button--emphasis-tertiary": "_button--emphasis-tertiary_doayp_91",
+  "button--emphasis-quaternary": "_button--emphasis-quaternary_doayp_105",
+  "button--emphasis-link": "_button--emphasis-link_doayp_118",
+  "button--destructive": "_button--destructive_doayp_130",
+  "button--appearance-inverted": "_button--appearance-inverted_doayp_193"
+};
+export {
+  t as button,
+  o as button__label,
+  _ as default
+};
+//# sourceMappingURL=Button.module.scss.js.map

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

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

package/dist/components/button/index.cjs

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

package/dist/components/button/index.cjs.map

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

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

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

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

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

package/dist/components/button/index.js

@@ -0,0 +1,7 @@
+import { default as o } from "./Button.js";
+import { default as f } from "./Button.module.scss.js";
+export {
+  o as Button,
+  f as btnStyles
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/card-button/CardButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),___=require("@mattermost/compass-icons/components/check-circle.js"),_=___?.default??___,d=require("../icon/Icon.cjs"),t=require("./CardButton.module.scss.cjs");function j({icon:o,title:c,description:s,selected:a=!1,className:u="",type:l="button",role:n,disabled:i,...f}){const r=n==="radio",h=[t.default["card-button"],a&&t.default["card-button--selected"],u].filter(Boolean).join(" ");return e.jsxs("button",{type:l,role:n,disabled:i,className:h,"aria-checked":r?a:void 0,"aria-pressed":r?void 0:a,...f,children:[e.jsx("span",{className:t.default["card-button__icon"],"aria-hidden":!0,children:e.jsx(d.IconSlotContext.Provider,{value:{size:"24"},children:o})}),e.jsxs("span",{className:t.default["card-button__text"],children:[e.jsx("span",{className:t.default["card-button__title"],children:c}),s!=null&&e.jsx("span",{className:t.default["card-button__description"],children:s})]}),e.jsx("span",{className:t.default["card-button__check"],"aria-hidden":!0,children:e.jsx(d.default,{glyph:e.jsx(_,{}),size:"20"})})]})}exports.default=j;
+//# sourceMappingURL=CardButton.cjs.map

package/dist/components/card-button/CardButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.cjs","sources":["../../../src/components/card-button/CardButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './CardButton.module.scss';\n\nexport interface CardButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {\n  /** Leading icon. Pass `<Icon glyph={<SomeIcon />} />` — CardButton provides the correct size (24) via context. */\n  icon: ReactNode;\n  /** Primary label. */\n  title: ReactNode;\n  /** Secondary line under the title. */\n  description?: ReactNode;\n  /** Selected / checked appearance with trailing check. Default: false. */\n  selected?: boolean;\n  className?: string;\n}\n\n/**\n * Card Buttons present a mutually exclusive (or single) choice as a compact\n * card: leading icon, title, optional description, and a check when selected.\n * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,\n * access mode, etc.).\n */\nexport default function CardButton({\n  icon,\n  title,\n  description,\n  selected = false,\n  className = '',\n  type = 'button',\n  role,\n  disabled,\n  ...rest\n}: CardButtonProps) {\n  const isRadio = role === 'radio';\n  const rootClass = [\n    styles['card-button'],\n    selected && styles['card-button--selected'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type={type}\n      role={role}\n      disabled={disabled}\n      className={rootClass}\n      aria-checked={isRadio ? selected : undefined}\n      aria-pressed={!isRadio ? selected : undefined}\n      {...rest}\n    >\n      <span className={styles['card-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '24' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['card-button__text']}>\n        <span className={styles['card-button__title']}>{title}</span>\n        {description != null && (\n          <span className={styles['card-button__description']}>\n            {description}\n          </span>\n        )}\n      </span>\n      <span className={styles['card-button__check']} aria-hidden>\n        <Icon glyph={<CheckCircleIcon />} size=\"20\" />\n      </span>\n    </button>\n  );\n}\n"],"names":["CardButton","icon","title","description","selected","className","type","role","disabled","rest","isRadio","rootClass","styles","jsxs","jsx","IconSlotContext","Icon","CheckCircleIcon"],"mappings":"wRAyBA,SAAwBA,EAAW,CACjC,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,KAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAUH,IAAS,QACnBI,EAAY,CAChBC,EAAAA,QAAO,aAAa,EACpBR,GAAYQ,EAAAA,QAAO,uBAAuB,EAC1CP,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,KAAC,SAAA,CACC,KAAAP,EACA,KAAAC,EACA,SAAAC,EACA,UAAWG,EACX,eAAcD,EAAUN,EAAW,OACnC,eAAeM,EAAqB,OAAXN,EACxB,GAAGK,EAEJ,SAAA,CAAAK,MAAC,QAAK,UAAWF,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAE,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,EACAF,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,mBAAmB,EACzC,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oBAAoB,EAAI,SAAAV,EAAM,EACrDC,GAAe,MACdW,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,0BAA0B,EAC/C,SAAAT,CAAA,CACH,CAAA,EAEJ,QACC,OAAA,CAAK,UAAWS,EAAAA,QAAO,oBAAoB,EAAG,cAAW,GACxD,SAAAE,EAAAA,IAACE,UAAA,CAAK,MAAOF,MAACG,EAAA,CAAA,CAAgB,EAAI,KAAK,KAAK,CAAA,CAC9C,CAAA,CAAA,CAAA,CAGN"}

package/dist/components/card-button/CardButton.css

@@ -0,0 +1 @@
+._card-button_1l92t_2{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-m);margin:0;padding:var(--spacing-m) var(--spacing-xl) var(--spacing-m) var(--spacing-m);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);background-color:var(--center-channel-bg);box-shadow:var(--elevation-1);cursor:pointer;text-align:left;color:var(--center-channel-color);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._card-button_1l92t_2:hover:not(:disabled):not(._card-button--selected_1l92t_22){border-color:rgba(var(--center-channel-color-rgb),.24);box-shadow:var(--elevation-2)}._card-button_1l92t_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._card-button_1l92t_2:disabled{cursor:not-allowed;opacity:.48}._card-button--selected_1l92t_22{border-color:rgba(var(--button-bg-rgb),.32)}._card-button--selected_1l92t_22 ._card-button__icon_1l92t_37{background-color:rgba(var(--button-bg-rgb),.08);color:var(--button-bg)}._card-button--selected_1l92t_22 ._card-button__check_1l92t_41{visibility:visible}._card-button__icon_1l92t_37{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs);border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.56)}._card-button__text_1l92t_54{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}._card-button__title_1l92t_62{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color)}._card-button__description_1l92t_69{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),.72)}._card-button__check_1l92t_41{flex-shrink:0;display:inline-flex;align-items:center;color:var(--button-bg);visibility:hidden}

package/dist/components/card-button/CardButton.d.ts

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface CardButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {
+    /** Leading icon. Pass `<Icon glyph={<SomeIcon />} />` — CardButton provides the correct size (24) via context. */
+    icon: ReactNode;
+    /** Primary label. */
+    title: ReactNode;
+    /** Secondary line under the title. */
+    description?: ReactNode;
+    /** Selected / checked appearance with trailing check. Default: false. */
+    selected?: boolean;
+    className?: string;
+}
+/**
+ * Card Buttons present a mutually exclusive (or single) choice as a compact
+ * card: leading icon, title, optional description, and a check when selected.
+ * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,
+ * access mode, etc.).
+ */
+export default function CardButton({ icon, title, description, selected, className, type, role, disabled, ...rest }: CardButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardButton.d.ts.map

package/dist/components/card-button/CardButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/CardButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM7D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3E,kHAAkH;IAClH,IAAI,EAAE,SAAS,CAAC;IAChB,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,SAAc,EACd,IAAe,EACf,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,2CAsCjB"}