@mmlogic/components 0.5.14 → 0.5.16

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.js

@@ -1,8 +1,8 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, ARCHETYPE_INVOICE, ARCHETYPE_EMAIL, ARCHETYPE_INVOICE_LINE, } from "../../../types/client-layout";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, ARCHETYPE_INVOICE, ARCHETYPE_EMAIL, ARCHETYPE_INVOICE_LINE, ARCHETYPE_MEMO, } from "../../../types/client-layout";
 import { t } from "../../../utils/i18n";
-import { viewKeyFor, flattenItems, buildContainerHref, showsEmpty } from "./layout-helpers";
-import { renderField } from "./field-value";
+import { viewKeyFor, flattenItems, buildContainerHref, showsEmpty, hasRelationValue } from "./layout-helpers";
+import { renderField, isFieldVisible } from "./field-value";
 export class MrdLayoutSection {
     constructor() {
         /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
@@ -21,6 +21,11 @@ export class MrdLayoutSection {
          *  create ("+") action and the documents view's New folder / Upload are disabled
          *  with a tooltip explaining why, so it's clear at a glance the user can't mutate data. */
         this.readOnly = false;
+        /** The active account's linked person record (userProfile.links.person), if any.
+         *  Threaded to mrd-memo-container so a top-level memo VIEW (no parent record to
+         *  attach a new memo to) can still offer "New memo" by falling back to the
+         *  account's own record as the container. */
+        this.me = null;
         this.searchQueryMap = {};
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
@@ -74,6 +79,14 @@ export class MrdLayoutSection {
                 await table.init();
             }
         }
+        // mrd-memo-container's card mode has no <mrd-table> — mrd-memo-list needs the
+        // same init() call to request its first page.
+        const memoLists = this.el.querySelectorAll('mrd-memo-list[data-view]');
+        for (const list of Array.from(memoLists)) {
+            if (typeof list.init === 'function') {
+                await list.init();
+            }
+        }
     }
     emitLoadImages() {
         for (const item of flattenItems(this.items)) {
@@ -107,12 +120,18 @@ export class MrdLayoutSection {
             return;
         }
         const table = this.el.querySelector(`mrd-table[data-view="${name}"]`);
-        if (!table)
+        if (table) {
+            if (totalElements !== undefined) {
+                table.totalElements = totalElements;
+            }
+            await table.setPage(page, rows, hasNext);
             return;
-        if (totalElements !== undefined) {
-            table.totalElements = totalElements;
         }
-        await table.setPage(page, rows, hasNext);
+        // Cards mode: mrd-memo-container mounts mrd-memo-list instead of mrd-table.
+        const memoList = this.el.querySelector(`mrd-memo-list[data-view="${name}"]`);
+        if (memoList) {
+            await memoList.setPage(page, rows, hasNext);
+        }
     }
     /** Inject aggregation totals into an embedded mrd-table for a VIEW or RELATED_VIEW item. */
     async setViewAggregations(name, data) {
@@ -135,11 +154,18 @@ export class MrdLayoutSection {
             await list.setFileReference(uri);
     }
     /** Inject the created document's href after a file-drop create, so the
-     *  optimistic row becomes navigable (see mrdCreateObject). */
+     *  optimistic row becomes navigable (see mrdCreateObject). For a memo
+     *  quick-create there is no optimistic row to resolve — simply reload the
+     *  container's current body so the new memo shows up. */
     async setViewCreatedObject(name, href) {
         const list = this.el.querySelector(`mrd-document-list[data-doclist="${name}"]`);
-        if (list === null || list === void 0 ? void 0 : list.setCreatedHref)
+        if (list === null || list === void 0 ? void 0 : list.setCreatedHref) {
             await list.setCreatedHref(href);
+            return;
+        }
+        const memoContainer = this.el.querySelector(`mrd-memo-container[data-view="${name}"]`);
+        if (memoContainer === null || memoContainer === void 0 ? void 0 : memoContainer.refresh)
+            await memoContainer.refresh();
     }
     /** Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox. */
     async setImagePreview(fieldName, url) {
@@ -186,7 +212,7 @@ export class MrdLayoutSection {
         else if (link === null || link === void 0 ? void 0 : link.name) {
             valueContent = makeBtn(link.href, link.name);
         }
-        const isEmpty = !valueContent;
+        const isEmpty = !hasRelationValue(item, this.data);
         if (isEmpty && !showsEmpty(item))
             return null;
         return (h("div", { class: `mrd-layout-section__field${isEmpty ? ' mrd-layout-section__field--empty' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, isEmpty ? t('value_empty', this.locale) : valueContent)));
@@ -201,7 +227,7 @@ export class MrdLayoutSection {
         return (h("div", { class: "mrd-layout-section__search", key: `search-${dataClass}` }, h("div", { class: "mrd-layout-section__search-wrap" }, h("svg", { class: "mrd-layout-section__search-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", "clip-rule": "evenodd" })), h("input", { class: "mrd-layout-section__search-input", type: "text", value: query, placeholder: (_c = item.label) !== null && _c !== void 0 ? _c : '', onInput: e => this.handleSearchInput(dataClass, e.target.value) })), results.length > 0 && (h("ul", { class: "mrd-layout-section__search-results" }, results.map(r => (h("li", { key: r.id, class: "mrd-layout-section__search-result" }, h("button", { class: "mrd-layout-section__search-result-btn", onClick: () => this.mrdNavigate.emit({ href: r.id, label: r.label }) }, h("span", { class: "mrd-layout-section__search-result-label" }, r.label), r.description && h("span", { class: "mrd-layout-section__search-result-desc" }, r.description)))))))));
     }
     renderRelatedView(item) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const key = viewKeyFor(item);
         if (!key)
             return null;
@@ -214,13 +240,25 @@ export class MrdLayoutSection {
         // The API publishes `archetypes` on the VIEW/RELATED_VIEW item itself
         // (sibling of `view`), not inside `view`.
         const docArchetype = resolveArchetype((_g = item.archetypes) !== null && _g !== void 0 ? _g : (_h = item.view) === null || _h === void 0 ? void 0 : _h.archetypes, ARCHETYPE_DOCUMENT);
+        const memoArchetype = !docArchetype ? resolveArchetype((_j = item.archetypes) !== null && _j !== void 0 ? _j : (_k = item.view) === null || _k === void 0 ? void 0 : _k.archetypes, ARCHETYPE_MEMO) : undefined;
         // Canonical parent href for single-container seeding: use the RELATED_VIEW's
         // fromClass (base class) rather than the route class, so polymorphic subtypes
         // resolve to the same container the documents actually reference.
         const containerHref = buildContainerHref(item, selfHref, parentId);
-        return (h("div", { class: "mrd-layout-section__related-view", key: `view-${key}` }, showTitle && item.label && h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), docArchetype
-            ? this.renderDocumentContainer(item, key, parentId, docArchetype, containerHref)
-            : this.renderTable(item, key, parentId)));
+        // A memo RELATED_VIEW isn't necessarily scoped by the container relation —
+        // e.g. a person's dashboard can show "memos I authored" via the author
+        // relation instead. inverseRelation names which relation on the memo points
+        // back to this parent; only when it matches the container slot does the
+        // parent's own href double as the memo's container.
+        const memoContainerRelated = item.type !== ClientLayoutItemType.RELATED_VIEW
+            || item.inverseRelation === ((_l = memoArchetype === null || memoArchetype === void 0 ? void 0 : memoArchetype.slots) === null || _l === void 0 ? void 0 : _l.container);
+        const memoContainerHref = memoContainerRelated ? containerHref : '';
+        // Distinct from memoContainerRelated: only a genuine container-scoped
+        // RELATED_VIEW (a company's own memo tab) makes every card's container
+        // obvious from the page itself. A top-level VIEW or an author-scoped
+        // RELATED_VIEW both still need the per-card container link.
+        const memoContainerImplied = item.type === ClientLayoutItemType.RELATED_VIEW && memoContainerRelated;
+        return (h("div", { class: "mrd-layout-section__related-view", key: `view-${key}` }, showTitle && item.label && h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), docArchetype && this.renderDocumentContainer(item, key, parentId, docArchetype, containerHref), memoArchetype && this.renderMemoContainer(item, key, parentId, memoArchetype, memoContainerHref, memoContainerRelated, !memoContainerImplied), !docArchetype && !memoArchetype && this.renderTable(item, key, parentId)));
     }
     /** Document collection view: owns the view-switch + collection actions and
      *  swaps between the folder tree and the flat table. Events are re-emitted to
@@ -258,6 +296,37 @@ export class MrdLayoutSection {
                 this.mrdCreateObject.emit(Object.assign({ name: key }, e.detail));
             } }));
     }
+    /** Memo collection view: owns the view-switch + "New memo" and swaps between
+     *  the card list and the flat table, mirroring renderDocumentContainer(). */
+    renderMemoContainer(item, key, parentId, archetype, containerHref, containerRelated, showContainerLink) {
+        var _a, _b, _c, _d;
+        const labelsListItems = (_d = (_c = (_b = (_a = item.view) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.find(v => { var _a; return v.name === ((_a = archetype.slots) === null || _a === void 0 ? void 0 : _a.labels); })) === null || _c === void 0 ? void 0 : _c.listItems) !== null && _d !== void 0 ? _d : null;
+        return (h("mrd-memo-container", { "data-view": key, item: item, archetype: archetype, parentId: parentId, containerHref: containerHref, containerRelated: containerRelated, showContainerLink: showContainerLink, viewKey: key, locale: this.locale, readOnly: this.readOnly, me: this.me, labelsListItems: labelsListItems, onMrdNavigate: (e) => {
+                var _a;
+                e.stopPropagation();
+                this.mrdNavigate.emit(Object.assign(Object.assign({}, e.detail), { navigateBehaviour: (_a = item.navigateBehaviour) !== null && _a !== void 0 ? _a : ClientLayoutNavigateBehaviour.PAGE }));
+            }, onMrdLoadPage: (e) => {
+                e.stopPropagation();
+                this.mrdLoadViewPage.emit(Object.assign({ name: key }, e.detail));
+            }, onMrdLoadAggregations: (e) => {
+                var _a;
+                e.stopPropagation();
+                this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
+            }, onMrdAction: (e) => {
+                var _a;
+                e.stopPropagation();
+                this.mrdViewAction.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
+            }, onMrdCreateObject: (e) => {
+                e.stopPropagation();
+                this.mrdCreateObject.emit(Object.assign({ name: key }, e.detail));
+            }, onMrdUpdateObject: (e) => {
+                e.stopPropagation();
+                this.mrdUpdateObject.emit(e.detail);
+            }, onMrdDeleteObject: (e) => {
+                e.stopPropagation();
+                this.mrdDeleteObject.emit(e.detail);
+            } }));
+    }
     renderTable(item, key, parentId) {
         return (h("mrd-table", { "data-view": key, item: item, parentId: parentId, locale: this.locale, readOnly: this.readOnly, onMrdLoadPage: (e) => this.handleViewLoadPage(e, key), onMrdLoadAggregations: (e) => {
                 var _a;
@@ -287,7 +356,26 @@ export class MrdLayoutSection {
                 });
             } }));
     }
-    renderItem(item) {
+    /** Whether every FIELD/RELATION item following a HEADER (up to the next
+     *  HEADER/SECTION/GROUP or the end of `siblings`) would itself render
+     *  nothing — i.e. the HEADER would introduce an empty block. Other item
+     *  types (VIEW, NAVIGATE, TEXT, ...) always count as visible. */
+    isHeaderBlockEmpty(siblings, index) {
+        const ctx = this.fieldCtx();
+        for (let i = index + 1; i < siblings.length; i++) {
+            const sib = siblings[i];
+            if (sib.type === ClientLayoutItemType.HEADER || sib.type === ClientLayoutItemType.SECTION || sib.type === ClientLayoutItemType.GROUP)
+                break;
+            if (sib.type === ClientLayoutItemType.FIELD && isFieldVisible(ctx, sib))
+                return false;
+            if (sib.type === ClientLayoutItemType.RELATION && (hasRelationValue(sib, this.data) || showsEmpty(sib)))
+                return false;
+            if (sib.type !== ClientLayoutItemType.FIELD && sib.type !== ClientLayoutItemType.RELATION)
+                return false;
+        }
+        return true;
+    }
+    renderItem(item, siblings = this.items, index = -1) {
         var _a, _b;
         switch (item.type) {
             case ClientLayoutItemType.FIELD:
@@ -295,6 +383,8 @@ export class MrdLayoutSection {
             case ClientLayoutItemType.RELATION:
                 return this.renderRelation(item);
             case ClientLayoutItemType.HEADER:
+                if (index >= 0 && this.isHeaderBlockEmpty(siblings, index))
+                    return null;
                 return (h("h2", { class: "mrd-layout-section__header", key: `header-${item.label}` }, item.label));
             case ClientLayoutItemType.TEXT:
                 return h("div", { class: "mrd-layout-section__text", key: `text-${item.label}`, innerHTML: (_a = item.label) !== null && _a !== void 0 ? _a : '' });
@@ -304,7 +394,7 @@ export class MrdLayoutSection {
                 return this.renderSearch(item);
             case ClientLayoutItemType.SECTION:
             case ClientLayoutItemType.GROUP:
-                return (h("div", { class: "mrd-layout-section__group", key: `group-${item.label}` }, item.label && h("h3", { class: "mrd-layout-section__group-title" }, item.label), ((_b = item.items) !== null && _b !== void 0 ? _b : []).map(child => this.renderItem(child))));
+                return (h("div", { class: "mrd-layout-section__group", key: `group-${item.label}` }, item.label && h("h3", { class: "mrd-layout-section__group-title" }, item.label), ((_b = item.items) !== null && _b !== void 0 ? _b : []).map((child, i) => { var _a; return this.renderItem(child, (_a = item.items) !== null && _a !== void 0 ? _a : [], i); })));
             case ClientLayoutItemType.RELATED_VIEW:
             case ClientLayoutItemType.VIEW:
                 return this.renderRelatedView(item);
@@ -359,11 +449,24 @@ export class MrdLayoutSection {
             ...this.relatedItems().map(it => this.renderItem(it)),
         ];
     }
+    /** Single-memo view: the record's own type carries commons.memo. Renders a
+     *  recognisable memo (title/body prominent, author/date subtle) instead of
+     *  generic fields, keeping any related views/searches below it. */
+    renderMemoObject(archetype) {
+        var _a, _b;
+        const labelsListItems = (_b = (_a = this.items.find(it => { var _a; return it.name === ((_a = archetype.slots) === null || _a === void 0 ? void 0 : _a.labels); })) === null || _a === void 0 ? void 0 : _a.listItems) !== null && _b !== void 0 ? _b : null;
+        return [
+            h("mrd-memo-view", { archetype: archetype, data: this.data, locale: this.locale, labelsListItems: labelsListItems, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); } }),
+            ...this.relatedItems().map(it => this.renderItem(it)),
+        ];
+    }
     render() {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
         const invoiceArchetype = !docArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_INVOICE) : undefined;
         const emailArchetype = !docArchetype && !invoiceArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_EMAIL) : undefined;
-        return (h(Host, { key: '07b1d61b170a5ae971ba54eaf775e1787dea1642' }, h("div", { key: 'd146e0542b1de11bd130eb3d36d54e4faf055309', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        const memoArchetype = !docArchetype && !invoiceArchetype && !emailArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_MEMO) : undefined;
+        const anyArchetype = docArchetype || invoiceArchetype || emailArchetype || memoArchetype;
+        return (h(Host, { key: '057d145da172e68f84b6ff34f71ae649d6d6bf92' }, h("div", { key: 'e03a1761dc6bcd9ff54b264fee56130270bddc2f', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), memoArchetype && this.renderMemoObject(memoArchetype), !anyArchetype && this.items.map((item, i) => this.renderItem(item, this.items, i))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }
@@ -543,6 +646,31 @@ export class MrdLayoutSection {
                 "reflect": false,
                 "attribute": "read-only",
                 "defaultValue": "false"
+            },
+            "me": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RelationSearchResult | null",
+                    "resolved": "RelationSearchResult | null",
+                    "references": {
+                        "RelationSearchResult": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::RelationSearchResult",
+                            "referenceLocation": "RelationSearchResult"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The active account's linked person record (userProfile.links.person), if any.\nThreaded to mrd-memo-container so a top-level memo VIEW (no parent record to\nattach a new memo to) can still offer \"New memo\" by falling back to the\naccount's own record as the container."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
             }
         };
     }
@@ -743,6 +871,21 @@ export class MrdLayoutSection {
                         }
                     }
                 }
+            }, {
+                "method": "mrdDeleteObject",
+                "name": "mrdDeleteObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Confirmed delete from an embedded memo dialog. Host DELETEs `href` \u2014 fire-\nand-forget, the row is already removed optimistically on the component side."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
             }, {
                 "method": "mrdViewUpload",
                 "name": "mrdViewUpload",
@@ -858,6 +1001,10 @@ export class MrdLayoutSection {
                         "HTMLMrdTableElement": {
                             "location": "global",
                             "id": "global::HTMLMrdTableElement"
+                        },
+                        "HTMLMrdMemoListElement": {
+                            "location": "global",
+                            "id": "global::HTMLMrdMemoListElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -984,12 +1131,16 @@ export class MrdLayoutSection {
                         "HTMLMrdDocumentListElement": {
                             "location": "global",
                             "id": "global::HTMLMrdDocumentListElement"
+                        },
+                        "HTMLMrdMemoContainerElement": {
+                            "location": "global",
+                            "id": "global::HTMLMrdMemoContainerElement"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Inject the created document's href after a file-drop create, so the\noptimistic row becomes navigable (see mrdCreateObject).",
+                    "text": "Inject the created document's href after a file-drop create, so the\noptimistic row becomes navigable (see mrdCreateObject). For a memo\nquick-create there is no optimistic row to resolve \u2014 simply reload the\ncontainer's current body so the new memo shows up.",
                     "tags": []
                 }
             },

package/dist/collection/components/memo/mrd-memo-container/mrd-memo-container.css

@@ -0,0 +1,204 @@
+:host {
+  display: block;
+}
+
+.mrd-memo-container__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mrd-space-2);
+  padding: var(--mrd-space-2) 0;
+  border-bottom: 1px solid var(--mrd-color-neutral-100);
+}
+.mrd-memo-container__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  height: 1.625rem;
+  padding: 0 var(--mrd-space-3);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-700);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-200);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background var(--mrd-transition-fast), border-color var(--mrd-transition-fast);
+}
+.mrd-memo-container__action svg {
+  width: 1rem;
+  height: 1rem;
+}
+.mrd-memo-container__action:hover:not(:disabled) {
+  background: var(--mrd-color-neutral-50);
+  border-color: var(--mrd-color-neutral-300);
+}
+.mrd-memo-container__action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.mrd-memo-container__seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--mrd-color-neutral-100);
+  border-radius: var(--mrd-border-radius);
+}
+.mrd-memo-container__seg-btn {
+  width: 1.875rem;
+  height: 1.625rem;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--mrd-transition-fast), background var(--mrd-transition-fast);
+}
+.mrd-memo-container__seg-btn:hover {
+  color: var(--mrd-color-neutral-800);
+}
+.mrd-memo-container__seg-btn[aria-pressed=true] {
+  background: var(--mrd-color-white);
+  color: var(--mrd-color-primary-dark);
+  box-shadow: var(--mrd-shadow-sm);
+}
+.mrd-memo-container__seg-btn svg {
+  width: 1rem;
+  height: 1rem;
+}
+.mrd-memo-container__body {
+  padding-top: var(--mrd-space-3);
+}
+.mrd-memo-container__modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mrd-space-4);
+}
+.mrd-memo-container__modal {
+  width: 100%;
+  max-width: 960px;
+  max-height: 90vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-4);
+  background: var(--mrd-color-white);
+  border-radius: var(--mrd-border-radius-md);
+  padding: var(--mrd-space-5);
+  box-shadow: var(--mrd-shadow-lg);
+}
+.mrd-memo-container__modal-title {
+  font-size: var(--mrd-font-size-lg);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  margin: 0;
+}
+.mrd-memo-container__modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+.mrd-memo-container__modal-error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
+.mrd-memo-container__modal-warning {
+  margin: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-600);
+}
+.mrd-memo-container__modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--mrd-space-3);
+  margin-top: var(--mrd-space-2);
+  padding-top: var(--mrd-space-4);
+  border-top: var(--mrd-border-width) solid var(--mrd-border-color);
+}
+.mrd-memo-container__modal-delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  margin-right: auto;
+  background-color: transparent;
+  color: var(--mrd-color-danger);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: var(--mrd-border-width) solid var(--mrd-color-danger);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition), color var(--mrd-transition);
+}
+.mrd-memo-container__modal-delete:hover {
+  background-color: var(--mrd-color-danger-light);
+  color: var(--mrd-color-danger-dark);
+}
+.mrd-memo-container__modal-delete-confirm {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  background-color: var(--mrd-color-danger);
+  color: var(--mrd-color-white);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: none;
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition);
+}
+.mrd-memo-container__modal-delete-confirm:hover {
+  background-color: var(--mrd-color-danger-dark);
+}
+.mrd-memo-container__modal-cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  background-color: transparent;
+  color: var(--mrd-color-neutral-600);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition), color var(--mrd-transition);
+}
+.mrd-memo-container__modal-cancel:hover {
+  background-color: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-800);
+}
+.mrd-memo-container__modal-submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  background-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: none;
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition);
+}
+.mrd-memo-container__modal-submit:hover {
+  background-color: var(--mrd-color-primary-hover);
+}