legalesign-document-viewer 0.2.15 → 0.2.17

package/dist/cjs/ls-document-options_44.cjs.entry.js

@@ -19850,7 +19850,7 @@ function addField(frame, data) {
     const node = document.createElement('ls-editor-field');
     node.setAttribute('type', data.formElementType);
     node.setAttribute('id', 'ls-field-' + data.id);
-    node.setAttribute('selected', 'selected');
+    // node.setAttribute('selected', 'selected');
     node.style.zIndex = '100';
     node.style.position = 'absolute';
     node.style.top = Math.floor(data.top * this.zoom) + 'px';
@@ -19889,16 +19889,6 @@ const findDimensions = (frameContainer, sourceField, pageHeight, pageWidth, zoom
     const ay = top > 0 ? top / pageHeight : 0;
     const bx = (left + zwidth) / pageWidth;
     const by = (top + zheight) / pageHeight;
-    console.log({
-        top,
-        left,
-        zheight,
-        zwidth,
-        ax,
-        ay,
-        bx,
-        by,
-    });
     // Return with calculated styles that try to place it as it would appear on legacy signing page
     return {
         top,
@@ -20174,11 +20164,11 @@ const validationTypes = [
     { id: 20, description: 'Dropdown List', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
     { id: 91, description: 'Countries', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
     { id: 92, description: 'Name prefix titles', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
-    { id: 24, description: '✔/✗', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
-    { id: 25, description: '✔/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
-    { id: 26, description: '✗/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 16, typeDefault: false, inputType: 'text' },
-    { id: 74, description: 'File: attach to confirmatory email to sender', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
-    { id: 75, description: 'File: append to PDF, PDF files only', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
+    { id: 24, description: '✔/✗', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'checkbox' },
+    { id: 25, description: '✔/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'checkbox' },
+    { id: 26, description: '✗/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 16, typeDefault: false, inputType: 'checkbox' },
+    { id: 74, description: 'File: attach to confirmatory email to sender', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'file' },
+    { id: 75, description: 'File: append to PDF, PDF files only', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'file' },
     {
         id: 76,
         description: 'File: zip with PDF (for internal view, signed PDF for signer)',
@@ -20186,13 +20176,13 @@ const validationTypes = [
         defaultHeight: 16,
         defaultWidth: 200,
         typeDefault: false,
-        inputType: 'text',
+        inputType: 'file',
     },
     { id: 90, description: 'Drawn field.', formType: 'drawn field', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
     { id: 2000, description: 'Initials', formType: 'initials', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
     { id: 93, description: 'Regular Expression field', formType: 'regular expression', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
     { id: 3000, description: 'Auto Sign', formType: 'auto sign', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
-    { id: 4000, description: 'Text Area', formType: 'textarea', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'readonly' },
+    { id: 4000, description: 'Text Area', formType: 'textarea', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'textarea' },
 ];
 // See validation table in database for latest values - these have to be hard coded for our HTML control - ASW
 function getInputType(validation) {
@@ -20321,9 +20311,12 @@ function mouseDown(e) {
         this.selectionBox = null;
     }
     else {
+        console.log('start mouse down reset');
         this.startLocations = null;
         this.startMouse = null;
         this.selectionBox = { x: e.clientX, y: e.clientY };
+        this.selectFields.emit([]);
+        this.selected = [];
         this.component.style.cursor = 'crosshair';
     }
 }
@@ -20356,6 +20349,7 @@ function mouseMove(event) {
         debounce.bind(this)({ action: 'update', data: recalculateCoordinates(this.hitField.dataItem) }, 700);
     }
     else if (this.selectionBox && event.buttons === 1) {
+        console.log('drawing box');
         // draw the multiple selection box
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         var frame = this.component.shadowRoot.getElementById('ls-document-frame');
@@ -20387,18 +20381,17 @@ function mouseUp(event) {
     this.edgeSide = null;
     this.startMouse = null;
     this.component.style.cursor = 'auto';
+    console.log('mouse up');
     // find what was inside the selection box emit the select event and change their style
     if (this.selectionBox) {
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         var fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
         box.style.visibility = 'hidden';
-        findIn(fields, box, true, event.shiftKey);
-        var updatedFields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
-        this.selectFields.emit(Array.from(updatedFields)
-            .filter(fx => fx.selected)
-            .map(fx => fx.dataItem));
         this.selectionBox = null;
-        this.selected = Array.from(updatedFields).filter(fx => fx.selected);
+        const found = findIn(fields, box, true, event.shiftKey);
+        this.selected = Array.from(found);
+        console.log(found, this.selectionBox);
+        this.selectFields.emit(found.map(fx => fx.dataItem));
     }
 }
 function mouseClick(e) {
@@ -20426,6 +20419,8 @@ function mouseClick(e) {
         this.selectFields.emit(selected.map(fx => fx.dataItem));
     }
     else {
+        // reset the selection box location
+        this.selectionBox = { x: e.clientX, y: e.clientY };
         const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
         fields.forEach(f => {
             const { left, top, bottom, right } = f.getBoundingClientRect();
@@ -20451,8 +20446,8 @@ function mouseDrop(event) {
         var frame = this.component.shadowRoot.getElementById('ls-document-frame');
         // Make a new API compatible id for a template element (prefix 'ele')
         const id = btoa('ele' + crypto.randomUUID());
-        const top = event.offsetY * this.zoom + frame.scrollTop;
-        const left = event.offsetX * this.zoom + frame.scrollLeft;
+        const top = event.offsetY / this.zoom + frame.scrollTop;
+        const left = event.offsetX / this.zoom + frame.scrollLeft;
         // TODO: Put these defaults somewhere sensible
         const newData = {
             action: 'create',
@@ -24578,7 +24573,6 @@ class LsDocumentAdapter {
                 break;
         }
         const result = await this.execute(accessToken, query);
-        console.log(query, result);
         return { result, obj, event };
     };
     /**
@@ -24708,7 +24702,6 @@ const getGroupData = (id) => {
  */
 function validate(t) {
     var errors = [];
-    console.log(t);
     // Check for missing signatures
     t.roles.forEach(tr => {
         if (t.elementConnection.templateElements.filter(e => e.formElementType === 'signature' && e.signer === tr.signerIndex).length === 0) {
@@ -24720,6 +24713,17 @@ function validate(t) {
             });
         }
     });
+    // Check for missing multi-select options
+    t.elementConnection.templateElements.forEach(element => {
+        if (element.validation === 20 && (!element.options || element.options.length === 0)) {
+            errors.push({
+                id: element.id,
+                title: 'Missing options',
+                description: `Drop down field "${element.label}" is missing options.`,
+                element: element
+            });
+        }
+    });
     return errors;
 }
 
@@ -24793,7 +24797,7 @@ const LsDocumentViewer = class {
     validationErrors = [];
     status;
     groupInfo;
-    selected;
+    selected = [];
     /**
      * An ease of use property that will arrange document-viewer appropraitely.
      * {'preview' | 'editor' | 'custom'}
@@ -24804,14 +24808,12 @@ const LsDocumentViewer = class {
             this.showtoolbar = false;
             this.showtoolbox = false;
             this.showstatusbar = false;
-            this.showrightpanel = false;
             this.readonly = true;
         }
         else if (_newMode === 'editor') {
             this.showtoolbar = true;
             this.showtoolbox = true;
             this.showstatusbar = true;
-            this.showrightpanel = true;
             this.readonly = false;
         }
     }
@@ -24854,12 +24856,6 @@ const LsDocumentViewer = class {
      * {boolean}
      */
     showpagepreview = false;
-    /**
-     * Whether the right panel (which can be default field properties or custom panel) is
-     * displayed.
-     * {boolean}
-     */
-    showrightpanel = false;
     /**
      * Whether or not the fields list is expanded.
      * {boolean}
@@ -24894,9 +24890,8 @@ const LsDocumentViewer = class {
     // Send an internal event to be processed
     update;
     adapter;
-    // Updates are internal event between LS controls not to be confused with mutate
+    // Action an external data action and use the result (if required)
     mutateHandler(event) {
-        console.log(event);
         if (this.token)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
     }
@@ -24904,6 +24899,7 @@ const LsDocumentViewer = class {
     updateHandler(event) {
         if (event.detail)
             event.detail.forEach(fx => this.syncChange(fx));
+        this.validationErrors = validate.bind(this)(this._template);
     }
     // Updates are internal event between LS controls not to be confused with mutate
     addParticpantHandler(event) {
@@ -24928,14 +24924,26 @@ const LsDocumentViewer = class {
     }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
-        console.log(event.detail);
+        const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
+        // update the template with all the latest values in the 
+        this._template = {
+            ...this._template,
+            elementConnection: { ...this._template.elementConnection, templateElements: fields.map(ef => ef.dataItem) }
+        };
         var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
         if (toolbar)
             toolbar.dataItem = event.detail;
         var propPanel = this.component.shadowRoot.getElementById('my-field-panel');
-        if (propPanel)
+        if (propPanel) {
             propPanel.dataItem = event.detail;
-        //Revalidate
+        }
+        // change style of selected fields
+        event.detail.forEach(fc => {
+            const fu = this.component.shadowRoot.getElementById('ls-field-' + fc.id);
+            fu.selected = true;
+        });
+        this.selected = fields.filter(fx => fx.selected);
+        this.selected.forEach(s => (s.selected = event.detail.map(d => d.id).includes(s.dataItem.id)));
         this.validationErrors = validate.bind(this)(this._template);
     }
     // Send role selection changes to bars and panels
@@ -25093,6 +25101,7 @@ const LsDocumentViewer = class {
                     const fu = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
                     fu.dataItem = update.data;
                     // Refresh the selected array
+                    this.selectFields.emit(this.selected.map(sf => sf.dataItem));
                     this.selected = this.selected.map(s => (s.dataItem.id === update.data.id ? fu : s));
                 }
                 // Reselect the fields - this updates the dataItem value passed to child controls
@@ -25153,6 +25162,7 @@ const LsDocumentViewer = class {
             this.initViewer();
             //Revalidate
             this.validationErrors = validate.bind(this)(this._template);
+            this.selected = [];
         }
         catch (e) {
             console.error('Your access token is invalid.', e);
@@ -25168,7 +25178,7 @@ const LsDocumentViewer = class {
         box.scrollLeft = (box.scrollWidth - box.clientWidth) / 2;
     }
     render() {
-        return (index.h(index.Host, { key: '507862ca8ac9b4fb78e2171652d85f670efd7154' }, index.h(index.h.Fragment, null, index.h("div", { key: '2fc1ec028c5b5812adb0547d9e98f5ae3ca30389', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '966f14b697692e59d186be75a9ff42a5607e9197', validationErrors: this.validationErrors })), index.h("div", { key: 'e919a403e4aa9dc3d33aa8b8d158144ce6187f26', class: "page-header" }, index.h("p", { key: '5ca5551bb9d2a340db2295e9a051fd419509fe86', class: "header-text-1" }, "Template Creation"), index.h("p", { key: 'c0bad3a3c1df4bf9649b580bacd135a549047965' }, "/"), index.h("p", { key: '1fb838bea78bdac7716308cc99dc342791adf786', class: "header-text-2" }, this._template?.title)), index.h("form", { key: 'f1514a6d78dd8ce1416d00e6eca88cb39739a7af', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
+        return (index.h(index.Host, { key: '079c3dca9d2e77381a5065218ebc5795257b7b5f' }, index.h(index.h.Fragment, null, index.h("div", { key: '344d5e56479caaadc6f82c4de47c52f08f7d5bc1', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: '2fef322510e4be2fc6fe2ec6e70664e23ed9413f', validationErrors: this.validationErrors })), index.h("div", { key: '7b581394dd4536ed8f807a7ce5375723a54b2f8d', class: "page-header" }, index.h("p", { key: '0aa1f815c4bc989764efe1969c250fc39fff1294', class: "header-text-1" }, "Template Creation"), index.h("p", { key: 'f6369aff0df03f8ba40f149d4f5d8ca227e15a6c' }, "/"), index.h("p", { key: '3b93a9acaf60c7023286e069ab8ce4a93acc1c5a', class: "header-text-2" }, this._template?.title)), index.h("form", { key: '3f3f426a56d4020f609485b85b80851927060a61', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25178,10 +25188,10 @@ const LsDocumentViewer = class {
                     participantManager.template = this._template;
                 }
                 this.manager = manager.detail;
-            } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, this.signer > 0 ? (index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer })) : (index.h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", signer: this.signer })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer }), index.h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, index.h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", null, "More Field Types")), this.expandfields && (index.h("div", { class: "fields-box" }, index.h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), this.showrightpanel && !this.displayTable && (index.h("div", { class: this.selected && this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
+            } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, this.signer > 0 ? (index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer })) : (index.h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", signer: this.signer })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer }), index.h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, index.h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", null, "More Field Types")), this.expandfields && (index.h("div", { class: "fields-box" }, index.h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), !this.displayTable && (index.h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: '48fd636a4f58a2d1cf69974df2ddd18cbab92470', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: 'f9bc9ea4748bffa5e0ff189292fa739c74b3d348', id: "ls-mid-area" }, index.h("div", { key: '01daa94f4b7c941a6a409b50dc13c353f3fc9110', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '1cc60b24c260bbeea5a649b1190b3e2ce0303409', id: "ls-document-frame" }, index.h("canvas", { key: '90d2df545d6fd2e0e10980d16dcb5e7302c85cfa', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: '36ecce266e1f0d3951cae62e64664fb19f5438f1', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'c911b0de65321ff3af541833d88256981d76aef0', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'b95ecec60b852b5a31554f8fdf53cb2394472dfb', editor: this }))))));
+            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("ls-toolbar", { key: 'b7cda4e39b0b85515f38ceb2c413b2bd3af5089b', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: '19d4e788c2f1ce3d3951854af41211d5598b1dd2', id: "ls-mid-area" }, index.h("div", { key: '83161a18cdb8e0ce58d7eb571936b2715ffc43e7', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: 'ecbccb9f5bcd253caaa43a08e80957b31b970825', id: "ls-document-frame" }, index.h("canvas", { key: '53d262c1bbda820579da7c89ad63fb252a7d152d', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'ed51cfcc623cfa374487ddd0692182e83620ef94', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '55856f133696700638f8fd7bd8a31ef1b5169f4a', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '3176526950bed152c446488efd5407717be0d55f', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -25411,10 +25421,12 @@ const lsEditorFieldCss = ":host{display:block;position:absolute;margin:0px;paddi
 const LsEditorField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate");
+        this.update = index.createEvent(this, "update");
     }
     get component() { return index.getElement(this); }
     dataItem;
-    selected;
+    selected = false;
     readonly;
     type;
     page;
@@ -25423,6 +25435,8 @@ const LsEditorField = class {
     isEdgeDragging = false;
     innerValue;
     sizeObserver;
+    mutate;
+    update;
     handleInput(e) {
         if (e.code === 'Enter') {
             this.isEditing = false;
@@ -25460,14 +25474,13 @@ const LsEditorField = class {
         this.sizeObserver.disconnect();
         this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;
         const editbox = this.component.shadowRoot.getElementById('editing-input');
-        console.log(editbox);
+        console.log(this.dataItem);
         if (editbox) {
             editbox.className = 'ls-editor-field-editable';
             editbox.focus();
         }
     }
     handleDragStart(event) {
-        console.log('dragstart ls-editor-field', event, this.type);
         // Add the target element's id to the data transfer object
         event.dataTransfer.setData('application/json', JSON.stringify({
             type: this.type,
@@ -25486,10 +25499,6 @@ const LsEditorField = class {
             this.component.style.boxShadow = 'none';
         }
     }
-    onInputChange(e) {
-        // console.log("INPUT CHANGE", e);
-        this.innerValue = e.target.value;
-    }
     componentDidLoad() {
         this.sizeObserver = new ResizeObserver(entries => {
             for (const entry of entries) {
@@ -25517,11 +25526,28 @@ const LsEditorField = class {
             this.component.style.boxShadow = 'none';
         }
     }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.dataItem = { ...this.dataItem, ...diff };
+        this.debounce(this.dataItem, 900);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+            this.update.emit(diffs);
+        }, delay);
+    }
     render() {
-        return (index.h(index.Host, { key: '5239d34cfda7e3a83d55d447a46a6bf728316fe9', style: { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` } }, index.h("div", { key: '59181ee2a080db4469d8d4e262ca69f27d9c3e2b', class: {
+        return (index.h(index.Host, { key: '3ad1a3a7480b3fc1394db18a60acc7af63f7df98', style: { border: `2px ${defaultRolePalette[this.dataItem?.signer % 100].s60} solid` } }, index.h("div", { key: '16fe59242c50fd50bb96d65c6b3ffa2fa47c5e54', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, !this.dataItem?.optional && index.h("ls-icon", { key: '9416fcdb2cce01b90858e16263a94efe668ffabe', name: "required", size: "12", class: "required-icon" }), index.h("input", { key: 'c92ba9a8b846b7e41d62cb4af3c501db6a2560f1', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), index.h("div", { key: 'e3663eb3363123cb166c61f27dadc2744928e737', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
+            } }, !this.dataItem?.optional && index.h("ls-icon", { key: '71ae4733b4c8f05d1c75bb8b5445242b35d958a0', name: "required", size: "12", class: "required-icon" }), index.h("input", { key: '1039562d2c7a854b1da63ebc3c87b76290595436', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value, checked: this.dataItem?.value ? true : false, onInput: e => this.alter({ value: e.target.value }) }), index.h("div", { key: 'e101d06a1b320479e047a03ccdc0c58fcdb0bfec', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.dataItem.value.length && this.dataItem.value || this.dataItem?.label || this.dataItem?.formElementType))));
     }
     static get watchers() { return {
         "selected": ["watchSelectedHandler"]
@@ -25754,9 +25780,9 @@ const LsFieldContent = class {
         }, delay);
     }
     render() {
-        return (index.h(index.Host, { key: 'dda7f87a0d7df59c8cb6a0d5092bafc498c55e04' }, index.h("ls-props-section", { key: '3e319995eef4e6d7f0e9137a534752aaedad125f', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, index.h("ls-field-type-display", { key: 'fa1cc52746b28743221f8bc1034f81b2da691458', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), index.h("ls-props-section", { key: '1772bdf3c25d7cbf80276604ec33b0517e5affb2', sectionTitle: "Required Field", row: true }, index.h("ls-toggle", { key: '3d2efbcc2e364780ac78df83bab1b2bf8744462a', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), index.h("ls-props-section", { key: 'dfe582da625828e21281af36afd6e24ea8c86c76', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, index.h("input", { key: 'e920ef8623ef1c6130183c5ab2d459b4c43a4d79', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), this.showValidationTypes && (index.h("ls-props-section", { key: '9e1a4f9a6c807c65b6124b1c1dd4ee967a21083b', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, index.h("ls-input-wrapper", { key: 'ef605c78fd88bb30fa741fd6a9a8c9e5e4dd08e4', select: true }, index.h("select", { key: '6a72e1e22e573041535b093964720e78c6bab987', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
+        return (index.h(index.Host, { key: '36e48c5852682a2f976d5b30ffb7ea3bfe24d5f1' }, index.h("ls-props-section", { key: '39ecdfe604236ed2f36dd845e73e70163f5a6ecf', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, index.h("ls-field-type-display", { key: '5efb9a29fb2f783e55f483ec602fd596624e1c35', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), index.h("ls-props-section", { key: '85003365f16c771480c03d6e08aaedf48b1824bb', sectionTitle: "Required Field", row: true }, index.h("ls-toggle", { key: 'ed7319e6bd551c1bc8e7d59387fe7b3e3397b7be', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), index.h("ls-props-section", { key: 'a6d76cd96f21fbb1f037eebd7bd57b21471940ff', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, index.h("input", { key: '48b499a96bb887c88714dc69d2e87af8f1c00dd9', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), index.h("ls-props-section", { key: '2d30ed7ac29d061820ef36debad71ff9460dfb4f', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, index.h("input", { key: 'f50dde6f4df5d1fe16ed4bf907cf5bd4a4a5f0a2', value: this.dataItem?.value, placeholder: "e.g. Gordon Smith", onInput: (e) => this.alter({ value: e.target.value }) })), this.dataItem.validation === 20 && (index.h("ls-props-section", { key: 'ba47cfa4d3450bfc5dd31a7c0308a905eb38b4e1', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, index.h("textarea", { key: '6f9bc538bca775252b47a74ba4796ee1952bb1df', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: (e) => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (index.h("ls-props-section", { key: 'e1b1ce449ccc954f869c98f20d8a64f2372bb677', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, index.h("ls-input-wrapper", { key: '4276c393352923286ee12436c43c08e9f3d824e2', select: true }, index.h("select", { key: '58122cae81c4db823ebac128a9067401d312cf12', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
             .filter(type => type.formType === this.dataItem?.elementType)
-            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), index.h("slot", { key: '26dbed7c7c7d1a53df34282440b92310909f8206' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), index.h("slot", { key: 'dd4076914cf2d5c2afaef4490673ef1c59154907' })));
     }
 };
 LsFieldContent.style = lsFieldContentCss;
@@ -25798,7 +25824,7 @@ const LsFieldDimensions = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '439ff89c605ccc47545bfd426a8d616ba725d98a' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '2eae27cf3317ef6ddfc497a08706ecfcb92793bf', class: 'ls-field-properties-section' }, index.h("div", { key: 'f3bb199414d38bd7f464b717fcf45908d8382909', class: 'ls-field-properties-section-text' }, index.h("p", { key: '97e6f89cfac137bd2347d64bea4e7c0fda46a8bb', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '5e5ead118583d0c3ef9dfa99a9545c475d7ba4c0', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: '1c75c5afa416e6c1a940925460315ef7858058f8', class: 'input-row' }, index.h("div", { key: '70f55be15b099697e4a4f41f9facb6dc452d556b', class: 'input-wrapper' }, index.h("ls-icon", { key: '8fadd033b5a55594dcfbf7f0e5741e3a760a3792', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '334b5c485b63dda46dbc1f512c345f29c9055f8f', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '58817e4b1411b1f9b66d0c50021730efdb78ff8f', class: 'input-wrapper' }, index.h("ls-icon", { key: '1e182a7e0f3bdf4b094bf1174899cc05fd1195af', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'b910a0a9ceff55857a46bcbf7146058572ee4471', class: 'has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: 'd0f03c9d86708196d9567a510056cb45a5fa0a62', class: 'field-set' }, index.h("div", { key: 'f79f4c4d7755ae4d0675139374ed88bef48de6b7', class: 'ls-field-properties-section' }, index.h("div", { key: '4df6b4bf921d1f084efabfcbd9f303ab8b3860cf', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'd847ab18a383635db36cf1d0ccfb71496c0b65da', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '7a7e9adcc9dd5cb9695d63a1b7bfacbb3fbe9b1c', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'ecc440a146667194dd8e4d92fecc3cfb43cdb10e', class: 'input-row' }, index.h("div", { key: 'fd7a30dc9acf4a3c1a613bebbff2198782a3dbff', class: 'input-wrapper' }, index.h("ls-icon", { key: 'd3d773a181c195ce5914c9d57d7eef084f4ccd63', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: 'f124480b9b6d5a766f0777d12a11b4762cd0b0a8', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '89dc792a2c896a6b2cd4533a9f0c17a320c795e9', class: 'input-wrapper' }, index.h("ls-icon", { key: 'eebe00d06a8af9f2b1d6afcdeb978c319f674e3d', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'f95933095df0b947448535d3aa3f4f67463fca50', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), index.h("div", { key: 'c012b397f6bb394476ed6b1e15493676b7b0b4d8', class: 'ls-field-properties-section' }, index.h("div", { key: '39088003046f26edd4618fe3e39f6f7fcd7e9ea0', class: 'ls-field-properties-section-text' }, index.h("p", { key: '10f4adbc3335b90544051907b914030501a6d9a2', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: '3b5bb5809a3f421438fa35fd35df0343de550bc1', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '6507bff65254b8e206be5940c20f89340bb36318', class: 'button-group' }, index.h("button", { key: 'a72e710ee3e6a038f1f8de74296b73007a03dd2a', disabled: true }, index.h("ls-icon", { key: 'f1367e59789a180d6ef8907b5245074977dd6618', name: "field-scale" })), index.h("button", { key: '05bf5357859205da330311ae1e394ef23f4ee3a7', disabled: true }, index.h("ls-icon", { key: '711ed196347dc0209acf7a23d74247c86d497d73', name: "field-match-width" })), index.h("button", { key: 'c7929e849f85ff10b44ca82157f6e96345c7129b', disabled: true }, index.h("ls-icon", { key: '427f363c6b29a0a200c1b54fefa5b20d990de345', name: "field-match-height" }))))))));
+        return (index.h(index.Host, { key: '19d830f9e2acf0125befaaa5386613da819d5f0e' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '629f80415218ade978ce45a9fbeea38f136a1b33', class: 'ls-field-properties-section' }, index.h("div", { key: 'a027cc20ae591f94ed54d9e6e93b7826a87dd583', class: 'ls-field-properties-section-text' }, index.h("p", { key: '24270cee4bdecc6c06a06efb34169827dc0aa96e', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '8558ee8920871270943edbda0392c21eae948c94', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'fd8b5281f3a25de363bcbb1ff93189dbadfe7b15', class: 'input-row' }, index.h("div", { key: '6f6d9205a2b1a14c8b0618d8f097290edb43690f', class: 'input-wrapper' }, index.h("ls-icon", { key: '2eb580572a2be6ea8cc204447f760da63d06807f', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '2bc5d6f1c7f725ecb6ca82c4081ed5b42b7ee56e', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '6affcfc83bc4cde7a9fed80415c9d21495e1466c', class: 'input-wrapper' }, index.h("ls-icon", { key: '634b0e72778978116b39cf15869884bbe51eabdc', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '762fdbd4b3ff084d7d136f4536d592bf07cf8342', class: 'has-leading-icon', aria: "field-height", id: "field-height", onChange: e => this.alter({ height: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: 'aa4c66751db7f2d3dfca151edc1cb23cbfdbfce1', class: 'field-set' }, index.h("div", { key: 'b2e86370878a977450c3057d7892f96a5f3f7dcb', class: 'ls-field-properties-section' }, index.h("div", { key: 'e3c5d394149132da170e7c61b70d6739924b9f52', class: 'ls-field-properties-section-text' }, index.h("p", { key: '52f5b30d62cfc5541952be0650411df7c6d51c42', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '7b7c280d971473115859f8fb7f274b9e3a028fa1', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'ad761e6552cf41cab1abe005a084c68ead82175c', class: 'input-row' }, index.h("div", { key: '3666540cd6533c6d2698cb6b2bd722d7749f930e', class: 'input-wrapper' }, index.h("ls-icon", { key: '0d27684b779b5bcdc69bbc22402615706590c94b', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '88b451a53d36ef023545ff0b6cc59ceab85b714c', type: "number", class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: 'ecca70d84553d8f39cba8c4c5915761e30adf0ab', class: 'input-wrapper' }, index.h("ls-icon", { key: 'c867638bc065ae5702b3e7887cc4f0a42b9e13e3', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '44dc86a42a13de363dce31fe99151183da4411aa', type: "number", class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), index.h("div", { key: 'fc9f465fb17869fcdf129ddbdcc9e3a2d293ef8f', class: 'ls-field-properties-section' }, index.h("div", { key: 'ff59482f02e40b4c2b36ff8bc3e6e2bd6cf2f3e7', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'ff4ab1e6fddcd3acb152986da22d0578b95379de', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'e421512109ff01779b429be7bef8d94e7aede922', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: 'f73d48bf4e11b750e76bdb19f7c42edd272c0825', class: 'button-group' }, index.h("button", { key: '401b1544201acb638e9370ffa11d18423adb5b4a', disabled: true }, index.h("ls-icon", { key: '54d6007197fff3ea5786af142affcc1a7a68f12e', name: "field-scale" })), index.h("button", { key: '688a49435f72a6b940f5bc1a743465d90ce70079', disabled: true }, index.h("ls-icon", { key: '5b29da650220c305d3cd4a10a36c773ffd8484e5', name: "field-match-width" })), index.h("button", { key: 'ddc295463cae884a14c3391c369af08d406ce575', disabled: true }, index.h("ls-icon", { key: 'd21cca2e51d9556c187fd8688983aef92e09c2dc', name: "field-match-height" }))))))));
     }
 };
 LsFieldDimensions.style = lsFieldDimensionsCss;
@@ -25894,11 +25920,11 @@ const LsFieldDistribute = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '25772e196603735cb914bd01133c7c34e23826ef' }, index.h("div", { key: '81a0ecce05d52174c289b9af137948c873826478', class: 'ls-field-properties-section' }, index.h("div", { key: 'e1628c86925f5526db581bae1183d0fb8cada405', class: 'ls-field-properties-section-text' }, index.h("p", { key: '14bacdbe4ef83564c461855438c09c353a2be016', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: '6135630ef29e41b30224944e9ef769c5c8625308', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: 'c44923008bcdd4da4822215d5527dec55582aabd', class: 'button-group' }, index.h("button", { key: '906f9ddd5924d9e92190ab55ac2e1177c1871fb8', onClick: () => {
+        return (index.h(index.Host, { key: '1da6e89c29b012402fb855b09d6f89412b7fffff' }, index.h("div", { key: '13a5e1dfededc5e857f85d731fb23f59b6b8f64b', class: 'ls-field-properties-section' }, index.h("div", { key: 'af4c4a1dc679bff814e0996a56169db0d65c0a52', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'afcd55f8ea2c8000ddaba5bcd516a1926a3f103a', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'db559e60e145234f95497eca284ccf241fc5f094', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '4a8433efc339fc1a995ef964abbda61234a00f52', class: 'button-group' }, index.h("button", { key: 'd91bb4652162d97ad921ec91c9c0261f617a518f', onClick: () => {
                 this.distributeVertical();
-            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '63cde060fd4b7deaa88203a5d06fba9493d1dd1d', name: "field-distribute-vertically" })), index.h("button", { key: 'd9f213ee0cbcaf6878d0fd91ad92012dcc3a585f', onClick: () => {
+            }, "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '4c7935424e784dc1fc3ebfe996101c492c8cb4de', name: "field-distribute-vertically" })), index.h("button", { key: '0ac25cb0252642f565af0e43d8e3d62c8869469d', onClick: () => {
                 this.distributeHorizontal();
-            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'a82bb99cd380432c9ab5f5da717e16e5f97c4957', name: "field-distribute-horizontally" })))), index.h("div", { key: '6c3464428454774cad37f7886c9acc62d71a5f38', class: 'ls-field-properties-section' }, index.h("div", { key: 'e42014c936deaa922edca1a9ee40d5a2d56649cb', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'eb71e09823bacfb6947d46adc62e4c16108c391b', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '573be67c9576bfc34e1d90a0c782043d88ecd96b', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: 'b7da3a466b0ebd3af072f832956ca8e9ee1aa8a4', class: 'input-row' }, index.h("div", { key: 'a174323c55cc78406011abdbc275c9573a3c214d', class: 'input-wrapper' }, index.h("ls-icon", { key: '6fd94cf04330cf51385acd4795b3b19fd7474187', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: '233907eacadcbb11816200e80fb4ff584769f856', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), index.h("div", { key: '1710d0606bc60817cd71457bd99681cd7c2a21eb', class: 'input-wrapper' }, index.h("ls-icon", { key: 'a880cf0caff0c3825567d8344c17635cfc525200', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: '3709df277a625b566db42e2a72f5d13ef8f2679b', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), index.h("slot", { key: 'b790914b23032b04e89feb7e3a9d3aa2cc4a56d5' })));
+            }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '00d5b191557e95b6dd8f7c9866ade809c5392046', name: "field-distribute-horizontally" })))), index.h("div", { key: 'd21c0297023873f7d752163fb06557504ca3ce91', class: 'ls-field-properties-section' }, index.h("div", { key: '5d29996d6e3c25621ba760bca38a0b76a02c1099', class: 'ls-field-properties-section-text' }, index.h("p", { key: '00ab146d74a0446aad281a46fdafaae20384674c', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '968370f8ece75d442fa8b1adc2809a289653b295', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '2819ad7513258f7c3c4096f171578d5c704d3fc8', class: 'input-row' }, index.h("div", { key: 'a8d5d086e974b911490df419059a82b43cc566de', class: 'input-wrapper' }, index.h("ls-icon", { key: 'fa72a36c4da15a210ee486477b0c362741002940', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: '52853aa1afe326391b735f534ff0987dab350037', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), index.h("div", { key: '57a5adfb1675e7fd5ab71c71ce0d239fc5777c2b', class: 'input-wrapper' }, index.h("ls-icon", { key: '6114732c75cf3499985d80b718578bd6140bd801', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: '729381797b69aca62402451473b3ac2507e21a5c', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), index.h("slot", { key: 'ca7b442e1395376563a47d5377eb9962ace34f38' })));
     }
 };
 LsFieldDistribute.style = lsFieldDistributeCss;
@@ -25927,7 +25953,7 @@ const LsFieldFooter = class {
         this.mutate.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
     };
     render() {
-        return (index.h(index.Host, { key: '758127fdaf9df338b22f0dd8018f0d5744787d15' }, index.h("div", { key: '65d97db494f4338326b39c79a9ce8da09a8e76e4', class: 'button-footer' }, index.h("button", { key: '9d48d0c97c1fbebcf010bc3e2523f4006d6593d5', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: '304be5d258b110f4eb68fe5237eee0d03e12d55f', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: 'a1b1b451b1696577019b9bde4530733d57834964', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: '3d59bb5c5eeebd6c2914cf9024f76ee1b8332a3a', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '7f68c240e7e5b9c533bf9b2ea6f48ae40101f127' })));
+        return (index.h(index.Host, { key: '71d3ecbf124d31efdd15641f46406cc19ef2fad9' }, index.h("div", { key: '9e44d8fa9c1b18199d49ff59f7d9e89cb596a360', class: 'button-footer' }, index.h("button", { key: '3e9fc08011e29e1efd6803f9a03b85dc1209c242', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: '9a457d4bca28dcdbe708b32864a66bf690a7212c', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '05743aea386445a51c808baced5dc540f9c323a1', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: '7be1455b97f1768ce615474794e0b7dd75a4ecf3', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '54a62065f104f644ab6454a801a0ed913205009e' })));
     }
 };
 LsFieldFooter.style = lsFieldFooterCss;
@@ -25956,25 +25982,25 @@ const LsFieldFormat = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'b88040d1b9116cd13e60c6a80da6decb8671a383' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '5cc04fea5911be029af2656e8f197ac71a96c77b', class: 'ls-field-format-bar' }, index.h("div", { key: '0cf17eb7f3d1ed52c3461bf242637c9bdb85d6e7', class: " input-wrapper" }, index.h("ls-icon", { key: '00efad485e3f55213d01f76debaf04138eb80cc3', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '882f1eab23c32381a658a493068015f72f9ac9f0', onChange: input => {
+        return (index.h(index.Host, { key: '9830d08c3b141b3180280179ba118f2aff5172f0' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: 'f125719127e3f8b014cff454bce8fa432dba8570', class: 'ls-field-format-bar' }, index.h("div", { key: '66e387c55b1d9ce916e6944938fbedec7b60df8c', class: " input-wrapper" }, index.h("ls-icon", { key: 'ca4b833a2507e878c35ebf5940beef0ecd2c7776', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: 'fcba8b29e969fac7a9acbbeb855d28eeed20ea1f', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: '9971b423adb4409326f1f4b21128d6670e236252', value: "arial" }, "Arial"), index.h("option", { key: 'cd8f8caa2724f1901fe4c14b8218c0b344689f5c', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '31f639c71f806fd023d2f5fb30d22bb03b5b274e', value: "courier" }, "Courier"), index.h("option", { key: 'b8842a6e33d5949ffc8dea43c886f1820ff3185a', value: "helvetica" }, "Helvetica"), index.h("option", { key: '8bb308d75fc116582cbbf18a52dcc691e0a90447', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: 'e7b40cad94632f7d61102ca6644e2f1b6e8f782d', id: "selectorIcon", name: "selector" })), index.h("div", { key: 'a3251844e07ed9a84397f32c7409932db082cb19', class: "input-wrapper" }, index.h("ls-icon", { key: 'd649faa9b15e970fb2d706c9e7177ece8c6ab5b7', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: 'bf2b5963d83d621e2104c575617bd31ec2421227', width: "30", size: 4, class: 'has-leading-icon' })), index.h("div", { key: '77c7b8c56dfd32e185c52f388e7c68a0c34848be', class: 'button-group' }, index.h("button", { key: '565bfd0cce4b56369e700bd6f5666b82025845c5', onClick: () => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '33bab119c584bbd70959f01c0a86f47a8472304c', value: "arial" }, "Arial"), index.h("option", { key: '2665a63ab41a4bab8ef59b85dd944495585aba6b', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'dc387a4e0ddd99d2344ef27feef9628286cc1cc3', value: "courier" }, "Courier"), index.h("option", { key: 'c00614f48ddea8e534b14c25880d3a7563f88558', value: "helvetica" }, "Helvetica"), index.h("option", { key: '0558b3283a7654bf6101cd3e31ff633ed4ad7c02', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '0db075666eaf2ebfba3d24cf15c8607907d568fe', id: "selectorIcon", name: "selector" })), index.h("div", { key: 'ac4632fa34024e3576a882c257e2b633dd39ca23', class: "input-wrapper" }, index.h("ls-icon", { key: '49f56b4031bac85b8d3f240ca38b45e6016517f8', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '6f1c5fbcbe572c49d4343ea7cba63cfe15511404', width: "30", size: 4, class: 'has-leading-icon' })), index.h("div", { key: '3b7c4400dd7bb04751decbf8ad8ea49154c9094f', class: 'button-group' }, index.h("button", { key: 'd0421795af81429299836e36993534b71d094cc4', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: '5e84eda1353f569c61bbb6f563f55b974237b451', name: "menu-alt-2" })), index.h("button", { key: 'ceca65282468eaee956bf6d8a80d97a793ef016b', onClick: () => {
+            } }, index.h("ls-icon", { key: '10b2b34fdf03fdab5f9938b1352a617ff1a8979d', name: "menu-alt-2" })), index.h("button", { key: '5965c9b86e64cd39a81d1334992daf63b08dcadd', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: '474a2513d7edbfe69e2c2be1a65abdbd483394c2', name: "menu-alt-5" })), index.h("button", { key: '0e3d319cff0a918ad35db83892b07edecb8f77d4', onClick: () => {
+            } }, index.h("ls-icon", { key: '95ada12f033106a1b5ff8381a21ab2f4751b8b2d', name: "menu-alt-5" })), index.h("button", { key: '12c263cf73c90f58f202e99eb28863b7fa44b6c3', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: '5b0b4aaaa6769e81d8834e0dff5ff28e4d204ada', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '1296d9077f278af5b305803bf4a86f3d6d422232', class: 'ls-field-format-bar' }, index.h("div", { key: 'a26204c2b9436553081d59af854672e9fa812e8c', class: "input-wrapper" }, index.h("ls-icon", { key: '3c653235269d2aca9fb007cb24d78755f80d872e', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '2ae0f82ff2d4a9ea0ecde2b60fdbf898ad58f0bc', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '99c594d2e5a82297dae992f296d9bcbe5fb28a06', onChange: input => {
+            } }, index.h("ls-icon", { key: 'deac6371af9a07eac83385bf769af33f3ac895d7', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '4d6bb447542540466b47736e2cdd9278f5fb9166', class: 'ls-field-format-bar' }, index.h("div", { key: 'f33f4da0a2e044cdb19b67e58e458f6bea84a882', class: "input-wrapper" }, index.h("ls-icon", { key: 'f6af8ec3739e7bce77c1c87a40d02f6696a32613', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '739d045a9dd6ce8dbb4dd7b67cfe37dd9eb5e638', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: 'e678cccd1b544d4a271bdf099ee546e614acdb33', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: 'ace9071a1981a0666bd96740b94c8275ee5010f8', value: "arial" }, "Arial"), index.h("option", { key: 'c45156c0eb4e3e056374b9bdca680a1503d2f2ea', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'ac476cc6d0de6e916ce6bd3b3ce806c056d4a5c8', value: "courier" }, "Courier"), index.h("option", { key: 'e6efc61a261b3b82a57d40fee4682459d31d06de', value: "helvetica" }, "Helvetica"), index.h("option", { key: 'ae4becd65bf7e18f6a766bb405ed522dcffef2c3', value: "verdana" }, "Verdana"))), index.h("div", { key: '2f246b67993339a4d86f64375c63851e4a3da96e', class: "input-wrapper" }, index.h("ls-icon", { key: '82b9bc439c599491101bc6fe584be00e246f7166', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: 'efd1c4d402212c20fc4604046c109a2cf139479c', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '8f980c08ba53d7ec68b24205c570fd1d51d2879b', value: "arial" }, "Arial"), index.h("option", { key: '9ac51a1f5b47745065ab11047381c21c000147b7', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '51625f9069b8a7f9f050a596baaea41026e60e14', value: "courier" }, "Courier"), index.h("option", { key: '87cfc98d3f120474d5d94800df81371163bdc1c6', value: "helvetica" }, "Helvetica"), index.h("option", { key: '297c02916456ab9b4ee0534170f18293ffc7022d', value: "verdana" }, "Verdana"))), index.h("div", { key: '615054d6fad85ed88a0f614d05d217e95a3ed69b', class: "input-wrapper" }, index.h("ls-icon", { key: 'dbe200893041354ea6d4b0e43903aecd9829cccb', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '7140be312d065e352cc801dc5355f795f9052df3', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), index.h("div", { key: 'd6b8ffcd127e5aa6272a7c52fd83dd5a27d93ca1', class: 'button-group' }, index.h("button", { key: '6d0e2f14c6421300b82291fbfb9e427c6e8c10bb', onClick: () => {
+            }, class: 'has-leading-icon' })), index.h("div", { key: '1d71bd91f2423f24a9b6ae2768a091ba88b9fac0', class: 'button-group' }, index.h("button", { key: '591012d14dd298aa6ef60de1026a8fda55947669', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: 'c8148f17836a77b7e3e171db0cb9a2798930a065', name: "menu-alt-2" })), index.h("button", { key: 'eb20c2acedff64378165f1e4f5b92b96aaeef1c6', onClick: () => {
+            } }, index.h("ls-icon", { key: '8e12a1e29b2bf2c2549aa224c0e189e79635c954', name: "menu-alt-2" })), index.h("button", { key: '67e49dc4631e3390da677fd35acc830aff2fa4db', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: '2f337e94b6bf8c2bbf822087125b8fc22dceeae6', name: "menu-alt-5" })), index.h("button", { key: '1d818ddc9cc83ddb68abb07f7ff03f6f12fa65b7', onClick: () => {
+            } }, index.h("ls-icon", { key: 'e44c688f14e317dc36187e63103cc471da7e7bcd', name: "menu-alt-5" })), index.h("button", { key: 'a1b000dbce0011ec0da15ce6bfbd414a5020ab22', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: 'ea14284d9e0cc337300f0c87d889b85c50e6309f', name: "menu-alt-3" })))))));
+            } }, index.h("ls-icon", { key: '0181dc2fef0afa5b0412234f15363db2f4b33283', name: "menu-alt-3" })))))));
     }
 };
 LsFieldFormat.style = lsFieldFormatCss;
@@ -26036,7 +26062,7 @@ const LsFieldPlacement = class {
         return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;
     }
     render() {
-        return (index.h(index.Host, { key: '8f414efb9ba794f6c30eda446fe3030a681650df' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '4a260ef4b7196e83ae0c9f5546bfbcd2a1e0affc', class: 'ls-field-properties-section' }, index.h("div", { key: 'fa55ea83e1c35f7a87e89e707b0b1e8627106d0a', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'fc3ff62872dbded4d1c5efdb66cc9adef9713330', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: 'acb421717e87c8bc48dbfe38b99ee154f078daaa', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'e44d42de07201df6cbb6db1727c8b0b99e3af5a8', class: 'input-row' }, index.h("div", { key: '2da475667995c71fecd631bf00155ed24776e6d0', class: 'input-wrapper' }, index.h("ls-icon", { key: '885e5912b6cfe5f29871420e9162807455358c9b', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: 'bce82f437e321c7a0fa85f748afb8316763e3a02', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: 'd63127f3f419f857ab17a24692c3beedbf61e77d', class: 'input-wrapper' }, index.h("ls-icon", { key: '220b6d48b0e9d9e8e89f07cc01b4c15b30c953de', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '81704c2be50741c1a4df4e465009c44f4ffe6286', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: '67d9a9516e4a3a8d889621bac9606246038a35d5', class: 'field-set' }, index.h("div", { key: 'e264bd3c40e0e938f421d0b946742eb986c19bd8', class: 'ls-field-properties-section' }, index.h("div", { key: '30989a6e90b6da5855e23801790797a93662af5d', class: 'ls-field-properties-section-text' }, index.h("p", { key: '10557815232bd764299c3d83c26314c190237a5b', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '711a3ecd055c7c5491edb0492e397062bd5a8558', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), index.h("div", { key: 'fb066d48051bc05ac667e78a47a0d34028e7f641', class: 'multi-button-group-row' }, index.h("div", { key: 'b8a02b554d6c2b111501b6231b4ad56cb5675093', class: 'button-group' }, index.h("button", { key: '16bcbbd263a668a0896a4b4d1ac1fc8ef7e3e95b', onClick: () => { this.alter({ left: 0 }); } }, index.h("ls-icon", { key: '4ffa1b6492eb665febd819456ac68489dfa6492f', name: "field-alignment-left" })), index.h("button", { key: 'f52ff655aea15cd88bd8b98089fae8d3aa2d9082', onClick: () => { this.alter({ left: this.center() }); } }, index.h("ls-icon", { key: 'f74a107cdeebe8ae88285c2393e2f04438ebfadc', name: "field-alignment-centre" })), index.h("button", { key: 'f83f0a41a4f6e500250ee3e16e327df805fd0ee5', onClick: () => { this.alter({ left: this.right() }); } }, index.h("ls-icon", { key: '054f3adad0d2af592167153cf3c8f8dfbcafb172', name: "field-alignment-right" }))), index.h("div", { key: '6c2afc8dd070207b1e0f40aa53d9c408c097fdb1', class: 'button-group' }, index.h("button", { key: '8307302d554a55e938880df59c8dcfce2090347f', onClick: () => this.alter({ top: 0 }) }, index.h("ls-icon", { key: '00fc766d8a6d2c912f178f18b9ba0284df53887d', name: "field-alignment-top" })), index.h("button", { key: 'd7aa397f69a8e0b4bdad48669488a607f0eec5b8', onClick: () => { this.alter({ top: this.middle() }); } }, index.h("ls-icon", { key: '4043aa6d8ebab2e5157271c17e2a6dd2036b7168', name: "field-alignment-middle" })), index.h("button", { key: 'c83298f7e5c5dc12257bfe44876bceb60440fb85', onClick: () => { this.alter({ top: this.bottom() }); } }, index.h("ls-icon", { key: '28c48590ac70f74c0f499a5bbd79750352bd1b1d', name: "field-alignment-bottom" }))))), index.h("div", { key: '8c9a934b62d07c6d9e17572d04fae086937ae533', class: 'ls-field-properties-section' }, index.h("div", { key: '6babb79ddce1a7d3df7ae6e7342e47e69973a14c', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f77e129ab13e0c1dc8a4a69ad0f6a4d7205e7d36', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '0b8ba2425c2ec45a9de75c0af96edd783af29e3d', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'fe835366f46b95d59c3dacac786ae5693c81eaa1', class: 'input-row' }, index.h("div", { key: '224dffc26b58d3e9bfdb5c1972bf45977a52a8cf', class: 'input-wrapper' }, index.h("ls-icon", { key: '6a26cfcb7a9adf35b12a7ff6e92d655005ca80e2', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '49919dd027f1f8049790921700ec8fe4169a1296', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: '847f2694df55dd5e94cdd107c517c559b224716c', class: 'input-wrapper' }, index.h("ls-icon", { key: '9677a8d03fa592440b07ad21ab16ccc9b8a156b2', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '2bf304254596cba654b3af57199b9b0bf58f64b6', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), index.h("div", { key: '5ce85ba3ad758a998ec16e4390ee8bbf8407b366', class: 'ls-field-properties-section' }, index.h("div", { key: '04da1b5d71faf0fefbf84e7eb3e42ed107bde312', class: 'ls-field-properties-section-text' }, index.h("p", { key: '9e3988a6cebf275fe84a33530a53c055ff9f5a51', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'dbdbcb26d95fb4de61ce112cc9ab6aa2411396f9', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '45209ea3390a7810909867f1966f4208fe44517e', class: 'button-group' }, index.h("button", { key: '0ce201c842aaf2be23e7ce417e2db6bb85f5992a', disabled: true }, index.h("ls-icon", { key: 'be41fa982be1fd65b51341372195d62e1b7609b7', name: "field-distribute-vertically" })), index.h("button", { key: '4534e69518070f29c42f1a51ee8025240d936d7f', disabled: true }, index.h("ls-icon", { key: '6743c48ca8f486e2d97d7a9e5f96e7065ab07e56', name: "field-distribute-horizontally" })))), index.h("div", { key: '2869721abaae844627348711d0d62467a11ba4ef', class: 'ls-field-properties-section' }, index.h("div", { key: '143514ae6009bf84738dff7b64e433606a36570a', class: 'ls-field-properties-section-text' }, index.h("p", { key: '3b661ec179f8bda3d6da65939e476c24da4c2f70', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '3c474d1fd4dd4d8d26127dd42a461571c767a3aa', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '35893a7a0e5eb244388f6cb7f1673992c0d00605', class: 'input-row' }, index.h("div", { key: '4722103927697e90a96ccb912045785beb0162e6', class: 'input-wrapper' }, index.h("ls-icon", { key: '5eb9d50a601c796dd559769aae1241cea60b235e', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '9f25668d5ff8d223d694da334875101deb1aed26', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: '912e5ecdf9b65a98139e3c8885fb5578834a593c', class: 'input-wrapper' }, index.h("ls-icon", { key: '04a998a14bc3d91f22340b4065ae1f49d9f23f66', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: 'c06d8aa85ac974a1c1c9818e073d5ac51f199065', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
+        return (index.h(index.Host, { key: 'bf165db185ff27a97747d35c439acc36f320cec0' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '28da50141d7f991f3bf1ee51849ca425eaf25a91', class: 'ls-field-properties-section' }, index.h("div", { key: '9d66acfc9a2c7eed9d4f52d250586c1942e7a3ae', class: 'ls-field-properties-section-text' }, index.h("p", { key: '7c3d63ca77a43cfddd265d08d12a68b04e899c11', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '6b974149ab31cc52caaddf785d8a151660d11044', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '4ea32eb6799737a8e5962bd814d6e270adfc5a24', class: 'input-row' }, index.h("div", { key: '60303ebaafc5ea7dcc0bea71a029ef443decad51', class: 'input-wrapper' }, index.h("ls-icon", { key: 'b55c508d607d9eddec4e870c00c6e2398f724ce4', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '41c9e975d7050364a5b3f0cca93b002057694645', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: 'ed8258c26042213514cc13f3b2ec5504694de514', class: 'input-wrapper' }, index.h("ls-icon", { key: '28871226f68e0cb9c547cb3e60347ecb2ab91b92', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '90bd7547481fbab4a2bf19d7675b69e67e99b128', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: 'd59db0069032eb21d95be7e7e00fe13a55855b6c', class: 'field-set' }, index.h("div", { key: '3da316b826b05ca5c40e86c20ac94a041c9e397b', class: 'ls-field-properties-section' }, index.h("div", { key: '3f25d6a85a54154f7d98b7a8297ea457f3c1d913', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'efa3e1f4e90cf9b84dc6fae89ed555a8afbe2ef9', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: 'a4cc37bf9765f780e0acc534c881d2a8637285cd', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), index.h("div", { key: '6694fe7630c8b20a0491d1af1a151a75aeb3eec7', class: 'multi-button-group-row' }, index.h("div", { key: '29fff0131a1003e441b85f341981e206cb1ee3da', class: 'button-group' }, index.h("button", { key: '0d551642e5ee2fa1eca06f5b86b61159d906fd0f', onClick: () => { this.alter({ left: 0 }); } }, index.h("ls-icon", { key: 'a36f8771e366de820758bfee744da9bde4c9e3ae', name: "field-alignment-left" })), index.h("button", { key: '6a05dafda45385eb977f33427aeb8c7a7d798149', onClick: () => { this.alter({ left: this.center() }); } }, index.h("ls-icon", { key: '3fda591e0cb4920c20206fa6d8ae2352bd742448', name: "field-alignment-centre" })), index.h("button", { key: '99a609d8e76626e46f34bf4fcc6542cd16027d46', onClick: () => { this.alter({ left: this.right() }); } }, index.h("ls-icon", { key: 'e1ff627dccf82333f8f425ab1153cc260f095552', name: "field-alignment-right" }))), index.h("div", { key: 'bafa35fe910a001ccd76935ab68f37ea83b270e9', class: 'button-group' }, index.h("button", { key: '4b1de1698106e5accee226cdc7cd7cd2ede94c3c', onClick: () => this.alter({ top: 0 }) }, index.h("ls-icon", { key: 'bb55c8594838517aca3eb553cd4cb2581c8a1b2e', name: "field-alignment-top" })), index.h("button", { key: '937656e3a4c586480bdadf187966181585693698', onClick: () => { this.alter({ top: this.middle() }); } }, index.h("ls-icon", { key: '4b98a2548231d5c5039e1ac5828eac1d98f468d9', name: "field-alignment-middle" })), index.h("button", { key: 'e805d719c5f88cca065d15fc2ff51d603d0c5d4d', onClick: () => { this.alter({ top: this.bottom() }); } }, index.h("ls-icon", { key: '7dad1351fbb73624b1d507d8ffee1346ad0f35c6', name: "field-alignment-bottom" }))))), index.h("div", { key: 'eb263b6ec37c7bcf57d31573c430e0d87db8cc63', class: 'ls-field-properties-section' }, index.h("div", { key: '79106d27e3afa8cbe58cc1b0d24a9a691f3631e4', class: 'ls-field-properties-section-text' }, index.h("p", { key: '1d6f966bbc0e560654ff10ab116b58bd657efeb8', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '2ec6eba189500c660d982b61b6cd9c642f9b1495', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'f05b96e1b921964dd71f68887441aa7433cf6eba', class: 'input-row' }, index.h("div", { key: 'abd5ed8c84c17023a69cc6efa7365fde3c740dd7', class: 'input-wrapper' }, index.h("ls-icon", { key: 'f4674ea809efbb46dc5bbf32b3c2d050341cf2f8', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '2f34f8e1f424f58d16b81d0323df2c5f429a6015', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: '42889a206d59f970040f95d34f0c4804797fb846', class: 'input-wrapper' }, index.h("ls-icon", { key: '05687fb70acbb665a96fe5f5a246a102b65f743f', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '46367dbecf5f7177391f942279a7a7d58b7d8e28', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), index.h("div", { key: 'ff92c96808e8ab1f5e9f1d12f945cf3b50617d00', class: 'ls-field-properties-section' }, index.h("div", { key: 'b5cc48867cf12657186c938ae0827202b7700d40', class: 'ls-field-properties-section-text' }, index.h("p", { key: '3b09f573e94322e972e36f0486d92a279b68a28f', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'fe759b355b5ce3f24a9ee70c94bc3b40daffa418', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '8fc1f92da89df534a867c3d44e4d63a904803baa', class: 'button-group' }, index.h("button", { key: '6717e349f2f0c4eeb21d6256a1d1cb39faf8f770', disabled: true }, index.h("ls-icon", { key: '72fc889318415749f805db95ceca3487cb26eb98', name: "field-distribute-vertically" })), index.h("button", { key: '55a4fde0120b963ed9f07dd8490f1abbf44b5540', disabled: true }, index.h("ls-icon", { key: 'c3a7a795d6d9da295fd4c7aaef5bf1843b13a26e', name: "field-distribute-horizontally" })))), index.h("div", { key: '57184185505c6dfe16322b8d6b59c3fedf30ef65', class: 'ls-field-properties-section' }, index.h("div", { key: 'd0522de83bfa4a5b6bef87072658f511600c9aa7', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'cd7880e2f53b6452c5fb136d6a4eaecee7f4403c', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '019e02dcdb5fe4ae4c4aad9f3deacab084c2b306', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '8e566f1e91410ee3cb82b4e4c0a0c27e34ffac03', class: 'input-row' }, index.h("div", { key: '811db7eb6e7b3edf49015440814c222a04e88f45', class: 'input-wrapper' }, index.h("ls-icon", { key: '1b7b4c849995b07da7125b4f9e8d95d20430e043', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '2a61868d165b84d85064d5ce30d60502ef702610', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: 'c174ddc8fde35fdef12602d22c0f4330392372fa', class: 'input-wrapper' }, index.h("ls-icon", { key: 'e540dbbae07e64eb0bae816a54775d939a588e82', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: '8b3d0cf223379a4ed8fd7561af482b5a7b2731c3', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
     }
 };
 LsFieldPlacement.style = lsFieldPlacementCss;
@@ -26069,6 +26095,8 @@ const LsFieldProperties = class {
                     return index.h("ls-field-properties-image", { dataItem: this.dataItem[0] });
                 case 'file':
                     return index.h("ls-field-properties-file", { dataItem: this.dataItem[0] });
+                case 'dropdown':
+                    return index.h("ls-field-properties-file", { dataItem: this.dataItem[0] });
                 default:
                     return index.h("ls-field-properties-general", { dataItem: this.dataItem[0] });
             }
@@ -26077,7 +26105,7 @@ const LsFieldProperties = class {
             return index.h("ls-field-properties-multiple", { dataItem: this.dataItem });
     }
     render() {
-        return (index.h(index.Host, { key: '1c18ca2e12dd50989e2c1971300333385246ca58' }, this.dataItem && this.renderFields(), index.h("slot", { key: '249477d27cc76e42abfb31cd52e72144235abaa5' })));
+        return (index.h(index.Host, { key: '81a4f69d51691f6bb43ad01c130207fa0bdb71c7' }, this.dataItem && this.renderFields(), index.h("slot", { key: '53546d9623461dcc729c2fcd838fc0b885f19df8' })));
     }
 };
 LsFieldProperties.style = lsFieldPropertiesCss;
@@ -26127,7 +26155,7 @@ const LsFieldPropertiesAdvanced = class {
         return '';
     }
     render() {
-        return (index.h(index.Host, { key: 'e04335cb107a9e4e0d095b1eda2a486e0d9f776f' }, index.h("div", { key: '0936b472a4bf39e70bd65439b5a21e411e1c5e30', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: '4c738d14f1b351a4b27430e11d15286049e4ce32', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", { key: '7cbccb6ef41aa059e9b86b8b45c69e4f52fac936' }, "Advanced Properties")), this.expanded && (index.h("div", { key: 'c1c3c78c9163d05cb57e77da86d25745b6235798', class: 'field-set' }, index.h("ls-props-section", { key: '8fc2daed33e47c25c7291293cd679407393e91c7', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '3bf4ed75b4811296030c4819833c5fd60716fb5a', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), index.h("ls-props-section", { key: '73a9ec3f75781e20eac4773a607d255f8de6c283', sectionTitle: "Ref. Name" }, index.h("input", { key: '032596480f059222041d16abdf562fa3ac4e98f9', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), index.h("ls-props-section", { key: '96741d6f46f81e493cc5f922081656526998705a', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '5af240fbc48e1b4a378e0d50af3f7ca6c9a90d80', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: 'e851e62f7ed7802bf8df89d169892a1f440f9b8b', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: '7109c3f443a374fa34827eda568f53aa0afb8215', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: '9636e53c37ce3b7cfee5b8b949c253a9fdcf8f73', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: '68234f91c525bf0cc94e95dd25a1537a4c4a73e1', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '5875edf841f10674d0e915d046f01a1d1b699832', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: '81bf61fa9dc6456ffaa6e7d40e3920424f2dff92', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+        return (index.h(index.Host, { key: '92737a84b80d8010a6287f30945f9df9952fe550' }, index.h("div", { key: 'e5f3a70117500194d06dcca2517a6d80456958dc', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: 'f1d233d3156888ecacb0e1f479e2bfbce6d3abb9', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", { key: '79a344a0919ce2bea99dbe479f6bfc94f40e64a0' }, "Advanced Properties")), this.expanded && (index.h("div", { key: '19ed81c0c6d5eec89f7ed791a54e72ac9d28df85', class: 'field-set' }, index.h("ls-props-section", { key: '2874e24e5c14103feddec461b705d14947d94e90', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '244706dccaf95e064329dbce846bf095e74305b4', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), index.h("ls-props-section", { key: 'cc12de5c345f5fe2eacc578a20e9fc29c9bdc53a', sectionTitle: "Ref. Name" }, index.h("input", { key: '75ec554e0527e4e86bc431d8e11a48e21bb797d4', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), index.h("ls-props-section", { key: '0c1c05a72edf3f40cf1ab4376245de848f2ba3ab', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '01f06a4736e7e84bb9450390d4e67483c57ec76c', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: '0a460d22381e54bf3e51127ddfd9f99173b2c30c', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: '9c9eed5cfb5567137f20470ac0fa906d2497fc4b', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: '2cbc05b68dd4c6c2ae06b14eb450d37b3862b1b8', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: '693934edcc5fd525a6db7112c4b9f5891c286cd5', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '8cff7358763a8673a435596ceb8e2fe72e05d634', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: '06606d2f951fd737ac14bb74fa49eeedb082c1a4', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
     }
 };
 LsFieldPropertiesAdvanced.style = lsFieldPropertiesAdvancedCss;
@@ -26140,7 +26168,7 @@ const LsFieldPropertiesAutosign = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'f5cd10d54372acb1b9b187fea8457f3c5d579f65' }, index.h("div", { key: '1a6ee3c380d3cd4f863234612e5e2118a2e484e3', class: "ls-field-properties-section" }, "Self Sign Field"), index.h("div", { key: 'd3b054bc21587267a8635a7ee5bf725a6df68344' }, "Label: ", index.h("input", { key: 'a0ce92e375258ab4d0c9e78839f62277a3e2e456', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: '0114b12443dab1a9beff3400bc01b7e1a31dea0e', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'b069741ef52f91be222f2a37bc94d60eb73de678', dataItem: this.dataItem }), index.h("ls-field-footer", { key: '0da324c73affff959ed0f105de54b3592e9a2d56', dataItem: this.dataItem }), index.h("slot", { key: '79a362ef43d193bb3693199764989eae5c337579' })));
+        return (index.h(index.Host, { key: '1370a689bd756a7b3322b8a0b79eaf2ca8daef97' }, index.h("div", { key: '7f9c66dd492d817a9ca731eb439ebae63542de03', class: "ls-field-properties-section" }, "Self Sign Field"), index.h("div", { key: 'd4b7a971288792aa196c7fd86ff4ae34359b9400' }, "Label: ", index.h("input", { key: '741c908b66ce73466ef3d8554b1259b1dfb9ad99', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: 'efc52c57c322088a72c40440eb1d564687f0d3fe', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '5c96421fce1126fd6c6c618155cc8f5ed41e2ca7', dataItem: this.dataItem }), index.h("ls-field-footer", { key: '1806381c74a36eecfd1a2db9df7294fb0ca1b58f', dataItem: this.dataItem }), index.h("slot", { key: 'a0047935845af09666dde9a82076bb4141b9eb55' })));
     }
 };
 LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss;
@@ -26160,7 +26188,7 @@ const LsFieldPropertiesContainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3217e41e198024094892d42bd724ea0ed1c23870' }, this.tabs.length > 1 && (index.h("div", { key: '5a5311e9c3266756e4deefd4a041d52686894003', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (index.h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), index.h("div", { key: '5b854a884a10f6c31dd0d226e240d9ba5361a895', class: 'scrolling-container' }, index.h("slot", { key: '81d65a66f698c227148b70a96d8848a8af832957', name: this.selectedTab }))));
+        return (index.h(index.Host, { key: '02eee9d90b4f8abd72f9e193fe04eb5597f3490e' }, this.tabs.length > 1 && (index.h("div", { key: 'a00dd72171808308d53a8d81ffc89669f1bc65d2', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (index.h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), index.h("div", { key: 'ced18e5b24011ba7b982c4aaf7125cb1198991ba', class: 'scrolling-container' }, index.h("slot", { key: 'be78398757fb53cdb987511709f5dd1fc6d5f647', name: this.selectedTab }))));
     }
 };
 LsFieldPropertiesContainer.style = lsFieldPropertiesContainerCss;
@@ -26173,7 +26201,7 @@ const LsFieldPropertiesDate = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '1e22861bedca97ea7f6781cbc85f1987136d10b6' }, index.h("ls-field-properties-container", { key: '33f657508f9bbd176774130da47eac3fcde89a0e', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'db5c54e468a03df122c361fb9fa49cf4f00e1c67', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'c3f3446c93a170214eb629ab1724c85297d151e4', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'e2f2f37ede68bf6551a8f13105bf01fbd8374943', dataItem: this.dataItem })), index.h("div", { key: 'faeb5931d9a822ac128f404dd5471d92802069fc', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '4ce5143bde21082793d494c4397dc585786a2e2d', dataItem: this.dataItem })), index.h("div", { key: 'a60a20c678a2c3f62666f2d2dd9d0d5178272c3f', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'b0ce7720a9476c4bb909a270fd28d9d2a60043be', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'e9c1b45725c09f9432612e5ea064da4899c4b3b9', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: 'c5f6d6f13a8420c7db262219a47dd8546a44fbba' }, index.h("ls-field-properties-container", { key: '1913c379eee8558d303bc72dad7a73a2c39f9810', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '7aff7b10b7ec6b52cb3772853812a2e30539677f', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '01361d60d1ad587f3db804e0758d1ced9bd46452', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '64269c2cb83224a402bfa870d11c098a24f5b513', dataItem: this.dataItem })), index.h("div", { key: 'a927e9e6813aaebcd133c229da7fb29ad18587b6', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '48cf4bc0db59aace10a15c04a3d05d7cabe418e1', dataItem: this.dataItem })), index.h("div", { key: '52c47bc5b278587c507c365bc431e85202d3d84d', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'df3137d33d4184f6e2cbb80d963ca3a7e568e74c', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '6a69a59eddc45ec3210272c1ff17eed12fdbbde7', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesDate.style = lsFieldPropertiesDateCss;
@@ -26186,7 +26214,7 @@ const LsFieldPropertiesEmail = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '52d5e052255ddddc5df7ef6d57d21ce764893819' }, index.h("ls-field-properties-container", { key: 'bb6954deec48f8174b46570efc472e16a580c705', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '954ffa1a3c8f867032de9d8641944157eb264267', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '5bcc170c47f40053ac5a5dc502cb9fb5143e1ee2', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '8cae67f476d1f4c876ccabc592f94fe9f51c6c30', dataItem: this.dataItem })), index.h("div", { key: '251f9e4b9564c23150625b2e7cfcd528b4e7247c', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'cc7d18178466cd04280e97819c84a1d8221ed913', dataItem: this.dataItem })), index.h("div", { key: '4b2ff365536cf21d4a0a39e722dbcb6ac663294f', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'a8dced9cdac3f299d90273f6f9d9a65f2ac4938a', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '27647d935e13bde357c1b5a921863712a76d2bd8', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '864c283c523e58d327a249643d21a9ae0d522772' }, index.h("ls-field-properties-container", { key: 'c41cec11c9daef8e9689296863a59b5d729e167e', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '86318521b7d1f5c0d44bea39cd2d906d2539b3ab', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '252661caa008f083fa0298a1130419ac56a3e7e2', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'e0b1aeeeed2d6c6f61d4278689253b2c394f6096', dataItem: this.dataItem })), index.h("div", { key: '4ae3f032410741f717bc99df83a0f733bae9abce', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '2cfcb0548b1b7825027c209ed1326386e6c6d105', dataItem: this.dataItem })), index.h("div", { key: '83895291760d9dc453652bd1eb81f42c9c1b3781', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '0799a31cc828dfe32c494169990c2381852f7141', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '9813afa7e6b4fc79525a12959ff30f3801c7bddc', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesEmail.style = lsFieldPropertiesEmailCss;
@@ -26199,7 +26227,7 @@ const LsFieldPropertiesFile = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '3447b285dd9911fb7f3472686bb0e0d5441d587f' }, index.h("ls-field-properties-container", { key: '1d92794e7327095f427dde753586b123373beffd', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '2e63d9192ff1903d7e0320ddfa575044b3ed614c', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '8b24f2ad4721b9b65f261e264f394c37099aeb4a', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '8930b2882f00476b4868b1a8ae61387ecbf78660', dataItem: this.dataItem })), index.h("div", { key: '02e4e6045b40ca33ebe1f086b38e2db3f448252a', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'ac7f4393d9d1580631ead29dafd253976c55d873', dataItem: this.dataItem })), index.h("div", { key: '279073c834a47ce7547470b75b1c9e76938281ca', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '0d971c43751b55c691584d4ad7a8dc68d73cda4b', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '71833e73a8bd3f831a820d8941712454f5cd5e13', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '87c4c2935c45a3852f9939327db350025d5f26b9' }, index.h("ls-field-properties-container", { key: 'fbd3ff58eb488b82e498941d6a30d3efeb691c22', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '1bb49bc838ecad441feaff1d9330972f40f3c2fb', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'ca0a6ae02a132315b804ef987db6d8f6dd8d5bec', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '72346af8dc7fa1917c54450782f5b04d90ea2fe2', dataItem: this.dataItem })), index.h("div", { key: 'aef4008d5f1fa5b6f09e34914aaa0729909b28ef', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '34a0e47aba163d1d50c8b5bd3530d68375ace866', dataItem: this.dataItem })), index.h("div", { key: '67cdead2dd9b6a0ebc4178eb9966cc25aeef7b0d', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'c9802804c82bb64e758e69a4f4f9fc98067f3cfd', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'a495c6895d20cef46c687cb65655022279e33c2c', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesFile.style = lsFieldPropertiesFileCss;
@@ -26212,7 +26240,7 @@ const LsFieldPropertiesGeneral = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'c1d347df418aa633a5ceb170b2df1d75c9f9820d' }, index.h("ls-field-properties-container", { key: 'bfa4b014acb6bdf27813fbd71cddd27c46f6c78d', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'b1349ee15a5e69638b90392de2835c0ae01f1eab', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '92b3cb1b6ffa80e8f056aa1e4be601c363c82f3b', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'a6127d943ef5ddc178046f5c889c4a2b079363ad', dataItem: this.dataItem })), index.h("div", { key: '348114e94754cb7d468c37f2b1ab68c188a8d4c4', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'f336c77e0513a2d4436491e8747654574f62625e', dataItem: this.dataItem })), index.h("div", { key: 'e31078730330edbe00af55f7092dec184fde09d8', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '4c7fe89adf29c33942b67523936a4ebca5a0035a', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'dc3df9a1b51e3c64baa4c2789220e79d9b29ec34', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '9cdb29804d3439cc774cdb34fe67cc387d2119d6' }, index.h("ls-field-properties-container", { key: '277529426e659d5bab2370d30757c4418a34c4ea', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '801227d24311f508b852f294a63d20c3ae5d6d07', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'e1ce08761d14588a07a9f817ff12deb303c024e4', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'f622fd5cdf49ea54f9218d4de080048d95fbe88f', dataItem: this.dataItem })), index.h("div", { key: '98ff04437e1cb412e360794d6fce6820b754733b', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '417029ef39562ff320c036d9d90944300934be17', dataItem: this.dataItem })), index.h("div", { key: '80a8381946ad219a4b7d75981cca80121bdf9a3f', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '603fe5e39eb0a4b87230e1ec6500f5c1a37fb210', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '51fc00d6d488085afda91ce1f2f5eaa945600337', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesGeneral.style = lsFieldPropertiesGeneralCss;
@@ -26225,7 +26253,7 @@ const LsFieldPropertiesImage = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '65fcda38b8853ee3179127e4ea0217a37abfe0bb' }, index.h("ls-field-properties-container", { key: '90d24d4b4b3c1d4c7f207a94e41d6bb76acdc866', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '3b81783649e0244fe50a79cd490bd9f22342af5b', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '679cc159e883497534f571c44bfc7c332a0a7c4f', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '6c94b5a407cab02f396b750ec4e40042581cfb4e', dataItem: this.dataItem })), index.h("div", { key: '1cfc7556b21007b6cb5acbed06a4b5995a5253cc', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '8c99c5144493f8af38caa1feae13c6e79d947c70', dataItem: this.dataItem })), index.h("div", { key: 'ad0a459f39ab8b047ce1132380dde335b6d2f82f', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'cf7156a67000cf747d75d742430623ff9a70d604', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'c63053937d6f5c226b1588d90fe046be7c477f4c', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '90a138e3af555cf9d41afc9ec8c350e48466bb0c' }, index.h("ls-field-properties-container", { key: 'b67fe1f9fa3a010736841720725405dea6254a49', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'c777591ccf44e40c525b2bffd11d84e8c8a77bba', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '1fadd4d4d0ff8cb4683f45f06899725b9f0261a9', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'd1486d388f4276cb15d54a728f24e5d8919cb93f', dataItem: this.dataItem })), index.h("div", { key: '0418ca135da5c11c54a7556a023aaf5379ee3899', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'b696981f2c6e26df07291f0d018e27fc32675f62', dataItem: this.dataItem })), index.h("div", { key: 'f7dbe53576a316e9a03699fa7fc1e12d44b455d1', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '91b965cf584e1f85b15d84b390ea4ea5b603b263', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '8d4a15349f3056132adf6254b82c535f7ff352d9', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesImage.style = lsFieldPropertiesImageCss;
@@ -26279,14 +26307,14 @@ const LsFieldPropertiesMultiple = class {
         return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
     };
     render() {
-        return (index.h(index.Host, { key: '8e01113dfd6e869c2e4384badde7abf844a59bd6' }, index.h("ls-field-properties-container", { key: '1c8ddb63db0ed82dcb226f1d2fd9b9e62da5254a', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'd3b48632b485c523481445610797523ee454446f', class: 'field-set', slot: "content" }, index.h("div", { key: 'c1e14f475a99f38c338357942b8e7dddcf7b6ace', class: 'ls-field-properties-section' }, index.h("div", { key: '8cd53e48493f5623ee90f277f0e6897524758994', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'e62e5a33f1e16fdc2afa3833608f3436102f9e14', class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { key: 'a339d8c9ef5b466fc01b886a960f3807d866b58c', class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), index.h("div", { key: '179e0663f26737286e97c25178442993e8d0feff', class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: '8115299b3d1ebbe1896271da1706e765ebdcbab8' }, index.h("ls-field-properties-container", { key: '6cb7365f2c24cb8acac5c815447ed184b6d139ba', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '155d6b33a0b40dc7941b59a980c513271f9db094', class: 'field-set', slot: "content" }, index.h("div", { key: 'be4c86a550ac16f64a008fbb854825d0d6fdec85', class: 'ls-field-properties-section' }, index.h("div", { key: 'fd87a909acd064c04741e6c07a642f1b6310fa34', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f88560758858d0082011cacd9e6d436fb24e12d2', class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { key: '7583fdc8f206c3aeeae1df4db5086757acd85c53', class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), index.h("div", { key: 'd3191ac9f58caa1754749cd751b512cb2da01fc7', class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed ${defaultRolePalette[this.allSignersSame().signer % 100].s30}`,
                 background: defaultRolePalette[this.allSignersSame().signer % 100].s10,
-            } }, index.h("div", { key: '1719e7e0774a20de2cb3691fa7de2026a4ce6d80', class: 'ls-field-type-inner' }, index.h("div", { key: '667fce963656c13408f6f6b65e6694cfe1386b1f', class: 'ls-field-type-icon', style: {
+            } }, index.h("div", { key: '8c107b4502595f57772baa94a88c469f434d18f4', class: 'ls-field-type-inner' }, index.h("div", { key: '69e8d25256f2a9381b86e9a87b298011b1f4a646', class: 'ls-field-type-icon', style: {
                 border: `1px solid ${defaultRolePalette[this.allSignersSame().signer % 100].s60}`,
                 color: defaultRolePalette[this.allSignersSame().signer % 100].s60,
                 background: defaultRolePalette[this.allSignersSame().signer % 100].s10,
-            } }, index.h("ls-icon", { key: 'a8c640a6fa13fce2bda0dd793cfcaf9fd6970ada', name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), index.h("p", { key: '52535bbb0b491208a943366eeb299c08044fecf2', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { key: '9f4a802d3aef44515af038fa205cd8cf0e166670', class: 'ls-field-properties-section row' }, index.h("div", { key: 'aef637d718fcc86d09beec5bc61a1f4bc1026f81', class: 'ls-field-properties-section-text' }, index.h("p", { key: '04072003b28a9d26ee5fcffce33841205dcd0d0b', class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", { key: '8ad80d4cb6e1ce8f0799b9b1a748afe3483dc032' })), index.h("div", { key: 'a3d7debfcce83dbe780be589e8c31c4076944d7f', class: 'ls-field-properties-section' }, index.h("div", { key: '80d46023d84a9dd18dec3635c1150766a535c81e', class: 'ls-field-properties-section-text' }, index.h("p", { key: '7c4bd36e3db0ed7994dedca64a84edf7432287d9', class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { key: '3775eeebecedaf2418c054c9b9de49e71b3d28ca', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { key: '96fe39c3e74107fe42e218a2717dfb3276d002ed', value: this.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))), index.h("div", { key: '0555cf3dbb8536156215f57dadccefc68c3b3625', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'ff4958a61f1acae6795972553309339e2a98e591', dataItem: this.dataItem }), index.h("ls-field-size", { key: '112b409cf7f4d4f640e176cf520693144ae578a9', dataItem: this.dataItem })), index.h("div", { key: '72a6b6fd1b9aedd78d3871d9b34edc5a45aad1b2', class: 'field-set', slot: "placement" }, index.h("ls-field-alignment", { key: '2e3a5a9c8704c1c3cb7532915a79ac85e74ade2c', dataItem: this.dataItem }), index.h("ls-field-placement", { key: '1f86b76cc6dabdd863ace8a6a096f62e4212e6e7', dataItem: this.dataItem }), index.h("ls-field-distribute", { key: '79650c95fd6e75b8546fab91a7a333ecdff824a4', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'e6d6e6ccdf9c4c022fa66af4f3c76936de0d44f5' }), index.h("slot", { key: 'e38324a7b2f3c423aa47b9d8032b526d8adaa7c8' })));
+            } }, index.h("ls-icon", { key: 'c7ac9e1d06b8873b49c7e885254b4f8def8f3d16', name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), index.h("p", { key: '037d595ee61b1bc26215b10d6465c0a206c3670e', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { key: 'e2e7420103eeac2852b7a56f963b88d12bd92faf', class: 'ls-field-properties-section row' }, index.h("div", { key: '8e7ccf6c7930958a95f0ffe55ac5fb61f48655fa', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f64987a2124b484c5aeb567a17792e15515124de', class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", { key: '7c800d31febea334fa4cbded8c636c3241257ac9' })), index.h("div", { key: 'd075ff5ff376c67f6dad06768462a5d4159981e5', class: 'ls-field-properties-section' }, index.h("div", { key: 'd189f0e0dd17bb698d703d1825fc777d18691b07', class: 'ls-field-properties-section-text' }, index.h("p", { key: '791f2be86f52d6e096c2b447520a76eb93db719e', class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { key: 'eeff9b3b0c561948807b362bd31e4753661f8a3f', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { key: '9640f11d8f8bff810daccbb9cf930c965c532cd9', value: this.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))), index.h("div", { key: '8914d27fbc2423324df5cf2b5752f790ae8c9019', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'd6dcc88283a94466203c7ec3e3768c28ab685eae', dataItem: this.dataItem }), index.h("ls-field-size", { key: 'e1fa1087be2e6d23452e121ce0da5767e9062f61', dataItem: this.dataItem })), index.h("div", { key: '37e113c9d83eb1cdabba34691ea7a72d4934de36', class: 'field-set', slot: "placement" }, index.h("ls-field-alignment", { key: '1fa8a3c5fa4663f2f3ddd82278117b3d0a35834f', dataItem: this.dataItem }), index.h("ls-field-placement", { key: '27598e6fa3e938b8cafbc1e30890674094678933', dataItem: this.dataItem }), index.h("ls-field-distribute", { key: 'be68a572cc2f66e3a2e965e1c6194b30bf5a3e05', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '849536faeb6eb1b72da45c7939c75ba53478fbb5' }), index.h("slot", { key: '541e17c8fc0cd817f0d520c17984aab4ef77ef66' })));
     }
 };
 LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss;
@@ -26299,7 +26327,7 @@ const LsFieldPropertiesNumber = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '9fe2166df062942e894e016d5839925fa40a04ca' }, index.h("ls-field-properties-container", { key: '135151f1e46176a7b95535601e3f342ef1dcbb57', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'c54c48dae4699eb242dce742e710e15f6fb5ce94', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '5c1ef6ba4766d28aa1067ac60f55dfcd6398851c', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '19f1abac68624bc164c1997980739525d5eb51bf', dataItem: this.dataItem })), index.h("div", { key: 'e03a15d48bdef0e1d2d1862ca8ee867bd796306a', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '417545b5b1ec5bcf319f57b65d8e9821d0096dfd', dataItem: this.dataItem })), index.h("div", { key: 'f23bd37a4c8352d7f924c6ba880642cf4b7ffd35', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '366af897d35122d1b58c74564a7e5a1e20ac7821', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '04ebe9615649031820606beb1722b010abdd8a57', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '440725e751ea3b404c5c50c749c5bb8ba06ba17c' }, index.h("ls-field-properties-container", { key: '7397fdc71259fab68af40ebd665cea30fd79674c', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '24f1a1a03d7ef9fadb6fba1b56aff2879c99c848', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '39606a9437ff02fb77c2130ed719472660f7121b', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '2d7148b24ff388504751755fc5039b53d013fe52', dataItem: this.dataItem })), index.h("div", { key: '670bb29a0876fc24a434ab6aa175b528503209d7', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'c9dba48006e57a279e17cdedd8e30bccd4cddab1', dataItem: this.dataItem })), index.h("div", { key: '26e8bc89fa11f9baa6c416bdea37f7ee37f53e92', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '232534855f1d61fa7e37277e7675f7cca84d3f4f', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '0d62c5e191013483238d9b1591e820de7b67cec7', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesNumber.style = lsFieldPropertiesNumberCss;
@@ -26312,7 +26340,7 @@ const LsFieldPropertiesSignature = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'bbd7958209af66fad48be99886a08046b1d3edfe' }, index.h("ls-field-properties-container", { key: '42f0138b67b01dc2040c6ec00b28609fecb110d6', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '74780e1241424f10380cce6bd4d5eba94c6cb27a', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'a0f17edf6f21881dd64cfb76666470c70f804d20', dataItem: this.dataItem, showValidationTypes: false }), index.h("ls-field-properties-advanced", { key: 'b710aa53e780aef37941aaa93072ed8f73dbb8c4', dataItem: this.dataItem })), index.h("div", { key: '76a0038059b261799a16796809d538cb7d7fdff3', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '83f319ee972be45c14304f0bf876ef2173bf84f8', dataItem: this.dataItem })), index.h("div", { key: '201a99c300a95f410e7263944781a4244b16f5d3', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '55b91cd0afef3ff8cdb404393d8fe077752f1a6c', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '8d956946ac162915524f3a5b4bdd529a8374632b', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '7fd5740e3b624b6ac6f8e7ada0df7ff5ccd63269' }, index.h("ls-field-properties-container", { key: '5513682b779b50683e8f66a4e8f7095da59a473c', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '9fa2ebba6de8c555800656ff62239ad20c2e2ade', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '9689dd597d8628241227c79d2dc8635984176fa0', dataItem: this.dataItem, showValidationTypes: false }), index.h("ls-field-properties-advanced", { key: '51ad1040fad68b13332c40bab9352541c41ddde7', dataItem: this.dataItem })), index.h("div", { key: '2d2fff3746cda4b368063c167bc655cb269062e2', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'dfb2bc78783bc43199f1a609907e6dcd26ca23ef', dataItem: this.dataItem })), index.h("div", { key: '8f030a01499135a6d8a902c4ba23838b209abc24', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'dae82093080110d81d76b1403b4b60851561273f', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'b7420672d1bdae9118c1bc5abeb67a9bb8e9f991', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesSignature.style = lsFieldPropertiesSignatureCss;
@@ -26325,7 +26353,7 @@ const LsFieldPropertiesText = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: '1ff0b9fc2ac1eb9f00f4bb6adcba90f6ef94b41b' }, index.h("ls-field-properties-container", { key: '3eeaa94048625aaa8723f599c253ac9cd2f5e4d7', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '07ab69b40b93e612d1c781d40c839bf9b713c91f', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'c50cabcc991c42c4779587ec2f85dccf20652229', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '76f8fd906a824d920c62a5f4babf068096d34507', dataItem: this.dataItem })), index.h("div", { key: 'bb799ad6adf4d91fe821a2c8a7a708657040dcd9', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '2e6574c20708f6b05abe2c0b8e47119e5cee5461', dataItem: this.dataItem })), index.h("div", { key: '5661298807f42e57eede3bdd6d803100b0691bf0', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '41af8451c9259567b488c7f43e7efa72bada6bfe', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'b3125a7dc5634cde08cefbcef517f67eab0ed2c6', dataItem: this.dataItem })));
+        return (index.h(index.Host, { key: '6581dc23794e94eb5ac89b620ed6a11380fd2d8d' }, index.h("ls-field-properties-container", { key: 'fa44fb4c49078cbb8cdc0978e7b4596bf2820028', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'f372d2b78526341d31f06c7dc039ffef2ab51d94', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '3160b82574571bcd67d04ed74696b0382aed3518', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '96d0f898cc092c395d70b94ed3977ffc473e9538', dataItem: this.dataItem })), index.h("div", { key: 'd62cfb2603c91fec4463c37d26fb6dd9b0cb7164', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '18e0ced89970409cdabe56eeb54c1b8ec1fd192d', dataItem: this.dataItem })), index.h("div", { key: 'a9edc2428d745ee661a4005de05bb8ed33544d28', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '18b7c5d2d81a2a4442164eabc3796e3303bfab4a', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'abf9bfd40615ce12e1ae791f1307787f3a8935cd', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesText.style = lsFieldPropertiesTextCss;
@@ -26352,7 +26380,7 @@ const LsFieldSize = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'fe7f6177f20212521a07763893289f7be5f7669b' }, index.h("div", { key: 'd084845c8c0123e0475352a40ddbdd4a6d545351', class: 'ls-field-properties-section' }, index.h("div", { key: '4ec306b1562ef35febdfc8a128a4ad9311aa5e44', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'cfc8598761da8b13cde7cc5c52d15c3dfddb7a25', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'cb52c02f6f3075e2a0e016b1bfc5ea3e527391d5', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '5445710a9a9c6de6113da6441ad7723a32f25d6a', class: 'button-group' }, index.h("button", { key: 'a026eaeb8d745d5661a0d330b3cbe2bc69e05101', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '64925672bf84a5bd6ad67d73813518a325c94d41', name: "field-scale" })), index.h("button", { key: 'a01eceaf15d1736256fb873261e1af1179fd9b7d', "aria-label": "Make selected fields the same width as the first selected field.", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '11b7c0c30e517be959bccb11e146ea464b936891', name: "field-match-width" })), index.h("button", { key: 'd446980fdb27663ec48ff707ffafafede8699b97', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '3bc119fe08cc4679af9628c59d8e440e377f8454', name: "field-match-height" })))), index.h("slot", { key: '793f9eda29affc698ac78efdd86910f9f06c1ae5' })));
+        return (index.h(index.Host, { key: '106f435214cd643aaedac927bf8095794fd6408d' }, index.h("div", { key: 'de4168ea47757ecc046e18a70109964b1dfd4b33', class: 'ls-field-properties-section' }, index.h("div", { key: '53f2058d12fbd30363086b213c5869f22e85796f', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'd2ab149dfa93256e3ec15d630c48d17caede8ec6', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: 'd4fb4407b0e76ee2124c951e4ea73753777ab1ca', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '30bcf920ddaaa294bf81eeb31b6fb3415f85197f', class: 'button-group' }, index.h("button", { key: 'f162025f64111b1291541e71d8a22de8b76fe86a', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'c1e09414e242c50be87f6342bd09c30e100edbfc', name: "field-scale" })), index.h("button", { key: '4d82dad505d6b65ecad51b4622911fb2da102397', "aria-label": "Make selected fields the same width as the first selected field.", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '8c463d83131514c1f306dd34df17b46272f33971', name: "field-match-width" })), index.h("button", { key: '8ffa41165583cabda6b5571fac6bd10913c703d8', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'f3d18d6238a71ed7b079ec587a86bb3c2567620f', name: "field-match-height" })))), index.h("slot", { key: '1602b72e9a885363f1d1e5bff5b23b26f4c5e5dc' })));
     }
 };
 LsFieldSize.style = lsFieldSizeCss;
@@ -26387,14 +26415,14 @@ const LsFieldTypeDisplay = class {
     fieldType = 'signature';
     render() {
         const color = defaultRolePalette[this.assignee % 100];
-        return (index.h(index.Host, { key: '068526be7934203ee56f74ae0afd46d4385b7105', class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: '0d4c4aa48bf3ae8f403df502bf9b3b5ba04be686', class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed ${color.s30}`,
                 background: color.s10,
-            } }, index.h("div", { key: 'f093de3ce062c53a8365478e96228f103f7eb0a7', class: 'ls-field-type-inner' }, index.h("div", { key: '34ff8888c2e4f96483eee7ecc0819dae71215b89', class: 'ls-field-type-icon', style: {
+            } }, index.h("div", { key: 'e135050c776ba5a4e0bee0fc45c0f8a5de263aef', class: 'ls-field-type-inner' }, index.h("div", { key: '9bedbf90ad8bf224d45c27dc54f125eec297c9fe', class: 'ls-field-type-icon', style: {
                 border: `1px solid ${color.s60}`,
                 color: color.s60,
                 background: color.s10,
-            } }, index.h("ls-icon", { key: '163a6f209fe9dc99da10bbf58ad45182bc0e8bc3', name: getFieldIcon(this.fieldType), size: "20" })), index.h("p", { key: '98489fe139e173c06ae5e41adef2c23ddfe7e6ea', class: 'ls-field-type-name' }, getFieldLabel(this.fieldType)))));
+            } }, index.h("ls-icon", { key: '4bd803476605785db6d7c16112abda6b8ea7d76f', name: getFieldIcon(this.fieldType), size: "20" })), index.h("p", { key: 'af010e7272ca7f4ffeb8dc61a2b862198b8efcbf', class: 'ls-field-type-name' }, getFieldLabel(this.fieldType)))));
     }
 };
 LsFieldTypeDisplay.style = lsFieldTypeDisplayCss;
@@ -26444,10 +26472,10 @@ const LsFormfield = class {
     render() {
         const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
         const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
-        return (index.h("host", { key: '0cd448314953cf6179cc81492c639e465090c25a', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: '4e149c3aa55a0530192754d91e9e9b3812e1d910', class: "formfield-top-elements" }, index.h("div", { key: '63ef5ae63ffb895cd6de897d170d2f6f72d6951f', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: '3975080a1c2ea0492bcd662444f1c0b19e37ed7e', name: labelIcon }), index.h("label", { key: 'c9b0dc98a25a48613ee4c8648f55887a7e5959e0', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: '81adbc2317283d037179e7394be56bbe3e462fe1', name: 'information-circle' })), extraLabel === 'optional' ? (index.h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (index.h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (index.h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (index.h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, index.h("slot", null))) : as === 'radio' ? (index.h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (index.h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (index.h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (index.h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (index.h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (index.h("p", null, "placeholder")), errorText ||
+        return (index.h("host", { key: 'e5f6824f9df6531776c52480132206b43012ca0b', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: '3d3fc82daac2f290ec293ddc16a543db641b499b', class: "formfield-top-elements" }, index.h("div", { key: '6429a6fce7eac8e3265d8f1ec8796dd6fe523bff', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: '5959bf93a9a5425036954e6cf09af87c65e45b46', name: labelIcon }), index.h("label", { key: 'f35970243533ed0e33d5eeca905e685fc0f16ec2', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: 'ed6e965221f7514d35ac42dd50919a915afacc0e', name: 'information-circle' })), extraLabel === 'optional' ? (index.h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (index.h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (index.h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (index.h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, index.h("slot", null))) : as === 'radio' ? (index.h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (index.h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (index.h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (index.h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (index.h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (index.h("p", null, "placeholder")), errorText ||
             count ||
             countMax ||
-            (descriptionText && (index.h("div", { key: '27431f59462bc1756965bd432b87f2a218121b03', class: "formfield-bottom-elements" }, errorText && !valid ? index.h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? index.h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (index.h("div", { key: 'a6b52057db9f859de90657e0ac769cf728199a3a', class: "formfield-count-container" }, index.h("p", { key: 'f54af70259edcb1a30028266b75fe78c06ac9331', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: '68bfc2228d5a7e9bf11609f6ae8171b14138f45c', class: countClass }, index.h("p", { key: '10942a7e5ec65121df303508eac9bfa0c30aa305' }, "/"), index.h("p", { key: '8d181cef927143961908f6951a489138b5c0b5f2' }, countMax))))))))));
+            (descriptionText && (index.h("div", { key: '2ea304d4e81dae4788591d2e7aa5a39b184c6bb5', class: "formfield-bottom-elements" }, errorText && !valid ? index.h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? index.h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (index.h("div", { key: '873c047ac0043308946de56ee48656e7fab39125', class: "formfield-count-container" }, index.h("p", { key: '023f16d83231af14e88a60f7e4721dae5488a6ce', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: '08421f716aaa649f04d3816cfba315e021aa6b1c', class: countClass }, index.h("p", { key: '4592374bf088582c7935e7613cc1030ed4f39b5d' }, "/"), index.h("p", { key: 'ee2e23debbb907cdd956a946c00bd63de2f35513' }, countMax))))))))));
     }
     static get watchers() { return {
         "value": ["valueWatcher"]
@@ -33479,7 +33507,7 @@ const LsIcon = class {
             console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
     }
     render() {
-        return (index.h("host", { key: 'c072e06bf5988d6d94338a53519d26ff1855c1f6' }, icons
+        return (index.h("host", { key: 'dc63ba24967c79b07985dbaa0fb515a7b210e1b5' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (index.h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}px`,
@@ -33498,7 +33526,7 @@ const LsInputWrapper = class {
     leadingIcon;
     select = false;
     render() {
-        return (index.h(index.Host, { key: 'dc4c4f847b5fcb665c6708ccf164584d05579f99' }, index.h("ls-icon", { key: 'a01ed2d34c83cf7645d7e277965afae4b7377dd9', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && index.h("ls-icon", { key: 'adc8fdeef9869b93e7c22aa15332c047a48723da', id: "selectorIcon", name: "selector" }), index.h("slot", { key: '98a7b54a752cd6d6af83a81a4e596ed199ab3c35' })));
+        return (index.h(index.Host, { key: 'aac9da887f16fb4e885b97fb0347b585cd24b04d' }, index.h("ls-icon", { key: 'c380c2a00b05084cb9c2d18cac05e640e8d3db61', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && index.h("ls-icon", { key: '76c71e77e0acd6be689aaa0e9e11c7787c79facf', id: "selectorIcon", name: "selector" }), index.h("slot", { key: 'b0d5300f47ce2bd5137118c9b8b6536593407a72' })));
     }
 };
 LsInputWrapper.style = lsInputWrapperCss;
@@ -33544,7 +33572,7 @@ const LsNumberInput = class {
                     ? 'invalid'
                     : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
         const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (index.h("host", { key: '992b6b2b02f343f2ee3e33827f6b5868b2fed4e2', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: '943aae095a25962aa7a7f02d13afd3ed8e55bcea', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '25a5cdba638ac0b7d4bb14b593e1970be844a4c0', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: '4e90fd096fbfe83cf60e68bede027aaeb06d8275', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: '04226f9f85c668e88cfcabef59af5200d4b73ed8', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: 'b5151af6119d6cc220bd4eaa8c956c55eb8516e4', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), index.h("div", { key: 'bf5639c1d68709590300bb96f550a4af6486b8bd', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '5aaa2cd541ff383b3256189026f310ce71473503', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: 'bc378aff0e9a70991e0207ad626db5bf324617a0', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'da43b73f8891536e9534fcc1c2bce7ddf8cfb26e', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: 'e9e4d5fc3e5a6a83843d060e628118db8162da3b', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '60ba658748f82f8c6181c46cf66a748ee3ca0300', id: 'buttonIcon', name: 'plus-sm' })))));
+        return (index.h("host", { key: 'f4555e124b40f13647581d43cf2527497eb71688', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: '5adf7f06989b52a3860301168ba2c134975cd065', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '384dbf5a886003f31f1a54a504e2f73f34948d14', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: '3dd5e436957094eb40bc5a3c5c82603dd1d13591', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: 'ccf1f2af403c73c30ca8844e9284bbb69ed24975', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '0e4a866bee7ab98ef5114bf4f556140b6f9d3fc9', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), index.h("div", { key: '4c741413b32ef1ea14908cff35b7dbf6b03e3295', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '2622ddde60eb5fa6c5f0857841341da8f0960da9', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: '882cdea945848a5c8f094d5b90792291f8657226', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'c0cb8d43fa3e13aa360e73fb759fd69ba64dafe8', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: 'e5de958aec8c15c4f64e2371a4808167b3847a91', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '1aaeddf0456e50a9bd9a37f5a8235617b62f4809', id: 'buttonIcon', name: 'plus-sm' })))));
     }
 };
 LsNumberInput.style = lsNumberInputCss;
@@ -33599,36 +33627,36 @@ const LsParticipantCard = class {
     }
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
-        return (index.h(index.Host, { key: '90813bebbb0d7afaa75c2d47a8539ef1458574ba' }, index.h("div", { key: 'b2612ebb13717d3cba368d07b66a669e7dd30fe7', class: "participant-card", style: {
+        return (index.h(index.Host, { key: '26cd1235d566363298804b8554857f4572fcf3ad' }, index.h("div", { key: '5cb4a93633eaf4fec24648b2207ea8ffb401e950', class: "participant-card", style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
                 marginTop: this.signer.signerIndex > 100 && '-0.813rem',
             }, onMouseEnter: e => e.currentTarget.querySelector('.button-set')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.button-set')?.classList.add('hidden'), onDblClick: () => {
                 this.editable = true;
-            } }, index.h("div", { key: 'ba1249b879314253cabb87cf676dc7a1f7c2c883', class: 'participant-card-inner' }, index.h("div", { key: '458c04c0c16f4ecd2429d344e12f8c83f3d79439', class: 'participant-card-top-items' }, index.h("div", { key: 'a99faeac32d7a6d291c5be61489c3ce4f3927e57', class: 'role-label', style: {
+            } }, index.h("div", { key: '3ca92742e66d2f9e746fbf0725ea26bbdc4989b9', class: 'participant-card-inner' }, index.h("div", { key: '456cfae55b1fe15b6b7d4444ed228183ca1f93f1', class: 'participant-card-top-items' }, index.h("div", { key: '289757cf77b0b57b5cb9d78c1b248a8c469b5268', class: 'role-label', style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, index.h("ls-icon", { key: '7f2a13c28f716a82b82a5f04d4d9a55764bc40b5', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), index.h("div", { key: 'a2da3f741e8f164ef3bf98b1cc1e4cf5b60c2f23', class: 'button-set hidden' }, this.index > 0 && (index.h("div", { key: '8bf5174869435333c7e26f8d232268b4b1fa6c69', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '78405243676cf11489fe016dce9bc0bd493d1005', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), index.h("div", { key: '07e6126404d7c07004596827847e8c1e618c881b', class: 'button-set hidden' }, this.index > 0 && (index.h("div", { key: '456bd5bab69b4f2ed5791f04b4509dc2a80889e1', class: "innerButton", onClick: () => {
                 this.swapHandler(this.signer, this.template.roles[this.index - 1]);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, index.h("ls-icon", { key: '7842f3d631fc1d870f7ae920cc9892e6e1629373', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (index.h("div", { key: '3068ed3a4be64927d2aaafd3196bcddcb1626287', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '21d0074f67040d377e43696253d055a61c522a14', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (index.h("div", { key: '8d9edb433c6a0ea64abfa86212bfddec5a82219b', class: "innerButton", onClick: () => {
                 this.swapHandler(this.signer, this.template.roles[this.index + 1]);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, index.h("ls-icon", { key: '815e9acb881a3ff596a27c83a478c474624cbb24', name: "arrow-down", size: "18" }))), index.h("div", { key: 'f783fb0715a96d797a33247b3c05a376900f2aa8', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '5154b792ed0b47da1852be885d1751dc5f090dbd', name: "arrow-down", size: "18" }))), index.h("div", { key: '625e58c9360e52ad651fac5a81bd6aa05130dabb', class: "innerButton", onClick: () => {
                 this.editable = !this.editable;
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, index.h("ls-icon", { key: 'bba4cbb817e91e825a16481a4bfd80c9b2beff2e', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), index.h("div", { key: '8a332b44bc698608f61a36d8be4d1b0861d26d0e', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '75cfef0dcfde68c1a652c0884a910ea4d35deafa', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), index.h("div", { key: 'c90fb747817a8ff3862cd0404e0d2c6507420ea9', class: "innerButton", onClick: () => {
                 this.deleteHandler(this.signer);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, index.h("ls-icon", { key: 'fdfb0c796ccfd4fc7f03a033f6cbfc9a5e41964d', name: "trash", size: "18" })))), this.editable ? (index.h("div", { class: 'participant-card-inner' }, index.h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, index.h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }) }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer"))), index.h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
+            } }, index.h("ls-icon", { key: '3eebec8b8dc84006ceddcfd8e9a4336c4d862276', name: "trash", size: "18" })))), this.editable ? (index.h("div", { class: 'participant-card-inner' }, index.h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, index.h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }) }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer"))), index.h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
                 if (e.key === 'Enter' || e.keyCode === 13)
                     this.editable = false;
             } }))) : (index.h("div", { class: 'participant-card-text' }, index.h("p", { class: "participant-text-description", style: {
@@ -33639,7 +33667,7 @@ const LsParticipantCard = class {
             } }, this.signer.roleType.toLowerCase()), this.signer?.roleType !== 'APPROVER' && (index.h("div", { class: 'role-label fields', style: {
                 background: participantFields.length === 0 ? defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: participantFields.length === 0 ? 'white' : defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, participantFields.length === 0 && index.h("ls-icon", { name: "exclamation-circle", size: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), index.h("slot", { key: '93aef965fe2e9977a2789508ac486f46f6538dca' })));
+            } }, participantFields.length === 0 && index.h("ls-icon", { name: "exclamation-circle", size: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), index.h("slot", { key: 'ca83751b9647aa1a1b02198dcb02a9c1cc5fa951' })));
     }
     static get watchers() { return {
         "editable": ["modeHandler"]
@@ -33688,12 +33716,12 @@ const LsParticipantManager = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'fdec2cf424e6ac9bd8845c819644a4a694a4f037' }, index.h("div", { key: 'e481f226b431d469582a4a4e03ac7c0e085bc162', class: "ls-editor-infobox" }, index.h("h2", { key: 'a9af00c32fa3da719ee25dd39cd5283d10e5b5d7', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '967ed02d5b0da04bd7a79a1d75a1a31d7b8a187c', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: 'f8a78a0232d44d34469d9e4d1f8dc3fabfbecb62', class: "participant-list" }, this.template &&
+        return (index.h(index.Host, { key: '9217c153c317e197897058a5881a781b16a58004' }, index.h("div", { key: '2dd289b3bb90e953eb1c9b722c35d3e20ef17b34', class: "ls-editor-infobox" }, index.h("h2", { key: '67d42783d2b9a8a3161f03c3d517da02eb9ce8b3', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '2f9cbd596e502a592cedb990855cda5da352a10a', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '6936cb07b173bff2a653753aa165366590ce1923', class: "participant-list" }, this.template &&
             this.template?.roles.map((r, index$1) => {
                 return index.h("ls-participant-card", { signer: r, index: index$1, template: this.template, onOpened: (event) => {
                         this.handleOpened.bind(this)(event);
                     } });
-            })), index.h("div", { key: 'db2941a9800fdfb14a8f54bdc927eeb9bdb9e081', class: 'add-participant-button' }, index.h("button", { key: 'b8b70b202cb71d3ebfdaec390b47a8d7e4042ea8', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, index.h("ls-icon", { key: '7f439f448ec683cba6d6a0c69d05ad514c2e0be3', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'd735648da424f22ed025bd634ca8834635ee4036' }, "Add Participant"))), index.h("slot", { key: '0492d74ebaca1e74bdc28395821f2faafe02b290' })));
+            })), index.h("div", { key: 'c57020f2d560dc9241b8cfc38611564b8bf68eb0', class: 'add-participant-button' }, index.h("button", { key: 'd9e352162f8b3e2b2278c392137888ef85cc46a1', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, index.h("ls-icon", { key: '31db90682efdb8b93fcab8d77d1e62385b9e5f36', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'df6d9f9fd4b8b8330acd2d04c44e36b07fa4aed3' }, "Add Participant"))), index.h("slot", { key: 'e12c849be729bddd04e79b77c182e26ed5a2563b' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
@@ -33737,27 +33765,27 @@ const LsParticipantSelect = class {
         this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (index.h(index.Host, { key: 'a9194042094f1851b4a6826f9887fe5eed65d227' }, index.h("div", { key: '6af2f643542a982bdc0036d94acdc7bdea6641ae', class: "dropdown" }, index.h("div", { key: 'd37b58a2b4add18286e66e1a18d9470b5c34c03e', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'a95d70fa2b887486746c8c8b525eb753128b3546', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'df3b852f41ef39022c50407439201f82f7270531', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), index.h("path", { key: '64ff2545b71aefc500e41f47bc194e9f11d73f98', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), index.h("path", { key: 'bf2a824f74ab5b473b7d938087ec0f4025bf74c4', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), index.h("path", { key: '072da80c707d1350114e2b5c1b196561b98c9d43', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", { key: '5e0b113113055f7a4e8f09e6b73e8b940c7fd25d', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '8f21db74ba5ba69170e4652f4d45ffb4195e3271', class: 'selected-role-label', style: {
+        return (index.h(index.Host, { key: '05ce04a14cfb2ad7b758aedc5b65369a0ab0b193' }, index.h("div", { key: '01913be9946c4cbd20be9eb0183ccbbfcbd8ca61', class: "dropdown" }, index.h("div", { key: 'f59100f64738d20ad385de862295edf49a91655a', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'c8dca2bf3967cd21445da0d957049a0976cda9a2', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'fcfacdc95436203bf4d9234531c7f7fb7a7a764a', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), index.h("path", { key: 'a82eed99f51aa2d161d6b4901c0ee26f582aa895', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), index.h("path", { key: 'f37b804b8ce9c29ee833813b17dbbfd0c7d070d0', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), index.h("path", { key: 'f3a2b18f7340021728a1cc563eb35d27ac17990a', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", { key: 'dc6496244da861eff55d628ed9d240c0f507f22b', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '51c552f5e563479b81c26baf7b41b17c06d0f551', class: 'selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, index.h("ls-icon", { key: '3c600d4b48273366e87ee1ae3d618cc33b663572', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, index.h("ls-icon", { key: 'bd7ad751ebf8f1da889fc43fc65c77b309673c30', size: "18", name: this.selectedRole?.roleType === 'SENDER'
                 ? 'user'
                 : this.selectedRole?.roleType === 'APPROVER'
                     ? 'check-circle'
                     : this.selectedRole?.roleType === 'WITNESS'
                         ? 'eye'
                         : 'signature' }), this.selectedRole.name ||
-            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: '0d0327aff5564669b775c1f5661a48a033eead35', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: 'c122f79923a199c1148bf67f760776a0bf9c6a26', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '50ab0050cc1d633360d68ef033ff36953867e0be', class: "dropdown-list" }, index.h("div", { key: '55051cfca0375705883963ea4de24e02b70abb02', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: 'fc7751e7aa67036b170dffffa6f1205bb079da4d', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: 'd4a9c60a0a9d309c779d926547beab66dd258ec5', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '9afdac4d0239217a9145b87e86ce82fe4baeacfb', class: "dropdown-list" }, index.h("div", { key: '6e6c690b9b73369da2b920d601bd03ae2d4e2c62', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[0].s10,
                 '--check-icon-selected': defaultRolePalette[0].s50,
-            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, index.h("div", { key: 'e7dbad92c3c450ae8945e38813e161af34922709', class: 'role-icon', style: {
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, index.h("div", { key: '7eafd31f64a1cc1578f79e46eed06fe3c6f19089', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, index.h("ls-icon", { key: 'c452e6023dd90e16aeb5942e6f941ee8f1b31d41', name: "user" })), index.h("div", { key: '9a7158619df3fbe2a4566fd9cd3f9f0c1d74c71a', class: 'role-text' }, index.h("p", { key: 'ed48bcacc4651af9d40c880c2eda3a02f40f81a8', class: 'role-name', style: {
+            } }, index.h("ls-icon", { key: '7a6b5e21dd76b8bf75d8932b049bcdb3b86a4e12', name: "user" })), index.h("div", { key: 'dbc8abbdf4b2ded694637aa54e6124ca5496d3f7', class: 'role-text' }, index.h("p", { key: 'fd3b749275de606c1807f728de49ea12e5fb4964', class: 'role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), index.h("p", { key: '7ff63fca05d7172b50bf49c48003e4f5cab14e7c', class: 'role-type', style: {
+            } }, 'Sender'), index.h("p", { key: '673247e9d41fc4ba38fd7ca8a49f7cd7d6a037c6', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), index.h("ls-icon", { key: '31ca94a225ed030fcff70115e3b91295053f8713', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (index.h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+            } }, "You")), index.h("ls-icon", { key: 'efab79f4b3d39fe14fd8c91420d0717e4159337a', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (index.h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,
                 '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,
             }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
@@ -33769,10 +33797,10 @@ const LsParticipantSelect = class {
                 '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
             } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), index.h("p", { class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), index.h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), index.h("button", { key: 'f9a3228f7545d55bdc923edf6189afccbcce5d42', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), index.h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), index.h("button", { key: 'fb09ef1b14adc8f9b4ac2f09cfeadb09158691c7', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, index.h("div", { key: '9f71dc813a5a0b2cff5570bc3706e53179c0cb88', class: 'add-participant-icon' }, index.h("ls-icon", { key: '8d08c6294038f852831c7d37d13aaf580faf5ae3', name: "user-add" })), index.h("div", { key: 'ae50fe55de6cf1c3138933daed493e96e5563808', class: 'role-text' }, index.h("p", { key: '920329e6bc79ab6f78b5231ce38e5f152ff9df10', class: 'role-name' }, "Add Participant"), index.h("p", { key: 'e221d8dbd281aa98db215a5f2ae945f976585c81', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: 'b1bb7285d2b3c6738012287c0bc4ab8708c5b63a', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: '9e3190405ab4374c72af3b71a84d749bd43d7994' })));
+            } }, index.h("div", { key: '33b7d90c55ad488e95a83526e4c501a72ad9c0f6', class: 'add-participant-icon' }, index.h("ls-icon", { key: '32ae47b14d9c5047dc10478a09a8725be7d08f14', name: "user-add" })), index.h("div", { key: '2d206c0f2d7e562098dddb4efbb21bcb537fe402', class: 'role-text' }, index.h("p", { key: 'ae5d9123112652e4af9912b309da2e6eb6705995', class: 'role-name' }, "Add Participant"), index.h("p", { key: 'dcbd38153b8fc2666790df3af0229438b94f9cf0', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: '65fed105324c1dca3c7b0983e6a81db8eb18e4a5', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: 'd18f3b14f6ae9b47f186451c2390acb600a7d476' })));
     }
 };
 LsParticipantSelect.style = lsParticipantSelectCss;
@@ -33787,7 +33815,7 @@ const LsPropsSection = class {
     sectionDescription;
     row = false;
     render() {
-        return (index.h(index.Host, { key: '2faf49980bc5fba08001d2aefacb8c860d6ec5f3' }, index.h("div", { key: 'c78a3d1081c8155ff52c46f5cb02313b47d46e76', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, index.h("div", { key: '1bc6ccf99f63861b20cc81da5d082f4e8c9e3de4', class: 'ls-field-properties-section-text' }, index.h("p", { key: '05769627dfad040aa9379108aa137ee6b5516565', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: 'bfb348c75ee3abc7c4f82b050298a5eaac059cb1', class: 'ls-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: 'b2d68495d2a96bb846d4e3f82c69422c70737829' }))));
+        return (index.h(index.Host, { key: 'bef8c364809ca1fe0f137d4fd66ac66de3275d1d' }, index.h("div", { key: 'd0c8b400401a26e228aa7696ab4a78f5d1febaae', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, index.h("div", { key: '3683032dad4fd51bf1150f6c3fc82b274757dc44', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'e3af41b678439b5e6a165d81c18668ab8aae7579', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: '4e8ddddc08e4155cdbccd2225b3135e2f583344a', class: 'ls-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: '430f6ee17ee17e5049caffbd5646693623bb8341' }))));
     }
 };
 LsPropsSection.style = lsPropsSectionCss;
@@ -33808,7 +33836,7 @@ const LsRadioInput = class {
     render() {
         const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
         const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (index.h("label", { key: 'df81d9ee2937349710e752e6764fe178d28770a4', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '5e937e2c650db4890eb4a744950be6393af337b8', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: 'cfd8bec26223bbb063f8f52885dce4518429e7c7', class: 'spanContainer' }, index.h("span", { key: '08b23397c12c75b24e6370f8dafd1482d20ceb9f' }, icon && index.h("ls-icon", { key: '8560befe7a54b8dbd9a6708ad72fd91180e4c6e7', name: icon, size: "16" })), index.h("span", { key: '9982593f10c009f76fa1ede25b30e8b7d097c7d8' }, label))));
+        return (index.h("label", { key: '071f5ea23374017ef930ff4718df692dfaf9c18d', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: 'eab8afd841ac1b0a8f92c8f39eb141bf0833c41c', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: 'c22ee1a9f45bc7894bed6a978b1394de56ee8d0a', class: 'spanContainer' }, index.h("span", { key: '4f6defdd690a6a799040c1a69461d697086c0272' }, icon && index.h("ls-icon", { key: '5ef441f24e164cb176ec9fcea931e3d603524297', name: icon, size: "16" })), index.h("span", { key: '501bb04681a7bb99e19a1dbc1190fe0fc0eff655' }, label))));
     }
 };
 LsRadioInput.style = lsRadioInputCss;
@@ -33845,7 +33873,7 @@ const LsSelectInput = class {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: '61f68a25588a4c23c80b33416aa266ea296fccc8', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '5496d07eb72db24c7c1287a94f7183f95f1084f3', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: '48e7f5c85a0f3b100f97773eb3d7fcad38341bcd', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '78619bdc17b5039e8fb8888b19e900ac62d52995' })), index.h("div", { key: 'e25c833bbab74e2a5a2c907a2530ec412bcfe97c', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '8d5f329c111b23bc7f1e8550bd7f3b0195e54703', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (index.h("host", { key: '3d36732b2276fe87beaaf75e51cea6f240c51b76', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'd23477ba9177c049c9af4c0b1eb82285bad773a3', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: 'fc43cfd4be20eaf13e10d0c0d1b59a8d78a3d2e6', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '16c5c77c2708f382be33e72012ac428d302fa8d8' })), index.h("div", { key: '38749a68383a2656d27946f21af6efd02cf8c80b', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'a0b606ae3e1ae4b86a9c2c079859ef4eaac42260', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
 };
 LsSelectInput.style = lsSelectInputCss;
@@ -33889,11 +33917,11 @@ const LsStatusbar = class {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (index.h(index.Host, { key: 'ba7a9b6dd61066ffa2303a46bf7bed966dc39965' }, index.h("div", { key: 'af1516e85ef08f2f9fe68bc6290a7663aa8d141f', class: "status-bar-section" }, index.h("button", { key: 'a551e90f9a5653cbd0f46458d90b4af97c4fd9cf', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: '791e67a3c339c609e200f876f82afbad9cade5d1', name: "zoom-out" })), index.h("div", { key: 'ae0d62b8d3b2b1d9b3c6bb7da635b55d4b79b9ac' }, index.h("input", { key: '0a24e800e9e88cac41a73e679264f8be9006eeb5', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: 'c1c81b98b26a4a532a47b86e0a650cfbd579d8e0', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: '9a0e28fd5865d68e5728145ee1edc60b6ad5e504', name: "zoom-in" }))), index.h("div", { key: '99b435f71790c471fa427debbe8b4a736766cac8', class: "status-bar-section" }, index.h("button", { key: '8eeebad85d1c3723ee7a771c4f2fc0e678e98017', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: '928265d68c6b58820b306ac1f33e9874432c52e5', name: "fit-width" })), index.h("button", { key: '3236c8efa7c2eb04206d7a9af0ac7d2ab628a5b2', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: '18d50f62ebb30e3da0ea39f42eea2a27e2b7027a', name: "fit-height" }))), index.h("div", { key: 'c9217422a77b2082dcf05563ea65966647bb034c', class: "status-bar-section" }, index.h("button", { key: '1c05b14a0efa0e3082bab21f2e199cf55e2e6958', onClick: () => {
+        return (index.h(index.Host, { key: '55097643549b7cbe604e9bee3849b9766f080126' }, index.h("div", { key: '9b133335d222606b1097e8da02314bf0b0b6a1ae', class: "status-bar-section" }, index.h("button", { key: '0827867b7959437e246b906d43809a44654f2f86', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: '00c7626a1734ca3e033449465e67dcc31eaa0529', name: "zoom-out" })), index.h("div", { key: '3855d5a719e2da9d7cdb7ced6d8738bcbf6eb820' }, index.h("input", { key: '8314f667a74775625d0b64a7d6002ca8f06e64b1', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: '911190a0e364786561c0858331bdb453fb6ec75e', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: '08d488109b61fd13977645a66abbd96332989f5b', name: "zoom-in" }))), index.h("div", { key: '6f014eb039ae5e72df5371337fb0133d4042b9fc', class: "status-bar-section" }, index.h("button", { key: 'bf93ddda1fb8206c31df64705d72c49dc6807274', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: 'bcc5998901ba5875de5dc2f33fd8001f0c64cdd9', name: "fit-width" })), index.h("button", { key: '66d72546495cdcee8afa2d1ba85d7dc9100e2184', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: '872ac2174c60d828c58f0d45f0aa15bf0a5a74ce', name: "fit-height" }))), index.h("div", { key: '78222891e89515a221be4d3e517bac94b7c213a8', class: "status-bar-section" }, index.h("button", { key: 'dca255d5540c8752fbd424909bb5595484bc84ca', onClick: () => {
                 this.editor.pagePrev();
-            } }, index.h("ls-icon", { key: '511ba9eb7235f4deb704cffd025e27c7bd475f4a', name: "chevron-left" })), index.h("p", { key: '915e6c05fa12edffc0cf14a57e5b658ecc97a24d' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), index.h("button", { key: '936ebeaaa6b9f8d8ae9e8c0a97a575a6ea52b6fa', onClick: () => {
+            } }, index.h("ls-icon", { key: '6a5a348512d4746727bbb9a1bb3b25f3c7ac84e9', name: "chevron-left" })), index.h("p", { key: '8c78f2ae00d855c0cdb19ffbfbe1bcdabf2cf65d' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), index.h("button", { key: 'b91bb6fec66a25071d847b85dd5723960e433094', onClick: () => {
                 this.editor.pageNext();
-            } }, index.h("ls-icon", { key: 'cee9e4701734bb03cda94c2b655db925f7fc2b64', name: "chevron-right" }))), index.h("slot", { key: 'b6222b81c3b0fdcfc7aa8db886a2dcb44bd48a2d' })));
+            } }, index.h("ls-icon", { key: 'd73352bf128f6d2911b98bd9340a8963018e7fd6', name: "chevron-right" }))), index.h("slot", { key: '1829b9f4ce5f420972c64b9f63a59c1aa48c70b2' })));
     }
 };
 LsStatusbar.style = lsStatusbarCss;
@@ -33939,13 +33967,13 @@ const LsTextInput = class {
                     : dirty && !valid
                         ? 'invalid'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h(index.Host, { key: '8f42e11e68b1d066125e5e7ed73a6a42dff8df62', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '729361c21d5280000da27a01d87ee01e33a735fd', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (index.h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
+        return (index.h(index.Host, { key: '2a86d2b2edd5666c42772d0fbf4627f52b304e7e', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'ef45261622c63b60291451c37618c3e434dbfdf3', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (index.h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
             } })) : type === 'displayonly' ? (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true, onChange: (e) => {
                 this.changeHandler(e);
             } })) : (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
-            } })), index.h("div", { key: '2ac5022b5561a3a2bc1fc3e26e34f810b77739b6', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '2d56926abe0b2d76e20615f34ebca9e9fae6670b', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: 'deae6d59578485f95ba27b2552302f2821b705ae', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '13b4a9b396bd0b0e71f87181571c09eb87463702', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '60dd7e81dad2c5670c26ddb75ed797d2ebf0fdc9', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+            } })), index.h("div", { key: '6144900e185b774d5f5e10d094424b78c4899374', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '5cf0c2112ddb11766cda8b2d8c963b4c92ccc9f9', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '681ec8d8d0ea70b679c8176928e658391ae1a0d0', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'a3256ca30fddba1c048ee1315f0348cadcfb513b', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: 'a3e541ae6e5c1c88eea76da2a7d1c7db1022de2c', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
     }
 };
 LsTextInput.style = lsTextInputCss;
@@ -33981,7 +34009,7 @@ const LsTextareaInput = class {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: '1152062c81e89009b6cf1ebe00a99bde6a62a9fb', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'afe57dc32bafc445472857b1c4dfabb3a83007c0', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '32f1dfbe80dc92e10b14ba1c1d6f451dce6ab2fc', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'ed7814be4900b60ab4b83336e828d4393e1a32d0', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '0a1a2656f1eccb53b865985503c33a683df5e825', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: 'abcce2d4d5cd7fda7d2afdb850a1b06427004ca9', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'a781e4073f217c6485cf1eddbcc786352f072d16', id: 'buttonIcon', name: buttonIcon }))))));
+        return (index.h("host", { key: '281954f96e56d9b22ce6e90b73d913449163a384', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '7c01fc436423b1a2a7496d0f043bb592510c9057', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '2a4328d5674b9a759a1c63c4a2f622591679f363', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'a389f298d31654df347c9d654be0868f6ebab862', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'cd6d7204e0301fd87d29d5c709c9e43721542bb1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '31d5b142aa8a642c28748dae32adb19c97ef7936', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '08c4ae96097a8ed4cdc8640c30d2b3b472e4fad5', id: 'buttonIcon', name: buttonIcon }))))));
     }
 };
 LsTextareaInput.style = lsTextareaInputCss;
@@ -33999,9 +34027,9 @@ const LsToggle = class {
         this.valueChange.emit(value);
     }
     render() {
-        return (index.h(index.Host, { key: '7a8b074e36ff103be88ac5896295dbd14e2ad43a' }, index.h("label", { key: 'fb962a6c7458e1a8d23a99aa6d1f3199920124c9', class: "switch" }, index.h("input", { key: 'df2fc16a06324e88dc18653fb2dc6fb23b010d8a', type: "checkbox", checked: this.checked, onChange: (e) => {
+        return (index.h(index.Host, { key: 'fff128eeef303b0a5482220dc6d9c3d0ac0ae400' }, index.h("label", { key: 'd5297141d7c7279f07d72d939e5924b8841bce82', class: "switch" }, index.h("input", { key: '0ee4b85550bac696e7e4273fbe31165445897a06', type: "checkbox", checked: this.checked, onChange: (e) => {
                 this.changeHandler(e.target.checked);
-            } }), index.h("span", { key: '8c13337c41efdbcf73a92bacee0e751a7d876641', class: "slider round" })), index.h("slot", { key: '074fca0f6b2fc003697d8d033b5a6282fcd111a7' })));
+            } }), index.h("span", { key: 'fe5e6f17345ba5057d2df8a9c245d28b7c79e328', class: "slider round" })), index.h("slot", { key: '9c3d8ceb80fbf7d4c0efff45d671866b42476f21' })));
     }
 };
 LsToggle.style = lsToggleCss;
@@ -34050,7 +34078,7 @@ const LsToolbar = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '74a143b58b3a573ed20b2b88446a5eccb657c0a0' }, this.dataItem && this.dataItem.length > 1 ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }))) : (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), index.h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'hidden' : 'visible' } }))), index.h("slot", { key: '2893f9427ccfa30fe982fe3e1b72afe5fdcaa93a' })));
+        return (index.h(index.Host, { key: '930227762fac4d6c8ff5053cf6f844d9e4b5366a' }, this.dataItem && this.dataItem.length > 1 ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }))) : (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), index.h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, dataItem: this?.dataItem, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), index.h("slot", { key: 'c22f9e9921ca69912896777e704636e323ffdb36' })));
     }
 };
 LsToolbar.style = lsToolbarCss;
@@ -34104,12 +34132,12 @@ const LsToolboxField = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '32bbd9091000893a5bfd55d44d029ca6e7dfa485', draggable: "true" }, index.h("div", { key: 'de789318b2d75e95e52aea4c88ac94ea31bb1ba7', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 } }, index.h("ls-icon", { key: '708c2bae731ddc757e27459ea4068326834fda32', name: this.icon, size: "20" })), index.h("p", { key: '1c0024be050c892e3c459eef47cc74c45dc9fda3', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: '35a9525fc7cfc0a47f4214c1bd7165fe8621f15c', name: "drag-vertical", size: "16", color: "#787a80" })));
+        return (index.h(index.Host, { key: 'fb137a5eaeb10b88f8d0eb43feef6d2ef8505973', draggable: "true" }, index.h("div", { key: '9c92bec6e9abb2b57697eef17b52d43d24461784', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 } }, index.h("ls-icon", { key: '6febc0b55187a9b51ac094f49f72266c90acd433', name: this.icon, size: "20" })), index.h("p", { key: '2533c0ad8ac9e815847b1bad4798451f6b19118a', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: 'bee17f0bedbbd904e634064bd37825fd96c75bc5', name: "drag-vertical", size: "16", color: "#787a80" })));
     }
 };
 LsToolboxField.style = lsToolboxFieldCss;
 
-const lsValidationTagCss = ":host{position:relative}*{box-sizing:border-box;margin:0}.valid-label{display:flex;padding:2px 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.invalid{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{height:0.5rem;width:0.5rem;border-radius:50%}.role-label{display:flex;padding:2px 3px;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.dropdown-header p{color:var(--gray-80, #6c6e73);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}";
+const lsValidationTagCss = ":host{position:relative}*{box-sizing:border-box;margin:0}.valid-label{display:flex;padding:2px 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.invalid{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{height:0.5rem;width:0.5rem;border-radius:50%}.role-label{display:flex;padding:2px 3px;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;text-transform:capitalize}.dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.dropdown-header p{color:var(--gray-80, #6c6e73);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}";
 
 const LsValidationTag = class {
     constructor(hostRef) {
@@ -34119,14 +34147,17 @@ const LsValidationTag = class {
     validationErrors = [];
     isExpanded = false;
     render() {
-        return (index.h(index.Host, { key: '831f0d525df46dc73cdad43da4dc836ef7d5cda0' }, index.h("div", { key: '11768cd66d0f20bdd9c1dba7f75197ae36d4adca', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.status !== 'Valid' && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && index.h("div", { key: '315f7789dac5367aaaecedb8f704aa5d24631563', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && index.h("ls-icon", { key: 'fa4fb38503e8947c316dfe5425bdfd06e9771dc9', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.isExpanded && (index.h("div", { key: '54023a5567a1f4c76a91035cf02606695900dc60', class: 'field-dropdown' }, index.h("div", { key: '4bf0754f860db5794dd49b47c17bbe6543d161ad', class: 'dropdown-header' }, index.h("h2", { key: '40c01887fff3d614faa1287bb4dbf1e4448c35b5' }, "Signature Fields Required"), index.h("p", { key: '311e124d50204efeabdb4e1350a2ab6dcbd659b6' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => (index.h("div", { key: idx, class: 'required-field', style: {
-                '--field-background': defaultRolePalette[field.role.signerIndex || 0].s10,
-                '--field-border-color': defaultRolePalette[field.role.signerIndex || 0].s10,
-                '--field-background-hover': defaultRolePalette[field.role.signerIndex || 0].s20,
-                '--field-text-color': defaultRolePalette[field.role.signerIndex || 0].s70,
-                '--field-text-color-hover': defaultRolePalette[field.role.signerIndex || 0].s80,
-                '--field-border-color-hover': defaultRolePalette[field.role.signerIndex || 0].s60,
-            } }, index.h("div", { class: 'required-field-items-left' }, index.h("div", { class: 'dot', style: { background: defaultRolePalette[field.role.signerIndex || 0].s60 } }), index.h("p", { style: { color: defaultRolePalette[field.role.signerIndex || 0].s80 } }, field.role?.name || `Signer ${field.role?.signerIndex + 1}`), index.h("div", { class: 'role-label', style: { background: defaultRolePalette[field.role.signerIndex || 0].s30, color: defaultRolePalette[field.role.signerIndex || 0].s70 } }, field.role?.roleType || `Signer ${field.role?.signerIndex + 1}`)), index.h("ls-icon", { name: "chevron-right" }))))))));
+        return (index.h(index.Host, { key: '19a7fa173b5753ee1323adf935c9b76aab197a1b' }, index.h("div", { key: '5c0b59aa90ee1bf2c39f341e167437ae0cfb700b', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && index.h("div", { key: '209d7861899401458d8a5fa7a64665d7e7991a51', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (index.h("ls-icon", { key: '0a528826d3b7d67382a934259c1fd515a931a108', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && (index.h("div", { key: 'b1628cd4fcfa5b92d88b492504865a2d91c5713a', class: 'field-dropdown' }, index.h("div", { key: '5cf6c73e2bf98fa41ae6016e1d1e75a150b334cb', class: 'dropdown-header' }, index.h("h2", { key: '389ba3f91d3195671965ee25a5e85764ade84449' }, "Signature Fields Required"), index.h("p", { key: '6bb94ffb2b9063a9f033e939af816bbb0eebda55' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
+            const pallette = defaultRolePalette[field?.role?.signerIndex || field?.element?.signer || 0];
+            return (index.h("div", { key: idx, class: 'required-field', style: {
+                    '--field-background': pallette.s10,
+                    '--field-border-color': pallette.s10,
+                    '--field-background-hover': pallette.s20,
+                    '--field-text-color': pallette.s70,
+                    '--field-text-color-hover': pallette.s80,
+                    '--field-border-color-hover': pallette.s60,
+                } }, index.h("div", { class: 'required-field-items-left' }, index.h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (index.h("div", { class: 'required-field-items-left' }, index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), index.h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (index.h(index.h.Fragment, null, index.h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), index.h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description)))), index.h("ls-icon", { name: "chevron-right" })));
+        })))));
     }
 };
 LsValidationTag.style = lsValidationTagCss;