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

package/dist/compass-ui-standalone.css

@@ -23,6 +23,8 @@
   --button-bg-rgb: var(--color-blue-500-rgb);
   --button-color: var(--color-neutral-0);
   --button-color-rgb: var(--color-neutral-0-rgb);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
   --link-color: var(--color-blue-600);
   --link-color-rgb: var(--color-blue-600-rgb);
   --error-text: var(--color-red-400);
@@ -64,6 +66,8 @@
   --button-bg: var(--color-blue-500);
   --button-bg-rgb: var(--color-blue-500-rgb);
   --button-color: var(--color-neutral-0);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
   --link-color: var(--color-blue-600);
   --link-color-rgb: var(--color-blue-600-rgb);
   --error-text: var(--color-red-300);
@@ -105,6 +109,8 @@
   --button-bg: var(--color-blue-500);
   --button-bg-rgb: var(--color-blue-500-rgb);
   --button-color: var(--color-neutral-0);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
   --link-color: var(--color-blue-600);
   --link-color-rgb: var(--color-blue-600-rgb);
   --error-text: var(--color-red-400);
@@ -146,6 +152,8 @@
   --button-bg: #4a7ce8;
   --button-bg-rgb: 74, 124, 232;
   --button-color: var(--color-neutral-0);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
   --link-color: var(--color-blue-300);
   --link-color-rgb: var(--color-blue-300-rgb);
   --error-text: var(--color-red-300);
@@ -187,6 +195,8 @@
   --button-bg: #4a7ce8;
   --button-bg-rgb: 74, 124, 232;
   --button-color: var(--color-neutral-0);
+  --focus-ring-color: var(--button-bg);
+  --focus-ring-color-rgb: var(--button-bg-rgb);
   --link-color: var(--color-blue-300);
   --link-color-rgb: var(--color-blue-300-rgb);
   --error-text: var(--color-red-300);

package/dist/compass-ui.css

@@ -298,5 +298,7 @@
     --semantic-color-success: var(--color-green-600-rgb);
     --semantic-color-warning: var(--color-yellow-600-rgb);
     --semantic-color-danger: var(--color-red-500-rgb);
+    --focus-ring-color: var(--button-bg);
+    --focus-ring-color-rgb: var(--button-bg-rgb);
   }
 }

package/dist/components/action-button/ActionButton.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("./ActionButton.module.scss.cjs");function c({icon:o,label:a,active:n=!1,destructive:s=!1,className:u,...l}){const i=[t.default["action-button"],n?t.default["action-button--active"]:"",s?t.default["action-button--destructive"]:"",u??""].filter(Boolean).join(" ");return e.jsxs("button",{className:i,"aria-pressed":n,...l,children:[e.jsx("span",{className:t.default["action-button__icon"],children:o}),e.jsx("span",{className:t.default["action-button__label"],children:a})]})}exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),t=require("./ActionButton.module.scss.cjs");function c({icon:o,label:a,active:e,destructive:u=!1,className:i,type:s="button",...l}){const r=[t.default["action-button"],e?t.default["action-button--active"]:"",u?t.default["action-button--destructive"]:"",i??""].filter(Boolean).join(" ");return n.jsxs("button",{className:r,type:s,"aria-pressed":e===void 0?void 0:e,...l,children:[n.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:o}),n.jsx("span",{className:t.default["action-button__label"],children:a})]})}exports.default=c;
 //# sourceMappingURL=ActionButton.cjs.map

package/dist/components/action-button/ActionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: ReactNode;\n  label: string;\n  active?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n  icon,\n  label,\n  active = false,\n  destructive = false,\n  className,\n  ...htmlProps\n}: ActionButtonProps) {\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} aria-pressed={active} {...htmlProps}>\n      <span className={styles['action-button__icon']}>{icon}</span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","htmlProps","rootClass","styles","jsx"],"mappings":"6LAeA,SAAwBA,EAAa,CACnC,KAAAC,EACA,MAAAC,EACA,OAAAC,EAAS,GACT,YAAAC,EAAc,GACd,UAAAC,EACA,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBL,EAASK,EAAAA,QAAO,uBAAuB,EAAI,GAC3CJ,EAAcI,EAAAA,QAAO,4BAA4B,EAAI,GACrDH,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,SAAA,CAAO,UAAWE,EAAW,eAAcJ,EAAS,GAAGG,EACtD,SAAA,CAAAG,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,qBAAqB,EAAI,SAAAP,EAAK,QACrD,OAAA,CAAK,UAAWO,EAAAA,QAAO,sBAAsB,EAAI,SAAAN,CAAA,CAAM,CAAA,EAC1D,CAEJ"}
+{"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: ReactNode;\n  label: string;\n  /** When set, this is a toggle; maps to `aria-pressed`. */\n  active?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n  icon,\n  label,\n  active,\n  destructive = false,\n  className,\n  type = 'button',\n  ...htmlProps\n}: ActionButtonProps) {\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      aria-pressed={active === undefined ? undefined : active}\n      {...htmlProps}\n    >\n      <span className={styles['action-button__icon']} aria-hidden>\n        {icon}\n      </span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","type","htmlProps","rootClass","styles","jsxs","jsx"],"mappings":"6LAgBA,SAAwBA,EAAa,CACnC,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBN,EAASM,EAAAA,QAAO,uBAAuB,EAAI,GAC3CL,EAAcK,EAAAA,QAAO,4BAA4B,EAAI,GACrDJ,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,EAAAA,KAAC,SAAA,CACC,UAAWF,EACX,KAAAF,EACA,eAAcH,IAAW,OAAY,OAAYA,EAChD,GAAGI,EAEJ,SAAA,CAAAI,EAAAA,IAAC,QAAK,UAAWF,UAAO,qBAAqB,EAAG,cAAW,GACxD,SAAAR,EACH,QACC,OAAA,CAAK,UAAWQ,EAAAA,QAAO,sBAAsB,EAAI,SAAAP,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D"}

package/dist/components/action-button/ActionButton.d.ts

@@ -2,6 +2,7 @@ import { ButtonHTMLAttributes, ReactNode } from 'react';
 export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     icon: ReactNode;
     label: string;
+    /** When set, this is a toggle; maps to `aria-pressed`. */
     active?: boolean;
     destructive?: boolean;
 }
@@ -10,5 +11,5 @@ export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElemen
  * profile popover, a channel info panel, a card. They sit close to the content they act on
  * and read as a row of equal-weight choices.
  */
-export default function ActionButton({ icon, label, active, destructive, className, ...htmlProps }: ActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function ActionButton({ icon, label, active, destructive, className, type, ...htmlProps }: ActionButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ActionButton.d.ts.map

package/dist/components/action-button/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,KAAK,EACL,MAAc,EACd,WAAmB,EACnB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAgBnB"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,WAAmB,EACnB,SAAS,EACT,IAAe,EACf,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAuBnB"}

package/dist/components/action-button/ActionButton.js

@@ -1,25 +1,35 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
 import t from "./ActionButton.module.scss.js";
-function f({
+function m({
   icon: a,
   label: s,
-  active: o = !1,
-  destructive: e = !1,
-  className: i,
+  active: o,
+  destructive: i = !1,
+  className: e,
+  type: r = "button",
   ...c
 }) {
   const l = [
     t["action-button"],
     o ? t["action-button--active"] : "",
-    e ? t["action-button--destructive"] : "",
-    i ?? ""
+    i ? t["action-button--destructive"] : "",
+    e ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("button", { className: l, "aria-pressed": o, ...c, children: [
-    /* @__PURE__ */ n("span", { className: t["action-button__icon"], children: a }),
-    /* @__PURE__ */ n("span", { className: t["action-button__label"], children: s })
-  ] });
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      className: l,
+      type: r,
+      "aria-pressed": o === void 0 ? void 0 : o,
+      ...c,
+      children: [
+        /* @__PURE__ */ n("span", { className: t["action-button__icon"], "aria-hidden": !0, children: a }),
+        /* @__PURE__ */ n("span", { className: t["action-button__label"], children: s })
+      ]
+    }
+  );
 }
 export {
-  f as default
+  m as default
 };
 //# sourceMappingURL=ActionButton.js.map

package/dist/components/action-button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: ReactNode;\n  label: string;\n  active?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n  icon,\n  label,\n  active = false,\n  destructive = false,\n  className,\n  ...htmlProps\n}: ActionButtonProps) {\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} aria-pressed={active} {...htmlProps}>\n      <span className={styles['action-button__icon']}>{icon}</span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","htmlProps","rootClass","styles","jsx"],"mappings":";;AAeA,SAAwBA,EAAa;AAAA,EACnC,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBL,IAASK,EAAO,uBAAuB,IAAI;AAAA,IAC3CJ,IAAcI,EAAO,4BAA4B,IAAI;AAAA,IACrDH,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,UAAA,EAAO,WAAWE,GAAW,gBAAcJ,GAAS,GAAGG,GACtD,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWD,EAAO,qBAAqB,GAAI,UAAAP,GAAK;AAAA,sBACrD,QAAA,EAAK,WAAWO,EAAO,sBAAsB,GAAI,UAAAN,EAAA,CAAM;AAAA,EAAA,GAC1D;AAEJ;"}
+{"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport styles from './ActionButton.module.scss';\n\nexport interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: ReactNode;\n  label: string;\n  /** When set, this is a toggle; maps to `aria-pressed`. */\n  active?: boolean;\n  destructive?: boolean;\n}\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n */\nexport default function ActionButton({\n  icon,\n  label,\n  active,\n  destructive = false,\n  className,\n  type = 'button',\n  ...htmlProps\n}: ActionButtonProps) {\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      className={rootClass}\n      type={type}\n      aria-pressed={active === undefined ? undefined : active}\n      {...htmlProps}\n    >\n      <span className={styles['action-button__icon']} aria-hidden>\n        {icon}\n      </span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}\n"],"names":["ActionButton","icon","label","active","destructive","className","type","htmlProps","rootClass","styles","jsxs","jsx"],"mappings":";;AAgBA,SAAwBA,EAAa;AAAA,EACnC,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBN,IAASM,EAAO,uBAAuB,IAAI;AAAA,IAC3CL,IAAcK,EAAO,4BAA4B,IAAI;AAAA,IACrDJ,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAAF;AAAA,MACA,gBAAcH,MAAW,SAAY,SAAYA;AAAA,MAChD,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAK,WAAWF,EAAO,qBAAqB,GAAG,eAAW,IACxD,UAAAR,GACH;AAAA,0BACC,QAAA,EAAK,WAAWQ,EAAO,sBAAsB,GAAI,UAAAP,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/dist/components/action-button/ActionButton.module.css

@@ -1 +1 @@
-._action-button_3tbmq_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:88px;padding:var(--spacing-m) var(--spacing-l) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);color:rgba(var(--center-channel-color-rgb),.64);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)}._action-button_3tbmq_2:focus-visible{outline:none}._action-button_3tbmq_2:focus-visible:not(:disabled){box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--button-bg)}._action-button_3tbmq_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._action-button_3tbmq_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._action-button_3tbmq_2:disabled{opacity:.48;cursor:not-allowed}._action-button--active_3tbmq_34{background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_3tbmq_34 ._action-button__icon_3tbmq_37,._action-button--active_3tbmq_34 ._action-button__label_3tbmq_38{color:var(--link-color)}._action-button--active_3tbmq_34:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_3tbmq_34:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_3tbmq_47{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);color:var(--error-text, var(--color-danger))}._action-button--destructive_3tbmq_47:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._action-button--destructive_3tbmq_47:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._action-button--destructive_3tbmq_47:focus-visible:not(:disabled){box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--error-text, var(--color-danger))}._action-button__icon_3tbmq_37{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0}._action-button__label_3tbmq_38{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;white-space:nowrap;text-align:center}
+._action-button_1u191_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:88px;padding:var(--spacing-m) var(--spacing-l) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color 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}._action-button_1u191_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._action-button_1u191_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._action-button_1u191_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);color:var(--link-color)}._action-button_1u191_2:disabled{opacity:.48;cursor:not-allowed}._action-button--active_1u191_34{background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_1u191_34 ._action-button__icon_1u191_37,._action-button--active_1u191_34 ._action-button__label_1u191_38{color:var(--link-color)}._action-button--active_1u191_34:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_1u191_34:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_1u191_47{--focus-ring-color: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04);color:var(--error-text, var(--color-danger))}._action-button--destructive_1u191_47:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._action-button--destructive_1u191_47:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);color:var(--error-text, var(--color-danger))}._action-button__icon_1u191_37{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0}._action-button__label_1u191_38{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;white-space:nowrap;text-align:center}

package/dist/components/action-button/ActionButton.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.module.css');const t={"action-button":"_action-button_3tbmq_2","action-button--active":"_action-button--active_3tbmq_34","action-button__icon":"_action-button__icon_3tbmq_37","action-button__label":"_action-button__label_3tbmq_38","action-button--destructive":"_action-button--destructive_3tbmq_47"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.module.css');const t={"action-button":"_action-button_1u191_2","action-button--active":"_action-button--active_1u191_34","action-button__icon":"_action-button__icon_1u191_37","action-button__label":"_action-button__label_1u191_38","action-button--destructive":"_action-button--destructive_1u191_47"};exports.default=t;
 //# sourceMappingURL=ActionButton.module.scss.cjs.map

package/dist/components/action-button/ActionButton.module.scss.js

@@ -1,9 +1,9 @@
 import './ActionButton.module.css';const t = {
-  "action-button": "_action-button_3tbmq_2",
-  "action-button--active": "_action-button--active_3tbmq_34",
-  "action-button__icon": "_action-button__icon_3tbmq_37",
-  "action-button__label": "_action-button__label_3tbmq_38",
-  "action-button--destructive": "_action-button--destructive_3tbmq_47"
+  "action-button": "_action-button_1u191_2",
+  "action-button--active": "_action-button--active_1u191_34",
+  "action-button__icon": "_action-button__icon_1u191_37",
+  "action-button__label": "_action-button__label_1u191_38",
+  "action-button--destructive": "_action-button--destructive_1u191_47"
 };
 export {
   t as default

package/dist/components/admin-panel/AdminPanel.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, ReactNode } from 'react';
-import { AdminPanelExpandedState } from '../AdminPanelHeader/AdminPanelHeader';
+import { AdminPanelExpandedState } from '../admin-panel-header/AdminPanelHeader';
 export type { AdminPanelExpandedState };
 export interface AdminPanelProps {
     title: ReactNode;

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

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

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 } 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":"k2CAoEMA,EAGF,CACF,MAAOC,EACP,KAAMC,EACN,MAAOC,EACP,QAASC,EACT,aAAcC,EACd,MAAOC,EACP,IAAKC,EACL,WAAYC,EACZ,KAAMC,EACN,MAAOC,EACP,KAAMC,EACN,IAAKC,CACP,EAEMC,EAGF,CACF,MAAO,yBACP,KAAM,OACN,MAAO,0BACP,QAAS,OACT,aAAc,yBACd,MAAO,OACP,IAAK,wBACL,WAAY,2BACZ,KAAM,OACN,MAAO,yBACP,KAAM,yBACN,IAAK,MACP,EAOA,SAAwBC,EAAe,CACrC,UAAAC,EAAY,GACZ,SAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,UACX,MAAAC,EAAQ,UACR,SAAAC,EAAW,EACX,aAAAC,EACA,WAAAC,EACA,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,OAAAC,CACF,EAAwB,CACtB,MAAMC,EAAcT,IAAU,YACxBU,EAAaV,IAAU,WACvBW,EAAYX,IAAU,UAEtBY,EAAcD,EAAkD,GAAtCE,EAAAA,QAAO,oBAAoBb,CAAK,EAAE,EAC5Dc,EAAY,CAACD,UAAO,iBAAiB,EAAGD,EAAYhB,CAAS,EAChE,OAAO,OAAO,EACd,KAAK,GAAG,EAELmB,EACJhB,IAAa,kBACTlB,EAAgBkB,CAAQ,EACxBd,EAEA+B,EACJjB,IAAa,kBAAoBL,EAAiBK,CAAQ,EAAI,OAE1DkB,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAApB,IAAa,mBAAqBG,EACjCkB,EAAAA,IAAC,MAAA,CACC,IAAKlB,EACL,IAAI,GACJ,UAAWW,EAAAA,QAAO,4BAA4B,CAAA,CAAA,EAGhDO,EAAAA,IAAC,MAAA,CACC,UAAWP,EAAAA,QAAO,uBAAuB,EACzC,MAAOG,EAAY,CAAE,MAAOA,GAAc,OAE1C,SAAAI,EAAAA,IAACC,WAAK,MAAOD,EAAAA,IAACL,GAAS,KAAM,EAAA,CAAI,EAAI,KAAK,IAAA,CAAK,CAAA,CAAA,EAInDG,EAAAA,KAAC,MAAA,CAAI,UAAWL,EAAAA,QAAO,uBAAuB,EAC5C,SAAA,CAAAO,MAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,2BAA2B,EAAI,SAAAhB,EAAS,QAC/D,MAAA,CAAI,UAAWgB,UAAO,oCAAoC,EACxD,SAAAJ,EACCW,MAAC,OAAA,CAAK,UAAWP,UAAO,iCAAiC,EACtD,wBAAeZ,CAAQ,IAAA,CAC1B,EAEAiB,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAhB,GAAciB,EAAAA,IAACE,EAAAA,QAAA,CAAI,MAAOnB,CAAA,CAAY,EACtCL,GACCoB,EAAAA,KAAC,MAAA,CAAI,UAAWL,UAAO,0BAA0B,EAC/C,SAAA,CAAAO,EAAAA,IAAC,QAAM,SAAAtB,CAAA,CAAS,EACfM,GACCc,EAAAA,KAAC,OAAA,CAAK,UAAWL,UAAO,2BAA2B,EACjD,SAAA,CAAAO,EAAAA,IAAC,QAAM,SAAA,GAAA,CAAI,EACXA,EAAAA,IAAC,QAAM,SAAAhB,CAAA,CAAc,CAAA,CAAA,CACvB,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,EACF,EAGF,OACEc,EAAAA,KAAC,MAAA,CAAI,UAAWJ,EACd,SAAA,CAAAM,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,4BAA4B,EACjD,gBAAC,MAAA,CAAI,UAAWA,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAF,GAAaN,EACZe,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,GAAGP,EAAAA,QAAO,uBAAuB,CAAC,IAAIA,EAAAA,QAAO,uBAAuB,CAAC,GAChF,QAASR,EACT,aAAY,QAAQR,CAAQ,GAE3B,SAAAoB,CAAA,CAAA,EAGHG,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,uBAAuB,EAAI,SAAAI,EAAa,EAGjEG,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,wBAAwB,EAC7C,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWL,EAAAA,QAAO,0BAA0B,EAC7C,SAAA,EAAAH,GAAcD,IACdW,EAAAA,IAACG,EAAAA,QAAA,CACC,KAAK,QACL,WAAOF,UAAA,CAAK,YAAQG,EAAA,EAAU,EAAI,KAAK,KAAK,EAC5C,aACEf,EAAc,gBAAkB,oBAElC,QAASH,CAAA,CAAA,EAGZK,GACCO,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAC,EAAAA,IAACG,EAAAA,QAAA,CACC,KAAK,QACL,WAAOF,UAAA,CAAK,YAAQI,EAAA,EAAiB,EAAI,KAAK,KAAK,EACnD,aAAW,eACX,QAASjB,CAAA,CAAA,EAEXY,EAAAA,IAACG,EAAAA,QAAA,CACC,KAAK,QACL,WAAOF,UAAA,CAAK,YAAQK,EAAA,EAAoB,EAAI,KAAK,KAAK,EACtD,aAAW,WACX,QAASnB,CAAA,CAAA,CACX,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CACF,EAECE,GACCW,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,+BAA+B,EACpD,SAAAO,EAAAA,IAAC,MAAA,CACC,UAAWP,EAAAA,QAAO,gCAAgC,EAClD,MAAO,CAAE,MAAO,GAAG,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGZ,CAAQ,CAAC,CAAC,GAAA,CAAI,CAAA,CAC7D,CACF,CAAA,EAEJ,CAEJ"}

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

@@ -18,6 +18,8 @@ export interface AttachmentCardProps {
     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). */
@@ -30,5 +32,5 @@ export interface AttachmentCardProps {
  * 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, }: 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":"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

@@ -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 { 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 __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 __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 __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 __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 V = {
+const G = {
   audio: E,
   code: P,
-  excel: y,
-  generic: _,
+  excel: k,
+  generic: I,
   "image-icon": D,
   patch: j,
-  pdf: k,
-  powerpoint: U,
-  text: $,
-  video: A,
-  word: B,
-  zip: M
-}, Y = {
+  pdf: U,
+  powerpoint: A,
+  text: B,
+  video: M,
+  word: R,
+  zip: V
+}, W = {
   audio: "var(--attachment-blue)",
   code: void 0,
   excel: "var(--attachment-green)",
@@ -45,80 +45,90 @@ const V = {
   word: "var(--attachment-blue)",
   zip: void 0
 };
-function ma({
-  className: v = "",
-  fileName: f,
-  fileMeta: l,
+function sa({
+  className: N = "",
+  fileName: d,
+  fileMeta: s,
   fileType: i = "generic",
-  state: o = "default",
-  progress: m = 0,
-  thumbnailSrc: d,
-  channelTag: s,
-  dateTimeStamp: h,
-  onRemove: I,
-  onDownload: N,
-  onMore: F
+  state: n = "default",
+  progress: h = 0,
+  thumbnailSrc: p,
+  channelTag: _,
+  dateTimeStamp: u,
+  onOpen: g,
+  onRemove: F,
+  onDownload: O,
+  onMore: b
 }) {
-  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 = 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: [
-        (O || c) && /* @__PURE__ */ a(
-          r,
+        (L || c) && /* @__PURE__ */ a(
+          m,
           {
             size: "small",
-            icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(C, {}), size: "16" }),
+            icon: /* @__PURE__ */ a(o, { glyph: /* @__PURE__ */ a(w, {}), size: "16" }),
             "aria-label": c ? "Cancel upload" : "Remove attachment",
-            onClick: I
+            onClick: F
           }
         ),
-        p && /* @__PURE__ */ t(u, { children: [
+        r && /* @__PURE__ */ t(l, { children: [
           /* @__PURE__ */ a(
-            r,
+            m,
             {
               size: "small",
-              icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(z, {}), size: "16" }),
+              icon: /* @__PURE__ */ a(o, { glyph: /* @__PURE__ */ a(y, {}), size: "16" }),
               "aria-label": "More options",
-              onClick: F
+              onClick: b
             }
           ),
           /* @__PURE__ */ a(
-            r,
+            m,
             {
               size: "small",
-              icon: /* @__PURE__ */ a(n, { glyph: /* @__PURE__ */ a(w, {}), size: "16" }),
+              icon: /* @__PURE__ */ a(o, { glyph: /* @__PURE__ */ a($, {}), size: "16" }),
               "aria-label": "Download",
-              onClick: N
+              onClick: O
             }
           )
         ] })
@@ -128,12 +138,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, h))}%` }
       }
     ) })
   ] });
 }
 export {
-  ma as default
+  sa as default
 };
 //# sourceMappingURL=AttachmentCard.js.map