udp-stencil-component-library 25.18.1 → 25.18.2-beta.10

package/dist/esm/{image-upload_7.entry.js → form-metadata-display_8.entry.js}

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CaZq3YdB.js';
+import { r as registerInstance, h, c as createEvent, H as Host, a as getElement } from './index-DFnjA9NX.js';
+import { d as dateFormatter, f as fontOverrideMapping, o as overrideFont } from './utils-kwLwITIE.js';
 import { i as isFileReference, p as parseFileReference, d as downloadFileFromUdpDriveFile, a as isUdpDriveFile, c as createFileFromString, b as isFile } from './udp-drive-utils-CIrjVGiJ.js';
 import { createForm } from 'final-form';
 import debounce from 'lodash.debounce';
-import { b as UdpFormsFieldTypeEnum, U as UdpFormsPageIdEnum } from './enums-BnKmfKJT.js';
-import { f as fontOverrideMapping, o as overrideFont, d as dateFormatter } from './utils-CiUp9KGZ.js';
+import { c as UdpFormsFieldTypeEnum, U as UdpFormsPageIdEnum } from './enums-D5dod6Ie.js';
 import { g as getIconFromName } from './iconUtils-DcPvHO4A.js';
 import Save from '@carbon/icons/es/save/20';
 import 'axios';
@@ -100,7 +100,47 @@ import '@carbon/icons/es/image/16';
 import '@carbon/icons/es/PPT/16';
 import '@carbon/icons/es/XLS/16';
 
-const imageUploadCss = ":host{display:block}";
+const formMetadataDisplayCss = () => `:host{display:block}.container{display:grid;gap:10px;padding:12px 14px;background:var(--unity-color-surface, #fff)}.row{display:grid;grid-template-columns:130px 1fr;align-items:baseline;column-gap:12px}.label{font-size:12px;line-height:1.2;letter-spacing:0.02em;text-transform:uppercase;color:var(--unity-color-text-secondary, rgba(0, 0, 0, 0.65))}.value{color:var(--unity-color-text, rgba(0, 0, 0, 0.9));overflow-wrap:anywhere}@media (max-width: 420px){.row{grid-template-columns:1fr;row-gap:4px}}`;
+
+const FormMetadataDisplay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Toggles rendering of the "Name" row.
+         * Defaults to true.
+         */
+        this.displayOwnerFullName = true;
+        /**
+         * Toggles rendering of the "Email" row.
+         * Defaults to true.
+         */
+        this.displayOwnerEmail = true;
+        /**
+         * Toggles rendering of the "Submitted on" row.
+         * Defaults to true.
+         */
+        this.displaySubmissionDate = true;
+    }
+    /**
+     * Renders a single metadata row using a standard label/value layout.
+     * @internal
+     */
+    renderRow(label, value) {
+        return (h("div", { class: "row" }, h("span", { class: "label" }, label), h("unity-typography", { class: "value", variant: "h4" }, value)));
+    }
+    /**
+     * Renders the metadata container. Rows are conditionally included based on flags + data presence.
+     * @internal
+     */
+    render() {
+        return (
+        // role/aria-label provide a lightweight accessible grouping for screen readers
+        h("div", { key: 'eec0b6d84cba30720f86b4f4cbd3781b1fa8d76f', class: "container", role: "group", "aria-label": "Form metadata" }, this.displayOwnerFullName && this.userDisplayName && this.renderRow('Name', this.userDisplayName), this.displayOwnerEmail && this.userEmail && this.renderRow('Email', this.userEmail), this.displaySubmissionDate && this.submittedOn && this.renderRow('Submitted on', dateFormatter(this.submittedOn, 'long'))));
+    }
+};
+FormMetadataDisplay.style = formMetadataDisplayCss();
+
+const imageUploadCss = () => `:host{display:block}`;
 
 const ImageUpload = class {
     constructor(hostRef) {
@@ -147,12 +187,12 @@ const ImageUpload = class {
         };
     }
     render() {
-        return (h(Host, { key: 'dc13ff549cc50efd68074f9526fe833c2abf3680' }, h("file-upload", { key: '9d16c297893f24a379951635b558436f4614fab6', allowMultiple: false, allowedMimeTypes: this.allowedMimeTypes, fullWidth: this.fullWidth, required: this.required, error: this.error, dragAndDropMessage: this.dragAndDropMessage, browseFileMessage: this.browseFileMessage, hideDragAndDrop: this.hideDragAndDrop, hideButton: this.hideButton, id: this.id, name: this.name, label: this.label, disabled: this.disabled, readonly: this.readonly, initialValue: this.initialValue, renderImage: true, onChange: this.handleFileChange })));
+        return (h(Host, { key: 'd99ff15d410e2fbc1e4679694ed0615ea72d83de' }, h("file-upload", { key: '8a25e124d89bb9648fde62108253d68ed8107e89', allowMultiple: false, allowedMimeTypes: this.allowedMimeTypes, fullWidth: this.fullWidth, required: this.required, error: this.error, dragAndDropMessage: this.dragAndDropMessage, browseFileMessage: this.browseFileMessage, hideDragAndDrop: this.hideDragAndDrop, hideButton: this.hideButton, id: this.id, name: this.name, label: this.label, disabled: this.disabled, readonly: this.readonly, initialValue: this.initialValue, renderImage: true, onChange: this.handleFileChange })));
     }
 };
-ImageUpload.style = imageUploadCss;
+ImageUpload.style = imageUploadCss();
 
-const signatureInputCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}:host(.udp-input--size-small) .signature-canvas{height:150px}:host(.udp-input--size-normal) .signature-canvas{height:200px}:host(.udp-input--size-large) .signature-canvas{height:250px}:host(.udp-input--size-small) .clear-button{padding:var(--spacing-01) var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);top:var(--spacing-02);right:var(--spacing-02)}:host(.udp-input--size-normal) .clear-button{padding:var(--spacing-02) var(--spacing-03);font-size:var(--body-font-size);top:var(--spacing-02);right:var(--spacing-02)}:host(.udp-input--size-large) .clear-button{padding:var(--spacing-03) var(--spacing-04);font-size:var(--body-font-size);top:var(--spacing-03);right:var(--spacing-03)}.signature-pad-container{position:relative;border:1px solid var(--udp-mid-gray-color);border-radius:4px;background-color:var(--udp-light-gray-color)}.signature-canvas{display:block;width:100%;height:200px;}.signature-pad-container.readonly{background-color:var(--udp-disabled-gray-color)}.signature-canvas.readonly{cursor:not-allowed}.clear-button{position:absolute;top:var(--spacing-02);right:var(--spacing-02);background-color:var(--udp-light-gray-color);border:1px solid var(--udp-mid-gray-color);color:var(--udp-primary-color);cursor:pointer;border-radius:4px;padding:var(--spacing-02) var(--spacing-03);}.clear-button:hover{background-color:var(--udp-mid-gray-color)}.clear-button:disabled{cursor:not-allowed;opacity:0.5}";
+const signatureInputCss = () => `:host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type="text"],:host(.udp-input--size-small) input[type="number"],:host(.udp-input--size-small) input[type="email"],:host(.udp-input--size-small) input[type="password"],:host(.udp-input--size-small) input[type="tel"],:host(.udp-input--size-small) input[type="url"],:host(.udp-input--size-small) input[type="search"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type="text"],:host(.udp-input--size-normal) input[type="number"],:host(.udp-input--size-normal) input[type="email"],:host(.udp-input--size-normal) input[type="password"],:host(.udp-input--size-normal) input[type="tel"],:host(.udp-input--size-normal) input[type="url"],:host(.udp-input--size-normal) input[type="search"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type="text"],:host(.udp-input--size-large) input[type="number"],:host(.udp-input--size-large) input[type="email"],:host(.udp-input--size-large) input[type="password"],:host(.udp-input--size-large) input[type="tel"],:host(.udp-input--size-large) input[type="url"],:host(.udp-input--size-large) input[type="search"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="tel"],input[type="url"],input[type="search"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="search"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type="text"],:host(.udp-input--error) input[type="number"],:host(.udp-input--error) input[type="email"],:host(.udp-input--error) input[type="password"],:host(.udp-input--error) input[type="tel"],:host(.udp-input--error) input[type="url"],:host(.udp-input--error) input[type="search"],input[type="text"]:user-invalid,input[type="number"]:user-invalid,input[type="email"]:user-invalid,input[type="password"]:user-invalid,input[type="tel"]:user-invalid,input[type="url"]:user-invalid,input[type="search"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type="text"],:host(.udp-input--disabled) input[type="number"],:host(.udp-input--disabled) input[type="email"],:host(.udp-input--disabled) input[type="password"],:host(.udp-input--disabled) input[type="tel"],:host(.udp-input--disabled) input[type="url"],:host(.udp-input--disabled) input[type="search"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type="text"]::placeholder,input[type="number"]::placeholder,input[type="email"]::placeholder,input[type="password"]::placeholder,input[type="tel"]::placeholder,input[type="url"]::placeholder,input[type="search"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}:host(.udp-input--size-small) .signature-canvas{height:150px}:host(.udp-input--size-normal) .signature-canvas{height:200px}:host(.udp-input--size-large) .signature-canvas{height:250px}:host(.udp-input--size-small) .clear-button{padding:var(--spacing-01) var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);top:var(--spacing-02);right:var(--spacing-02)}:host(.udp-input--size-normal) .clear-button{padding:var(--spacing-02) var(--spacing-03);font-size:var(--body-font-size);top:var(--spacing-02);right:var(--spacing-02)}:host(.udp-input--size-large) .clear-button{padding:var(--spacing-03) var(--spacing-04);font-size:var(--body-font-size);top:var(--spacing-03);right:var(--spacing-03)}.signature-pad-container{position:relative;border:1px solid var(--udp-mid-gray-color);border-radius:4px;background-color:var(--udp-light-gray-color)}.signature-canvas{display:block;width:100%;height:200px;}.signature-pad-container.readonly{background-color:var(--udp-disabled-gray-color)}.signature-canvas.readonly{cursor:not-allowed}.clear-button{position:absolute;top:var(--spacing-02);right:var(--spacing-02);background-color:var(--udp-light-gray-color);border:1px solid var(--udp-mid-gray-color);color:var(--udp-primary-color);cursor:pointer;border-radius:4px;padding:var(--spacing-02) var(--spacing-03);}.clear-button:hover{background-color:var(--udp-mid-gray-color)}.clear-button:disabled{cursor:not-allowed;opacity:0.5}`;
 
 const SignatureInput = class {
     constructor(hostRef) {
@@ -451,7 +491,7 @@ const SignatureInput = class {
             'readonly': this.readonly,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: '1e4b57c4ef87dcaa9df86d70aaf5e534c6cbd795', class: {
+        return (h(Host, { key: 'aff1350eca630e59476dadec14c89809040d0d63', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -459,18 +499,28 @@ const SignatureInput = class {
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: 'f58bbc002b69a2f0bf2dab6efc4086ac3a7eda90', class: "bx--form-item" }, this.label && (h("unity-typography", { key: 'e46b453a0a4ceeaf02ec88618f8f838b8f87d7ad', variant: "caption-text" }, h("label", { key: '39ad7d1e01bf24f02b65ee35738cb51b244c0a95', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), h("div", { key: '969b1532dc16b135a98da1d2f2701ce4aa8badb4', class: containerClasses }, h("canvas", { key: '0f473ddc3295fe30d79e1ea1e78f03847c9cb200', ref: el => (this.canvasEl = el), class: { 'signature-canvas': true, 'readonly': this.readonly || this.disabled }, id: this.id }), !this.readonly && !this.disabled && (h("button", { key: '9b94d94d8dcc79c425861c2946120168113f7efb', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (h("div", { key: '895c33b449cb174bd51a0f3048a751f9f8f6ec3b', class: "error-message" }, h("unity-typography", { key: '175c80cf2841b7345470fd696d05017029e832b6', variant: "caption-text", color: "error" }, this.internalError))))));
+            } }, h("div", { key: 'e713a4c37dd5a9f45366b8cf07ea3d530e0b7b50', class: "bx--form-item" }, this.label && (h("unity-typography", { key: 'a2ffc9d2169334874ae82969c6b3c24582f45587', variant: "caption-text" }, h("label", { key: 'b7fd938f5b2ac2ccf18eb98c7556eca9e767cbad', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), h("div", { key: 'f895f5b8e62883e9c5fa3e583ba83925223d4da9', class: containerClasses }, h("canvas", { key: '5c586ae127f2b05f36ffe42efb558690f6ccf7bb', ref: el => (this.canvasEl = el), class: { 'signature-canvas': true, 'readonly': this.readonly || this.disabled }, id: this.id }), !this.readonly && !this.disabled && (h("button", { key: '1f258fe54e4f60a1baca2bc3f777ddcdb99dc6dd', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (h("div", { key: '75c443d5ab8c2d77382fb943a909ada0ef799221', class: "error-message" }, h("unity-typography", { key: '2b33a1fa42e7556dd5be3ec1e3dc8c590f5943cc', variant: "caption-text", color: "error" }, this.internalError))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "error": ["onErrorChange"],
-        "value": ["handleValueUpdate"],
-        "initialValue": ["handleInitialValueUpdate"],
-        "disabled": ["handleStateChange"],
-        "readonly": ["handleStateChange"]
+        "error": [{
+                "onErrorChange": 0
+            }],
+        "value": [{
+                "handleValueUpdate": 0
+            }],
+        "initialValue": [{
+                "handleInitialValueUpdate": 0
+            }],
+        "disabled": [{
+                "handleStateChange": 0
+            }],
+        "readonly": [{
+                "handleStateChange": 0
+            }]
     }; }
 };
-SignatureInput.style = signatureInputCss;
+SignatureInput.style = signatureInputCss();
 
 const StencilForm = class {
     constructor(hostRef) {
@@ -707,7 +757,7 @@ const StencilForm = class {
     get el() { return getElement(this); }
 };
 
-const tallyCss = ":host{display:block;width:100%}.tally-container{display:flex;flex-direction:column;gap:var(--spacing-02, 8px)}.tally-label{font-weight:600;margin-bottom:var(--spacing-02, 8px)}.tally-loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-04, 16px);color:var(--text-secondary, #6b7280)}.tally-content{display:flex;flex-direction:column;gap:var(--spacing-03, 12px)}.tally-stats{display:flex;gap:var(--spacing-04, 16px);flex-wrap:wrap}.tally-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-03, 12px) var(--spacing-04, 16px);border-radius:var(--border-radius-01, 4px);border:1px solid var(--border-subtle, #e5e7eb);background-color:var(--layer-01, #ffffff);min-width:80px;flex:1;max-width:120px}.tally-item.tally-yes{border-color:var(--support-success, #42be65);background-color:var(--support-success-hover, #f6f8ff)}.tally-item.tally-no{border-color:var(--support-error, #da1e28);background-color:var(--support-error-hover, #fff1f1)}.tally-item.tally-unanswered{border-color:var(--support-warning, #f1c21b);background-color:var(--support-warning-hover, #fcf4d6)}.tally-count{font-weight:700;line-height:1.2;margin-bottom:var(--spacing-01, 4px)}.tally-yes .tally-count{color:var(--support-success, #42be65)}.tally-no .tally-count{color:var(--support-error, #da1e28)}.tally-unanswered .tally-count{color:var(--support-warning, #f1c21b)}.tally-item .tally-label{margin:0;font-weight:500;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.02em}.tally-summary{padding:var(--spacing-02, 8px) 0;border-top:1px solid var(--border-subtle, #e5e7eb);text-align:center}.error-message{margin-top:var(--spacing-02, 8px);padding:var(--spacing-02, 8px);border-radius:var(--border-radius-01, 4px);background-color:var(--support-error-hover, #fff1f1);border:1px solid var(--support-error, #da1e28)}:host(.udp-input--size-small) .tally-item{padding:var(--spacing-02, 8px) var(--spacing-03, 12px);min-width:60px;max-width:90px}:host(.udp-input--size-small) .tally-count{font-size:1.25rem}:host(.udp-input--size-large) .tally-item{padding:var(--spacing-04, 16px) var(--spacing-05, 20px);min-width:100px;max-width:150px}:host(.udp-input--size-large) .tally-count{font-size:2rem}:host(.udp-input--margin-none) .tally-container{gap:0}:host(.udp-input--margin-dense) .tally-container{gap:var(--spacing-01, 4px)}:host(.udp-input--margin-comfortable) .tally-container{gap:var(--spacing-04, 16px)}:host(.udp-input--disabled) .tally-item{opacity:0.5;pointer-events:none}:host(.udp-input--readonly) .tally-item{background-color:var(--field-01, #f4f4f4)}@media (max-width: 480px){.tally-stats{flex-direction:column}.tally-item{max-width:none;flex:none}}";
+const tallyCss = () => `:host{display:block;width:100%}.tally-container{display:flex;flex-direction:column;gap:var(--spacing-02, 8px)}.tally-label{font-weight:600;margin-bottom:var(--spacing-02, 8px)}.tally-loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-04, 16px);color:var(--text-secondary, #6b7280)}.tally-content{display:flex;flex-direction:column;gap:var(--spacing-03, 12px)}.tally-stats{display:flex;gap:var(--spacing-04, 16px);flex-wrap:wrap}.tally-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-03, 12px) var(--spacing-04, 16px);border-radius:var(--border-radius-01, 4px);border:1px solid var(--border-subtle, #e5e7eb);background-color:var(--layer-01, #ffffff);min-width:80px;flex:1;max-width:120px}.tally-item.tally-yes{border-color:var(--support-success, #42be65);background-color:var(--support-success-hover, #f6f8ff)}.tally-item.tally-no{border-color:var(--support-error, #da1e28);background-color:var(--support-error-hover, #fff1f1)}.tally-item.tally-unanswered{border-color:var(--support-warning, #f1c21b);background-color:var(--support-warning-hover, #fcf4d6)}.tally-count{font-weight:700;line-height:1.2;margin-bottom:var(--spacing-01, 4px)}.tally-yes .tally-count{color:var(--support-success, #42be65)}.tally-no .tally-count{color:var(--support-error, #da1e28)}.tally-unanswered .tally-count{color:var(--support-warning, #f1c21b)}.tally-item .tally-label{margin:0;font-weight:500;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.02em}.tally-summary{padding:var(--spacing-02, 8px) 0;border-top:1px solid var(--border-subtle, #e5e7eb);text-align:center}.error-message{margin-top:var(--spacing-02, 8px);padding:var(--spacing-02, 8px);border-radius:var(--border-radius-01, 4px);background-color:var(--support-error-hover, #fff1f1);border:1px solid var(--support-error, #da1e28)}:host(.udp-input--size-small) .tally-item{padding:var(--spacing-02, 8px) var(--spacing-03, 12px);min-width:60px;max-width:90px}:host(.udp-input--size-small) .tally-count{font-size:1.25rem}:host(.udp-input--size-large) .tally-item{padding:var(--spacing-04, 16px) var(--spacing-05, 20px);min-width:100px;max-width:150px}:host(.udp-input--size-large) .tally-count{font-size:2rem}:host(.udp-input--margin-none) .tally-container{gap:0}:host(.udp-input--margin-dense) .tally-container{gap:var(--spacing-01, 4px)}:host(.udp-input--margin-comfortable) .tally-container{gap:var(--spacing-04, 16px)}:host(.udp-input--disabled) .tally-item{opacity:0.5;pointer-events:none}:host(.udp-input--readonly) .tally-item{background-color:var(--field-01, #f4f4f4)}@media (max-width: 480px){.tally-stats{flex-direction:column}.tally-item{max-width:none;flex:none}}`;
 
 const TallyDisplay = class {
     constructor(hostRef) {
@@ -753,17 +803,17 @@ const TallyDisplay = class {
         const isError = !!this.error;
         const answeredCount = this.yesCount + this.noCount + this.naCount;
         const unansweredCount = this.totalFields - answeredCount;
-        return (h(Host, { key: 'fed22627bce1ac7be18a2425bece6686869564d7', class: {
+        return (h(Host, { key: '99c0201e31ee706bd89b1b72ed5e7b8799c9d870', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '971333eebb659bbb4eb934bb9950032a7909da18', class: "tally-container" }, this.label && (h("unity-typography", { key: '8444c7bcbcbe333f9e66026a5222ee29335e4de6', variant: "caption-text" }, h("label", { key: '98c8daa86aa2d29c2d1c5b4a5004ce6819d83349', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: '7b6a501d4ce95a2b27d3884e8c695e1faf06b2e8', class: "tally-content", id: this.id }, h("div", { key: '68454bc99bd9c1ce4680df8f983eaf5ae4e9767e', class: "tally-stats" }, h("div", { key: 'e0e1b18c29dccb79043e00475b5bc30adc987d4e', class: "tally-item tally-yes" }, h("unity-typography", { key: '18cc8a94d43cf31f6306b8de3d2f48d1396304a2', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: 'd88c15dbf4bda174343aaa5bab8717d1c8cc0624', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '3f5108ae238eb07f67e5c6de82eb396ade8224f8', class: "tally-item tally-no" }, h("unity-typography", { key: '371e592c1c36ecbb6dd03764f395c21f1d4d0be5', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: 'b808bcc32aa9c582046b368d1d13747d8e757b77', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '78f58c21c1c20d6054c0ef0a31dd56de06fb0431', class: "tally-item tally-na" }, h("unity-typography", { key: 'bbf95119a828762d96ba783b24e6d33f4d21084c', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: 'c34245acdfe54eab110e4d21d3397a0902087ccd', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: '7e56aeb2896950a6a8ba2b414250628bc15f73d0', class: "tally-item tally-unanswered" }, h("unity-typography", { key: '947f18fb83d02cb7544fc245aaad81ae188d5a98', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: 'fb740e38f0086757ead6285834183fcc183dc07f', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: '2c877a0a184fe0b51b75ed26073085c057ae6a40', class: "tally-summary" }, h("unity-typography", { key: '8479096b7addcedab23446a67ed9a0795dc5c8fe', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: 'b686351f4926cc8bfbec445bf426ec3634c861a9', class: "error-message" }, h("unity-typography", { key: '4363a3cb9ffd25fd03b0ca1c74ea01281a451dbd', variant: "caption-text", color: "error" }, this.error))))));
+            } }, h("div", { key: '09016ed6e21cb455ffc99e7595fd815d2388dc20', class: "tally-container" }, this.label && (h("unity-typography", { key: '94421b97279dabf2419964ffcfcb46f070644e0a', variant: "caption-text" }, h("label", { key: '23492badf01e8a3b7cd19d7eeb39356188fdf09e', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: '6efe4476e11856c3f0c6f3db52b05988a9c76d99', class: "tally-content", id: this.id }, h("div", { key: 'b93c8910cda35f7dcaf6b1ccdf85e675fd375fc5', class: "tally-stats" }, h("div", { key: '140c03ec091df58d0d592843968784c87dfe455b', class: "tally-item tally-yes" }, h("unity-typography", { key: '03993713b6dbb200b66e2872cdb3f387d7ad6399', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: 'f259283a9c6904f3e84ee273acccb019762bb278', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '41bdd7f359f5805ec89f22082f89296642e5b0c3', class: "tally-item tally-no" }, h("unity-typography", { key: 'a580d8afd15ca787d5558907de6ce5b6a26721bb', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: '05a9b6ce25b76d2224bdcb745c828fddbd11967a', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '5ac39a2987d52fb7d0df0e56827241f3e1079378', class: "tally-item tally-na" }, h("unity-typography", { key: 'c73d716f25601637fbe3aa20a680ed768d367f09', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: '75ad0e4b7681431e52f755ed73e770473c6f0545', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: '46b9b8cd21f3dfa993a53ef5ca6ed1cfe91c5e49', class: "tally-item tally-unanswered" }, h("unity-typography", { key: '3b894ff08c4b636a2a13746e530ce03841d6b28d', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: 'bbdf08a9cb4acfd3769b8e1efe1475aeb8fbcab7', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: 'f9bbb5a94beec0c536ac384b8fe3b112f750cfa1', class: "tally-summary" }, h("unity-typography", { key: 'be96bfd28f3dd6077ac54aece439116d93d5b1d2', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: '984d524255fe657fbeacba147b4823ca54e00ffb', class: "error-message" }, h("unity-typography", { key: '148a1b807fe5386097380df6b99e717c130c188a', variant: "caption-text", color: "error" }, this.error))))));
     }
 };
-TallyDisplay.style = tallyCss;
+TallyDisplay.style = tallyCss();
 
 /**
  * Finds the parent stencil-form and returns its Final Form API.
@@ -808,7 +858,7 @@ async function useFormApi(element) {
     return formApi;
 }
 
-const udpQuestionCss = ".hidden{display:none}.question-container{border-top:1px solid rgba(0, 0, 0, 0.08);padding-top:1rem}.question-title-and-helper-container{display:flex;flex-direction:column;gap:var(--spacing-03)}.question-title-and-followup-container{display:flex;justify-content:space-between;align-items:center}";
+const udpQuestionCss = () => `.hidden{display:none}.question-container{border-top:1px solid rgba(0, 0, 0, 0.08);padding-top:1rem}.question-title-and-helper-container{display:flex;flex-direction:column;gap:var(--spacing-03)}.question-title-and-followup-container{display:flex;justify-content:space-between;align-items:center}`;
 
 const UdpQuestion = class {
     constructor(hostRef) {
@@ -816,9 +866,13 @@ const UdpQuestion = class {
         this.launchFollowUpFormSideSheet = createEvent(this, "launchFollowUpFormSideSheet");
         this.disabled = false;
         this.readonly = false;
-        this.initialValues = {};
-        this.userId = null;
-        this.isCommentAllowed = false;
+        this.currentValues = {};
+        this.clientUserInfo = {
+            id: null,
+            displayName: null,
+            email: null,
+        };
+        this.udpFormSubmission = null;
         this.tallyData = { yesCount: 0, noCount: 0, naCount: 0, totalFields: 0 };
         this.formApi = null;
     }
@@ -921,7 +975,7 @@ const UdpQuestion = class {
         this._fieldComponent = this.getFieldComponent();
     }
     getFieldComponent() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const props = {
             name: `${this.question.questionIdentifierKey}.value`,
             required: this.question.required,
@@ -967,6 +1021,19 @@ const UdpQuestion = class {
                 return (h("stencil-field", Object.assign({}, props), h("numeric-field", Object.assign({}, fieldProps))));
             case UdpFormsFieldTypeEnum.Tally:
                 return (h("tally-display", Object.assign({ id: this.questionNumber, label: this.question.questionText || 'Response Tally', yesCount: this.tallyData.yesCount, noCount: this.tallyData.noCount, naCount: this.tallyData.naCount, totalFields: this.tallyData.totalFields }, fieldProps, { required: false })));
+            case UdpFormsFieldTypeEnum.FormMetadataDisplay:
+                {
+                    const isPersistedSubmission = !!((_e = this.udpFormSubmission) === null || _e === void 0 ? void 0 : _e.id);
+                    // If persisted, do NOT fall back to client user (avoids showing Person A while viewing Person B's submission)
+                    const userDisplayName = isPersistedSubmission
+                        ? ((_g = (_f = this.udpFormSubmission) === null || _f === void 0 ? void 0 : _f.userDisplayName) !== null && _g !== void 0 ? _g : null)
+                        : ((_j = (_h = this.clientUserInfo) === null || _h === void 0 ? void 0 : _h.displayName) !== null && _j !== void 0 ? _j : null);
+                    const userEmail = isPersistedSubmission
+                        ? ((_l = (_k = this.udpFormSubmission) === null || _k === void 0 ? void 0 : _k.userEmail) !== null && _l !== void 0 ? _l : null)
+                        : ((_o = (_m = this.clientUserInfo) === null || _m === void 0 ? void 0 : _m.email) !== null && _o !== void 0 ? _o : null);
+                    const submittedOn = (_q = (_p = this.udpFormSubmission) === null || _p === void 0 ? void 0 : _p.submittedOn) !== null && _q !== void 0 ? _q : null;
+                    return (h("form-metadata-display", Object.assign({ userDisplayName: userDisplayName, userEmail: userEmail, submittedOn: submittedOn }, fieldProps)));
+                }
             case UdpFormsFieldTypeEnum.Hidden:
             default:
                 return h("div", null);
@@ -1008,7 +1075,7 @@ const UdpQuestion = class {
                 'question-container': true,
             } }, h("div", { class: "question-title-and-helper-container" }, h("div", { class: "question-title-and-followup-container" }, this.question.questionText && (h("unity-typography", { id: `questionText${this.question.name}`, variant: ((_b = (_a = this.styleOverrides) === null || _a === void 0 ? void 0 : _a.questionText) === null || _b === void 0 ? void 0 : _b.variant) || 'h3' }, titleText)), h("div", null, this.question.fieldProperties.allowFollowUpForms && ((() => {
             var _a;
-            const metadata = (_a = this.initialValues[sectionKey][questionKey]) === null || _a === void 0 ? void 0 : _a.metadata;
+            const metadata = (_a = this.currentValues[sectionKey][questionKey]) === null || _a === void 0 ? void 0 : _a.metadata;
             const followUpId = metadata === null || metadata === void 0 ? void 0 : metadata.followUpFormSubmissionId;
             if (followUpId) {
                 // Valid GUID → show arrow icon to open follow-up form
@@ -1022,28 +1089,40 @@ const UdpQuestion = class {
                         this.launchFollowUpFormSideSheet.emit({ sectionKey, questionKey });
                     } }));
             }
-        })()))), this.question.helperText && (h("unity-typography", { id: `helperText${this.question.name}`, variant: ((_d = (_c = this.styleOverrides) === null || _c === void 0 ? void 0 : _c.helperText) === null || _d === void 0 ? void 0 : _d.variant) || 'caption-text' }, this.question.helperText))), component, this.question.fieldProperties.allowFollowUpForms && (h("div", null, h("stencil-field", { hidden: true, name: `${this.question.questionIdentifierKey}.metadata.followUpParentFormId` }, h("text-field", null)), h("stencil-field", { hidden: true, name: `${this.question.questionIdentifierKey}.metadata.followUpParentFormVersion` }, h("text-field", null)), h("stencil-field", { hidden: true, name: `${this.question.questionIdentifierKey}.metadata.followUpParentFormSubmissionId` }, h("text-field", null)))), h("udp-question-comments", { question: this.question, initialValues: this.initialValues, userId: this.userId })));
+        })()))), this.question.helperText && (h("unity-typography", { id: `helperText${this.question.name}`, variant: ((_d = (_c = this.styleOverrides) === null || _c === void 0 ? void 0 : _c.helperText) === null || _d === void 0 ? void 0 : _d.variant) || 'caption-text' }, this.question.helperText))), component, this.question.fieldProperties.allowFollowUpForms && (h("div", null, h("stencil-field", { hidden: true, name: `${this.question.questionIdentifierKey}.metadata.followUpParentFormId` }, h("text-field", null)), h("stencil-field", { hidden: true, name: `${this.question.questionIdentifierKey}.metadata.followUpParentFormVersion` }, h("text-field", null)), h("stencil-field", { hidden: true, name: `${this.question.questionIdentifierKey}.metadata.followUpParentFormSubmissionId` }, h("text-field", null)))), this.question.fieldProperties.allowComments && (h("udp-question-comments", { question: this.question, currentValues: this.currentValues, userId: this.clientUserInfo.id }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "question": ["propChanged"],
-        "questionNumber": ["propChanged"],
-        "value": ["propChanged"],
-        "disabled": ["propChanged"],
-        "readonly": ["propChanged"],
-        "styleOverrides": ["propChanged"]
+        "question": [{
+                "propChanged": 0
+            }],
+        "questionNumber": [{
+                "propChanged": 0
+            }],
+        "value": [{
+                "propChanged": 0
+            }],
+        "disabled": [{
+                "propChanged": 0
+            }],
+        "readonly": [{
+                "propChanged": 0
+            }],
+        "styleOverrides": [{
+                "propChanged": 0
+            }]
     }; }
 };
-UdpQuestion.style = udpQuestionCss;
+UdpQuestion.style = udpQuestionCss();
 
-const udpQuestionCommentsCss = ".question-comment-display{position:relative;display:flex;flex-direction:column;gap:var(--spacing-03);margin:var(--spacing-05) 0;border:1px solid var(--border-color, #ccc);border-radius:6px;padding:var(--spacing-05) var(--spacing-04);overflow-wrap:break-word;word-wrap:break-word}.question-comment-display unity-typography:not(.question-comment-header){display:block;white-space:pre-wrap;word-break:break-word;}.question-comment-display>.question-comment-header{position:absolute;bottom:-0.6em;right:1em;background:white;padding:0 0.4em;font-size:0.85em;white-space:nowrap;}.question-comment-add-comment-button{display:flex;justify-content:center;margin:var(--spacing-03) 0}.question-comment-action-container{display:flex;justify-content:end}";
+const udpQuestionCommentsCss = () => `.question-comment-display{position:relative;display:flex;flex-direction:column;gap:var(--spacing-03);margin:var(--spacing-05) 0;border:1px solid var(--border-color, #ccc);border-radius:6px;padding:var(--spacing-05) var(--spacing-04);overflow-wrap:break-word;word-wrap:break-word}.question-comment-display unity-typography:not(.question-comment-header){display:block;white-space:pre-wrap;word-break:break-word;}.question-comment-display>.question-comment-header{position:absolute;bottom:-0.6em;right:1em;background:white;padding:0 0.4em;font-size:0.85em;white-space:nowrap;}.question-comment-add-comment-button{display:flex;justify-content:center;margin:var(--spacing-03) 0}.question-comment-action-container{display:flex;justify-content:end}`;
 
 const UdpQuestionComments = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.questionCommentAction = createEvent(this, "questionCommentAction");
         this.commentFieldProps = {};
-        this.initialValues = {};
+        this.currentValues = {};
         this.userId = null;
     }
     emitQuestionCommentAction(type, commentId) {
@@ -1071,7 +1150,7 @@ const UdpQuestionComments = class {
     render() {
         var _a, _b;
         const [sectionName, questionName] = this.question.questionIdentifierKey.split('.');
-        const questionData = ((_b = (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[sectionName]) === null || _b === void 0 ? void 0 : _b[questionName]) || {
+        const questionData = ((_b = (_a = this.currentValues) === null || _a === void 0 ? void 0 : _a[sectionName]) === null || _b === void 0 ? void 0 : _b[questionName]) || {
             comments: [],
             draftComments: [],
         };
@@ -1088,9 +1167,9 @@ const UdpQuestionComments = class {
                 : [];
         // enforce single active action UX:
         // - Only one draft is shown/active at a time (pick first draft if present)
-        // detect any draft anywhere in the form's initialValues
+        // detect any draft anywhere in the form's currentValues
         const activeDraft = draftComments.length > 0 ? draftComments[0] : null;
-        const isAnyQuestionContainsActiveDraft = Object.values(this.initialValues || {}).some((section) => Object.values(section || {}).some((q) => {
+        const isAnyQuestionContainsActiveDraft = Object.values(this.currentValues || {}).some((section) => Object.values(section || {}).some((q) => {
             if (!q)
                 return false;
             const drafts = q.draftComments;
@@ -1114,9 +1193,9 @@ const UdpQuestionComments = class {
         }), activeDraft && activeDraft.isTempComment && !savedComments.includes(c => c.commentId == activeDraft.commentId) && (h("div", { class: "question-comment-draft-container", key: activeDraft.commentId || `draft-0` }, h("stencil-field", { name: `${this.question.questionIdentifierKey}.draftComments[0].value`, required: true, ignoreDirty: true }, h("text-area", Object.assign({}, this.commentFieldProps, { label: "Comment:", placeholder: "Add a comment" }))), h("div", { class: "question-comment-action-container" }, h("udp-button", { variant: "text", onClick: () => this.handleCommentEditClose(activeDraft.commentId), startIcon: h("udp-icon", { iconName: "trashCan", color: "inherit" }) }, "Cancel"), h("udp-button", { variant: "text", onClick: () => this.handleCommentSave(activeDraft.commentId), startIcon: h("udp-icon", { iconName: "save", color: "inherit" }) }, "Save")))), !activeDraft && !isAnyQuestionContainsActiveDraft && (h("div", { class: "question-comment-add-comment-button" }, h("udp-button", { variant: "text", onClick: () => this.handleCommentAdd(), startIcon: h("udp-icon", { iconName: "add", color: "inherit" }) }, "Add a Comment")))));
     }
 };
-UdpQuestionComments.style = udpQuestionCommentsCss;
+UdpQuestionComments.style = udpQuestionCommentsCss();
 
-const udpSaveDraftButtonCss = ".floating-save-button{position:fixed;top:5rem;right:2rem;z-index:1000;animation:slideInDown 0.3s ease-out}.inline-save-button{position:relative;display:inline-flex;align-items:center;margin-left:auto;}.floating-save-button.saving,.inline-save-button.saving{pointer-events:none}.saving-state{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(0, 0, 0, 0.8);color:white;border-radius:8px;font-size:0.9rem}.saved-state{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(34, 139, 34, 0.9);color:white;border-radius:8px;font-size:0.9rem;animation:fadeIn 0.3s ease-out}.inline-save-button .saving-state{padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.6);font-size:0.8rem}.inline-save-button .saved-state{padding:0.5rem 0.75rem;background:rgba(34, 139, 34, 0.8);font-size:0.8rem}.save-error-tooltip{position:absolute;top:100%;right:0;margin-top:0.5rem;background:#dc3545;color:white;padding:0.5rem 1rem;border-radius:8px;font-size:0.8rem;white-space:nowrap;box-shadow:0 4px 12px rgba(220, 53, 69, 0.3);animation:fadeIn 0.3s ease-out;z-index:1001}.save-error-tooltip::after{content:'';position:absolute;bottom:100%;right:1rem;border:6px solid transparent;border-bottom-color:#dc3545}.inline-save-button .save-error-tooltip{top:100%;bottom:auto;margin-top:0.5rem;margin-bottom:0}.inline-save-button .save-error-tooltip::after{top:-6px;border-top-color:transparent;border-bottom-color:#dc3545}@keyframes slideInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media (max-width: 768px){.floating-save-button{bottom:1rem;right:1rem;top:auto;}.saving-state{padding:0.6rem 0.8rem;font-size:0.8rem}.inline-save-button .saving-state{padding:0.4rem 0.6rem;font-size:0.75rem}}.primary-icon{--icon-color:var(--primary-color, #1976d2)}.primary-icon::part(icon){fill:var(--icon-color) !important}.primary-icon udp-icon-button::part(icon),.primary-icon .icon{fill:var(--primary-color, #1976d2) !important}@media (prefers-reduced-motion: reduce){.floating-save-button,.save-error-tooltip{animation:none}}";
+const udpSaveDraftButtonCss = () => `.floating-save-button{position:fixed;top:5rem;right:2rem;z-index:1000;animation:slideInDown 0.3s ease-out}.inline-save-button{position:relative;display:inline-flex;align-items:center;margin-left:auto;}.floating-save-button.saving,.inline-save-button.saving{pointer-events:none}.saving-state{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(0, 0, 0, 0.8);color:white;border-radius:8px;font-size:0.9rem}.saved-state{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(34, 139, 34, 0.9);color:white;border-radius:8px;font-size:0.9rem;animation:fadeIn 0.3s ease-out}.inline-save-button .saving-state{padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.6);font-size:0.8rem}.inline-save-button .saved-state{padding:0.5rem 0.75rem;background:rgba(34, 139, 34, 0.8);font-size:0.8rem}.save-error-tooltip{position:absolute;top:100%;right:0;margin-top:0.5rem;background:#dc3545;color:white;padding:0.5rem 1rem;border-radius:8px;font-size:0.8rem;white-space:nowrap;box-shadow:0 4px 12px rgba(220, 53, 69, 0.3);animation:fadeIn 0.3s ease-out;z-index:1001}.save-error-tooltip::after{content:'';position:absolute;bottom:100%;right:1rem;border:6px solid transparent;border-bottom-color:#dc3545}.inline-save-button .save-error-tooltip{top:100%;bottom:auto;margin-top:0.5rem;margin-bottom:0}.inline-save-button .save-error-tooltip::after{top:-6px;border-top-color:transparent;border-bottom-color:#dc3545}@keyframes slideInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media (max-width: 768px){.floating-save-button{bottom:1rem;right:1rem;top:auto;}.saving-state{padding:0.6rem 0.8rem;font-size:0.8rem}.inline-save-button .saving-state{padding:0.4rem 0.6rem;font-size:0.75rem}}.primary-icon{--icon-color:var(--primary-color, #1976d2)}.primary-icon::part(icon){fill:var(--icon-color) !important}.primary-icon udp-icon-button::part(icon),.primary-icon .icon{fill:var(--primary-color, #1976d2) !important}@media (prefers-reduced-motion: reduce){.floating-save-button,.save-error-tooltip{animation:none}}`;
 
 const UdpSaveDraftButton = class {
     constructor(hostRef) {
@@ -1201,7 +1280,6 @@ const UdpSaveDraftButton = class {
     }
     get el() { return getElement(this); }
 };
-UdpSaveDraftButton.style = udpSaveDraftButtonCss;
+UdpSaveDraftButton.style = udpSaveDraftButtonCss();
 
-export { ImageUpload as image_upload, SignatureInput as signature_input, StencilForm as stencil_form, TallyDisplay as tally_display, UdpQuestion as udp_question, UdpQuestionComments as udp_question_comments, UdpSaveDraftButton as udp_save_draft_button };
-//# sourceMappingURL=image-upload.signature-input.stencil-form.tally-display.udp-question.udp-question-comments.udp-save-draft-button.entry.js.map
+export { FormMetadataDisplay as form_metadata_display, ImageUpload as image_upload, SignatureInput as signature_input, StencilForm as stencil_form, TallyDisplay as tally_display, UdpQuestion as udp_question, UdpQuestionComments as udp_question_comments, UdpSaveDraftButton as udp_save_draft_button };

package/dist/esm/getCurrentApiCatalogId-DeurXd9l.js

@@ -3,6 +3,3 @@ function getCurrentApiCatalogId() {
 }
 
 export { getCurrentApiCatalogId as g };
-//# sourceMappingURL=getCurrentApiCatalogId-DeurXd9l.js.map
-
-//# sourceMappingURL=getCurrentApiCatalogId-DeurXd9l.js.map

package/dist/esm/iconMapping-CPerGeNF.js

@@ -187,6 +187,3 @@ const iconMapping = {
 };
 
 export { iconMapping as i };
-//# sourceMappingURL=iconMapping-CPerGeNF.js.map
-
-//# sourceMappingURL=iconMapping-CPerGeNF.js.map

package/dist/esm/iconUtils-DcPvHO4A.js

@@ -11,6 +11,3 @@ const getIconFromName = (iconName, iconType = 'carbon') => {
 };
 
 export { getIconFromName as g };
-//# sourceMappingURL=iconUtils-DcPvHO4A.js.map
-
-//# sourceMappingURL=iconUtils-DcPvHO4A.js.map