@mmlogic/components 0.5.2 → 0.5.4

package/dist/cjs/mrd-merge-view.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DzRfoAPz.js');
-var clientLayout = require('./client-layout-RZ3Ix-4a.js');
-var cellRenderer = require('./cell-renderer-CmaO0CZT.js');
+var index = require('./index-DVbdkYO3.js');
+var clientLayout = require('./client-layout-CqVuJumR.js');
+var cellRenderer = require('./cell-renderer-Coy-aD3k.js');
 
 /**
  * Whether a layout item can appear in the merge diff at all. m-n relations
@@ -257,14 +257,14 @@ const MrdMergeView = class {
         var _a, _b;
         let stepContent;
         if (this.step === 'search') {
-            stepContent = (index.h(MergeSearchStep, { key: '4b79504f62f85274c9cd9681b6819c2318f4246a', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+            stepContent = (index.h(MergeSearchStep, { key: '3adb36fb46aa7260641a46a2cf27cc0ef320876f', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
         }
         else {
             const diff = diffFields(this.fields, this.currentRecord, this.candidate);
             const bLabel = candidateLabel(this.candidate);
             stepContent = this.step === 'compare' ? (index.h(MergeCompareStep, { locale: this.locale, currentLabel: this.currentLabel, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, recordA: this.currentRecord, recordB: (_a = this.candidate) !== null && _a !== void 0 ? _a : {}, resolutions: this.resolutions, openHistoryKey: this.openHistoryKey, onResolve: this.handleResolve, onToggleHistory: this.handleToggleHistory, onChangeCandidate: this.handleChangeCandidate, onContinue: this.handleContinue })) : (index.h(MergeConfirmStep, { locale: this.locale, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, resolutions: this.resolutions, recordB: (_b = this.candidate) !== null && _b !== void 0 ? _b : {}, openHistoryKey: this.openHistoryKey, onToggleHistory: this.handleToggleHistory, onBack: this.handleBack, onConfirm: this.handleConfirm }));
         }
-        return (index.h(index.Host, { key: 'f3fc046fa728646e2ff686d2eae30024da3121e1' }, index.h("div", { key: '55bef786973d22dce49be021cfb78588b119139c', class: "mrd-merge-view" }, stepContent)));
+        return (index.h(index.Host, { key: 'e33a6d66a220b28cc9533da78dc274e2d7ec5c4a' }, index.h("div", { key: 'b5fb1390d86192f9f6f15e3ccb89e2d21d9c7c8b', class: "mrd-merge-view" }, stepContent)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "components/documents/mrd-document-container/mrd-document-container.js",
     "components/documents/mrd-document-list/mrd-document-list.js",
     "components/documents/mrd-document-view/mrd-document-view.js",
+    "components/email/mrd-email-view/mrd-email-view.js",
     "components/fields/mrd-boolean-field/mrd-boolean-field.js",
     "components/fields/mrd-currency-field/mrd-currency-field.js",
     "components/fields/mrd-date-field/mrd-date-field.js",
@@ -21,6 +22,7 @@
     "components/fields/mrd-time-field/mrd-time-field.js",
     "components/form/mrd-field/mrd-field.js",
     "components/form/mrd-form/mrd-form.js",
+    "components/invoice/mrd-invoice-view/mrd-invoice-view.js",
     "components/layout/mrd-layout-section/mrd-layout-section.js",
     "components/merge/mrd-merge-view/mrd-merge-view.js",
     "components/table/mrd-table/mrd-table.js"

package/dist/collection/components/documents/mrd-document-container/mrd-document-container.css

@@ -42,6 +42,9 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+.mrd-document-container__file-input {
+  display: none;
+}
 .mrd-document-container__seg {
   display: inline-flex;
   gap: 2px;

package/dist/collection/components/documents/mrd-document-container/mrd-document-container.js

@@ -32,12 +32,28 @@ export class MrdDocumentContainer {
         this.mode = 'tree';
         /** Whether the folder tree currently has a valid target for "New folder". */
         this.canCreate = false;
+        /** Name of that target (folder path, or the container's label), for the upload tooltip. */
+        this.targetLabel = '';
         /** Whether the currently mounted table has been init()'d. Reset on every mode switch. */
         this.tableInited = false;
         this.createFolder = () => {
             var _a;
             (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.createFolder();
         };
+        this.pickFile = () => {
+            var _a;
+            (_a = this.fileInputEl) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        /** One file per upload, matching the drop handler. Reset the input afterwards
+         *  so picking the same file twice in a row still fires a change event. */
+        this.onFilePicked = (e) => {
+            var _a, _b;
+            const input = e.target;
+            const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file)
+                (_b = this.listEl) === null || _b === void 0 ? void 0 : _b.uploadFile(file);
+            input.value = '';
+        };
     }
     /** The embedded table does not self-load: like every mrd-table it waits for the
      *  host to call init() (which emits mrdLoadPage, and — once page 0 lands —
@@ -62,7 +78,7 @@ export class MrdDocumentContainer {
     }
     // ── Toolbar ────────────────────────────────────────────────────────────────
     renderToolbar() {
-        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
+        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, title: this.targetLabel ? `${t('doc_upload_to', this.locale)} ${this.targetLabel}` : undefined, onClick: this.pickFile }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("path", { d: "M12 3v13M7 8l5-5 5 5" })), t('doc_upload', this.locale))), h("input", { type: "file", class: "mrd-document-container__file-input", ref: el => (this.fileInputEl = el), onChange: this.onFilePicked }), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
     }
     // ── Bodies ───────────────────────────────────────────────────────────────
     renderTree() {
@@ -78,6 +94,9 @@ export class MrdDocumentContainer {
             }, onMrdCanCreate: (e) => {
                 e.stopPropagation();
                 this.canCreate = e.detail;
+            }, onMrdTargetLabel: (e) => {
+                e.stopPropagation();
+                this.targetLabel = e.detail;
             }, onMrdUpdateObject: (e) => {
                 e.stopPropagation();
                 this.mrdUpdateObject.emit(e.detail);
@@ -114,7 +133,7 @@ export class MrdDocumentContainer {
     }
     render() {
         const treeMode = this.mode === 'tree';
-        return (h(Host, { key: '4d21f26c956773c63cbf5118394c6afa29d6014d' }, this.renderToolbar(), h("div", { key: 'bc070236bf9a7d0eba57aa2cd70fa3ae36cbf5f1', class: {
+        return (h(Host, { key: 'ae948e2458d9087179e850b527802c489067d93f' }, this.renderToolbar(), h("div", { key: 'a04e1a78413aa794d0bda551aeb9c6245f1aafa2', class: {
                 'mrd-document-container__body': true,
                 'mrd-document-container__body--tree': treeMode,
             }, style: treeMode ? { height: `${this.height}px`, overflowY: 'auto' } : {} }, treeMode ? this.renderTree() : this.renderList())));
@@ -287,7 +306,8 @@ export class MrdDocumentContainer {
     static get states() {
         return {
             "mode": {},
-            "canCreate": {}
+            "canCreate": {},
+            "targetLabel": {}
         };
     }
     static get events() {

package/dist/collection/components/documents/mrd-document-list/mrd-document-list.js

@@ -64,6 +64,8 @@ export class MrdDocumentList {
         this.newFolderSeq = 0;
         /** Last emitted canCreateFolder value, to only emit mrdCanCreate on change. */
         this.lastCanCreate = false;
+        /** Last emitted upload-target label, to only emit mrdTargetLabel on change. */
+        this.lastTargetLabel = '';
         // ── Drag & drop (move a document into another folder) ──────────────────────
         /** The document row currently being dragged. */
         this.dragDoc = null;
@@ -237,6 +239,22 @@ export class MrdDocumentList {
             this.lastCanCreate = can;
             this.mrdCanCreate.emit(can);
         }
+        const label = this.targetLabel;
+        if (label !== this.lastTargetLabel) {
+            this.lastTargetLabel = label;
+            this.mrdTargetLabel.emit(label);
+        }
+    }
+    /** Human-readable name of the node a new folder or upload lands in — the
+     *  folder path when one is selected, otherwise the container's own label.
+     *  Empty when there is no target at all. */
+    get targetLabel() {
+        var _a;
+        const resolved = this.resolveTarget();
+        if (!resolved)
+            return '';
+        const { target, container } = resolved;
+        return (_a = folderStringOf(target, container)) !== null && _a !== void 0 ? _a : target.label;
     }
     // ── Slot field names ─────────────────────────────────────────────────────
     get containerField() {
@@ -510,12 +528,28 @@ export class MrdDocumentList {
         this.dropTargetId = null;
         if (!file)
             return;
+        this.beginUpload(file, node, container);
+    }
+    /** Shared by the file drop and the host toolbar's upload button. */
+    beginUpload(file, node, container) {
         this.pendingUpload = { file, node, container };
         node.open = true;
         this.uploadingNodeId = node.id;
         this.bump();
         this.mrdUpload.emit({ file });
     }
+    /** Upload a file into the current target — the selected folder/container, or
+     *  the only container when there is just one. Called by the host toolbar
+     *  (mrd-document-container). No-op without a target, or while another upload
+     *  is still awaiting its setFileReference. */
+    async uploadFile(file) {
+        if (!file || this.pendingUpload)
+            return;
+        const resolved = this.resolveTarget();
+        if (!resolved)
+            return;
+        this.beginUpload(file, resolved.target, resolved.container);
+    }
     /** Host callback with the uploaded file reference. Builds the create payload
      *  from the archetype slots and requests the new document. */
     async setFileReference(uri) {
@@ -650,7 +684,7 @@ export class MrdDocumentList {
             body = renderLoadingRow(ctx, 0);
         }
         else if (this.containers.length === 0) {
-            body = h("div", { key: '308725d741deb384082bd514edd34593f7d662a2', class: "mrd-document-list__empty" }, t('no_results', this.locale));
+            body = h("div", { key: '63604a99fc62d9108f61b8efc126c0cd3e8fc5ed', class: "mrd-document-list__empty" }, t('no_results', this.locale));
         }
         else if (this.singleContainer) {
             // Dossier context: render the single container's folder tree at the root.
@@ -668,7 +702,7 @@ export class MrdDocumentList {
         else {
             body = this.containers.map(c => renderContainerNode(ctx, c, 0));
         }
-        return (h(Host, { key: '9d5fde912999b57a0f0b737980d59e94f385f11d' }, h("div", { key: '17191411c2e626995f08b66bad755342fe3b13ae', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
+        return (h(Host, { key: '2a092e3a7483deb1fb30753b0c0428aaf75c303a' }, h("div", { key: '2b716c912a272b925a95133de5b1ff2abedd9dbc', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
     }
     static get is() { return "mrd-document-list"; }
     static get encapsulation() { return "scoped"; }
@@ -880,6 +914,21 @@ export class MrdDocumentList {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "mrdTargetLabel",
+                "name": "mrdTargetLabel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the current target changes: the folder path a new folder or\nupload lands in, or the container's label when no folder is selected. Empty\nwhen there is no target. Lets a host toolbar name the destination."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }, {
                 "method": "mrdUpdateObject",
                 "name": "mrdUpdateObject",
@@ -1023,6 +1072,31 @@ export class MrdDocumentList {
                     "tags": []
                 }
             },
+            "uploadFile": {
+                "complexType": {
+                    "signature": "(file: File) => Promise<void>",
+                    "parameters": [{
+                            "name": "file",
+                            "type": "File",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Upload a file into the current target \u2014 the selected folder/container, or\nthe only container when there is just one. Called by the host toolbar\n(mrd-document-container). No-op without a target, or while another upload\nis still awaiting its setFileReference.",
+                    "tags": []
+                }
+            },
             "setFileReference": {
                 "complexType": {
                     "signature": "(uri: string) => Promise<void>",

package/dist/collection/components/documents/mrd-document-view/mrd-document-view.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { t } from "../../../utils/i18n";
 import { formatDate } from "../../../utils/format";
-import { attachmentsFromRecord } from "../../../utils/document-attachments";
+import { attachmentsFromRecord, attachmentsKey } from "../../../utils/document-attachments";
 /**
  * Archetype-driven single-document view. Given a `commons.document` binding and a
  * data record, renders the document recognisably — title, date, a navigation
@@ -24,9 +24,9 @@ export class MrdDocumentView {
         /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
         this.data = {};
         this.locale = navigator.language;
-        /** Tracks the href attachments were last emitted for, so componentDidLoad and
+        /** Tracks the key attachments were last emitted for, so componentDidLoad and
          *  the data watcher don't emit duplicate events for the same file. */
-        this.lastAttachmentHref = null;
+        this.lastAttachmentKey = null;
     }
     componentDidLoad() {
         this.emitAttachmentsIfNeeded();
@@ -35,12 +35,11 @@ export class MrdDocumentView {
         this.emitAttachmentsIfNeeded();
     }
     emitAttachmentsIfNeeded() {
-        var _a, _b;
         const attachments = attachmentsFromRecord(this.archetype, this.data);
-        const href = (_b = (_a = attachments[0]) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : null;
-        if (href === this.lastAttachmentHref)
+        const key = attachmentsKey(attachments);
+        if (key === this.lastAttachmentKey)
             return;
-        this.lastAttachmentHref = href;
+        this.lastAttachmentKey = key;
         this.mrdAttachments.emit({ attachments });
     }
     /** Value of a value-slot: reads data[field] via the slot→field map. */
@@ -88,7 +87,7 @@ export class MrdDocumentView {
         const fileRaw = this.slotValue('file');
         const fileHref = (_a = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.href) !== null && _a !== void 0 ? _a : '';
         const fileName = (_b = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.fileName) !== null && _b !== void 0 ? _b : (fileRaw ? String(fileRaw) : '');
-        return (h(Host, { key: 'd4e8d4a6c5c66677df3d4e80943fc4538d9a2be7' }, h("div", { key: 'c67bb1742590dc3ab3cec959f20dfa9030268411', class: "mrd-document-view" }, h("div", { key: '5da6e15d1f67990a9ee06bc07b717e5fa17a2ee7', class: "mrd-document-view__body" }, h("div", { key: '0fc38933add3fff48096c48d2fb6cd06fb5d1eac', class: "mrd-document-view__meta" }, title && h("h1", { key: 'e9ac8d99f9afae6b64dd7e6bd461c54b92a6ea39', class: "mrd-document-view__title" }, title), date && h("p", { key: '8591d77b300ed3c021cfa64b8e9564dee98199cd', class: "mrd-document-view__date" }, date), this.renderContainer(), fileRaw && this.renderFileMeta(fileName, fileHref), summary && (h("div", { key: '8a6d630afcf187fa86c9bab77d06d93695fd5c9f', class: "mrd-document-view__summary" }, h("div", { key: 'bd98e2cf740d08837accd8d260973d4e51cd24f7', class: "mrd-document-view__summary-body", innerHTML: summary }))))))));
+        return (h(Host, { key: '405890ef9135d4e9f15532dbc669c4d8d1e8b201' }, h("div", { key: 'be60f0867664a0ded6a85b17999ab207f042d8e2', class: "mrd-document-view" }, h("div", { key: 'f0202da7e83a05f782ba70c3cff91049d56c3e04', class: "mrd-document-view__body" }, h("div", { key: '85d5075c6751200ae3840b1d9e4544792ea52b5e', class: "mrd-document-view__meta" }, title && h("h1", { key: '63a4676ef488f2b0cf2347e0aa4e3c728b2d9351', class: "mrd-document-view__title" }, title), date && h("p", { key: '4ff630a9967509f661050ba04eece5ca26773ce2', class: "mrd-document-view__date" }, date), this.renderContainer(), fileRaw && this.renderFileMeta(fileName, fileHref), summary && (h("div", { key: '412e4934755e801e8a6cd10f5d00da82f9b6aa6a', class: "mrd-document-view__summary" }, h("div", { key: 'fc5c1b88cdba2f2398d09b42ede0b4dc556cd0f3', class: "mrd-document-view__summary-body", innerHTML: summary }))))))));
     }
     static get is() { return "mrd-document-view"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/email/mrd-email-view/mrd-email-view.css

@@ -0,0 +1,126 @@
+:host {
+  display: block;
+}
+
+.mrd-email-view {
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-4);
+}
+.mrd-email-view__subject {
+  font-size: var(--mrd-font-size-2xl);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.mrd-email-view__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+.mrd-email-view__header-row {
+  display: flex;
+  gap: var(--mrd-space-3);
+  font-size: var(--mrd-font-size-sm);
+}
+.mrd-email-view__header-label {
+  flex-shrink: 0;
+  width: 3rem;
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-email-view__header-value {
+  color: var(--mrd-color-neutral-700);
+}
+.mrd-email-view__link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: inherit;
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+}
+.mrd-email-view__link:hover {
+  text-decoration: underline;
+}
+.mrd-email-view__container-link {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+}
+.mrd-email-view__container-link:hover {
+  text-decoration: underline;
+}
+.mrd-email-view__divider {
+  height: var(--mrd-border-width);
+  background: var(--mrd-color-neutral-200);
+}
+.mrd-email-view__body-html {
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-700);
+  line-height: var(--mrd-line-height-relaxed);
+  word-break: break-word;
+}
+.mrd-email-view__body-text {
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-700);
+  line-height: var(--mrd-line-height-relaxed);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.mrd-email-view__attachments {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+}
+.mrd-email-view__attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  align-self: flex-start;
+  height: 2rem;
+  padding: 0 var(--mrd-space-3);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-300);
+  border-radius: var(--mrd-border-radius);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-700);
+  cursor: pointer;
+}
+.mrd-email-view__attachment:hover {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-email-view__attachment-icon {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  flex-shrink: 0;
+}
+.mrd-email-view__headers {
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-email-view__headers summary {
+  cursor: pointer;
+  font-weight: var(--mrd-font-weight-medium);
+}
+.mrd-email-view__headers-body {
+  margin: var(--mrd-space-2) 0 0 0;
+  padding: var(--mrd-space-3);
+  background: var(--mrd-color-neutral-50);
+  border-radius: var(--mrd-border-radius);
+  white-space: pre-wrap;
+  word-break: break-word;
+}