npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.4 → 0.1.0-alpha.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/dist/compass-ui-standalone.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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 /** 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;"}
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 /** 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 CHANGED Viewed

	@@ -1 +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}
1	+ ._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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/attachment-card/AttachmentCard.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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 CHANGED Viewed

@@ -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