legalesign-document-viewer 0.2.19 → 0.3.1

package/dist/cjs/{ls-document-options_44.cjs.entry.js → ls-document-options_39.cjs.entry.js}

@@ -2,7 +2,7 @@
 
 var index = require('./index-DruwRbfl.js');
 
-const lsDocumentOptionsCss = ":host{display:block}.ls-editor-infobox{padding:2px 8px 2px 8px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.template-details{display:flex;flex-direction:column;gap:0.75rem}.template-detail-section{display:flex;padding:0.75rem;align-items:center;gap:0.5rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #fff)}.template-detail-section-title{color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;width:100%}.column{display:flex;flex-direction:column;align-items:flex-start}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const lsDocumentOptionsCss = "*{box-sizing:border-box;margin:0;padding:0}:host{display:block}.ls-editor-infobox{padding:2px 8px 2px 8px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.template-details{display:flex;flex-direction:column;gap:0.75rem}.template-detail-section{position:relative;display:flex;padding:0.75rem;align-items:center;gap:0.5rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #fff)}.template-detail-section-title{color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;width:100%}.template-detail-section-info{color:var(--gray-70);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;width:100%}.column{display:flex;flex-direction:column;align-items:flex-start}.editButton{position:absolute;top:0.75rem;right:0.75rem;margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--gray-70, #2134dc)}.editButton:hover{color:var(--gray-80)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
 const LsDocumentOptions = class {
     constructor(hostRef) {
@@ -16,6 +16,7 @@ const LsDocumentOptions = class {
      * {LSApiTemplate}
      */
     template;
+    editTitle = false;
     selectedHandler(newSelected, _oldSelected) {
         console.log(newSelected, 'document manager');
     }
@@ -26,7 +27,25 @@ const LsDocumentOptions = class {
         this.mutate.emit([{ action: 'update', data: { ...this.template, ...changedDetails } }]);
     }
     render() {
-        return (index.h(index.Host, { key: 'cf73422a524bb4ce9aba485e0107e0c5bdfc111c' }, index.h("div", { key: '9643e57e98221fc18028b369d311702308006af3', class: "ls-editor-infobox" }, index.h("h2", { key: '21761608b0f30ea8029d7c34359eb953e09a877c', class: "toolbox-section-title" }, "Template Details"), index.h("p", { key: '6478a3f2fe582956a07dd94fd678495295b89b16', class: "toolbox-section-description" }, "Details and insights about the Template.")), index.h("div", { key: 'f178b1b998582d54182b21d371e2f470a51be88a', class: 'template-details' }, index.h("div", { key: '302fc0d678593e10f3fa35b92fcaa8aa0141ff95', class: 'template-detail-section column' }, index.h("p", { key: 'ce93dd65dfbd7771e9b99263f6b52b11a1709438', class: "template-detail-section-title" }, "Name"), index.h("ls-formfield", { key: '2ed97f87424591fa979dbdc6fa44b5c8936aec07', as: "text", value: this.template?.title, style: { width: '100%' }, onValueChange: (e) => { this.alter({ title: e.detail }); } })), index.h("div", { key: '188f6151fb84d0a38960f39de6573bb100fe22bd', class: 'template-detail-section' }, index.h("p", { key: '58bfb11ef3eeecd8eb5b3c1dca9ade4f57a6054b', class: "template-detail-section-title" }, "Auto Archive"), index.h("ls-toggle", { key: 'ea5e98a7e2cf43f44b5f713037bd80d17fcd63d4', checked: this.template?.autoArchive, onValueChange: (e) => { this.alter({ autoArchive: e.detail }); } })), index.h("div", { key: '983ce91d8979286f4a47282111ff8121eaa231fd', class: 'template-detail-section' }, index.h("p", { key: 'd8f530b80fe00b0caed7d6808468958a945476fb', class: "template-detail-section-title" }, "Lock"), index.h("ls-toggle", { key: '9d567f64221707e0a3cd6fa481d10b8b8db960a5', checked: this.template?.locked, onValueChange: (e) => { this.alter({ locked: e.detail }); } })), index.h("div", { key: '1c232a0030ad9ad08f0d6fe5a1e56bb53d9d5df4', class: 'template-detail-section column' }, index.h("p", { key: '5ae3d7643e06649decb443675d7c0f2a368119da', class: "template-detail-section-title" }, "Pages"), index.h("ls-label", { key: 'e96b93c0314b25ef31fb482ea0db5c9c3eab5010', text: this.template?.pageCount })), index.h("div", { key: '523d4e15f9d89d7a2233b07f82aeb6aad86d6b5c', class: 'template-detail-section column' }, index.h("p", { key: 'c00eb240243337384d518fb4912ee6da44f03ddd', class: "template-detail-section-title" }, "Date Created"), " ", this.template?.created), index.h("div", { key: 'aae3a62cfaa6936127607e4a2068042fa53aa021', class: 'template-detail-section column' }, index.h("p", { key: 'a4b90c564e4989614aef70cd1af07f79b03a4c74', class: "template-detail-section-title" }, "Created By"), " ", this.template?.createdBy)), index.h("slot", { key: 'ca8666f8d48133b5385ca03f30e78d0c68c9508a' })));
+        function formatDate(isoString) {
+            const date = new Date(isoString);
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+            const year = date.getFullYear();
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            return `${day}/${month}/${year} at ${hours}:${minutes}`;
+        }
+        return (index.h(index.Host, null, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Template Details"), index.h("p", { class: "toolbox-section-description" }, "Details and insights about the Template.")), index.h("div", { class: 'template-details' }, index.h("div", { class: 'template-detail-section column' }, index.h("p", { class: "template-detail-section-title" }, "Name"), index.h("div", { class: "editButton", onClick: () => {
+                this.editTitle = !this.editTitle;
+            } }, index.h("ls-icon", { name: this.editTitle ? 'check' : 'pencil-alt', size: "18" })), this.editTitle ? (index.h("input", { value: this.template?.title, style: { width: '100%' }, onInput: e => this.alter({ title: e.detail }), onKeyUp: e => {
+                if (e.key === 'Enter' || e.keyCode === 13)
+                    this.editTitle = false;
+            } })) : (index.h("p", null, this.template?.title))), index.h("div", { class: 'template-detail-section' }, index.h("div", null, index.h("p", { class: "template-detail-section-title" }, "Auto Archive"), index.h("p", { class: 'template-detail-section-info' }, "After Sending the Template will be automatically archived.")), index.h("ls-toggle", { checked: this.template?.autoArchive, onValueChange: e => {
+                this.alter({ autoArchive: e.detail });
+            } })), index.h("div", { class: 'template-detail-section' }, index.h("div", null, index.h("p", { class: "template-detail-section-title" }, "Lock Template"), index.h("p", { class: 'template-detail-section-info' }, "Lock Template to avoid changes being made")), index.h("ls-toggle", { checked: this.template?.locked, onValueChange: e => {
+                this.alter({ locked: e.detail });
+            } })), index.h("div", { class: 'template-detail-section column' }, index.h("p", { class: "template-detail-section-title" }, "Pages"), index.h("p", null, this.template?.pageCount)), index.h("div", { class: 'template-detail-section column' }, index.h("p", { class: "template-detail-section-title" }, "Date Created"), " ", index.h("p", null, formatDate(this.template?.created))), index.h("div", { class: 'template-detail-section column' }, index.h("p", { class: "template-detail-section-title" }, "Created By"), " ", index.h("p", null, this.template?.createdBy))), index.h("slot", null)));
     }
     static get watchers() { return {
         "template": ["selectedHandler"]
@@ -19907,12 +19926,6 @@ const recalculateCoordinates = (d) => {
     const ay = d.top / d.pageDimensions.height;
     const bx = (d.left + d.width) / d.pageDimensions.width;
     const by = (d.top + d.height) / d.pageDimensions.height;
-    console.log({
-        ax,
-        ay,
-        bx,
-        by,
-    }, 'recalc');
     // Return with calculated styles that try to place it as it would appear on legacy signing page
     return {
         ...d,
@@ -20224,7 +20237,7 @@ function keyDown(ev) {
                 return oob(alterElement) ? original : alterElement;
             });
         }
-        else if (ev.key === 'Delete') {
+        else if (ev.key === 'Delete' || ev.key === 'Backspace') {
             const arr = Array.from(this.selected);
             this.mutate.emit(arr.map(s => {
                 return { action: 'delete', data: s.dataItem };
@@ -20283,12 +20296,44 @@ function mouseDown(e) {
             this.hitField = f;
         }
     });
-    if (this.hitField) {
+    if (this.hitField && e.shiftKey === false) {
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        box.style.visibility = 'hidden';
+        // mouse down on a field, select it and note the start location
+        if (this.hitField.selected === false) {
+            // unselect all other fields
+            fields.forEach(fu => {
+                fu.selected = false;
+            });
+            this.selected = [this.hitField];
+            this.selectFields.emit([this.hitField.dataItem]);
+        }
+        const { height, width } = this.hitField.getBoundingClientRect();
+        const fdims = { left: this.hitField.offsetLeft, top: this.hitField.offsetTop, height, width, x: e.screenX, y: e.screenY };
+        this.startMouse = fdims;
+        this.startLocations = this.selected.map(f => {
+            const { height, width } = f.getBoundingClientRect();
+            const beHtml = f;
+            return { top: beHtml.offsetTop, left: beHtml.offsetLeft, height, width };
+        });
+        this.selectionBox = null;
+    }
+    else if (this.hitField && e.shiftKey === true) {
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        box.style.visibility = 'hidden';
+        // mouse down on a field, select it and note the start location
+        if (this.hitField.selected === false) {
+            // unselect all other fields
+            fields.forEach(fu => {
+                fu.selected = false;
+            });
+            this.selected = [...this.selected, this.hitField];
+            this.selectFields.emit([...this.selected.map(si => si.dataItem), this.hitField.dataItem]);
+        }
         const { height, width } = this.hitField.getBoundingClientRect();
         const fdims = { left: this.hitField.offsetLeft, top: this.hitField.offsetTop, height, width, x: e.screenX, y: e.screenY };
         this.startMouse = fdims;
-        const target = this.selected ? this.selected : [this.hitField];
-        this.startLocations = target.map(f => {
+        this.startLocations = this.selected.map(f => {
             const { height, width } = f.getBoundingClientRect();
             const beHtml = f;
             return { top: beHtml.offsetTop, left: beHtml.offsetLeft, height, width };
@@ -20296,11 +20341,12 @@ function mouseDown(e) {
         this.selectionBox = null;
     }
     else {
-        // console.log('start mouse down reset');
+        // move down on empty space, start a selection box
         this.startLocations = null;
         this.startMouse = null;
         this.selectionBox = { x: e.clientX, y: e.clientY };
         // console.log('empty space reset selected', this.selectionBox);
+        this.unselect();
         this.selectFields.emit([]);
         this.selected = [];
         this.component.style.cursor = 'crosshair';
@@ -20335,7 +20381,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');
+        this.isBoxing = true;
         // draw the multiple selection box
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         var frame = this.component.shadowRoot.getElementById('ls-document-frame');
@@ -20349,6 +20395,7 @@ function mouseMove(event) {
         box.style.top = (this.selectionBox.y > event.clientY ? event.clientY : this.selectionBox.y) - topOffset + frame.scrollTop + 'px';
         box.style.width = Math.abs(movedX) + 'px';
         box.style.height = Math.abs(movedY) + 'px';
+        // Move one or more selected items
     }
     else if (this.startLocations && !this.edgeSide && this.startMouse && event.buttons === 1) {
         this.isMoving = true;
@@ -20371,7 +20418,8 @@ function mouseUp(event) {
     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) {
+    if (this.selectionBox && this.isBoxing) {
+        this.isBoxing = false;
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         var fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
         box.style.visibility = 'hidden';
@@ -24526,7 +24574,7 @@ class LsDocumentAdapter {
                         query = createElement(obj);
                         break;
                     case 'update':
-                        query = updateElement(obj);
+                        query = updateElement(recalculateCoordinates(obj));
                         break;
                     case 'delete':
                         query = deleteElement(obj);
@@ -24735,6 +24783,8 @@ const LsDocumentViewer = class {
     // @ts-ignore
     isMoving = false;
     // @ts-ignore
+    isBoxing = false;
+    // @ts-ignore
     selectionBox = null;
     // @ts-ignore
     hitField;
@@ -24784,11 +24834,12 @@ const LsDocumentViewer = class {
     status;
     groupInfo;
     selected = [];
+    isLoading = true;
     /**
      * An ease of use property that will arrange document-viewer appropraitely.
      * {'preview' | 'editor' | 'custom'}
      */
-    mode = 'custom';
+    mode = 'editor';
     modeHandler(_newMode, _oldMode) {
         if (_newMode === 'preview') {
             this.showtoolbar = false;
@@ -24802,6 +24853,12 @@ const LsDocumentViewer = class {
             this.showstatusbar = true;
             this.readonly = false;
         }
+        else if (_newMode === 'compose') {
+            this.showtoolbar = true;
+            this.showtoolbox = true;
+            this.showstatusbar = true;
+            this.readonly = false;
+        }
     }
     tableViewHandler(_newMode, _oldMode) {
         if (_newMode === true) {
@@ -24878,7 +24935,7 @@ const LsDocumentViewer = class {
     adapter;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
-        if (this.token)
+        if (this.token && this.adapter)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
     }
     // Updates are internal event between LS controls not to be confused with mutate
@@ -24918,8 +24975,9 @@ const LsDocumentViewer = class {
             elementConnection: { ...this._template.elementConnection, templateElements: fields.map(ef => ef.dataItem) },
         };
         var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
-        if (toolbar)
+        if (toolbar) {
             toolbar.dataItem = event.detail;
+        }
         var propPanel = this.component.shadowRoot.getElementById('my-field-panel');
         if (propPanel) {
             propPanel.dataItem = event.detail;
@@ -24929,7 +24987,7 @@ const LsDocumentViewer = class {
             const fu = this.component.shadowRoot.getElementById('ls-field-' + fc.id);
             fu.selected = true;
         });
-        this.selected = fields.filter(fx => fx.selected);
+        // this.selected = fields.filter(fx => fx.selected) as HTMLLsEditorFieldElement[];
         this.selected.forEach(s => (s.selected = event.detail.map(d => d.id).includes(s.dataItem.id)));
         this.validationErrors = validate.bind(this)(this._template);
     }
@@ -24964,6 +25022,14 @@ const LsDocumentViewer = class {
         this.queueRenderPage(this.pageNum);
         this.showPageFields(this.pageNum);
     }
+    /**
+     * Unselect all fields
+     */
+    async unselect() {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        fields.forEach(fu => { fu.selected = false; });
+        this.selected = [];
+    }
     /**
      * Page and field resize on zoom change
      *
@@ -24984,6 +25050,13 @@ const LsDocumentViewer = class {
         this.queueRenderPage(this.pageNum);
         this.showPageFields(this.pageNum);
     }
+    /**
+     * Ensure broken or misplaced fields are put onto the page.
+     * {number} position
+     */
+    clip(legacyPosition, failback = 0.0) {
+        return legacyPosition > 1 ? failback : legacyPosition;
+    }
     /**
      * Decorate the template data object with useful transformations.
      * {string} json of template
@@ -25000,10 +25073,10 @@ const LsDocumentViewer = class {
         const fields = newTemplate.elementConnection.templateElements.map(f => {
             return {
                 ...f,
-                top: f.ay * pages[0].height,
-                left: f.ax * pages[0].width,
-                height: (f.by - f.ay) * pages[0].height,
-                width: (f.bx - f.ax) * pages[0].width,
+                top: this.clip(f.ay) * this.pageDimensions[0].height,
+                left: this.clip(f.ax) * this.pageDimensions[0].width,
+                height: (this.clip(f.by, 0.1) - this.clip(f.ay)) * this.pageDimensions[0].height,
+                width: (this.clip(f.bx, 0.2) - this.clip(f.ax)) * this.pageDimensions[0].width,
                 templateId: newTemplate.id,
             };
         });
@@ -25065,23 +25138,26 @@ const LsDocumentViewer = class {
     prepareElement(newElement) {
         return {
             ...newElement,
-            top: Math.floor(newElement.ay * this.pageDimensions[newElement.page - 1].height),
-            left: Math.floor(newElement.ax * this.pageDimensions[newElement.page - 1].width),
-            height: Math.floor((newElement.by - newElement.ay) * this.pageDimensions[newElement.page - 1].height),
-            width: Math.floor((newElement.bx - newElement.ax) * this.pageDimensions[newElement.page - 1].width),
+            top: Math.floor(this.clip(newElement.ay) * this.pageDimensions[newElement.page - 1].height),
+            left: Math.floor(this.clip(newElement.ax) * this.pageDimensions[newElement.page - 1].width),
+            height: Math.floor((this.clip(newElement.by, 0.05) - this.clip(newElement.ay)) * this.pageDimensions[newElement.page - 1].height),
+            width: Math.floor((this.clip(newElement.bx, 0.2) - this.clip(newElement.ax)) * this.pageDimensions[newElement.page - 1].width),
             pageDimensions: this.pageDimensions[newElement.page - 1],
             templateId: this._template.id,
         };
     }
     // internal forced change
     syncChange(update) {
+        if (update?.select === 'clear') {
+            this.unselect();
+        }
         if (getApiType(update.data) === 'element') {
             if (update.action === 'create') {
                 const newData = { ...update.data, page: this.pageNum };
                 addField.bind(this)(this.component.shadowRoot.getElementById('ls-document-frame'), newData);
-                const newField = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
-                this.selected = [newField];
-                this.selectFields.emit([newData]);
+                //const newField = this.component.shadowRoot.getElementById('ls-field-' + update.data.id) as HTMLLsEditorFieldElement;
+                //this.selected = [newField];
+                //this.selectFields.emit([newData as LSApiElement]);
             }
             else if (update.action === 'update') {
                 const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
@@ -25141,6 +25217,7 @@ const LsDocumentViewer = class {
         });
     }
     async load() {
+        this.isLoading = true;
         // Get all template and group listing data.
         try {
             this.adapter = new LsDocumentAdapter(this.endpoint);
@@ -25152,6 +25229,8 @@ const LsDocumentViewer = class {
             //Revalidate
             this.validationErrors = validate.bind(this)(this._template);
             this.selected = [];
+            this.setZoom(1.0);
+            this.isLoading = false;
         }
         catch (e) {
             console.error('Your access token is invalid.', e);
@@ -25161,12 +25240,15 @@ const LsDocumentViewer = class {
         if (this.token && !this._template)
             this.load();
     }
-    componentDidLoad() {
-        const box = this.component.shadowRoot.querySelector('.document-frame-wrapper');
-        box.scrollLeft = -380;
+    handleSelectedField(event) {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
+        fields.forEach(element => {
+            const isSelected = element.formElementType === event.detail;
+            element.isSelected = isSelected;
+        });
     }
     render() {
-        return (index.h(index.Host, { key: '772256fe57cd8d2aa9584044d3341ae94f5d856a' }, index.h(index.h.Fragment, null, index.h("div", { key: '3a047e1c06d8da29de6545555e67bf07d879bb90', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: 'd1c6be4cdd857c8e38f77a036b6594aa44b8fb28', validationErrors: this.validationErrors })), index.h("div", { key: 'bb06ebe66befacf101094d6b7d25a40a0c9cff0d', class: "page-header" }, index.h("p", { key: '1b56235e4994ae43add1b084a5c6de2f40ad5c26', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '9573e82cb20082b311c31d4752c59618c0164c3a' }, "/"), index.h("p", { key: 'ac2f7068d3a7b9fab04be3e5b0e354251db9ae0d', class: "header-text-2" }, this._template?.title)), index.h("form", { key: '5e1b6cefe3d2f12ab7fb711af9a189887744509e', 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: 'ba98f503028b8060b6d7de59ebec65543bf5d34f' }, index.h(index.h.Fragment, null, this.isLoading && index.h("ls-page-loader", { key: 'da33facea5a874f2c372e6929c792223cd1d774f' }), index.h("div", { key: 'ed01cec72df4e2343b2fba0fd0e11078c09db240', class: 'validation-tag-wrapper' }, index.h("ls-validation-tag", { key: 'dec9e222a7235a55b0b7d6742ed942bf3af15e31', validationErrors: this.validationErrors })), index.h("div", { key: '7d6b631c38281c856824897813d1b627d5af17bc', class: "page-header" }, index.h("p", { key: '1137422244e4fa7f62e6ddf3447a6948198f4f77', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '9202737314df5c2238f74bd897a23c892facd100' }, "/"), index.h("p", { key: '8572833ade9d180ad8f39ca7e4bfb3352f3cecc0', class: "header-text-2" }, this._template?.title)), index.h("form", { key: '84a6e0219e003051bbf200527ed275d05a9b1a40', 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;
@@ -25176,10 +25258,36 @@ 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: "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 => {
+            } }), 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, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } })) : (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, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), 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, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), 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, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), index.h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }))))), 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: '71e1039ef2125174823e1731f00da673fb3610d3', 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: '34104168b0dfaf818f1811f20a76f087c87d9e2e', id: "ls-mid-area" }, index.h("div", { key: '12b3c327d7629deba257d0d44d478ad2a93775bb', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: 'b41998ec0bf1323db3b355fe6fb6cd2cb22cf02d', id: "ls-document-frame" }, index.h("canvas", { key: 'd756a54e89a8f463b26db71d1bb51bebbfc3564e', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'd9387528cab97c0a2533164c55e627eda6b40c9b', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'cbf35e7c60ddf374b4e6181594a763fc116654e2', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'fd5030967606ba707b0f654aa14a5086289a8c02', 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: '300a112fbe7e1b6acfd6ce0ec54cb3a752f55815', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), index.h("div", { key: '92700d27b2be0e8c74952dd1dd4225cd6449f550', id: "ls-mid-area" }, index.h("div", { key: 'a52bf847bd9eb219a0b470ce4e36fc97e315c6c8', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, index.h("div", { key: '9edf12e09ccea929e531ee52a4354c389d055629', id: "ls-document-frame" }, index.h("canvas", { key: '167c02485f5484e32576749c9ffd90ea478ecfcb', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'ed899a22082224f5f7cc294b68e4c6b56d60d0d3', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'ccf62d6787987a90426cc79139e517c7ac27502c', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'afe98039104214aaecf7b5b77497becbe04b830c', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -25572,7 +25680,7 @@ const LsEditorTable = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '1642ea47587e09005dc8242f8e966d609d08ad34' }, index.h("table", { key: 'fbbd2b7b80ae559b4aaa94138c7fd06d5c798ad8', id: "ls-editor-table" }), index.h("slot", { key: '4ec7e0c9233a045c1643b18d533b47066a06d6a1' })));
+        return (index.h(index.Host, { key: '5843064d233783ed3c491d399c415d281ed35e11' }, index.h("table", { key: '8a6d6d1dc717876eb4401f76f8dc280b957fdeb7', id: "ls-editor-table" }), index.h("slot", { key: '334d466e08ed2490fa88ef774912b469fde0a287' })));
     }
 };
 LsEditorTable.style = lsEditorTableCss;
@@ -25592,17 +25700,17 @@ const LsFeatureColoumn = class {
     // Send an manager change up the DOM
     manage;
     render() {
-        return (index.h(index.Host, { key: 'c392d85a8340efaf66e705df8bde94e1e524d3b9' }, index.h("div", { key: 'da30d4003fdb6d8fe505d6049cad6ec136efbccc', class: this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+        return (index.h(index.Host, { key: 'c153ff8227ffe959671bd72b62eef1be0d6ea0a5' }, index.h("div", { key: 'febf78c0ccc42e2511b52419955e28017b6d617c', class: this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 console.log('document');
                 this.manage.emit('document');
                 this.manager = 'document';
-            } }, index.h("ls-icon", { key: '8121e819c46bdd6c129cc553a97ad19951835537', name: "document", size: "24" })), index.h("div", { key: 'f2f3f5dc14c9bb827e45c164c06b0d27826557ef', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+            } }, index.h("ls-icon", { key: '027568b936d809b03eecc895fcfab24cd65e7fa3', name: "document", size: "24" })), index.h("div", { key: '3fe1542a7c2053dcca881682eb29859f4bf7a914', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('toolbox');
                 this.manager = 'toolbox';
-            } }, index.h("ls-icon", { key: '11adf0533265b6628e4f1c31b152984c5eaae520', name: "typing-input", size: "24" })), index.h("div", { key: 'fc6b4110951ee45c4701d80dbf955f55f5c59a89', class: this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+            } }, index.h("ls-icon", { key: '2656bb9ebbcec8dbf2a5519e9f80ceb734413828', name: "typing-input", size: "24" })), index.h("div", { key: '46abc8a29b3488273d669089602ed902752b1145', class: this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('participant');
                 this.manager = 'participant';
-            } }, index.h("ls-icon", { key: '08426c786706be8ef21475fac011f98b3c940445', name: "user-group", size: "24" })), index.h("slot", { key: 'f275e62c1a34f3dcf87441e246fa4917285bd423' })));
+            } }, index.h("ls-icon", { key: '173f5cc9556a37f7502fb7c02e1644659dd65b16', name: "user-group", size: "24" })), index.h("slot", { key: '856f4c459eb86ae32eb564c5024f64231f9cc8a1' })));
     }
 };
 LsFeatureColoumn.style = lsFeatureColumnCss;
@@ -25730,9 +25838,9 @@ const LsFieldAlignment = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: 'dd6a0ab3f24134c7ce3d2a4f111ab1427f30b8ae' }, index.h("div", { key: 'b1f7b7fc2c5cb68c3bb1acf1a5b228b566e76c1b', class: 'ls-field-properties-section' }, index.h("div", { key: '03b92368599be4b43307c6e66e04e59108165586', class: 'ls-field-properties-section-text' }, index.h("p", { key: '81a05655d4095308ae57e2a197e66fb5037a7f60', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '8dcb64edabc643e166cab67294ec8c7abc624743', 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: 'ac35cb2791204465e02e5ab0a77642aa434d838d', class: 'multi-button-group-row' }, index.h("div", { key: '875cdf5afaf459affcb74be5b114fcbe9eb3feb8', class: 'button-group' }, index.h("button", { key: '42bbe388b00afb14309d65301a3c4aa7d795bb93', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '2c8bd3153664f5a0ec8536e24d611b0a5c8ff39a', name: "field-alignment-left" })), index.h("button", { key: 'e97060fc194a4015433dbdb261ea843b2c037fd1', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'c9f2f3f5f1ddf26462e643caa4903dbcfb922bcf', name: "field-alignment-centre" })), index.h("button", { key: '9a22bc6e840818e0c12552d0c5730ab779cdb071', onClick: () => {
+        return (index.h(index.Host, { key: '276514255f8b1da24cffe917638d0e79196cd4c9' }, index.h("div", { key: '0e4af454e1789c6b5ee4dd443c69eb700428bee6', class: 'ls-field-properties-section' }, index.h("div", { key: '958a851c77101f9146c3947fd31d56b9ad0d1c84', class: 'ls-field-properties-section-text' }, index.h("p", { key: '7d8add53a07a7b453feedffcd45dd6129f57de37', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: 'a072da1f7284f3e3162af00431eb86b103a6d139', 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: '6bf9c9285cdbdab4ed8b51de45b8199d2e2d1770', class: 'multi-button-group-row' }, index.h("div", { key: 'ba5a3e3e98211666a962c20c6de73aca844c4af5', class: 'button-group' }, index.h("button", { key: '31c378287314c164517274f0ab2905b127ca3049', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '97dbc0e12710ca5dea47d8da193ab238ee5ae9dd', name: "field-alignment-left" })), index.h("button", { key: 'fa22bb526248b17a3bd47a482ba1309fb4874d87', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'be176582cc48aaf636e7590224fcddf8a39bb7ef', name: "field-alignment-centre" })), index.h("button", { key: '9b7ac33e30f711b2aa806cfc87ae1e85fe3158f8', onClick: () => {
                 this.right();
-            }, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '53bf7fb1c64a89dd7b99d1ffa331f085d71057a7', name: "field-alignment-right" }))), index.h("div", { key: 'edc0d60ef8202587134f7e2b3517d8b597c10fae', class: 'button-group' }, index.h("button", { key: '537b9af49ca1f168eeae864ba5c8e967ef91e743', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '4ec00472418a5abe171d326ea5dcc5b44d068640', name: "field-alignment-top" })), index.h("button", { key: '417e628441c822f7d88e95249e8253c3e4665d45', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'd3d1723bc4cd55c03f0999cf9efc85b0eb90f27b', name: "field-alignment-middle" })), index.h("button", { key: '9535472178f7eba2b8952ee3d394b94b4f553a63', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: 'b24a4ef3e91a5f92f7a8895140bb21320f81fe64', name: "field-alignment-bottom" }))))), index.h("slot", { key: 'd484e3f770aef22945617529c76a713968e6bc9b' })));
+            }, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '81953cc88fadc80c0df9a53d367edf4240ba1225', name: "field-alignment-right" }))), index.h("div", { key: '88274bcb8a4f0df2de472e006470f47741448cfe', class: 'button-group' }, index.h("button", { key: 'bb784cb991e0fb26f6610c3fde6cf3b4630dc468', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '69e5a9a07882a5038e56f574cbe4f5a844ff2400', name: "field-alignment-top" })), index.h("button", { key: 'bb5b5d922ec9b21a17e133ecfb60267636bfa0a1', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '0b4c455c31330de80905f8522baf9e7db621fd0f', name: "field-alignment-middle" })), index.h("button", { key: 'e951fd98037f208e3ceb4da04a406e50332fd634', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, index.h("ls-icon", { key: '3faf90ae35dc58ff59d899c74b3d2e8f24755dd5', name: "field-alignment-bottom" }))))), index.h("slot", { key: '427224b21fa432083716c6cee3d7d0483ddbd0f4' })));
     }
 };
 LsFieldAlignment.style = lsFieldAlignmentCss;
@@ -25768,9 +25876,9 @@ const LsFieldContent = class {
         }, delay);
     }
     render() {
-        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
+        return (index.h(index.Host, { key: '480b4e4a16a11270f16c1fbd52a9cfc06319c003' }, index.h("ls-props-section", { key: '9f01dda37d313b6e0b37374cd6b7b03c50552ed5', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, index.h("ls-field-type-display", { key: '901f4bd65d8dfb70369e80b83d438c716a728e57', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), index.h("ls-props-section", { key: 'df0d5739a95f1385d652bdc306aa35184ff87623', sectionTitle: "Required Field", row: true }, index.h("ls-toggle", { key: '4802d31dbe2e6e4d3c1819fe8d11949ad57040ed', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), index.h("ls-props-section", { key: '29dda3f847d0686b45ead2c3f94d639ff4f53665', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, index.h("input", { key: '84b7878c52b8b2675345d6d6c7b924ee1ed29ad7', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), index.h("ls-props-section", { key: '8ed642c24e6ade9785eedc5782c3ec4162d7f1dc', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, index.h("input", { key: '17397cbc23640df646451a8fa5a2f0bc35f4e4af', 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: '327c7c2cd68d130fafbe3622b8e3cadfd85dc79c', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, index.h("textarea", { key: '682ab1b9c40c35f82fabf75ea716495355001a76', 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: '3df0258a1d0ceb8139b905c8341c5273138dad10', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, index.h("ls-input-wrapper", { key: 'd404f6fd35d413afd4db73e66844a08b5231663b', select: true }, index.h("select", { key: '71bb83a0f36b694012c1da60ef0c346822dc7d92', 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: 'dd4076914cf2d5c2afaef4490673ef1c59154907' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), index.h("slot", { key: '2316014e98eb0ae99884f42b1c37f22e2a4f1732' })));
     }
 };
 LsFieldContent.style = lsFieldContentCss;
@@ -25812,7 +25920,7 @@ const LsFieldDimensions = class {
         }
     }
     render() {
-        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" }))))))));
+        return (index.h(index.Host, { key: '53678e7fc68e795616c51e7cb7325a5cd45761de' }, this.isMultiple(this.dataItem) && (index.h("div", { key: 'f5a073c2039858e3b69162a1d1e599ae559dc2d6', class: 'ls-field-properties-section' }, index.h("div", { key: 'f707c71fc9623bf6fc290ab3bb14451ba98e5454', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'c000b0fb97cb50712463b4973b8d395df30f0704', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '4443d09dd3358da331437d83db4080e7b7a6407b', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'efa8b8ec8030846f073c147879dfab93ba135a02', class: 'input-row' }, index.h("div", { key: 'c6e3345f3fc87d539ac35a85c0b8c47042795b59', class: 'input-wrapper' }, index.h("ls-icon", { key: '9033883167f51a83f41039dc9da682de3954cd17', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: 'a18a60327e5766e2c109af6dd95f080a5d0aa3b9', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '7d3464a547cdf5938311a5f9ffc2995be604035e', class: 'input-wrapper' }, index.h("ls-icon", { key: '0e413fc72b08cf785b33c56041fe0c638b86bc70', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'bb8a36bfe49680bbe7183d8cc524d1be95f6d87c', 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: '5f73b3b84f25b2072374fc6ca27d0b59dfc3314e', class: 'field-set' }, index.h("div", { key: 'ee6d5b21c0957acee288252e35165868cc0db0ba', class: 'ls-field-properties-section' }, index.h("div", { key: '5edddb346091bb34859f258630ea959492c64ac4', class: 'ls-field-properties-section-text' }, index.h("p", { key: '3a90f8a2e72a099fe297dfbcc0b269bd61268ad6', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '0c336dc47d35dd3a629b766e87046463e19a9522', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: '494929a5bbb6eae61c2d82aa1e3442ca2c1dabb1', class: 'input-row' }, index.h("div", { key: 'ce3002cfcf8344556895ed9d237e8dfb359a27a4', class: 'input-wrapper' }, index.h("ls-icon", { key: 'dca359e82e3733fec34ee138006ef8d63cd7025c', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '421cd8faa380b84cb57d0dc0e76d92a3abd38162', 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: '90b66ca4284e84ddb8b22de8d144ae24e757c74c', class: 'input-wrapper' }, index.h("ls-icon", { key: '438f4022c0b55db6f6131bcf57c957fd644f4661', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'd936659987860f79cba8e5ada8f28a437eaba4f5', 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: '6b1bafdcf631c2ec00acc7afe7fdfe03b0b6600e', class: 'ls-field-properties-section' }, index.h("div", { key: '70731c167c84621672059ab5a8ab28c266029525', class: 'ls-field-properties-section-text' }, index.h("p", { key: '81fbb63a29e0f432765f00beedc4683d3f464a03', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: '1ba477c5b9076364870cdd5f6106a4d40f74189f', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '62ba3006a435142653751e81b153b833dafa9801', class: 'button-group' }, index.h("button", { key: '9dec26a9e8ed19d2c21ea273afd2e655a0e1b6cc', disabled: true }, index.h("ls-icon", { key: '04777dc3bfdc0b81bce904d4f56108749e0c47c8', name: "field-scale" })), index.h("button", { key: '709baed52decc30ffebd96b14b02a54466ac7824', disabled: true }, index.h("ls-icon", { key: 'cf6b733cb6fcda50b39faf12b208cc1d5fa4a8b0', name: "field-match-width" })), index.h("button", { key: '6ef87f9641f2cc45a679afc73eb49920abdc7822', disabled: true }, index.h("ls-icon", { key: '28ee6b1d779df43ad15f4041271ec85ac9e95903', name: "field-match-height" }))))))));
     }
 };
 LsFieldDimensions.style = lsFieldDimensionsCss;
@@ -25864,9 +25972,7 @@ const LsFieldDistribute = class {
                 action: 'update',
                 data: {
                     ...c,
-                    left: newLeft,
-                    ax: newLeft,
-                    bx: newLeft + c.width,
+                    left: newLeft
                 },
             };
         });
@@ -25874,6 +25980,51 @@ const LsFieldDistribute = class {
         this.mutate.emit(diffs);
         this.update.emit(diffs);
     }
+    gapVertical(spacing) {
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        var buffer = sorted[0].top;
+        const diffs = sorted.map(c => {
+            const newTop = buffer;
+            buffer = buffer + c.height + spacing;
+            const target = {
+                ...c,
+                top: newTop
+            };
+            return {
+                action: 'update',
+                data: oob(target) ? {
+                    ...c,
+                    left: c.pageDimensions.height - c.height - 1
+                } : target
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    gapHorizontal(spacing) {
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
+        var buffer = sorted[0].left;
+        const diffs = sorted.map(c => {
+            const newLeft = buffer;
+            buffer = buffer + c.width + spacing;
+            const target = {
+                ...c,
+                left: newLeft
+            };
+            console.log(target, oob(target));
+            return {
+                action: 'update',
+                data: oob(target) ? {
+                    ...c,
+                    left: c.pageDimensions.width - c.width - 1
+                } : target
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
     distributeVertical() {
         var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space');
         var avgspace = 0;
@@ -25893,14 +26044,16 @@ const LsFieldDistribute = class {
         const diffs = sorted.map(c => {
             const newTop = buffer;
             buffer = buffer + c.height + avgspace;
+            const target = {
+                ...c,
+                top: newTop
+            };
             return {
                 action: 'update',
-                data: {
+                data: oob(target) ? {
                     ...c,
-                    top: newTop,
-                    ay: newTop,
-                    by: newTop + c.height,
-                },
+                    top: c.pageDimensions.height - c.height
+                } : target
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -25908,11 +26061,15 @@ const LsFieldDistribute = class {
         this.update.emit(diffs);
     }
     render() {
-        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: () => {
+        return (index.h(index.Host, { key: '6b56e29ef6606020392f6345eeab99a79201ca39' }, index.h("div", { key: 'dd54237204e0a3cb3e5e7106fa3c217f1bd4783c', class: 'ls-field-properties-section' }, index.h("div", { key: '4211d0435d809c161875ec80ed36c8c3fe6e2d09', class: 'ls-field-properties-section-text' }, index.h("p", { key: '9f6bf5f1c684a17fb20fb5e8b44e2fd193e1c428', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: '7b8da49375a5bc764b3f910a8e625569911aa7b7', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '618ac328f320cd4299289fa072d62640964e6b5f', class: 'button-group' }, index.h("button", { key: 'ae5e15c9947486772f978e028b71d1f0901cb4ef', 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: '4c7935424e784dc1fc3ebfe996101c492c8cb4de', name: "field-distribute-vertically" })), index.h("button", { key: '0ac25cb0252642f565af0e43d8e3d62c8869469d', 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: '30452ccd64d0e2a3d0ebcf7125a37abfa2996610', name: "field-distribute-vertically" })), index.h("button", { key: 'ced0890fec909ecd9d6c42426eeb5f291303b6b9', 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: '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' })));
+            }, "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: '8c4925974e0f22a0222f0e403a913a03bef27475', name: "field-distribute-horizontally" })))), index.h("div", { key: '6080eed10a0a7f7b8bc1566936df072ad67c5437', class: 'ls-field-properties-section' }, index.h("div", { key: '261f4b45dec8cc55bebe5aa9e58524f4077a756a', class: 'ls-field-properties-section-text' }, index.h("p", { key: '9702708febe79b8f20179dd90fb1b4d839876862', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '226c8c2508c1540aa20ac806522c57e6c374dc98', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '857724c65a60b251df274c41ef3167cb9ce39fa9', class: 'input-row' }, index.h("div", { key: 'e90426b59b908488a8d456fa2cd43984e0da5253', class: 'input-wrapper' }, index.h("ls-icon", { key: '1977d4be8956afc9de41ead5b6957e4fe3669c4f', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: '2e61592539c3453cf345a2798f75e979ed17fa75', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", onChange: (e) => {
+                this.gapVertical(parseInt(e.target.value));
+            }, value: '', size: 4, min: 0, max: 9999 })), index.h("div", { key: '9384373f0bb26414c1375f8786624c7aff12ed36', class: 'input-wrapper' }, index.h("ls-icon", { key: '31e062fb69c324d2571df1d62e2ba3549245acc4', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: '20352f4de63216cc737f7cf469493381282bef32', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", onChange: (e) => {
+                this.gapHorizontal(parseInt(e.target.value));
+            }, value: '', size: 4, min: 0, max: 9999 })))), index.h("slot", { key: '33b53eb78125407c869e7ae32eba9a23ac77001b' })));
     }
 };
 LsFieldDistribute.style = lsFieldDistributeCss;
@@ -25924,6 +26081,7 @@ const LsFieldFooter = class {
         index.registerInstance(this, hostRef);
         this.mutate = index.createEvent(this, "mutate");
         this.update = index.createEvent(this, "update");
+        this.selectFields = index.createEvent(this, "selectFields");
     }
     /**
      * The selected items information (as JSON).
@@ -25932,16 +26090,23 @@ const LsFieldFooter = class {
     dataItem;
     mutate;
     update;
+    selectFields;
     deleteField = () => {
         this.update.emit([{ action: 'delete', data: this.dataItem }]);
         this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
     };
     duplicateField = () => {
-        this.update.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
-        this.mutate.emit([{ action: 'create', data: { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) } }]);
+        const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };
+        const newTop = this.dataItem.top + this.dataItem.height;
+        if (newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {
+            newItem.top = newTop;
+        }
+        this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);
+        this.mutate.emit([{ action: 'create', data: newItem }]);
+        // this.selectFields.emit([newItem]);
     };
     render() {
-        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' })));
+        return (index.h(index.Host, { key: '8cb31207e999dc865fb83cb472d77519cd957fdb' }, index.h("div", { key: 'cdb9ade290c3c1cbe613d5c2f04698d16cf2131e', class: 'button-footer' }, index.h("button", { key: '6f8db1780d9f860a7d3fa407355fde33cd48c11c', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: '7b01415cc8b7be376445c97e4d2b24788afb3e3a', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '0447898646ae162dd58ca46befcd468b39af2a1a', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: '65074ed995a57053602d665f036fd7280708860d', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: 'c786084652dfac87fad5ada66808496a3b1aa1dd' })));
     }
 };
 LsFieldFooter.style = lsFieldFooterCss;
@@ -25958,6 +26123,17 @@ const LsFieldFormat = class {
     mutate;
     update;
     get component() { return index.getElement(this); }
+    // Send selection changes to bars and panels if in use.
+    selectFieldsHandler() {
+        if (this.dataItem.length > 0) {
+            var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select');
+            if (selFont)
+                selFont.value = this.dataItem[0].fontName;
+            var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size');
+            if (selFontSize)
+                selFontSize.value = this.dataItem[0].fontSize.toString();
+        }
+    }
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
     alter(diff) {
@@ -25970,26 +26146,29 @@ const LsFieldFormat = class {
         this.update.emit(diffs);
     }
     render() {
-        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 => {
+        return (index.h(index.Host, { key: 'db560de41ff6135ddfc7cd24bee0428393612506' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '4ea46f8e884a76f7683707f02fd175bbb841a7c4', class: 'ls-field-format-bar' }, index.h("div", { key: '8004f0b99e69619878b40a4f6a25ccffb76f64cc', class: " input-wrapper" }, index.h("ls-icon", { key: '8c2a1ecc4b2895217b1a5fbc06b765ee640f57f6', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: 'e9d63ce0c9bf0f807f8843a546615663f6fe0810', id: 'ls-toolbar-font-select', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, 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: () => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '57414b268d83f98ba372970a44b01e6564e3f204', value: "arial" }, "Arial"), index.h("option", { key: '0ea33343c8b48361730103a0f57b451ce9e2b082', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '41594d03ec8bfb0d30374ab12f524ef083982ab0', value: "courier" }, "Courier"), index.h("option", { key: '266d0e85da5f80b73fedbadb2c1d049bff226036', value: "helvetica" }, "Helvetica"), index.h("option", { key: '75078832a92fb69d4e6dbe175f9fefb6ba7b36b8', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '82e48e668a00ab951a5ab0a8cc8f4704a19d7a08', id: "selectorIcon", name: "selector" })), index.h("div", { key: 'c017c1fb108b13f531efcf75264a4d7a4871d6e1', class: "input-wrapper" }, index.h("ls-icon", { key: '84bd33a74b0332b795d921b481f805a57ef2cfef', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: 'f5e5ac7505bef63d6dc46ab6b6839bac1f8cd74b', id: 'ls-toolbar-font-size', width: "30", size: 4, class: 'has-leading-icon' })), index.h("div", { key: '9e662def8efd6e8bace2f279ea4b5b15a2fe94ca', class: 'button-group' }, index.h("button", { key: '3d4ad30a8ec41eb4a1d525eeb53bc8f8757f0c69', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: '10b2b34fdf03fdab5f9938b1352a617ff1a8979d', name: "menu-alt-2" })), index.h("button", { key: '5965c9b86e64cd39a81d1334992daf63b08dcadd', onClick: () => {
+            } }, index.h("ls-icon", { key: '338e02bcf2b1ee58167fb54a1cf0c168a45ab80d', name: "menu-alt-2" })), index.h("button", { key: '594f8af91b7a82b3c67c5e86e0d41307beeb2e71', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: '95ada12f033106a1b5ff8381a21ab2f4751b8b2d', name: "menu-alt-5" })), index.h("button", { key: '12c263cf73c90f58f202e99eb28863b7fa44b6c3', onClick: () => {
+            } }, index.h("ls-icon", { key: '00eb405987271237bf93ec03df7b37cc0d1bdd53', name: "menu-alt-5" })), index.h("button", { key: 'a27269a2a51b8fe5bccc15f83628d68251006f70', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, 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 => {
+            } }, index.h("ls-icon", { key: 'b4403cf793697fa578ba4948339959bced93a936', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: 'c71a0a7dbf4965db5083c2e31892c7d5376ee512', class: 'ls-field-format-bar' }, index.h("div", { key: 'c182854d46457e7fce5806042bb81ad2a9e2a0cd', class: "input-wrapper" }, index.h("ls-icon", { key: 'c37ea1cf1fea476864a869aac0ac69147d33e5b6', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '499ef3629da6bb05dc85bfad4e22f778a1df00a6', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: 'fc9fbf6d744d2e255c252494a8666e461704cb63', id: 'ls-toolbar-font-select', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, 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 => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '40bb53d54f3b5f62ec744ae52bea51d7d5e3ffd1', value: "arial" }, "Arial"), index.h("option", { key: '0883cd66f56fd0ed76f48c36203cf4e50f5af980', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '72187239ec4a7c296b5ab277d0f19253fc1ac0b6', value: "courier" }, "Courier"), index.h("option", { key: 'cd43e5e9858a58ed2a4f1b99924c5746c75c438d', value: "helvetica" }, "Helvetica"), index.h("option", { key: '3a20de6b6937525ae0ec6208888d3956d39bf598', value: "verdana" }, "Verdana"))), index.h("div", { key: '85d7ee0da79d69fcb24495bff20d6683670f0240', class: "input-wrapper" }, index.h("ls-icon", { key: '4c9ca20bf707f7a0a7dbebda0cdb7db36db0b289', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '2489d93094f314de173a1a466f0a4d13a0d34373', id: 'ls-toolbar-font-size', 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: '1d71bd91f2423f24a9b6ae2768a091ba88b9fac0', class: 'button-group' }, index.h("button", { key: '591012d14dd298aa6ef60de1026a8fda55947669', onClick: () => {
+            }, class: 'has-leading-icon' })), index.h("div", { key: 'f8e5d4822460f11eca96b422a5e9d72191421afc', class: 'button-group' }, index.h("button", { key: '547af4eb1d1c0872dd1dbc3ca68eb92621476ae1', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: '8e12a1e29b2bf2c2549aa224c0e189e79635c954', name: "menu-alt-2" })), index.h("button", { key: '67e49dc4631e3390da677fd35acc830aff2fa4db', onClick: () => {
+            } }, index.h("ls-icon", { key: '8ba5aecb7fc976ef40aea370d00da31e333566c3', name: "menu-alt-2" })), index.h("button", { key: 'c1bd4b5bf403e2b88a0a2169b4123aa9d143aa22', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: 'e44c688f14e317dc36187e63103cc471da7e7bcd', name: "menu-alt-5" })), index.h("button", { key: 'a1b000dbce0011ec0da15ce6bfbd414a5020ab22', onClick: () => {
+            } }, index.h("ls-icon", { key: '598a82c0edc4997d22d9decae45286877c43f136', name: "menu-alt-5" })), index.h("button", { key: '9f39d1337f27b0d74ef557836d4bcd86eb508696', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: '0181dc2fef0afa5b0412234f15363db2f4b33283', name: "menu-alt-3" })))))));
+            } }, index.h("ls-icon", { key: 'c3518f2e0f2fa51592660a94a1fd49037422a8eb', name: "menu-alt-3" })))))));
     }
+    static get watchers() { return {
+        "dataItem": ["selectFieldsHandler"]
+    }; }
 };
 LsFieldFormat.style = lsFieldFormatCss;
 
@@ -26050,7 +26229,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: '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 }))))))));
+        return (index.h(index.Host, { key: 'c9dc68e4e38efb9c800c3162750fda48a679f24d' }, this.isMultiple(this.dataItem) && (index.h("div", { key: 'b8000d7a209d1b48483c567b9476d264df95cfb8', class: 'ls-field-properties-section' }, index.h("div", { key: '63b627e957a7cc4e498f4d647d7f097ab46447d0', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'b2b4d8cabf3b4136bfd8f24a971e37915f831130', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '39036ea300acacb68af52a8a7f3c74bfab636ca9', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '406a42a6eba6512b4a0aab8af66c7f6c3dba7389', class: 'input-row' }, index.h("div", { key: '3c1f0599222c5105f345202a453dbe47459e3d08', class: 'input-wrapper' }, index.h("ls-icon", { key: '1b72436b61075143fcf71aa25c560dda48729b93', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: 'dbc911eb99b0fb11f618b853610ea61501f248e4', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), index.h("div", { key: '6f805235eedb1ed975a1dd124ed306785cfbc738', class: 'input-wrapper' }, index.h("ls-icon", { key: 'a09edcec36df6f3541bb99744c1c03b9ac25809d', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: 'aafc5b2376c78ac269f3bcbec76f654132a1ed31', 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: 'e6aefc1f92c9052740ef11a7b68cd437e6cacb62', class: 'field-set' }, index.h("div", { key: '998c00036ff931841dbee535816d70cc1c13f341', class: 'ls-field-properties-section' }, index.h("div", { key: '859c5e6195da6aae05f212325cc887a9e6d98b5a', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'fe1e0776b11bc989a025c598910ab3881876de5a', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '43a1ae930fd8e07e99af9e03adc82d4032a33fd2', 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: '7a95a01f785eb50a9287457906a6889b7d6a3033', class: 'multi-button-group-row' }, index.h("div", { key: '504071b40528fd4399755a0af9b1a9ff4f279c5f', class: 'button-group' }, index.h("button", { key: 'efd3e2aa445a03fce18474c28a07fa7b8687a0c7', onClick: () => { this.alter({ left: 0 }); } }, index.h("ls-icon", { key: 'e11ff3e4dbe3d6677e117e9b683ee9840f870c26', name: "field-alignment-left" })), index.h("button", { key: '258b9fb3c78c835fd1e281df90e2984cfb08ef40', onClick: () => { this.alter({ left: this.center() }); } }, index.h("ls-icon", { key: 'f22b23fd59c5c74baeb42bf60614a06cb4483178', name: "field-alignment-centre" })), index.h("button", { key: '0b80020e7d7d775c48634d5cb5754f3edce44008', onClick: () => { this.alter({ left: this.right() }); } }, index.h("ls-icon", { key: 'd8ae12c4670eb1e6e1cf65cfa5c2a5e9f123c261', name: "field-alignment-right" }))), index.h("div", { key: '2519a99c8563e99c118a250da6747f2b6076de61', class: 'button-group' }, index.h("button", { key: '6d92cb364078ad0f33e3d22e8753d43d49c96663', onClick: () => this.alter({ top: 0 }) }, index.h("ls-icon", { key: '21468552b013129c3df35c09871ba9132fb91873', name: "field-alignment-top" })), index.h("button", { key: 'f040000cfca80f27a5e0bb6169a2111c71a8f1d4', onClick: () => { this.alter({ top: this.middle() }); } }, index.h("ls-icon", { key: 'b6c5d151dda019ea8d6d912a9fe2677646b7374b', name: "field-alignment-middle" })), index.h("button", { key: 'a9246e1659fe5e4e0fdd0a03ed5772408bbc7c02', onClick: () => { this.alter({ top: this.bottom() }); } }, index.h("ls-icon", { key: '1f7933380d6fbfc524cdebc7f86fa1f74ebf1395', name: "field-alignment-bottom" }))))), index.h("div", { key: '8bf879e9ce04d81f0f5b6df99566a41be51ed470', class: 'ls-field-properties-section' }, index.h("div", { key: 'a7fee5248dab7322aa5fef2ff2f1dcf91728ee33', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'b8eb47ce94ec9d00e776ac505686666c430aac61', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '17f950776fa0207b9c66a6d6a911e67b1b66c86d', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: 'da01c959b6265147ed9d90a050401f36228a283d', class: 'input-row' }, index.h("div", { key: '4dac7c60fdaa4493de9b42401dfacdb031c38a25', class: 'input-wrapper' }, index.h("ls-icon", { key: '11e8d9bacb897bb04f12b818448eeb039bbf7a47', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '24b67407ed28079cf4f5d873c2c771b8f15d8a9c', 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: 'f80ae951bd8f5e8e219aa480a4a16ff55f46d8ab', class: 'input-wrapper' }, index.h("ls-icon", { key: 'b86661a641e357a9b0867d65b4ccee62bea4e44e', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: 'd2357ca6884f20d72bfb3dbbaa1a14ed797f646b', 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: '5a10ba1fa5515601b24343d0b1bf54a97ca29bb3', class: 'ls-field-properties-section' }, index.h("div", { key: '4b23811405359d00533810851c817939258e7e25', class: 'ls-field-properties-section-text' }, index.h("p", { key: '328d03492253d0aa58e1155b02fc29efb057c9f8', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'e2fecc82d431ee3756d502d45b143b900313ac15', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '2c8ba1520ce6aad2c6d96c97b00c3f54e6820b51', class: 'button-group' }, index.h("button", { key: '69187c8725b6b545ae9cb724b1deaf74e8d9cc88', disabled: true }, index.h("ls-icon", { key: 'c3d9cdccfb4fb61acd39d941f4d8a4cec449f075', name: "field-distribute-vertically" })), index.h("button", { key: '72bdb68d15e0e10233dd763c1428cad730a744c7', disabled: true }, index.h("ls-icon", { key: '1d07a51d8b73bf486f286bfc2d6adfa09038305d', name: "field-distribute-horizontally" })))), index.h("div", { key: '0776885c8c491e8717548a2e4287403a96488cc4', class: 'ls-field-properties-section' }, index.h("div", { key: '3ba1d1ea93a606de7b7a533326465e18487e5560', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'c31cba25f48fdcfe8883443ddecc82e7be4378f4', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '5f6998f21adb8803857a79e6da129022905a8c87', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '194a8a16e88493b7b4960fa7ab5ceba6e95b78d9', class: 'input-row' }, index.h("div", { key: '19862c6084d6fd681ce71bf0e5ba6c2141807d49', class: 'input-wrapper' }, index.h("ls-icon", { key: 'fc168bd1174daddec9d761b1d8692b69d37cf331', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '9ce4fe9e1ea759eb867adde5d5360dd3534ebbd0', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: '54eea8b43335fe796755f36f66ce6828479c137f', class: 'input-wrapper' }, index.h("ls-icon", { key: '9f94c55ced5a9d3fe43b472a7fcc9f9d7c830fad', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: 'eb65a84f010fc9f5abfa8fd5fd369cdad2b9670d', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
     }
 };
 LsFieldPlacement.style = lsFieldPlacementCss;
@@ -26093,7 +26272,7 @@ const LsFieldProperties = class {
             return index.h("ls-field-properties-multiple", { dataItem: this.dataItem });
     }
     render() {
-        return (index.h(index.Host, { key: '81a4f69d51691f6bb43ad01c130207fa0bdb71c7' }, this.dataItem && this.renderFields(), index.h("slot", { key: '53546d9623461dcc729c2fcd838fc0b885f19df8' })));
+        return (index.h(index.Host, { key: '343f2bcd85679323218afc9d2db60127c6f12189' }, this.dataItem && this.renderFields(), index.h("slot", { key: '455d1ddc501882eaf00e864174e5f867f3a96c13' })));
     }
 };
 LsFieldProperties.style = lsFieldPropertiesCss;
@@ -26143,7 +26322,7 @@ const LsFieldPropertiesAdvanced = class {
         return '';
     }
     render() {
-        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 }) }))))));
+        return (index.h(index.Host, { key: '24a4b2e3c09727279e41c27327baea962cdcb890' }, index.h("div", { key: 'd30d9fcbf06c72ffa6401c0eca4d0519478c831a', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, index.h("ls-icon", { key: 'b1efd67b7585db8fe2e411ef06a0b8441aa9e1b1', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", { key: 'd08068f7153f435dc3a2a9fa0615caddf00e8535' }, "Advanced Properties")), this.expanded && (index.h("div", { key: '59f04073ef608af89f5208be35a6641701449123', class: 'field-set' }, index.h("ls-props-section", { key: '15d9123478373bb244069627c33ea8033475f8d0', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, index.h("input", { key: '79298a0173c339135c508cf9e2f9b0d74d2ce192', value: this.getValue('fieldOrder'), type: "text", placeholder: "eg. 1", onChange: e => this.alter({ fieldOrder: e.target.value }) })), index.h("ls-props-section", { key: '42a97b7f82ec0fba718f3f20858d9f006eef1c96', sectionTitle: "Ref. Name" }, index.h("input", { key: '597a243802fa0d9d14f9686dcb6c53c5bd60026f', value: this.getValue('link'), placeholder: "eg. checkbox group", onChange: e => this.alter({ link: e.target.value }) })), index.h("ls-props-section", { key: '8d07374186f3d10621fbb19e14d1c95eb79d3c61', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, index.h("select", { key: '30b04fd609f6e301e090bec1b063ba06d821e768', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, index.h("option", { key: '937e2ab3ee370623e22e3f2da8aff7aa9824cf2a', value: "0", selected: this.getValue('linkType') === '0' }, "None"), index.h("option", { key: 'b69255b06207a1748ff9ce54f380e21b0f87b456', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), index.h("option", { key: 'b27aecfc5e9814aa5e1cd29154721decd98a907d', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), index.h("option", { key: '463e6556da3a8b81a7f9612830157b8e53491bd0', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), index.h("ls-props-section", { key: '9056d087b11e42dd5cd4809b560989f77f67d6df', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, index.h("input", { key: '3dcf0a33eecffe721849b4f3ea1c95cdbf6f545e', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
     }
 };
 LsFieldPropertiesAdvanced.style = lsFieldPropertiesAdvancedCss;
@@ -26156,7 +26335,7 @@ const LsFieldPropertiesAutosign = class {
     }
     dataItem;
     render() {
-        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' })));
+        return (index.h(index.Host, { key: 'df46931c369890f5abf0d25bd9fa8a8ad85ad68c' }, index.h("div", { key: '2f0d8d99305c136efd368327b8fd333435f068dd', class: "ls-field-properties-section" }, "Self Sign Field"), index.h("div", { key: 'bd70079d45b70bd3a2c18a148507757bee9f5973' }, "Label: ", index.h("input", { key: '108a5cc6158af4cb6a37c8f5678039bb354ec591', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: '3952b6ca0af4d444243f3c1d821ff72b74ad0100', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '95df9502c26ca62a8ad46f946742c84555e9c40a', dataItem: this.dataItem }), index.h("ls-field-footer", { key: '8394977015e41a56d4896d6810e96c4df13c2ae2', dataItem: this.dataItem }), index.h("slot", { key: 'c6974754a07f99372795a71d9ec370bcbd345a08' })));
     }
 };
 LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss;
@@ -26176,7 +26355,7 @@ const LsFieldPropertiesContainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'bd5cdce632c977e1fc528c9dc019957d693faf94' }, this.tabs.length > 1 && (index.h("div", { key: '971328b1f38c3693934665bcefb84133da76d04f', 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: '096910732325077d5d22526d4928ad7ce9c9d7d8', class: 'scrolling-container' }, index.h("slot", { key: '0d5a8ae8dfc46e2e469d46140e2d6b2a5ecd3aad', name: this.selectedTab }))));
+        return (index.h(index.Host, { key: '0603644fbc51f89389ddc25dd5b1371730feaeef' }, this.tabs.length > 1 && (index.h("div", { key: '602100153a470e329145e69bd38d200cc62daa7b', 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: '2e63a3beabdcbaa4e7b15651ecdd0c583229d44f', class: 'scrolling-container' }, index.h("slot", { key: '4e891478873ea12a5c91e7ba4e45cbfc1398f149', name: this.selectedTab }))));
     }
 };
 LsFieldPropertiesContainer.style = lsFieldPropertiesContainerCss;
@@ -26189,7 +26368,7 @@ const LsFieldPropertiesDate = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: '36e129289aa11e64e2bd75fd1309439b3a520457' }, index.h("ls-field-properties-container", { key: '809c2b386857b610fd9e871e6579eb84e7d9feeb', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'ac2c345789f21e600ecbd4f55d2b55801a8e5a80', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '2a1aa657a4f802f4ad34baac2031b71330f2ab82', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '6032597ec4c0a36c12b044acc27da1373ede3348', dataItem: this.dataItem })), index.h("div", { key: '2becaa0335ce5a94dddc5f7c8dde19821801c520', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '5af127cb268acdd44e08845339fb33b8656aca96', dataItem: this.dataItem })), index.h("div", { key: 'b35e78ff494db8e0688b7ce1c1a75f21ed176e13', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '067d2bdf244f537716d6916663357636bd551e00', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '53cbced3ec835b84dcd23c91ceef8345f6a040de', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesDate.style = lsFieldPropertiesDateCss;
@@ -26202,7 +26381,7 @@ const LsFieldPropertiesEmail = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: '557c90379fcb802368e3cc9900aa1b5d795e89bb' }, index.h("ls-field-properties-container", { key: '9406fe9d01158e2cc360a97f597c633114654d1d', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '85399d641c1f731c77d67f1a83a0c9d8772e7baf', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '3e24119b85e872c3b706e6e99c107035a4cb6353', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '7d17afd248948968abe6358d1f96798f9ecd5f3c', dataItem: this.dataItem })), index.h("div", { key: 'bef58eca745bacad8969861db73655986135d952', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '075fd44bd77e2c3e5d380167530dc87b6b94cf8e', dataItem: this.dataItem })), index.h("div", { key: '421e4db23ff914c7d6b861dae38d92d115472a0c', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '7a281a15446c697d5a4da832ef09b970faf806a7', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '6a9a2c13c5692e15ae816c655f0a2e40f88445b8', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesEmail.style = lsFieldPropertiesEmailCss;
@@ -26215,7 +26394,7 @@ const LsFieldPropertiesFile = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: 'bee6d5d0d1f6520b1784585b0ea4517faabdda70' }, index.h("ls-field-properties-container", { key: 'a37773f2fc761aac6ad779a83f833d7b268949c4', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '68bc9c76ab775a782330f02da0534b4b76f842f5', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '223ce26cb3a8afcbe12d356a346f682a07c4cbae', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '829a97eb8b576280cf9a8ce2d8497c51e293244b', dataItem: this.dataItem })), index.h("div", { key: '2ec54dd64c0303fd63cdeb9f9eb4263ac39e8fbe', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '111fd6c0372890cbce36e2dc22a991c8decc95d0', dataItem: this.dataItem })), index.h("div", { key: '425689aebfda1c89de75fe9471db3937053a2a1b', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '7bedf59453fb4083dfa2e1b1976fb139600d1325', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'bf6a97a46730aa15abd404a5b11737ece8acbfab', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesFile.style = lsFieldPropertiesFileCss;
@@ -26228,7 +26407,7 @@ const LsFieldPropertiesGeneral = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: 'bae2503fd50b94ad99bfbb24f2abe5e6d5629e2e' }, index.h("ls-field-properties-container", { key: 'deceb2d1e04ab59a142a46cb9a14a8c38c82b093', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '4a7e524042efba3b2f03fc82598660dd78e3613e', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '820a9ed90d55c4138441442c08ee94c70ccd1d0c', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'c999ac86bed0fb6e220c48b7848e3ef7b4101d94', dataItem: this.dataItem })), index.h("div", { key: '1123d84abf45da1002b62f0d44227cb8361be661', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '4c4c2ccd243e44c36f5f9c4862a12c10e188c630', dataItem: this.dataItem })), index.h("div", { key: 'f4b01c607e46eaf9895aa6949d3fc7071c3da3ac', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '9f7628923c352061af77363ff4fff8391b955abf', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'ae2d65be67e5fc3c13dbffec1e7c1a63c902c394', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesGeneral.style = lsFieldPropertiesGeneralCss;
@@ -26241,7 +26420,7 @@ const LsFieldPropertiesImage = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: 'ddf83beff21acc56fc0bcdea811f8c93294bace3' }, index.h("ls-field-properties-container", { key: '3249c39e164149e3d3c393ed40225bb06af75ab7', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '6aee8f7c5a58d52c53ea0a905b99436c286cbd67', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'b6265eb5dfb39f3283ffc2045b8460f95093771e', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'aec88fe3ca2d5fffaeb949a155d2f4dd56ba54b8', dataItem: this.dataItem })), index.h("div", { key: '57acc8a5f78004601c787655fe5f7ee9374f46e8', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'c75abe20033bfa8fa3526312b84bca714472df02', dataItem: this.dataItem })), index.h("div", { key: 'ace7da4cdf9f231fbbb42ca5ada0150f073049f7', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '5fc562a92d7948974eca672bd98a891b93ec299e', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '537e4d7fb85548e3d366af7fe7ae4eed044bb032', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesImage.style = lsFieldPropertiesImageCss;
@@ -26271,8 +26450,29 @@ const lsFieldPropertiesMultipleCss = ":host{display:flex;flex-direction:column;g
 const LsFieldPropertiesMultiple = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate");
+        this.update = index.createEvent(this, "update");
     }
     dataItem;
+    mutate;
+    update;
+    // 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.map(item => ({ ...item, ...diff }));
+        this.debounce(diff, 500);
+    }
+    labeltimer;
+    debounce(diff, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const evs = this.dataItem.map(item => ({ action: 'update', data: { ...item, ...diff } }));
+            this.mutate.emit(evs);
+            this.update.emit(evs);
+        }, delay);
+    }
     allSignersSame = () => {
         if (!this.dataItem || this.dataItem.length === 0)
             return { isSame: true, signer: undefined };
@@ -26294,15 +26494,22 @@ const LsFieldPropertiesMultiple = class {
         const allSame = this.dataItem.every(item => item.elementType === firstElementType);
         return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
     };
+    allFieldsOptional = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, optional: false };
+        const firstElementOptional = this.dataItem[0].optional;
+        const allSame = this.dataItem.every(item => item.optional === firstElementOptional);
+        return { isSame: allSame, optional: allSame ? firstElementOptional : false };
+    };
     render() {
-        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: {
+        return (index.h(index.Host, { key: 'f476c81a545cfa5d49517c70cfe8f12ecbf22cd7' }, index.h("ls-field-properties-container", { key: '1a8fdf264a6d8e7eb234f64ff2903b87746c91e2', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '415c57349a6ad5305b558483b65d1e3e80c4cfc1', class: 'field-set', slot: "content" }, index.h("div", { key: '3a29f3fbb697f06743f796d4e73d52af64926b40', class: 'ls-field-properties-section' }, index.h("div", { key: 'cb368cfd54d6dc7a391f3c8583f7c97ac2d03639', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'c244f2e88969792b29a8107c75fd4ec092639185', class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { key: 'af171d75c8f0e2e568c4ab01535d49eac53630f3', class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), index.h("div", { key: '3afaaa697c6e4b381854bc10eb177b7d3b47d6c1', 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: '8c107b4502595f57772baa94a88c469f434d18f4', class: 'ls-field-type-inner' }, index.h("div", { key: '69e8d25256f2a9381b86e9a87b298011b1f4a646', class: 'ls-field-type-icon', style: {
+            } }, index.h("div", { key: 'd468dc7f2d3e3c626348a137fa43aba2c965cba6', class: 'ls-field-type-inner' }, index.h("div", { key: '2047648d2b18974e2ed65b94ffbf6aa397e84177', 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: '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' })));
+            } }, index.h("ls-icon", { key: 'a3d57f28b6cd6cf372da48f53892e681a9a819cc', name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), index.h("p", { key: '594dc697a1f908fd41e202588a7cf799e6ba201e', class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { key: 'c4c9baafa20cf8a7aea384ced5f41d04ec6dce17', class: 'ls-field-properties-section row' }, index.h("div", { key: '6c4e47a9e34898860fdabdf0bd7849a1de49c797', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'b07c560ea096a8966074c1b55b97cca62c96f404', class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", { key: '506d4aba1e3cee00dc291a4a3e6a90328f366526', onValueChange: (ev) => this.alter({ optional: !ev.detail }), checked: !this.allFieldsOptional().optional, indeterminate: this.allFieldsOptional().isSame === false })), index.h("div", { key: '9a872405a537b1bdbbd69cd24344393141bb6759', class: 'ls-field-properties-section' }, index.h("div", { key: 'f61b198abd3a21adaf3984ce1e0f1e234176f600', class: 'ls-field-properties-section-text' }, index.h("p", { key: '751dbeb8d45c04b182e83327c9514840c9e8f370', class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { key: '3b87f243c3a86c1c52d8604ec3bd9411e11309ea', class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { key: 'faaa4bb9f9ea893eca15a4034cd582afd49a2965', value: this.allLabelsSame().label, onInput: (e) => this.alter({ label: e.target.value }), width: "30", placeholder: "eg. Sign Here" }))), index.h("div", { key: '456511585e43608a89e7d5331eb027ab71d08e98', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '0aaafaf40ce37451f6f9ea459ccd9e07e7bedc9f', dataItem: this.dataItem }), index.h("ls-field-size", { key: 'b1aa99293901f0ade2647688bb0ea3cb7c681850', dataItem: this.dataItem })), index.h("div", { key: 'e2901a24e8a7994169e4d146a7c3c55040802398', class: 'field-set', slot: "placement" }, index.h("ls-field-alignment", { key: '0e26ff3cdde4a50f3d6d1d326d76219bf5bdc93b', dataItem: this.dataItem }), index.h("ls-field-placement", { key: 'f20e953cec0564b6b013d4e560f2532b29c50952', dataItem: this.dataItem }), index.h("ls-field-distribute", { key: '8eb4e16583a4bd3b550178f83038067a3a8412e5', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'b5b1b4bfaef25effda90fb0a6b9ee00e9d950d8c' }), index.h("slot", { key: '57f76abbe5d2e9592d88c53f66d20b074d251ac6' })));
     }
 };
 LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss;
@@ -26315,7 +26522,7 @@ const LsFieldPropertiesNumber = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: '68ff2165b13ccc43d6a685a7d6d42396f06b925a' }, index.h("ls-field-properties-container", { key: 'f16402f8dd1ee0e98a346b1347c938baab354846', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '2b715391b5d40c3f040ff171ae2da91b4f8cffa1', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: '32846c02fcc7f55e73a432ab1cd0516ff1c23554', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: '2e2b0e88c815e0e18935793fa1bb0d33389492b8', dataItem: this.dataItem })), index.h("div", { key: '60b2074337012d34fa809c772f9fde6deb0f3ff7', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: 'bc3785f75bbc19e32b51a8a904f2b2a350c10a69', dataItem: this.dataItem })), index.h("div", { key: '16f27469b5eb8a5695305b145dd0a63de95bbc4c', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '26219c3f7913f5c0c962fe7faf8739de119a02c6', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'c83c7dda209e25158808a8f1c9d37f5eaac1ddbe', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesNumber.style = lsFieldPropertiesNumberCss;
@@ -26328,7 +26535,7 @@ const LsFieldPropertiesSignature = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: '62a9fd4dd5535ce5bcc94fe11cb07020fe391742' }, index.h("ls-field-properties-container", { key: 'b15a383a7c51769a9c52266c91a47f65c0e85fcb', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: 'cea89d50cb383f0468553718fe3b11c2116de837', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'f3043200e40ef623e0686a88ee3bad50195837d3', dataItem: this.dataItem, showValidationTypes: false }), index.h("ls-field-properties-advanced", { key: '4df0fa78e6b9da356e25f0e6a7192b094fcf8ff3', dataItem: this.dataItem })), index.h("div", { key: '331a919f4521b1995a9c5e3200587b50ce34c64d', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '816c2f009afb374398640cd08a218523704a3abf', dataItem: this.dataItem })), index.h("div", { key: '00abad768142abdca45ad3b490cef45f40ff339e', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: 'ec7710454b70120172308d1c5abafd3a1f307192', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: '0c27bcb56616a77d26017e6541bbf5a21d36a4b0', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesSignature.style = lsFieldPropertiesSignatureCss;
@@ -26341,7 +26548,7 @@ const LsFieldPropertiesText = class {
     }
     dataItem;
     render() {
-        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 })));
+        return (index.h(index.Host, { key: '42c376824ac0c4987319bbcd556420351c8c7abe' }, index.h("ls-field-properties-container", { key: '2d341f1daef2b8c4cfbf1b6da7613aee0ebc6214', tabs: ['content', 'placement', 'dimensions'] }, index.h("div", { key: '11379672c5f10a25793bb1845c62d3d9f3cca9fb', class: 'field-set', slot: "content" }, index.h("ls-field-content", { key: 'f8d31ed0dadefadf09b01bec1c6b06c3294662bd', dataItem: this.dataItem }), index.h("ls-field-properties-advanced", { key: 'e48c9bfe2abbcbd7fe4075a14741a2e17b946994', dataItem: this.dataItem })), index.h("div", { key: '23b04bd4d66018f4ec4e9c727cd4e55ad36663e0', class: 'field-set', slot: "dimensions" }, index.h("ls-field-dimensions", { key: '03f0589f370fd86319a91a38e9ab85e3b038319f', dataItem: this.dataItem })), index.h("div", { key: 'f9aee3ec9536ba05ea963e46e7575c254de7b154', class: 'field-set', slot: "placement" }, index.h("ls-field-placement", { key: '088523bd2b8f06eebe6c969b7a846cbfee31fe5c', dataItem: this.dataItem }))), index.h("ls-field-footer", { key: 'd290dea659d37cd2cdad5dd5f03e71d118db9473', dataItem: this.dataItem })));
     }
 };
 LsFieldPropertiesText.style = lsFieldPropertiesTextCss;
@@ -26368,7 +26575,7 @@ const LsFieldSize = class {
         this.update.emit(diffs);
     }
     render() {
-        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' })));
+        return (index.h(index.Host, { key: '3512b35c1a8bdace79f2196765e2892387a082ab' }, index.h("div", { key: 'b0535c73b7ad10b7a41d09fc3e97847802c04ea7', class: 'ls-field-properties-section' }, index.h("div", { key: '5f938c1b6f72720657fd06337cff7b2cfb7e0b18', class: 'ls-field-properties-section-text' }, index.h("p", { key: '2285e0fc40f37ac0e63f145f5111825371677114', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: '79dece2d13f38f5f6473fd82a19e5574ae2152b1', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '0ab5908841094a3ebc9053a4047608fdb1ceb5ea', class: 'button-group' }, index.h("button", { key: '7d711ca327b83444e3f7f7da6f308abd8de79c88', 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: '2f8262c4497b399c1f7b3331c83cbdd2da9bf7c7', name: "field-scale" })), index.h("button", { key: 'af9ccb863f0f310b753a8b57fe4ec6bda2b984aa', "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: 'c00a7c60775de17e949063175e15af84d2d53324', name: "field-match-width" })), index.h("button", { key: '32236424b6bf23199df20d686b1ed3db4020ef51', 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: '69e4ad1909f9c3cf82dd37f96d6a36d4508a0ab8', name: "field-match-height" })))), index.h("slot", { key: 'de626a2771e6e5f24f9e1a445789f314223a4479' })));
     }
 };
 LsFieldSize.style = lsFieldSizeCss;
@@ -26403,74 +26610,18 @@ const LsFieldTypeDisplay = class {
     fieldType = 'signature';
     render() {
         const color = defaultRolePalette[this.assignee % 100];
-        return (index.h(index.Host, { key: '0d4c4aa48bf3ae8f403df502bf9b3b5ba04be686', class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: '73dd27b05de7a8477b497ee5bb79af0ca31789b2', class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed ${color.s30}`,
                 background: color.s10,
-            } }, index.h("div", { key: 'e135050c776ba5a4e0bee0fc45c0f8a5de263aef', class: 'ls-field-type-inner' }, index.h("div", { key: '9bedbf90ad8bf224d45c27dc54f125eec297c9fe', class: 'ls-field-type-icon', style: {
+            } }, index.h("div", { key: '445d44e52106148630629b0fafab019422f1a05d', class: 'ls-field-type-inner' }, index.h("div", { key: '2abde211fce10f59df054f70bcfd5f7cd21cd624', class: 'ls-field-type-icon', style: {
                 border: `1px solid ${color.s60}`,
                 color: color.s60,
                 background: color.s10,
-            } }, 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)))));
+            } }, index.h("ls-icon", { key: 'e521264b748012a137d3246f9d539e9e93704d4c', name: getFieldIcon(this.fieldType), size: "20" })), index.h("p", { key: '3da29fd61c972c9cee454bccd69d70736fe22a2a', class: 'ls-field-type-name' }, getFieldLabel(this.fieldType)))));
     }
 };
 LsFieldTypeDisplay.style = lsFieldTypeDisplayCss;
 
-const lsFormfieldCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n";
-
-const LsFormfield = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "valueChange");
-    }
-    name;
-    fieldId;
-    label;
-    as = 'text';
-    value;
-    placeholder;
-    descriptionText;
-    errorText;
-    aria;
-    inputRef;
-    infoTooltipText;
-    hoverTooltipText;
-    disabled;
-    extraLabel = 'none';
-    required;
-    valid;
-    dirty;
-    count;
-    countMax;
-    buttonClick;
-    buttonIcon;
-    labelIcon;
-    fieldIcon;
-    valueChange;
-    changeHandler(value) {
-        this.valueChange.emit(value);
-    }
-    _value;
-    valueWatcher(newValue) {
-        this._value = newValue;
-        console.log(newValue);
-    }
-    componentWillLoad() {
-        this.valueWatcher(this?.value?.toString());
-    }
-    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: '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: '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"]
-    }; }
-};
-LsFormfield.style = lsFormfieldCss;
-
 const html = String.raw;
 const icons = [
     // Hero Icons
@@ -33495,7 +33646,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: 'dc63ba24967c79b07985dbaa0fb515a7b210e1b5' }, icons
+        return (index.h("host", { key: '22d3c71a636675912fa1ca782a1603f01249c86b' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (index.h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}px`,
@@ -33514,56 +33665,91 @@ const LsInputWrapper = class {
     leadingIcon;
     select = false;
     render() {
-        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' })));
+        return (index.h(index.Host, { key: '27d8e1cd87ced072110e49eec513181b4b2a31fc' }, index.h("ls-icon", { key: 'f98e5fd1998af46901c8b4443d96ca3eacd9670b', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && index.h("ls-icon", { key: '9472fb33b2df28d13ffe481fe451f2a9490e52b8', id: "selectorIcon", name: "selector" }), index.h("slot", { key: '99e95818e3c8f37ae3533d1b8bff73426324b5e1' })));
     }
 };
 LsInputWrapper.style = lsInputWrapperCss;
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-const lsNumberInputCss = "* {\n  box-sizing: border-box;\n  font-family:\n    'IBM Plex Sans',\n    sans-serif;\n  margin: 0;\n}\n\n.host {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem;\n  align-items: flex-start;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--Grey-20, #edeff2);\n  background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-60);\n}\n\n#password-icon {\n  padding-right: 0.25rem;\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-basic {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-ls {\n  display: flex;\n  width: 100%;\n  height: 1.75rem;\n  padding: 0 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.375rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n\n\n}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input-ls {\n  -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-110);\n}\n\n.disabled {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.display-only {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-100);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n}\n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button-disabled {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-=10, #F7F8FA);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  cursor: not-allowed;\n\n  #buttonIcon {\n    color: var(--gray-70);\n  }\n}\n\n.button:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-20, #edeff2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n";
+const lsPageLoaderCss = ":host{position:fixed;display:flex;top:0;left:0;align-items:center;justify-content:center;background-color:rgba(251, 251, 251, 0.3);backdrop-filter:blur(2px);height:100%;width:100%;z-index:4000}.loading-animation{position:relative;width:200px;height:200px;color:var(--primary-60, #0c7cba)}";
 
-const LsNumberInput = class {
+const LsPageLoader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    type = 'ls';
-    name;
-    value = 0;
-    placeholder;
-    aria;
-    inputRef;
-    disabled;
-    required;
-    valid;
-    dirty;
-    countMax;
-    buttonClick;
-    buttonIcon;
-    fieldIcon;
-    handleChange = (event) => {
-        this.value = event.target.value;
-    };
-    handlePlus = () => {
-        this.value = this.value + 1;
-    };
-    handleMinus = () => {
-        this.value = this.value - 1;
-    };
     render() {
-        const { type, name, value, placeholder, aria, disabled, required, valid, dirty, buttonClick, buttonIcon, fieldIcon, handleChange, handleMinus, handlePlus, } = this;
-        const inputClass = clsx(type === 'ls' ? 'input-ls' : 'input-basic', disabled
-            ? 'disabled'
-            : dirty && valid
-                ? 'valid'
-                : dirty && !valid
-                    ? '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: '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' })))));
+        return (index.h(index.Host, { key: 'b8a22c0a50aa3264a4a8dc932601b7ad65321b40' }, index.h("div", { key: 'be65314af39c0d5d09bc8d66c2dc301d64c1d4da', class: 'loading-animation' }, index.h("svg", { key: 'b7175fdef641e5f00729f0949b2c4f013350a596', class: "block w-full h-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 20 20" }, index.h("g", { key: '1e05cfca9a6c9a454fa0dc1c9f06f3f108ca48d4', id: "Icon/solid/logo" }, index.h("g", { key: 'ffc0feabedc0d90d0c072bdf56fa6b16c73cd590', id: "Icon" }, index.h("path", { key: '30cdf1467a8f5b216ac77a84f2e713866b63c07a', class: "classic-sequential-front", d: "M9.11077 0.940012C8.98702 0.868406 8.83446 0.868297 8.71061 0.939725C8.58675 1.01115 8.51044 1.14326 8.51044 1.28623V2.34625C8.51044 2.48927 8.5868 2.62141 8.71071 2.69282L14.6321 6.10546C14.818 6.21257 14.9325 6.41078 14.9325 6.6253V13.4621C14.9325 13.6044 15.0081 13.7359 15.131 13.8076L16.0285 14.3311C16.1522 14.4033 16.305 14.4038 16.4292 14.3325C16.5534 14.2611 16.63 14.1288 16.63 13.9856V5.52152C16.63 5.37876 16.5539 5.24681 16.4303 5.17531L9.11077 0.940012Z", fill: "currentColor" }), index.h("path", { key: 'b43f3d5dd81c338118400fc7ebf14bd59d28075a', class: "classic-sequential-middle", d: "M6.35621 2.52413C6.23246 2.45251 6.07989 2.45239 5.95603 2.52381C5.83217 2.59524 5.75585 2.72735 5.75585 2.87033V3.94156C5.75585 4.08504 5.83269 4.21752 5.95722 4.28876L8.20838 5.57659C8.39518 5.68345 8.51044 5.88218 8.51044 6.09739V9.75268C8.51044 9.89534 8.58642 10.0272 8.70984 10.0987L11.8717 11.9316C12.0569 12.0389 12.1708 12.2367 12.1708 12.4507V16.1015C12.1708 16.2434 12.2461 16.3747 12.3685 16.4465L13.2784 16.9801C13.4021 17.0526 13.5552 17.0534 13.6796 16.9821C13.804 16.9108 13.8808 16.7784 13.8808 16.635V7.10976C13.8808 6.96701 13.8047 6.83507 13.6811 6.76356L6.35621 2.52413Z", fill: "currentColor" }), index.h("path", { key: 'c52c0916d2e82f7c0c06bc437be4c2465e6de134', class: "classic-sequential-back", d: "M3.60419 4.12505C3.48039 4.05421 3.32824 4.05465 3.20486 4.1262C3.08147 4.19776 3.00552 4.3296 3.00552 4.47223V15.0385C3.00552 15.1812 3.08151 15.3131 3.20494 15.3846L10.5339 19.6323C10.6576 19.704 10.8102 19.7042 10.9341 19.6328C11.0581 19.5614 11.1344 19.4293 11.1344 19.2862V12.9374C11.1344 12.795 11.0587 12.6634 10.9357 12.5917L7.78047 10.7551C7.59587 10.6476 7.48232 10.4501 7.48232 10.2365V6.57621C7.48232 6.43276 7.40549 6.30029 7.28098 6.22904L3.60419 4.12505Z", fill: "currentColor" })))), index.h("style", { key: 'c58faea0d359c6b1d3fb00ff6944c9952dacbe09' }, `
+          @keyframes classic-sequential-back {
+            0% { opacity: 0; transform: scale(0.3); }
+            2% { opacity: 0.3; transform: scale(0.5); }
+            4% { opacity: 0.6; transform: scale(0.7); }
+            6% { opacity: 0.8; transform: scale(0.85); }
+            8% { opacity: 1; transform: scale(1); }
+            22% { opacity: 1; transform: scale(1); }
+            55% { opacity: 1; transform: scale(1); }
+            64% { opacity: 1; transform: scale(1); }
+            65% { opacity: 0.9; transform: scale(0.95); }
+            66.2% { opacity: 0.75; transform: scale(0.88); }
+            67.2% { opacity: 0.6; transform: scale(0.8); }
+            68% { opacity: 0.4; transform: scale(0.7); }
+            68.8% { opacity: 0.25; transform: scale(0.6); }
+            69.5% { opacity: 0.1; transform: scale(0.45); }
+            70% { opacity: 0.05; transform: scale(0.35); }
+            71% { opacity: 0; transform: scale(0.3); }
+            100% { opacity: 0; transform: scale(0.3); }
+          }
+
+          @keyframes classic-sequential-middle {
+            0%, 16% { opacity: 0; transform: scale(0.3); }
+            18% { opacity: 0.3; transform: scale(0.5); }
+            20% { opacity: 0.6; transform: scale(0.7); }
+            22% { opacity: 0.8; transform: scale(0.85); }
+            24% { opacity: 1; transform: scale(1); }
+            36%, 65%, 70% { opacity: 1; transform: scale(1); }
+            71% { opacity: 0.9; transform: scale(0.95); }
+            72.2% { opacity: 0.75; transform: scale(0.88); }
+            73.2% { opacity: 0.6; transform: scale(0.8); }
+            74% { opacity: 0.4; transform: scale(0.7); }
+            74.8% { opacity: 0.25; transform: scale(0.6); }
+            75.5% { opacity: 0.1; transform: scale(0.45); }
+            76% { opacity: 0.05; transform: scale(0.35); }
+            77%, 100% { opacity: 0; transform: scale(0.3); }
+          }
+
+          @keyframes classic-sequential-front {
+            0%, 32% { opacity: 0; transform: scale(0.3); }
+            34% { opacity: 0.3; transform: scale(0.5); }
+            36% { opacity: 0.6; transform: scale(0.7); }
+            38% { opacity: 0.8; transform: scale(0.85); }
+            40% { opacity: 1; transform: scale(1); }
+            60%, 76% { opacity: 1; transform: scale(1); }
+            77% { opacity: 0.9; transform: scale(0.95); }
+            78.2% { opacity: 0.75; transform: scale(0.88); }
+            79.2% { opacity: 0.6; transform: scale(0.8); }
+            80% { opacity: 0.4; transform: scale(0.7); }
+            80.8% { opacity: 0.25; transform: scale(0.6); }
+            81.5% { opacity: 0.1; transform: scale(0.45); }
+            82% { opacity: 0.05; transform: scale(0.35); }
+            83%, 100% { opacity: 0; transform: scale(0.3); }
+          }
+
+          .classic-sequential-back {
+            animation: classic-sequential-back 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+            transform-origin: center;
+          }
+
+          .classic-sequential-middle {
+            animation: classic-sequential-middle 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+            transform-origin: center;
+          }
+
+          .classic-sequential-front {
+            animation: classic-sequential-front 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+            transform-origin: center;
+          }
+        `)), index.h("slot", { key: '14a81aa90b119d816fc657f6a46f57ae94d0e4f2' })));
     }
 };
-LsNumberInput.style = lsNumberInputCss;
+LsPageLoader.style = lsPageLoaderCss;
 
 const lsParticipantCardCss = ":host{display:block}*{box-sizing:border-box;margin:0}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch}.top-card{border-radius:1rem 1rem 0 0}.full-card{border-radius:1rem}.bottom-card{border-radius:0 0 1rem 1rem}.participant-card-inner{width:100%;display:flex;flex-direction:column;gap:0.5rem}.hidden{visibility:hidden;display:none}.form-button-set{display:flex;gap:0.5rem}.role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.5rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.role-label.fields{border-radius:1rem;margin-top:0.5rem}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.innerButton:hover{color:var(--hover-button-colour)}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.button-set{display:flex;gap:0.125rem}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}.full-width{width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.tertiary{border:1px solid var(--primary-60, #4456f6);background:transparent;color:var(--primary-70, #2134dc)}button.tertiary:hover{border:1px solid var(--primary-70, #2134dc);border:1px solid var(--primary-80, #0c34b8)}button.destructive{border:1px solid var(--red-60, #f04438);background:transparent;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0);background-color:var(--red-10, #fff1f0)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
@@ -33618,36 +33804,36 @@ const LsParticipantCard = class {
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
         const child = this.template.roles.find(r => r.signerParent === this.signer.id);
-        return (index.h(index.Host, { key: '050ce0bf860dfebc0f79d45295b6876a8c714c61' }, index.h("div", { key: '03a6151b022ee20de49836d55362ca7842d91c2b', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
+        return (index.h(index.Host, { key: 'e948d8be468f8e81b0ea752b8c37aef7e83d5227' }, index.h("div", { key: '445aea342b4e4397bc4e6eb8c20e171bd853d59f', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
                 marginTop: this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',
             }, 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: '4471c63e21cba70ca9c99e08518b58aa27d51ba7', class: 'participant-card-inner' }, index.h("div", { key: '2880b2ada85743bb5aebb533cf51e837b275329e', class: 'participant-card-top-items' }, index.h("div", { key: '3d4eb8164d136326349cece0b18f5c53b0f88a49', class: 'role-label', style: {
+            } }, index.h("div", { key: 'b9e87febf6217ffb40c228e67dccc59a4e0a79ea', class: 'participant-card-inner' }, index.h("div", { key: '930e5dd57d2dba41214d4ae86b4520aec572e92a', class: 'participant-card-top-items' }, index.h("div", { key: '5cea99ed2038b51441e34c3be9510f7163b27e56', class: 'role-label', style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, index.h("ls-icon", { key: 'dad3b4055bdd45df6f8e5085f459961da09d010f', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), index.h("div", { key: '07fe8b88998c7121217db858c231dcc1cc1707fe', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (index.h("div", { key: '830f21fbae631a0e8e42af15a91d67c9547c1c01', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: 'b8bb19361e0cef64eae9bebf01a0fe73ade6be99', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), index.h("div", { key: '14bb3077badecdd639ca9221db8ff8135072f008', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (index.h("div", { key: 'eaf07f2aca39b4666ee36ed50023b198cc6695a9', 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: '8b09d4c2d21c0da1d1e2b8d259808f17db459cbb', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (index.h("div", { key: '615157461249449a36d2de250682f61476a9f201', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '48f6736e9f88b03b71dc0836141f2dce10c592da', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (index.h("div", { key: 'f1df1663aba7445c3998a10388054c38202a45d7', 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: 'f5272e02633d855779e651e7210f93d345832b88', name: "arrow-down", size: "18" }))), index.h("div", { key: '83fcb361f4610ca0f08db9d6be84ad3cf3abd5d8', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: '21f3302957048e5c218f04e6da680a5be3ac55ba', name: "arrow-down", size: "18" }))), index.h("div", { key: '4b59e37058412bbd8d04deb4418fb3f764dbf360', 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: '9aea4e29845683be3ab72ad4aba8897e2e8f4a2f', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), index.h("div", { key: '451e0cc218f1f505e64a9783902d8627c4c1a005', class: "innerButton", onClick: () => {
+            } }, index.h("ls-icon", { key: 'ab068a9b7832b9387a006230231970dd425ae739', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), index.h("div", { key: 'acede95c9e80168f22b08e24602ade0b1fe1fdb7', 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: '5678a46062f0ea120d60e070a86f5b1a75d06662', name: "trash", size: "18" })))), this.editable ? (index.h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (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 }), disabled: child ? true : false }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (index.h("ls-input-wrapper", { leadingIcon: "eye" }, index.h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), 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: 'd72ebe8b0544eee194842f91f5d449d20ed1da56', name: "trash", size: "18" })))), this.editable ? (index.h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (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 }), disabled: child ? true : false }, index.h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), index.h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (index.h("ls-input-wrapper", { leadingIcon: "eye" }, index.h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), 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;
             } }), this.signer?.roleType === 'SIGNER' && !child ? (index.h("button", { class: 'tertiary', onClick: () => this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id }) }, index.h("ls-icon", { name: "plus", style: { marginRight: '0.25rem' } }), "Add Witness")) : this.signer?.roleType === 'SIGNER' && child ? (index.h("button", { class: 'destructive', onClick: () => {
@@ -33662,7 +33848,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: 'ba159f7a2d34de4926bb44ce1aca658cd470833d' })));
+            } }, 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: '8059f6c9ce00424f838f1c073ec9b3bf62d1f25d' })));
     }
     static get watchers() { return {
         "editable": ["modeHandler"]
@@ -33729,12 +33915,12 @@ const LsParticipantManager = class {
         observer.observe(this.element.shadowRoot, { childList: true, subtree: true });
     }
     render() {
-        return (index.h(index.Host, { key: '969b4cc1f4e86d87035c5c84365dea9607c85fff' }, index.h("div", { key: 'a50e3c6131d31f523a458c0a1729181eea1ce007', class: "ls-editor-infobox" }, index.h("h2", { key: '5e4b848099eb0d3a79b4fa172111288d7b07e278', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: 'fa9267c09a4c443832f76bb88f8c74d69c9838e3', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '97aceae65cb31344ad3a724daf7f64c469fd6741', class: "participant-list" }, this.template &&
+        return (index.h(index.Host, { key: 'edef40a6b345a99b45e4088fd44e463fa769ae8d' }, index.h("div", { key: '211294eba6699885106d694deb2337eb51b785f8', class: "ls-editor-infobox" }, index.h("h2", { key: '68a39092393693765bcbc497a457014cbd307580', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '29453b8e8fce7eb39f4f34a0d876fe8dd72f6af4', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: 'ad9925bc37488c8f4a1cef7d3fdb59d21e92e926', 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);
                     }, onAddParticipant: event => this.handleOpenNewWitness(event) }));
-            })), index.h("div", { key: '1067a4fbd87d7bcbce1a99d4aeb9a04bacfeea36', class: 'add-participant-button' }, index.h("button", { key: 'f0529ee33de114f8d7b5a222d27440686cf9eb0b', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, index.h("ls-icon", { key: 'fab11a0945db10cfde4c537d26e84cfa410cd8a9', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: '384ec2ea99caff3321d3d5d70105e6a07c2466fe' }, "Add Participant"))), index.h("slot", { key: 'd0689801afd208555d353f1472e64968c5934647' })));
+            })), index.h("div", { key: '3a474009f7ba0168da4af3e5807d228a36fe7fa3', class: 'add-participant-button' }, index.h("button", { key: '405528eb5bf2c30acca22254a8a2cef81f3cb673', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, index.h("ls-icon", { key: '58aa3bf54a5b49c1fffeca956fa42e8fe6712364', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: '71bcf3329ee400624f4d6dc2577e04c4a33860b0' }, "Add Participant"))), index.h("slot", { key: 'b2894e4a772329741ff796bf0a39e1333cfa567b' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
@@ -33793,27 +33979,27 @@ const LsParticipantSelect = class {
         this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (index.h(index.Host, { key: 'f053e6c27cba0319ca92871a534070d753961aac' }, index.h("div", { key: 'b037b74c477b5f7ad338bc707a1f08bdfb131535', class: "dropdown" }, index.h("div", { key: 'c97336eab86a36d45b9ddef78a6df0e8babada63', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'fa69fa36ad9b6e6ae4adfca7017a4457068365d1', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '860b63abd43343f27b9fd8d597a152bf7e34dc93', 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: '7eeff168b2553f4e79be6d4a8d1bad31282ec5ac', 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: '10216191c461f85e93f97c40d0a9f818cafe6f19', 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: 'c2677a36fe8ffc04141dd8e565916d425b23120f', 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: '977b8593c1eba8a9cafc93f3c548596df4f14383', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '7a9decad70156db7451571a813d98ac29bb55969', class: 'selected-role-label', style: {
+        return (index.h(index.Host, { key: '09e119f89d40ae2f0c697ea6721a76a5d6e1e131' }, index.h("div", { key: 'b9b09c3702d6571572040780cff601ac6d4746c6', class: "dropdown" }, index.h("div", { key: 'e73286da66a604ebcd2aa3923730b0304726abd9', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'c7d43f1e1153ee47c7512863497a93ddd9cbe013', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'e7020a015d4ba9df000578c37f296f7638c7d700', 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: '077b0ea3f1672163c0037f7ae6203ce8431ba71f', 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: '5595e1cd44919f359aada27b6d3d1b0ce4653610', 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: '98b25a1bb30fc8e1c7e70b72936b7a3cbca7af33', 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: 'eae872f3ba394aadf53092194169c75997e9d53b', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '15f4384297e0e1789a15eb61db66898782a86dbc', class: 'selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, index.h("ls-icon", { key: '1bceddc0d5bdcdc9a4550e6871c6f23b130e13a4', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, index.h("ls-icon", { key: '2cd944cb7f0ca493970032faefd7f3750d580837', 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.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: 'deac6e0ce1405949e279df80396664520ea0a446', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: '39bb00d902adf511c3122dd8b4a158cfea84dc02', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '4e1c77622d07e09ad73e8607f2fb7012ab170599', class: "dropdown-list" }, index.h("div", { key: '6333a4f6d8a87b41054b0e0bacefe836093cd64f', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+            (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: 'f339ed045bb0c6af9d2bff3304f7cf4b50721788', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: '960f7998fa7d3144c3e33381e843a0cd03ea7ffe', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: 'b6229b4379b54c37af8089f43f647b724e426e23', class: "dropdown-list" }, index.h("div", { key: 'd8804bf89d2ffc11fc5ab00acf7eb1cef22c2171', 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: '0172efaa68fd05cc5c8833833f4f44af92d505bc', 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: '367089f2590b8227a069bcb3d76cf72d22fe2344', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, index.h("ls-icon", { key: '5dc564e507733c2732ab79c3a8437eb275c6aefe', name: "user" })), index.h("div", { key: '9d1a26aa3fceb79612afe66929b9b04fa6c46b66', class: 'role-text' }, index.h("p", { key: 'e89116bb21fb1fa9c00acac2173688629fe2d637', class: 'role-name', style: {
+            } }, index.h("ls-icon", { key: 'c331ed982fc98742e132d77203edf13347f67ea2', name: "user" })), index.h("div", { key: '8f9c45b3ce947d3384a45070b776ee455fb21d0d', class: 'role-text' }, index.h("p", { key: '6f3a1a221e88bbed1d6d529879f271cb6141637c', class: 'role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), index.h("p", { key: '00bb513c28a580faab973e74779c77b6e123aa6d', class: 'role-type', style: {
+            } }, 'Sender'), index.h("p", { key: '11d54a7e2c98fdc647ed46ffd2ea10635b7f65b9', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), index.h("ls-icon", { key: '9c375a9cffbc93e6566f496a379f910d7d82ad2e', 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: 'fa0d74d068b082ccd9baa728c144d27da31aa54e', 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
@@ -33825,10 +34011,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: '876d0510b3522b4de6c81a04950e0cbe6d56a7ef', 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: '9ce97692f5946edce1bf20876aba6a257aa75aa3', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, index.h("div", { key: '18e18d420039303a144a9a40ae73307421e6ddf0', class: 'add-participant-icon' }, index.h("ls-icon", { key: 'f6fa96cc87ee795b827067035b2887dd5af67b71', name: "user-add" })), index.h("div", { key: 'd17693f290f0aba4d16e3d7c92e9d899e18bfd2b', class: 'role-text' }, index.h("p", { key: '6cbd301f3414c84d1dc14e4afa764c920d180b66', class: 'role-name' }, "Add Participant"), index.h("p", { key: '93ff716ae9b2bbdb976f3bb674963c686e8b236d', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: 'b6c771b3e0773de88ab729a2e8d09c9051b09d5f', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: 'cd90a24546b04b907c6e82980827fb133ea9b37a' })));
+            } }, index.h("div", { key: '6986fb8bd1d4978aec4369a549eb4eb6e2300c5c', class: 'add-participant-icon' }, index.h("ls-icon", { key: 'f0fdeccc4489d510ddcfcb39c54e674287d9396b', name: "user-add" })), index.h("div", { key: 'c3a16b3fccbd5bd4e3d1e30eaf392023ed1382b0', class: 'role-text' }, index.h("p", { key: 'f663b8c5885f095fde20e204301d0c692f84bb12', class: 'role-name' }, "Add Participant"), index.h("p", { key: 'db7fadcf03020994b10f5b709f74e9b780e73b60', class: 'role-type' }, "Add a new Signer")), index.h("ls-icon", { key: 'd9baf06a920f373d651e09dcc4468b50648d742d', class: 'plus-icon', name: "plus" }))))), index.h("slot", { key: '185c090b40670cd0ce1b9ddda3b82d20e08aae92' })));
     }
     static get watchers() { return {
         "roles": ["handleRoleLoad"]
@@ -33846,69 +34032,11 @@ const LsPropsSection = class {
     sectionDescription;
     row = false;
     render() {
-        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' }))));
+        return (index.h(index.Host, { key: '9043f4212d573cb7cae6024f0288d3589cab16ca' }, index.h("div", { key: '73ad46475e8a1b84f775cf50ef38d96856c845ad', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, index.h("div", { key: 'a259ac2223024e3b68e24956ac050afd1ed8ad6a', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'c649eeccdd07ed13d7761a7390737a7f1b27f476', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && index.h("p", { key: '668ec0fbf1c9b036bbaf71469862872da1858c5e', class: 'ls-field-properties-section-description' }, this.sectionDescription)), index.h("slot", { key: '7537449cd511e7fa223c06f96b983ce69a9f6cf8' }))));
     }
 };
 LsPropsSection.style = lsPropsSectionCss;
 
-const lsRadioInputCss = ".radioLabel{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.5rem 0.75rem}.radioLabel.checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.radioLabel:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.radioLabel.checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.radioLabel:not(.checked):not(.disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.radioLabel:focus:not(.disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.radioLabel.disabled{cursor:not-allowed}.radioLabel.disabled.checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.radioLabel.disabled:not(.checked){background-color:var(--gray-10);color:var(--gray-60)}.inputClass{margin-top:0px}.inputClass:focus{outline:none}.inputClass:disabled{cursor:not-allowed}.spanContainer{display:flex;gap:0.25rem;align-items:center}";
-
-const LsRadioInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    radioId;
-    label;
-    icon;
-    name = 'name';
-    checked = false;
-    disabled = false;
-    customStyle;
-    render() {
-        const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
-        const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        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;
-
-const lsSelectInputCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n";
-
-const LsSelectInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    name;
-    value;
-    aria;
-    inputRef;
-    disabled;
-    displayOnly;
-    required;
-    valid;
-    dirty;
-    buttonClick;
-    buttonIcon;
-    fieldIcon;
-    // handleChange(event) {
-    //   this.value = event.target.value;
-    // }
-    render() {
-        const { name, aria, disabled, displayOnly, required, valid, dirty, buttonClick, buttonIcon, fieldIcon, } = this;
-        const inputClass = clsx('input-base', disabled
-            ? 'disabled'
-            : dirty && valid
-                ? 'valid'
-                : dirty && !valid
-                    ? 'invalid'
-                    : displayOnly
-                        ? 'displayOnly'
-                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        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;
-
 const lsStatusbarCss = ":host{position:fixed;z-index:1000;right:1rem;bottom:1rem;display:flex;flex-direction:row;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem}*{margin:0;padding:0;box-sizing:border-box}.status-bar-section{display:flex;flex-direction:row;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem}:host>:not(:nth-child(2)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}input[type=\"range\"]{-webkit-appearance:none;width:100%;height:8px;background:var(--gray-20, #EDEFF2);border-radius:5px;outline:none}input[type=\"range\"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:8px;height:8px;background:var(--gray-70, #4a4c51);border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-thumb{width:8px;height:8%;background:var(--gray-70, #4a4c51);border:none;border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}input[type=\"range\"]::-webkit-slider-runnable-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}button{all:unset;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-80, #6c6e73);text-transform:capitalize}button.tertiaryGrey:hover{background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
 const LsStatusbar = class {
@@ -33948,104 +34076,16 @@ const LsStatusbar = class {
         this.zoom = this.editor.zoom;
     }
     render() {
-        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: () => {
+        return (index.h(index.Host, { key: '5175633d8514ec641b81d161dfbafeaeb90e3dbd' }, index.h("div", { key: '6ee5ab35d555e4685d3434538238b53169db8d34', class: 'status-bar-section' }, index.h("button", { key: '678f92a156d291e903a897af50f219b5e161ef41', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: 'b8e122bb9aaec0688312b0e6c1c6daf35d46d59e', name: "zoom-out" })), index.h("div", { key: 'bef53222c3b56c3bb532eeda88eae41400bd1599' }, index.h("input", { key: '4edd5b23b7bddca49a33399bf8820e2ec89b6243', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: 'f1762721abfc2888d83575e755a39091042a43b1', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: 'c71fcecc620fd255f872f5a7b0252414ac7eaac1', name: "zoom-in" }))), index.h("div", { key: '188426f1b5a7201fcdaf7ee83727b5e8f4435713', class: 'status-bar-section' }, index.h("button", { key: '9dd5cd5327d5ab8031233a2b33ec957e0184850c', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: 'b8bd58c1ac2b2a7d760516a01ea2677997ba1b22', name: "fit-width" })), index.h("button", { key: '69c3a81d15b2f56922d730c164097616ca2cf7d3', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: 'ae3ce4a1ae0c5d90080733a4b24bad4e1b1cdd14', name: "fit-height" }))), this.editor?._template?.pageCount > 1 && (index.h("div", { key: '0dfb2b2be045929e185d67670aa2a48c9007757b', class: 'status-bar-section' }, index.h("button", { key: 'db482d9a60eee5772e49dbe83273246c1a2acadb', onClick: () => {
                 this.editor.pagePrev();
-            } }, 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: () => {
+            } }, index.h("ls-icon", { key: '7759f954bddc55e06dd870560295abd7d82c62bc', name: "chevron-left" })), index.h("p", { key: 'cc5b3bd1faa52b15865754da73ee107c4dc2a613' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), index.h("button", { key: 'd45ab960fb57260719584388a2dffedf883f62b2', onClick: () => {
                 this.editor.pageNext();
-            } }, index.h("ls-icon", { key: 'd73352bf128f6d2911b98bd9340a8963018e7fd6', name: "chevron-right" }))), index.h("slot", { key: '1829b9f4ce5f420972c64b9f63a59c1aa48c70b2' })));
+            } }, index.h("ls-icon", { key: 'f23a3ee83510ee41165b720459915a97af0c6061', name: "chevron-right" })))), index.h("slot", { key: '75f3d128912a26f76fa0c1b043668259a3d028f4' })));
     }
 };
 LsStatusbar.style = lsStatusbarCss;
 
-const lsTextInputCss = "* {\n  box-sizing: border-box;\n  font-family: \"IBM Plex\", sans-serif;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n#password-icon {\n  padding-right: 0.25rem;\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.display-only {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-100);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n";
-
-const LsTextInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "valueChange");
-    }
-    type = 'default';
-    name;
-    value;
-    placeholder;
-    aria;
-    inputRef;
-    disabled;
-    required;
-    valid;
-    dirty;
-    countMax;
-    buttonClick;
-    buttonIcon;
-    fieldIcon;
-    valueChange;
-    showPassword = false;
-    handlePassword = () => {
-        this.showPassword = !this.showPassword;
-    };
-    changeHandler(event) {
-        console.log(event);
-        this.valueChange.emit(event.target.value);
-    }
-    render() {
-        const { type, name, value, placeholder, aria, disabled, required, valid, dirty, countMax, buttonClick, buttonIcon, fieldIcon, showPassword, handlePassword, } = this;
-        const inputClass = clsx('input-base', type === 'displayonly'
-            ? 'display-only'
-            : disabled
-                ? 'disabled'
-                : dirty && valid
-                    ? 'valid'
-                    : dirty && !valid
-                        ? 'invalid'
-                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        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: '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;
-
-const lsTextareaInputCss = "* {\n  box-sizing: border-box;\n  font-family: \"IBM Plex\", sans-serif;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60);\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  resize: vertical;\n  width: 100%;\n  min-height: 4rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-110);\n}\n\n.disabled {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n}\n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-20, #edeff2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n";
-
-const LsTextareaInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    name;
-    value;
-    placeholder;
-    aria;
-    inputRef;
-    disabled;
-    displayOnly;
-    required;
-    valid;
-    dirty;
-    countMax;
-    buttonClick;
-    buttonIcon;
-    fieldIcon;
-    render() {
-        const { name, value, placeholder, aria, disabled, displayOnly, required, valid, dirty, countMax, buttonClick, buttonIcon, fieldIcon, } = this;
-        const inputClass = clsx('input-base', disabled
-            ? 'disabled'
-            : dirty && valid
-                ? 'valid'
-                : dirty && !valid
-                    ? 'invalid'
-                    : displayOnly
-                        ? 'displayOnly'
-                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        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;
-
-const lsToggleCss = ":host{display:block}.switch{position:relative;display:inline-block;width:2.75rem;height:1.5rem}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--gray-20, #EDEFF2);-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:1.25rem;width:1.25rem;left:0.125rem;bottom:0.125rem;background-color:white;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--primary-60, #4456F6)}input:focus+.slider{box-shadow:0 0 1px var(--primary-60, #4456F6);outline:4px solid var(--primary-20, #E3E6FF)}input:checked+.slider:before{-webkit-transform:translateX(1.25rem);-ms-transform:translateX(1.25rem);transform:translateX(1.25rem)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}";
+const lsToggleCss = ":host{display:block}.switch{position:relative;display:inline-block;width:2.75rem;height:1.5rem}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--gray-20, #edeff2);-webkit-transition:0.4s;transition:0.4s}.indeterminate{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--primary-60, #4456f6);-webkit-transition:0.4s;transition:0.4s}.slider:before{position:absolute;content:'';height:1.25rem;width:1.25rem;left:0.125rem;bottom:0.125rem;background-color:white;-webkit-transition:0.4s;transition:0.4s}.indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.75rem;height:0.125rem;background-color:white}input:checked+.slider{background-color:var(--primary-60, #4456f6)}input:focus+.slider{box-shadow:0 0 1px var(--primary-60, #4456f6);outline:4px solid var(--primary-20, #e3e6ff)}input:checked+.slider:before{-webkit-transform:translateX(1.25rem);-ms-transform:translateX(1.25rem);transform:translateX(1.25rem)}.slider.round,.indeterminate.round{border-radius:34px}.slider.round:before{border-radius:50%}";
 
 const LsToggle = class {
     constructor(hostRef) {
@@ -34053,14 +34093,15 @@ const LsToggle = class {
         this.valueChange = index.createEvent(this, "valueChange");
     }
     checked;
+    indeterminate;
     valueChange;
     changeHandler(value) {
         this.valueChange.emit(value);
     }
     render() {
-        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) => {
+        return (index.h(index.Host, { key: '9a4d61443f92bf65fddf05407f91a01285ccf19f' }, index.h("label", { key: 'c2bbd322dfdb1e82a99139a412ea1bbed311c92b', class: "switch" }, index.h("input", { key: 'ffbbda8820f8d42dc316ec873e1d2f1063bceedc', type: "checkbox", checked: this.checked, onChange: (e) => {
                 this.changeHandler(e.target.checked);
-            } }), index.h("span", { key: 'fe5e6f17345ba5057d2df8a9c245d28b7c79e328', class: "slider round" })), index.h("slot", { key: '9c3d8ceb80fbf7d4c0efff45d671866b42476f21' })));
+            } }), index.h("span", { key: 'c5952ebb13c18765abb406ec0916eb26d3db51a2', class: `${this.indeterminate ? 'indeterminate' : 'slider'} round` })), index.h("slot", { key: 'cae29b87763a90bd1b2b3f029fff63223aa4020f' })));
     }
 };
 LsToggle.style = lsToggleCss;
@@ -34100,7 +34141,6 @@ const LsToolbar = class {
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
     alter(diff) {
-        console.log(diff);
         const diffs = this.dataItem.map(c => {
             return { action: 'update', data: { ...c, ...diff } };
         });
@@ -34109,16 +34149,17 @@ const LsToolbar = class {
         this.update.emit(diffs);
     }
     render() {
-        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, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), index.h("slot", { key: '4d23f1bc7e9abe32194bd1628084ab47624ad7c5' })));
+        return (index.h(index.Host, { key: '4a3a8c5f0ae97dae39e77134409ceeb585cc8ed2' }, 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, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), index.h("slot", { key: 'acaf72f6d91de81ca677fbf60f7ec769cb6b1bef' })));
     }
 };
 LsToolbar.style = lsToolbarCss;
 
-const lsToolboxFieldCss = ":host{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const lsToolboxFieldCss = ".ls-toolbox-field{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:white;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-toolbox-field:hover{background:var(--gray-10, #f7f8fa);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);border:1px solid var(--gray-30, #e0e2e5)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
 const LsToolboxField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.selected = index.createEvent(this, "selected");
     }
     /**
      * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.
@@ -34146,6 +34187,14 @@ const LsToolboxField = class {
      * The signer color of the element
      */
     signer = 0;
+    isSelected = false;
+    selected;
+    modeHandler(_isSelected) {
+        // When opened fire an event to let the parent handle closing other controls
+        if (_isSelected) {
+            this.selected.emit(this.formElementType);
+        }
+    }
     handleDragStart(event) {
         // Add the target element's id to the data transfer object
         event.dataTransfer.setData('application/json', JSON.stringify({
@@ -34163,8 +34212,18 @@ const LsToolboxField = class {
         }
     }
     render() {
-        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" })));
+        return (index.h(index.Host, { key: '46c05581e53608ba17ccf3c50edb3e8097028b55', draggable: "true" }, index.h("div", { key: '5f79fae515d92d0d13473cd487a0b9085f8bb093', class: 'ls-toolbox-field', style: this.isSelected && {
+                background: defaultRolePalette[this.signer % 100].s10,
+                border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
+                color: defaultRolePalette[this.signer % 100].s80,
+                boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,
+            }, onClick: () => (this.isSelected = !this.isSelected) }, index.h("div", { key: '7b8a2967e8e3406760944cf663edc152e4a7c12c', 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: 'e0ec95278d08e643544297d3f5aa26b66c3f9223', name: this.icon, size: "20" })), index.h("p", { key: 'e5be2362129ffd4e44eba9a5530c6a9d3693561f', class: "toolbox-field-label", style: this.isSelected && {
+                color: defaultRolePalette[this.signer % 100].s80,
+            } }, this.label), index.h("ls-icon", { key: '287b53ec216fe60b87c6b2f69ccc3e81795d011f', name: "drag-vertical", size: "16", color: "#787a80" }))));
     }
+    static get watchers() { return {
+        "isSelected": ["modeHandler"]
+    }; }
 };
 LsToolboxField.style = lsToolboxFieldCss;
 
@@ -34178,8 +34237,9 @@ const LsValidationTag = class {
     validationErrors = [];
     isExpanded = false;
     render() {
-        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 && this.validationErrors.length !== 0 && (index.h("div", { key: 'b02370495b444d5fdffce3b6424ebdada55da955', class: 'field-dropdown' }, index.h("div", { key: 'aa939c4bf56a8e5ba53ec3f09d76a897a3c279a9', class: 'dropdown-header' }, index.h("h2", { key: 'cf3d5932c59a742bdefd9a05007d1d6b657789cc' }, "Signature Fields Required"), index.h("p", { key: '2c231dc8f4fd0d0f14f173aae3251078551ab056' }, 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(index.Host, { key: 'c6bdded8043e03b185383f12a1f4732f94fc1d0b' }, index.h("div", { key: '75e388c633e4c0f02a597b975f018aeb88cbe30e', 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: '0f0034a85c407a98cd72caedb7719d57cbbe6419', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (index.h("ls-icon", { key: '5f6dadde5dee6d6539531d3e49c5af14e60926ff', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (index.h("div", { key: 'f69f5c8f2dcd583bfa6472806e1b15f88143e165', class: 'field-dropdown' }, index.h("div", { key: '86cc44f470f99e329ca950be1cca4af86389620b', class: 'dropdown-header' }, index.h("h2", { key: 'ec2c565524f20d85432dfbc7d218cd2c23809a36' }, "Signature Fields Required"), index.h("p", { key: '272cc03365c6a95ad68aa4d3857d0004187ca9da' }, 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 signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
             return (index.h("div", { key: idx, class: 'required-field', style: {
                     '--field-background': pallette.s10,
                     '--field-border-color': pallette.s10,
@@ -34220,23 +34280,18 @@ exports.ls_field_properties_signature = LsFieldPropertiesSignature;
 exports.ls_field_properties_text = LsFieldPropertiesText;
 exports.ls_field_size = LsFieldSize;
 exports.ls_field_type_display = LsFieldTypeDisplay;
-exports.ls_formfield = LsFormfield;
 exports.ls_icon = LsIcon;
 exports.ls_input_wrapper = LsInputWrapper;
-exports.ls_number_input = LsNumberInput;
+exports.ls_page_loader = LsPageLoader;
 exports.ls_participant_card = LsParticipantCard;
 exports.ls_participant_manager = LsParticipantManager;
 exports.ls_participant_select = LsParticipantSelect;
 exports.ls_props_section = LsPropsSection;
-exports.ls_radio_input = LsRadioInput;
-exports.ls_select_input = LsSelectInput;
 exports.ls_statusbar = LsStatusbar;
-exports.ls_text_input = LsTextInput;
-exports.ls_textarea_input = LsTextareaInput;
 exports.ls_toggle = LsToggle;
 exports.ls_toolbar = LsToolbar;
 exports.ls_toolbox_field = LsToolboxField;
 exports.ls_validation_tag = LsValidationTag;
-//# sourceMappingURL=ls-document-options.ls-document-viewer.ls-editor-field.ls-editor-table.ls-feature-column.ls-field-alignment.ls-field-content.ls-field-dimensions.ls-field-distribute.ls-field-footer.ls-field-format.ls-field-placement.ls-field-properties.ls-field-properties-advanced.ls-field-properties-autosign.ls-field-properties-container.ls-field-properties-date.ls-field-properties-email.ls-field-properties-file.ls-field-properties-general.ls-field-properties-image.ls-field-properties-multiple.ls-field-properties-number.ls-field-properties-signature.ls-field-properties-text.ls-field-size.ls-field-type-display.ls-formfield.ls-icon.ls-input-wrapper.ls-number-input.ls-participant-card.ls-participant-manager.ls-participant-select.ls-props-section.ls-radio-input.ls-select-input.ls-statusbar.ls-text-input.ls-textarea-input.ls-toggle.ls-toolbar.ls-toolbox-field.ls-validation-tag.entry.cjs.js.map
+//# sourceMappingURL=ls-document-options.ls-document-viewer.ls-editor-field.ls-editor-table.ls-feature-column.ls-field-alignment.ls-field-content.ls-field-dimensions.ls-field-distribute.ls-field-footer.ls-field-format.ls-field-placement.ls-field-properties.ls-field-properties-advanced.ls-field-properties-autosign.ls-field-properties-container.ls-field-properties-date.ls-field-properties-email.ls-field-properties-file.ls-field-properties-general.ls-field-properties-image.ls-field-properties-multiple.ls-field-properties-number.ls-field-properties-signature.ls-field-properties-text.ls-field-size.ls-field-type-display.ls-icon.ls-input-wrapper.ls-page-loader.ls-participant-card.ls-participant-manager.ls-participant-select.ls-props-section.ls-statusbar.ls-toggle.ls-toolbar.ls-toolbox-field.ls-validation-tag.entry.cjs.js.map
 
-//# sourceMappingURL=ls-document-options_44.cjs.entry.js.map
+//# sourceMappingURL=ls-document-options_39.cjs.entry.js.map