legalesign-document-viewer 0.1.3 → 0.1.4

package/dist/cjs/{ls-document-options_35.cjs.entry.js → ls-document-options_36.cjs.entry.js}

@@ -19960,12 +19960,30 @@ function debounce(func, timeout = 300) {
 // if a mutation has created a new id then update the dataitem with OLD id to the new one
 function matchData(data) {
     const newObj = data.result;
-    const fi = this.component.shadowRoot.getElementById('ls-field-' + data.obj.id);
-    console.log(fi, data);
+    const prefix = atob(data.obj.id).substring(0, 3);
     // because mutations return the ID back with the mutation name we just assume its the first (and only) JSON prop
     const id = newObj[Object.keys(newObj)[0]];
-    fi.setAttribute('id', 'ls-field-' + id);
-    fi.dataItem = { ...data.obj, id };
+    if (data.event.action === 'create') {
+        if (prefix === 'ele') {
+            const fi = this.component.shadowRoot.getElementById('ls-field-' + data.obj.id);
+            fi.setAttribute('id', 'ls-field-' + id);
+            fi.dataItem = { ...data.obj, id };
+        }
+        else if (prefix === 'rol') {
+            var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
+            this._template = { ...this._template, roles: [...this._template.roles, { ...data.obj, id }] };
+            participantManager.template = this._template;
+        }
+    }
+    else if (data.event.action === 'delete') {
+        if (prefix === 'rol') {
+            var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
+            console.log(this._template);
+            console.log(this._template.roles.filter(r => r.id !== id));
+            this._template = { ...this._template, roles: this._template.roles.filter(r => r.id !== id) };
+            participantManager.template = this._template;
+        }
+    }
 }
 // Utility function which extracts the type from any API id
 function getApiType(obj) {
@@ -20072,7 +20090,15 @@ const validationTypes = [
     { id: 26, description: '✗/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 16, typeDefault: false, inputType: 'text' },
     { id: 74, description: 'File: attach to confirmatory email to sender', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
     { id: 75, description: 'File: append to PDF, PDF files only', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
-    { id: 76, description: 'File: zip with PDF (for internal view, signed PDF for signer)', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
+    {
+        id: 76,
+        description: 'File: zip with PDF (for internal view, signed PDF for signer)',
+        formType: 'file',
+        defaultHeight: 16,
+        defaultWidth: 200,
+        typeDefault: false,
+        inputType: 'text',
+    },
     { id: 90, description: 'Drawn field.', formType: 'drawn field', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
     { id: 2000, description: 'Initials', formType: 'initials', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
     { id: 93, description: 'Regular Expression field', formType: 'regular expression', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
@@ -24344,7 +24370,7 @@ const updateRole = (role) => {
 };
 
 // Add a role
-const updateTemplate = (template) => {
+const updateTemplate = template => {
     return `
     mutation updateTemplate {
       updateTemplate(input: {
@@ -24377,9 +24403,15 @@ const getTemplate = (id) => {
             createdBy
             lastSent
             fixSignatureScale
+            groupId
             roles{
               id
+              name
+              roleType
               signerIndex
+              ordinal
+              signerParent
+              experience
             }
             elementConnection {
               templateElements {
@@ -24480,7 +24512,7 @@ class LsDocumentAdapter {
                 break;
         }
         const result = await this.execute(accessToken, query);
-        return { result, obj };
+        return { result, obj, event };
     };
     /**
      * Run a general query or mutation against the GraphQL API.
@@ -24507,6 +24539,101 @@ class LsDocumentAdapter {
     }
 }
 
+const getGroupData = (id) => {
+    return `
+        query getGroupData {
+        group(id: "${id}"){
+          id          
+          standardMessageConnection{
+            messages  {
+              id
+              name
+              default
+              body
+              created
+              modified
+            }
+          }
+          scheduleConnection {
+            schedules {
+              id
+              name
+              items {
+                id
+                daysAfter
+                frequency
+                subject
+                message
+                when
+                timeOfDay
+                skipWeekend
+              }
+              default
+            }
+          }
+          experienceConnection{
+            experiences  {
+              id
+              name
+              language
+              defaultExperience
+              witnessSameDevice
+              allowSignatureReuse
+              attachDraft
+              canReassign
+              defaultReminderSubject
+              defaultSubject
+              finalSignerEmailSubHeader
+              finalSignerEmailText
+              footerTextColour
+              forwarding
+              penDiameter
+              postSignAttach
+              postSignEmail
+              rejectedEmailSubheader
+              senderName
+              signatureAppendDate
+              signatureDoneText
+              signatureMouse
+              signatureType
+              signatureCertifiedType
+              signatureUpload
+              signatureAppend
+              signatureAppendExtra
+              signingPageText
+              textBackgroundColour
+              textFontColour
+              typedSignatureFixedSize
+              created
+              modified
+              witnessingRequiresSignerSMS
+              witnessingRequiresWitnessSMS
+            }
+          }
+          attachmentConnection {
+            attachments {
+              id
+              filename
+              autoAttach
+              description
+              created
+            }
+          }
+          contactConnection {
+            contacts{
+              id
+              firstName
+              lastName
+              email
+              phoneNumber
+              name
+            }
+          }
+        }
+      }
+      `;
+};
+
 const lsDocumentViewerCss = "*,*::before,*::after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:host{display:flex;flex-direction:row;width:100vw;height:100vh;margin:0px;padding:0px}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{border-radius:16px;border:1px solid var(--gray-30, #edeff2);background:var(--white, #fff);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:21.25rem;margin:1rem;min-width:21.25rem;max-height:100%}.left-box-inner{position:relative;display:flex;height:100%;padding:0.75rem;gap:0.75rem}.rightBox{width:200px;border:1px gray solid;width:470px;min-width:390px;padding:4px;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px}#ls-mid-area{display:flex;flex-direction:column;width:100%}.document-frame-wrapper{position:relative;padding:0 1.25rem;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;overflow-y:auto}.spacer{min-height:5.5rem;width:100%}#ls-document-frame{position:relative;height:98vh;max-width:100%;max-height:100%;margin:0px;padding:2px;scrollbar-width:auto;scrollbar-color:auto}.prevButton{position:relative;bottom:30px}.nextButton{position:relative;bottom:30px}.fieldBox{z-index:1000}#ls-box-selector{position:absolute;visibility:hidden;background-color:transparent;border:1px rgba(71, 71, 71, 0.716) dashed}#ls-editor-form{display:flex;width:100vw;max-height:calc(100vh - 2.25rem);position:relative;background:var(--gray-10, #f7f8fa);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset}.hidden{visibility:hidden;display:none;width:0px}.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}.fields-box{display:flex;flex-direction:column;gap:0.75rem}.page-header{display:flex;height:2.25rem;gap:0.5rem;padding:0.25rem 0.75rem;justify-content:center;align-items:center}.header-text-1{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem}.header-text-2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem}.properties-header{display:flex;padding:1rem;gap:0.75rem;align-items:center;border-bottom:1px solid var(--gray-20, #edeff2)}.properties-header-title{color:var(--gray-100, #45484d);width:100%;font-size:1.5rem;font-style:normal;font-weight:500;line-height:2rem;}.properties-header-icon{display:flex;padding:0.5rem;border-radius:0.625rem;background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}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%}.field-properties-outer{position:relative;height: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)}";
 
 pdfExports.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js';
@@ -24563,6 +24690,7 @@ const LsDocumentViewer = class {
     pageNum = 1; // hardcoded to start at the page 1
     signer = 0; // hardcoded to start at the page 1
     _template;
+    _group;
     selected;
     /**
      * An ease of use property that will arrange document-viewer appropraitely.
@@ -24672,10 +24800,7 @@ const LsDocumentViewer = class {
     mutateHandler(event) {
         console.log(event);
         if (this.token)
-            event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => {
-                if (me.action === 'create')
-                    matchData.bind(this)(result);
-            }));
+            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
     updateHandler(event) {
@@ -24684,6 +24809,7 @@ const LsDocumentViewer = class {
     }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
+        console.log(event.detail);
         var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
         if (toolbar)
             toolbar.dataItem = event.detail;
@@ -24767,6 +24893,7 @@ const LsDocumentViewer = class {
             elementConnection: { ...newTemplate.elementConnection, templateElements: fields },
             roles: preparedRoles,
         };
+        console.log(this._template);
     }
     /**
      * Render the page based on pageNumber
@@ -24825,7 +24952,6 @@ const LsDocumentViewer = class {
     }
     // internal forced change
     syncChange(update) {
-        console.log('sync');
         if (getApiType(update.data) === 'element') {
             if (update.action === 'create') {
                 const newData = { ...update.data, page: this.pageNum };
@@ -24892,10 +25018,12 @@ const LsDocumentViewer = class {
         });
     }
     async load() {
+        // Get all template and group listing data.
         try {
             const result = (await this.adapter.execute(this.token, getTemplate(this.templateid)));
             this.parseTemplate(JSON.stringify(result.template));
-            console.log(this._template, '_template');
+            const resultGroup = (await this.adapter.execute(this.token, getGroupData(this._template.groupId)));
+            this._group = resultGroup.group;
             this.initViewer();
         }
         catch (e) {
@@ -24910,7 +25038,7 @@ const LsDocumentViewer = class {
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: '5211ee24231dedce593a1b638daa121267cfbf75' }, index.h(index.h.Fragment, null, index.h("div", { key: '5f0b68c90b8935e4d9a0a37f70b1e36d669d2c02', class: "page-header" }, index.h("p", { key: 'dcd2efb1551dc8e7082e2fa25a11055125527b83', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '59c33765a7ec5ff160fe5a058acdc18e017a162c' }, "/"), index.h("p", { key: '108722e31b9560fea2b42f197f98203e03c07b26', class: "header-text-2" }, "Template Name")), index.h("form", { key: '2681b25088e5f78e5169e4eccc32d8e7b9651887', 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: 'f0fc2b823aa34e9602080b6f43fa3d6a17644905' }, index.h(index.h.Fragment, null, index.h("div", { key: '9df7db9dd181820cc6c192edc1a93984a8a027a7', class: "page-header" }, index.h("p", { key: '43e253591b967eff115f0e95f39c42dda5370f65', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '27a2c45ef973ed2a39a88506dd4a3e36748fa861' }, "/"), index.h("p", { key: 'a31c7b901fe689d11208fc7dccc76838fbb126d0', class: "header-text-2" }, "Template Name")), index.h("form", { key: '7bad0edc525c32943bea2a39eca6de3515287263', 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;
@@ -24920,10 +25048,10 @@ const LsDocumentViewer = class {
                     participantManager.template = this._template;
                 }
                 this.manager = manager.detail;
-            } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", color: this.signerColor(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", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", color: this.signerColor(this.signer) }), index.h("div", { class: 'expand-fields-row' }, index.h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true, onClick: () => (this.expandfields = !this.expandfields) }), 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", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "signature", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", color: this.signerColor(this.signer) }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), this.showrightpanel && !this.displayTable && (index.h("div", { class: this.selected && this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
+            } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, this.signer > 0 ? (index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", color: this.signerColor(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", color: this.signerColor(this.signer) })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", color: this.signerColor(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", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", color: this.signerColor(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", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", color: this.signerColor(this.signer) }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), this.showrightpanel && !this.displayTable && (index.h("div", { class: this.selected && this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
                 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("div", { key: '31cd692fde3f164d578b7ddc362cb1e663a51b4d', id: "ls-mid-area" }, index.h("ls-toolbar", { key: 'f696e4f47618440e27d8233aa2d5ac931374afb5', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), index.h("div", { key: '18e06d7f77ad6d31e8fbc98ff2a01c1d3ec47361', class: 'document-frame-wrapper' }, index.h("div", { key: '67565650c5f50326f944ef09787ee6a72c10d203', class: 'spacer' }), index.h("div", { key: '7cf6ab23d1553d8dc9910546f8085f7558cbefcd', id: "ls-document-frame" }, index.h("canvas", { key: 'f8d2d988a2b668224e63982029c55a102b5b7729', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: 'c33d5c80ef5ae794d85be860524b809d84ea108b', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: 'd0cef83695bc3e2afceadcea12fb5563788489a9', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '5b814c90c929b917b9f8f0bfe1c6476294b4dfb1', 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("div", { key: '776dff168c249752f400db7b80e740f3e2684e60', id: "ls-mid-area" }, index.h("ls-toolbar", { key: '7084a21f22f891d6fb33c1642b6167dbe674268f', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), index.h("div", { key: '8276d3e37a4171b82ab9d5d9913447a23e583d91', class: 'document-frame-wrapper' }, index.h("div", { key: '746d82daa6ebdd758c12f343d88ee7d8cc6742a6', class: 'spacer' }), index.h("div", { key: '4f5c297f03666429ad49331c768413b48a5ec397', id: "ls-document-frame" }, index.h("canvas", { key: 'f3042a35c1f9b9b91973cb87e11019a2488687a3', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: '9005b00b5e5b56c568a26ee79be8636c8280bb93', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '88ba70e9e18d000cca60eaaa77bf976e0e019fa6', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '634e045de512429e15fff2680def5ce870bf2142', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -25046,11 +25174,10 @@ const LsEditorField = class {
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        console.log('Rendering ls-editor-field', this.dataItem);
-        return (index.h(index.Host, { key: 'ddff7fdaa6832313753e0fb32b085425bddb9962', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, index.h("div", { key: '43c0e90e8d68462a34fdb4d31a90cf08a5c87994', class: {
+        return (index.h(index.Host, { key: 'f4ab6bc46e4cdbd1b2bd3b18d08703369af685b9', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, index.h("div", { key: '8b8a45c0acdc4342f95abf5884b60064408c2562', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, index.h("input", { key: 'f7e8a0aadcb0c08c0c1b1f89f8b2cee4fddb362e', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), index.h("div", { key: 'f0446b10d267911421007a39634665fd3fc52e46', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
+            } }, index.h("input", { key: '18d0df23d55da5ca5e9a1ead1bf32797b21c8e70', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), index.h("div", { key: '1756931604edf30a6e30b055f56b70e07dd077a8', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
     }
     static get watchers() { return {
         "selected": ["watchSelectedHandler"]
@@ -25122,7 +25249,7 @@ const LsFeatureColoumn = class {
 };
 LsFeatureColoumn.style = lsFeatureColumnCss;
 
-const lsFieldAlignmentCss = ":host{display:inline-block;vertical-align:middle}button{display:inline-flex;background-color:transparent;min-width:24px;min-height:24px;border-radius:0.5rem;margin:0.25rem;width:27px;height:27px;justify-content:center;vertical-align:middle;border:0}button:hover{background-color:rgb(219, 219, 219)}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 lsFieldAlignmentCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.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:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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 LsFieldAlignment = class {
     constructor(hostRef) {
@@ -25138,7 +25265,7 @@ const LsFieldAlignment = class {
     alter(diff) {
         console.log(diff);
         const diffs = this.dataItem.map(c => {
-            return { action: "update", data: { ...c, ...diff } };
+            return { action: 'update', data: { ...c, ...diff } };
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
@@ -25146,18 +25273,19 @@ const LsFieldAlignment = class {
     }
     right() {
         const rightmost = this.dataItem.reduce((rightmost, current) => {
-            return (current.left + current.width) < rightmost ? rightmost : (current.left + current.width);
+            return current.left + current.width < rightmost ? rightmost : current.left + current.width;
         }, 0);
         console.log(rightmost);
-        const diffs = this.dataItem.map((c) => {
+        const diffs = this.dataItem.map(c => {
             const newLeft = rightmost - c.width;
             return {
-                action: "update", data: {
+                action: 'update',
+                data: {
                     ...c,
                     left: newLeft,
                     ax: newLeft,
-                    bx: newLeft + c.width
-                }
+                    bx: newLeft + c.width,
+                },
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -25172,15 +25300,16 @@ const LsFieldAlignment = class {
         console.log(addcentres);
         const cp = addcentres / this.dataItem.length;
         console.log('centerposition', cp);
-        const diffs = this.dataItem.map((c) => {
+        const diffs = this.dataItem.map(c => {
             const newLeft = c.left + (cp - (c.left + c.width / 2));
             return {
-                action: "update", data: {
+                action: 'update',
+                data: {
                     ...c,
                     left: newLeft,
                     ax: newLeft,
-                    bx: newLeft + c.width
-                }
+                    bx: newLeft + c.width,
+                },
             };
         });
         console.log(diffs);
@@ -25206,15 +25335,16 @@ const LsFieldAlignment = class {
             return total + (current.top + current.height / 2);
         }, 0);
         const cp = addmiddles / this.dataItem.length;
-        const diffs = this.dataItem.map((c) => {
+        const diffs = this.dataItem.map(c => {
             const newTop = c.top + (cp - (c.top + c.height / 2));
             return {
-                action: "update", data: {
+                action: 'update',
+                data: {
                     ...c,
                     top: newTop,
                     ay: newTop,
-                    by: newTop + c.height
-                }
+                    by: newTop + c.height,
+                },
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -25223,17 +25353,18 @@ const LsFieldAlignment = class {
     }
     bottom() {
         const lowest = this.dataItem.reduce((acc, current) => {
-            return acc > (current.top + current.height) ? acc : (current.top + current.height);
+            return acc > current.top + current.height ? acc : current.top + current.height;
         }, 0);
-        const diffs = this.dataItem.map((c) => {
+        const diffs = this.dataItem.map(c => {
             const newTop = lowest - c.height;
             return {
-                action: "update", data: {
+                action: 'update',
+                data: {
                     ...c,
                     top: newTop,
                     ay: newTop,
-                    by: newTop + c.height
-                }
+                    by: newTop + c.height,
+                },
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -25241,7 +25372,9 @@ const LsFieldAlignment = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '1de454622dacec573aa846f4abd4a66366b0341b' }, index.h("div", { key: '76141f1ec6aa2f4f3bd38854864168dd3595eaca' }, index.h("button", { key: '9c6ca0b268fa144f3e443c06266650685c74eca5', onClick: () => this.left(), class: 'ls-round-button', "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: '2b6e3e44822723880243799cd86a4d63fecfc861', name: "field-alignment-left" })), index.h("button", { key: 'e94a3ff0d3bfb5a604578753fa15d5a27fa6d135', onClick: () => this.center(), class: 'ls-round-button', "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: 'fe6055521f6e75ba05ee952cc3eb2cc09d27581f', name: "field-alignment-centre" })), index.h("button", { key: 'e4fe414fbad13459147d4fa031b1b1aeba977326', onClick: () => { this.right(); }, "aria-label": "Align selected fields vertically about their right edge.", class: 'ls-round-button', "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: 'ff29fe2d2ed86c236601791ff257146781929fe8', name: "field-alignment-right" })), index.h("button", { key: '790ab98cba5609f1013dedbac7b491787d4358bc', onClick: () => this.top(), class: 'ls-round-button', "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: '0836f4f20b4f9fac89460b26d0f925b9dd555a93', name: "field-alignment-top" })), index.h("button", { key: '6c09a301cf4f7dd260bf3ddb5736fb1500433332', onClick: () => this.middle(), class: 'ls-round-button', "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: '3d40860e65401b3cdc60a95bcec528b218f1b14b', name: "field-alignment-middle" })), index.h("button", { key: '2b73ac8e8da856fc5953700f10f5004ac9d31db4', onClick: () => this.bottom(), class: 'ls-round-button', "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: '89b5cfc9f8183122f0e7b50398ec86abfab375e9', name: "field-alignment-bottom" }))), index.h("slot", { key: 'b62dc4ce2f4e2105e87e19e21b660149907a5f0c' })));
+        return (index.h(index.Host, { key: '18c2511fb41da7dbae34231108af7a0553ddd5e9' }, index.h("div", { key: '914df99828f9994f8398fe3cf1de0db1e8bb8bc0', class: 'ls-field-properties-section' }, index.h("div", { key: 'eb2a2ead947b5ccb161da1fb711ba0aecd4f1f1e', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'eedf0321ec75bb9670e926a2951fd85cd02196f7', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '87ebbfeb998ce91a216b624332dc70019cd7a899', 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: '6fb940d7a554c6750eda85dced92a3e762ef5481', class: 'multi-button-group-row' }, index.h("div", { key: '0dae4f26f528c7797148101e5552856680d707b0', class: 'button-group' }, index.h("button", { key: '0184ce8b491fc9ac2775d10dd18402239352d8b4', 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: '2dd926828e25e526bdbbfe8f42a82ccf2f1d4383', name: "field-alignment-left" })), index.h("button", { key: 'a6115447dee38c833bd63c7bf773b8cd33645749', 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: '1d54aa128a5ae7353e2f976b5985f4523fccdc7b', name: "field-alignment-centre" })), index.h("button", { key: 'd61a31635f469007f65c1314c6f3404bfb7894f4', 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: '6401e05b124c616922b7f5542d41de506fa1ae04', name: "field-alignment-right" }))), index.h("div", { key: '5a924ac1d3d04a626ffb8a19f95c4ee7c7a78d5b', class: 'button-group' }, index.h("button", { key: '3b03cbc294b1fae5e19465077880ad347c0b5251', 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: 'c16889d194be3d2b5f6dedb0a9db55902b125eef', name: "field-alignment-top" })), index.h("button", { key: '50e776898be6e43c642d666e76ef139f62ad014e', 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: '4d1b4051bc6eafb28ef20d96f1f7abf70cbc2338', name: "field-alignment-middle" })), index.h("button", { key: '405eca6c636b9e4fef7223bd0882f3b52d54166b', 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: 'e4e82550d98afdacaa79cccef417128940e6d148', name: "field-alignment-bottom" }))))), index.h("slot", { key: '34964508c02209a6ccea4855cfec5d94078471ea' })));
     }
 };
 LsFieldAlignment.style = lsFieldAlignmentCss;
@@ -25283,12 +25416,12 @@ const LsFieldDimensions = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '73cdde8b19406863340847040187bbb977603b00' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '663f8d34fb4ecf0fbb2ea6c047f088eee43648c6', class: 'ls-field-properties-section' }, index.h("div", { key: '949ca350537667bd72f89b3b82e9fdd7ebaced1b' }, "Height: ", index.h("input", { key: '7bc09e13508cff5529b3970b8a69ba1f281ab37d', value: '', onChange: e => this.alter({ height: e.target.value }), width: "30" })), index.h("div", { key: 'f2c330ebc3e182fe244d5e436d768adad1eb29dc' }, "Width: ", index.h("input", { key: '90b27990d0155f85f9cf4b452c0742e36a783dc4', value: '', onChange: e => this.alter({ width: e.target.value }), width: "30" })), index.h("div", { key: 'ef3265609f1697fe7f46637c15af085ba8c1dd1c' }, "Top: ", index.h("input", { key: 'af0b0202d72ce839a70e6174c99c26ed6ab80436', value: '', onChange: e => this.alter({ top: e.target.value }), width: "30" })), index.h("div", { key: 'd7c7d28fa7000a25cf55ac47e79c79238ce1e925' }, "Left: ", index.h("input", { key: '8c5731c8b8c7d5738d94c60e6cfa17fc11d7ed96', value: '', onChange: e => this.alter({ left: e.target.value }), width: "30" })))), this.isSingle(this.dataItem) && (index.h("div", { key: '22e9f16686a8075401a16086f4e9b09f65798dda', class: 'field-set' }, index.h("div", { key: '411a6e0f2580459aad7a62d09c34224e4af44622', class: 'ls-field-properties-section' }, index.h("div", { key: '448d733c7c6bcc07a2457ba4bc46ef851256e40e', class: 'ls-field-properties-section-text' }, index.h("p", { key: '149203d691287f9ac2c6bd0b8ef68a4b7e8409e8', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: '8ef2e8b510cbb86432e474fb01c108c7d05dbbec', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: '22e50be04d03b9b9e523499bdb8412d5a454ff77', class: 'input-row' }, index.h("div", { key: 'eb97defffd601718969d2acb529210635a069c50', class: 'input-wrapper' }, index.h("ls-icon", { key: '5ecc97592382a5a6db7bd1b3c4e2677a03ce1069', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '5f11069ab165fb1e97ff4097b5ccc156080dc6c1', 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: '81e138732d6f81ee11f7bfe1945342e0a2b6266f', class: 'input-wrapper' }, index.h("ls-icon", { key: '3c36f16870153d2fe2dc4f6feeeb1a7747b18e4c', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: '611ecd3368756add347304dfb9a558a21fa1250b', 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: '7e63ec19b978270ea21198a55c38a2bdd80d92c5', class: 'ls-field-properties-section' }, index.h("div", { key: '3d5b05fa48e12fadbf625653fe8a1d717b14b656', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'f6ce2fc2a0bac271c76c43ac010b8fdfb1aa868a', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: '73a44189b9f56cb9f92ce56dd19be6a5ac3c164d', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '9b0ade957ee3c361dfc8bffa5c669b9e0fc48eea', class: 'button-group' }, index.h("button", { key: 'a3504f8b55172bdc02af10f03bea7e94374dd013', disabled: true }, index.h("ls-icon", { key: '05e97eb64ffbd2bbc59b3c68b5fc654f7108db95', name: "field-scale" })), index.h("button", { key: 'f5f5a7cfdb05458e52611480480d2503b4aa7b2b', disabled: true }, index.h("ls-icon", { key: '6f5b4f2c0a9b56f0e8fcc274b962c9390c4f64cf', name: "field-match-width" })), index.h("button", { key: 'c6671a937f8171f4fd31141923645be9d4d3383c', disabled: true }, index.h("ls-icon", { key: '9bdffc49445a20d17933e399b255812768e9b9d4', name: "field-match-height" }))))))));
+        return (index.h(index.Host, { key: '056c4e012cde64ce461fb954f393cc5eb264c4f1' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '2cd01260598ea4f6cd7b40dffd502c6a642007c6', class: 'ls-field-properties-section' }, index.h("div", { key: 'e843fa2769ecb1889677ad85e87a79d1dc8b03f6', class: 'ls-field-properties-section-text' }, index.h("p", { key: '140e8ffaea2a163387345041f2039b68c8393012', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: 'abef468582e2e7829f869a14539c22f1db839169', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: 'dd5819291b738c8866f84d88d85f1f1d78c4987e', class: 'input-row' }, index.h("div", { key: '87d5c1913299a43e1cbd093e2c579591bdc80327', class: 'input-wrapper' }, index.h("ls-icon", { key: '861a92289f7383ab6773bca9b2e240332e720a04', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: 'aa1fc66abfa15670e682d39304178f91f3e9d05d', class: 'has-leading-icon', aria: "field-width", id: "field-width", onChange: e => this.alter({ width: e.target.value }) })), index.h("div", { key: '3c4293cae6df7fb0447c670e32f7fd4f2bcedfee', class: 'input-wrapper' }, index.h("ls-icon", { key: '4042d2ce39b5aa40e712673651ab82ee4c0e1ff2', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'd944e7c0f95b6351e655d8230128a160c5aca6b8', 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: '09932bc4e2e6cc4f2595f481889d1e9dccaa31b6', class: 'field-set' }, index.h("div", { key: 'a0d3fdf6312d4952292f81214817b85319749795', class: 'ls-field-properties-section' }, index.h("div", { key: '048272dea7043f05209e3319a3f4095607232641', class: 'ls-field-properties-section-text' }, index.h("p", { key: '692142057d98b1192a8a3fedb8ba807fb0ef27a4', class: 'ls-field-properties-section-title' }, "Height and Width"), index.h("p", { key: 'd1d6b5ca74514d475e957c35b3554a215057f6ec', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), index.h("div", { key: '3fc79c753561607272fc2a66a7a230160f4d1e58', class: 'input-row' }, index.h("div", { key: '6f0b824e7da82930e25759a617d8309c89c9a376', class: 'input-wrapper' }, index.h("ls-icon", { key: '73182488cca3bb85fc8ae40496e36beac68ec295', id: "selectLeadingIcon", name: "field-match-width" }), index.h("input", { key: '6fbaaeeaeae6d3b688725a2285d58ef0ac1e8219', 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: 'f85adcc366ccb56ce1f25eba32c6ea4ed3947f67', class: 'input-wrapper' }, index.h("ls-icon", { key: '78c2d0da09465b932728c3a6ed1d3b14895f3687', id: "selectLeadingIcon", name: "field-match-height" }), index.h("input", { key: 'f43725d395b60b393d7989b22198ffbfb8abed15', 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: '678e33f56594bde997a4d679fcf1d03672f9af44', class: 'ls-field-properties-section' }, index.h("div", { key: '3365548c87c4ac6f02c74fcf8b1780ebda03d4c4', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'ce7c9653b7ddaf6b256a4cb4bef3cbe3bcddd65a', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: '13b174384f825593dc13d22ce6eb3ebb0b7eb954', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: 'c26db33451376140452a9d0722bae531e84a3382', class: 'button-group' }, index.h("button", { key: '8e1a002ea92227d531dd4d5f6760f4cb83866dd3', disabled: true }, index.h("ls-icon", { key: 'b11fb135a1183a4e5de10942852d3bc34f52f532', name: "field-scale" })), index.h("button", { key: '9a8a2aa33fd2ee14abb40e099e666f9f37137e25', disabled: true }, index.h("ls-icon", { key: '5fc371d3a123cc4848eb5514f90a6b6b61056e50', name: "field-match-width" })), index.h("button", { key: '1ec86eddacbbaa6061777562997634dd760d0fac', disabled: true }, index.h("ls-icon", { key: 'e2d3e787115ee66f61eda48d22be2d063beaac7e', name: "field-match-height" }))))))));
     }
 };
 LsFieldDimensions.style = lsFieldDimensionsCss;
 
-const lsFieldDistributeCss = ":host{display:inline-block;vertical-align:middle}button{display:inline-flex;background-color:transparent;min-width:24px;min-height:24px;border-radius:0.5rem;margin:0.25rem;width:27px;height:27px;justify-content:center;vertical-align:middle;border:0}button:hover{background-color:gray}.ls-toolbar-numeric{width:45px;max-height:18px;margin:0px;padding:0px}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 lsFieldDistributeCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-toolbar-numeric{width:45px;max-height:18px;margin:0px;padding:0px}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.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:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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 LsFieldDistribute = class {
     constructor(hostRef) {
@@ -25305,7 +25438,7 @@ const LsFieldDistribute = class {
     alter(diff) {
         console.log(diff);
         const diffs = this.dataItem.map(c => {
-            return { action: "update", data: { ...c, ...diff } };
+            return { action: 'update', data: { ...c, ...diff } };
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
@@ -25314,8 +25447,8 @@ const LsFieldDistribute = class {
     distributeHorizontal() {
         var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
         var avgspace = 0;
-        const sorted = this.dataItem.sort((a, b) => (a.left - b.left));
-        if (spacing.value !== "") {
+        const sorted = this.dataItem.sort((a, b) => a.left - b.left);
+        if (spacing.value !== '') {
             avgspace = parseInt(spacing.value);
         }
         else {
@@ -25323,21 +25456,22 @@ const LsFieldDistribute = class {
             for (var i = 1; i < sorted.length; i++) {
                 const c1 = sorted[i - 1];
                 const c2 = sorted[i];
-                space = space + (((c2.left - c1.left - c1.width)) <= 0 ? 0 : (c2.left - c1.left - c1.width));
+                space = space + (c2.left - c1.left - c1.width <= 0 ? 0 : c2.left - c1.left - c1.width);
             }
             avgspace = Math.floor(space / sorted.length);
         }
         var nextleft = sorted[0].left;
-        const diffs = sorted.map((c) => {
+        const diffs = sorted.map(c => {
             const newLeft = nextleft;
             nextleft = nextleft + c.width + avgspace;
             return {
-                action: "update", data: {
+                action: 'update',
+                data: {
                     ...c,
                     left: newLeft,
                     ax: newLeft,
-                    bx: newLeft + c.width
-                }
+                    bx: newLeft + c.width,
+                },
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -25347,7 +25481,7 @@ const LsFieldDistribute = class {
     distributeVertical() {
         var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space');
         var avgspace = 0;
-        const sorted = this.dataItem.sort((a, b) => (a.top - b.top));
+        const sorted = this.dataItem.sort((a, b) => a.top - b.top);
         if (spacing.value !== '')
             avgspace = parseInt(spacing.value);
         else {
@@ -25355,21 +25489,22 @@ const LsFieldDistribute = class {
             for (var i = 1; i < sorted.length; i++) {
                 const c1 = sorted[i - 1];
                 const c2 = sorted[i];
-                space = space + (((c2.top - c1.top - c1.height)) <= 0 ? 0 : (c2.top - c1.top - c1.height));
+                space = space + (c2.top - c1.top - c1.height <= 0 ? 0 : c2.top - c1.top - c1.height);
             }
             avgspace = Math.floor(space / sorted.length);
         }
         var buffer = sorted[0].top;
-        const diffs = sorted.map((c) => {
+        const diffs = sorted.map(c => {
             const newTop = buffer;
             buffer = buffer + c.height + avgspace;
             return {
-                action: "update", data: {
+                action: 'update',
+                data: {
                     ...c,
                     top: newTop,
                     ay: newTop,
-                    by: newTop + c.height
-                }
+                    by: newTop + c.height,
+                },
             };
         });
         this.dataItem = diffs.map(d => d.data);
@@ -25377,11 +25512,44 @@ const LsFieldDistribute = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '6ca0535c822fbcdb052057da7644a9c5eab0e8b1' }, index.h("div", { key: '4f83492c37b617919a913542596183abb4bc8664', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, index.h("button", { key: '8c3e4c2b5dd988ce7831e08a056edb692c18a41e', class: 'ls-round-button', 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: 'ece9b52f4d1ea3d63f4924f81f9500bfdfe73dbc', name: "field-distribute-horizontally" })), index.h("input", { key: '44dab62b362152f716d33575258b53b79a66e037', type: "number", class: "ls-toolbar-numeric", id: "ls-fix-horizontal-space", value: "", size: 4, min: 0, max: 9999 }), index.h("button", { key: '33599a586886da26daeb3fcfc575b031c666ade9', onClick: () => { this.distributeVertical(); }, class: 'ls-round-button', "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: '2c7f851fad3670d31c4c15591666c7144bc1bd52', name: "field-distribute-vertically" })), index.h("input", { key: '2747a98baadeb6946f6b087891811a16cac586e7', type: "number", class: "ls-toolbar-numeric", id: "ls-fix-vertical-space", value: "", size: 4, min: 0, max: 9999 })), index.h("slot", { key: '43a76d8a2deebdbe3bcb0a0f70ad15c88b0ee3b6' })));
+        return (index.h(index.Host, { key: '31c935ac5eeb7c9a73dc5ad5f941a2dcd4d3295b' }, index.h("div", { key: '8d168174c168f696027e15e54fd92f2f394b71b2', class: 'ls-field-properties-section' }, index.h("div", { key: 'e6e6a3b4835d0e091f951ddae3beeeb1895d52b2', class: 'ls-field-properties-section-text' }, index.h("p", { key: '5571e2d43ff44c17633fe0c61d756454fe41f4f9', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: '1032830a8fbb0799b47c60990977d7a5bde7ef67', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: 'd2a7351957f694e3ed980b8b6ebd9730dfb0f035', class: 'button-group' }, index.h("button", { key: 'ca033084212230bb5ff9c9814384acdfd363231d', 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: 'c775cf090f32d07b879a4e09135f85b37e1658f1', name: "field-distribute-vertically" })), index.h("button", { key: '636d15dbbaa25c23abe8d7b399db1d2fcb154c8d', 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: '36d0b1fce2431a7c34b786ae8afe068333950ec6', name: "field-distribute-horizontally" })))), index.h("div", { key: 'a8dc96e142e4b1397f9804dfdc55c23404998d1f', class: 'ls-field-properties-section' }, index.h("div", { key: '6d7e540f68b60df6e5a8059e7f3ebcb4002d378f', class: 'ls-field-properties-section-text' }, index.h("p", { key: '5c2aefd66af261b510310e793b1ccbea099a5e60', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: '428e69290f2174a33f633ae345d9a2b352d828b8', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '25d85491487f497d4d1f8f4c3960a42ed42b529e', class: 'input-row' }, index.h("div", { key: 'ff7ed1bf39a83fef8db2fa29a2384a5869cb2650', class: 'input-wrapper' }, index.h("ls-icon", { key: '10af9dfa4c9f67f8e0985f01d63694d05a13b1a3', id: "selectLeadingIcon", name: "field-distribute-vertically" }), index.h("input", { key: '5fe66735a8f412a886cac76cbb5fc41339904fab', type: "number", class: 'has-leading-icon', id: "ls-fix-vertical-space", value: '', size: 4, min: 0, max: 9999 })), index.h("div", { key: '018e5b1ccfd5d1fe46d4760e0f259e2f4226f493', class: 'input-wrapper' }, index.h("ls-icon", { key: '5f89086d414185a7ef7a166aff86293d48daefa9', id: "selectLeadingIcon", name: "field-distribute-horizontally" }), index.h("input", { key: 'a694f799b6ddf191f4dc93b18cf7a90c2fd57760', type: "number", class: 'has-leading-icon', id: "ls-fix-horizontal-space", value: '', size: 4, min: 0, max: 9999 })))), index.h("slot", { key: 'adc96cac64ba94af217a91212e780e00655b250d' })));
     }
 };
 LsFieldDistribute.style = lsFieldDistributeCss;
 
+const lsFieldFooterCss = ":host{display:block}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}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.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}button{display:flex;gap:0.5rem;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;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}";
+
+const LsFieldFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate");
+        this.update = index.createEvent(this, "update");
+    }
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
+    dataItem;
+    mutate;
+    update;
+    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()) } }]);
+    };
+    render() {
+        return (index.h(index.Host, { key: 'd46fe451236281986f1e7a1a4e27c9ad4b9433d2' }, index.h("div", { key: 'd6e7c0b96b8b07c83c4863132c191bc86dfd103c', class: 'button-footer' }, index.h("button", { key: '16cc56e2701db07c0b1a0b65a2573cf3e36565c9', class: 'secondary', onClick: () => this.duplicateField() }, index.h("ls-icon", { key: 'c5c0d8f6445ae55fad539b34100b9f2c332462db', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: 'a427630acdd345cccc8fcf15f175f872684e2bde', class: 'destructive', onClick: () => this.deleteField() }, index.h("ls-icon", { key: '6630ba504e074deef33aa4064aa964408597564b', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: 'a6bba56933467a4d02d77af53154687fd8d66645' })));
+    }
+};
+LsFieldFooter.style = lsFieldFooterCss;
+
 const lsFieldFormatCss = ":host{display:flex;flex-direction:row}.ls-field-format-bar{display:flex;flex-direction:row;gap:0.5rem}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 LsFieldFormat = class {
@@ -25406,25 +25574,25 @@ const LsFieldFormat = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '919c4cad28c6c7b3b30543efe37b51f45400b012' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '1846d004c25acc29d82e29f837fd85a07c2712ed', class: 'ls-field-format-bar' }, index.h("div", { key: 'a0a2494dfd0bdc36e32f9c6903642318378b264c', class: " input-wrapper" }, index.h("ls-icon", { key: '53dfe2a957bea873366196d118298b9f0bcaf0e5', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '834ac15d653e94a400d6d4a9eb763225d552ac6a', onChange: input => {
+        return (index.h(index.Host, { key: '87a1481dfae83e9000fcd8372f5dcda740d0a8cb' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '73e8800061971f09ce5f198de0ce20b05b643fd8', class: 'ls-field-format-bar' }, index.h("div", { key: 'b16b871e8399430250f1fc7782f4cbe078865bc4', class: " input-wrapper" }, index.h("ls-icon", { key: 'c4b2b1cb98cbeb08b4e1979899a020c56a1c17b3', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '50ed9152533733b9ac1a409f7501fba333a1773a', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: '2c7001063d89465eeff4e10fed8ac98f1f6c3be9', value: "arial" }, "Arial"), index.h("option", { key: '1f4ba10ff6ab3de9fb4a0b812072e33b84fea2e0', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '4c16c8128051662ca84db0054016f5214f618753', value: "courier" }, "Courier"), index.h("option", { key: '6f5c2d1d0e264bfbd7a3199f3dc8db03445a9885', value: "helvetica" }, "Helvetica"), index.h("option", { key: '46b1b834980ef46daf5134ed3069118daa12a48f', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '8032bea8e461d25a79b6341b889a0d02f454e4c2', id: "selectorIcon", name: "selector" })), index.h("div", { key: '3a4a7c4e887ccc3b19879b06b5b9f205912659fc', class: "input-wrapper" }, index.h("ls-icon", { key: 'd99531039fdfc0030d37376eef92035dbbc76325', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '043eb9f72cf5e21dc4710c2a70dd390753d58c56', width: "30", size: 4, class: 'has-leading-icon' })), index.h("div", { key: 'e1659f4c141d766dd7b886f0528d6600cef92a48', class: 'button-group' }, index.h("button", { key: '97988aa985a84bf1a6a3dd73c5aee4eead811acc', onClick: () => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '08f846a77f4eb52862cc8bd2af00f17d2f9ad333', value: "arial" }, "Arial"), index.h("option", { key: 'f414dbc7662a502af008d5924d31591d564abff5', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '9f0b044404e41e1729f8e65ab7ddff7ccce158d7', value: "courier" }, "Courier"), index.h("option", { key: '03772f79ca32fba7f089d75e54f2db5a6ae3199d', value: "helvetica" }, "Helvetica"), index.h("option", { key: '58f3bdd4a2f1b3c1e9096b547255f863b612eafa', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: 'f815be5900f9e17614aa7ac1223d703e744d8129', id: "selectorIcon", name: "selector" })), index.h("div", { key: 'ae3f39557288535143ed04cc0eeba2c1f93f0218', class: "input-wrapper" }, index.h("ls-icon", { key: '76667415983f8e27339a54f47015b7679055fe4d', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: '5cc8c26f5540db91f2c313498a02dfc08f847d7a', width: "30", size: 4, class: 'has-leading-icon' })), index.h("div", { key: 'f6b34b35ee676e4e944f719d5cfedbedbbb44eca', class: 'button-group' }, index.h("button", { key: '68aa5ac2abcbb678914637448dc0e1286dcd9f60', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: 'ef2b471278c0891ff590b2e66f06dd3d7cc012d7', name: "menu-alt-2" })), index.h("button", { key: '8288c246d2d84d0dad580ff10c021316a1663561', onClick: () => {
+            } }, index.h("ls-icon", { key: '978c2e4fbe2e4a86f2ec30fd73e84b519d0f3ccd', name: "menu-alt-2" })), index.h("button", { key: 'c7a4ba74b99c9959960e8c205cd95dd24ad6d142', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: '6421c04c1e4f5c478d241705056a56da87915629', name: "menu-alt-5" })), index.h("button", { key: '2b49820deae0b5033aded744e81ef45c82056f89', onClick: () => {
+            } }, index.h("ls-icon", { key: '0835c5c00ca515f011cf8a691d1d12bf39ec5156', name: "menu-alt-5" })), index.h("button", { key: '4cf995ffc52a47700fefb7b0bb8f93d9a2095bf4', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: '7d50e4dff96997a72edf1ec85a64ac239dbad905', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '807a3227a4a9227d9e4b45af198c6e46bb9b6daf', class: 'ls-field-format-bar' }, index.h("div", { key: 'a7d35f333cf9a4880f386fdc6fbe095ea16947c2', class: "input-wrapper" }, index.h("ls-icon", { key: '42962ba5d95daf9d7b42026b82f324bcdb777aa7', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: '9a42df2fe45269229ca9455ddbe37f5181aac8e3', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '481857a9a964e03463f0cc01d615cb43a6241df3', onChange: input => {
+            } }, index.h("ls-icon", { key: '9b4a269af491ed0d34d3e7a1111d07751af0e8b6', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: 'a1639d55878526264c0fdfc278f44584f25d532e', class: 'ls-field-format-bar' }, index.h("div", { key: 'a1337e8b1cc3742761188be5b4d35a395075a11c', class: "input-wrapper" }, index.h("ls-icon", { key: 'c1cfdbcab44f1758774abfabe9b6eb5a95572447', id: "selectorIcon", name: "selector" }), index.h("ls-icon", { key: 'aa586a365349e10b2c09098ffe8295fbf01f4986', id: "selectLeadingIcon", name: "typeface" }), index.h("select", { key: '6c2404caa119edfabbd70b9697fd779c7fe55e5e', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, index.h("option", { key: '59291299bebaedeb4e700fd2cdf76801ae784a69', value: "arial" }, "Arial"), index.h("option", { key: 'c9b1e6e027bccbc7ff49209046c534b94d5b34f3', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: 'bf444b6ce5ae54eee08a8474528daf6a0e627b49', value: "courier" }, "Courier"), index.h("option", { key: '6b43f202bc8f95bf3ab118215c00cd6e02b29ca0', value: "helvetica" }, "Helvetica"), index.h("option", { key: 'b4269c0a064ffeb94021b0ab13518e95a8479979', value: "verdana" }, "Verdana"))), index.h("div", { key: 'be0735ae2af588126c503e02f0d63e772698e800', class: "input-wrapper" }, index.h("ls-icon", { key: 'b7854e3245f85bce705d31234d7fb0f86668f018', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: 'd492a2edcdd42231385e59a01688f7fbd03ae8b4', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, index.h("option", { key: '7f99c2c3ff9303d07374efbd2cbed51e840a6b07', value: "arial" }, "Arial"), index.h("option", { key: '33b215ab68d78df213e66a508c71326fe8f2c0df', value: "liberation sans" }, "Liberation Sans"), index.h("option", { key: '74beff2c20bdb1f04c1ad493a0ab4f4b73723a5f', value: "courier" }, "Courier"), index.h("option", { key: 'cb71c7f9fb70efb13c899c014455296945e3f937', value: "helvetica" }, "Helvetica"), index.h("option", { key: '928d454bbf9015fcdcab4c3ed2f25591705304d2', value: "verdana" }, "Verdana"))), index.h("div", { key: 'e04d0a46ab3524a5bc3e1b2b58d351cc1e530057', class: "input-wrapper" }, index.h("ls-icon", { key: '34204ae09a79787e1acfaa7aec4d905b7c9f185c', id: "selectLeadingIcon", name: "typesize" }), index.h("input", { key: 'fa2fa5b6c915f129ec756a203f1537629873b5ff', 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: '3ae8a14a58209730a436d05c0b7a5bd82f7c4104', class: 'button-group' }, index.h("button", { key: '86a99f46a58011f9ed4c038a920f6985ebb5665c', onClick: () => {
+            }, class: 'has-leading-icon' })), index.h("div", { key: '1f979064c092b04c682fc2bde6852f3f948cda1f', class: 'button-group' }, index.h("button", { key: '6c41315e09d84762c74a225ca7862bc1ec17b9fa', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, index.h("ls-icon", { key: 'a65a3d16ff909fac651795e337dba173c582932a', name: "menu-alt-2" })), index.h("button", { key: 'e398de9519a1f2fe5bbef293df94f4b1e26712d8', onClick: () => {
+            } }, index.h("ls-icon", { key: '4cccc7b7c720e60e9279455ef91bb0c3f0b7b039', name: "menu-alt-2" })), index.h("button", { key: '531e37c5ce4b7c4c1d58f4c70eb308818e3ac3da', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, index.h("ls-icon", { key: '81d31a5c324e40e1c0b3a77f82a52f53ba88ae0c', name: "menu-alt-5" })), index.h("button", { key: '59f6ce6fd22dcaaf0d12324e72623c0bcc9f47ac', onClick: () => {
+            } }, index.h("ls-icon", { key: '0ed333cada71cd4916246d24f2fb14ac36b46965', name: "menu-alt-5" })), index.h("button", { key: '94d21c36f06d93a94aab142a56316f0f8c3c69c0', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, index.h("ls-icon", { key: '7fd9692ef54258aba5a4a629166001b1675d7f6a', name: "menu-alt-3" })))))));
+            } }, index.h("ls-icon", { key: '303dd2ea923a4b0dce555b21ffbc23c3730c40ca', name: "menu-alt-3" })))))));
     }
 };
 LsFieldFormat.style = lsFieldFormatCss;
@@ -25466,7 +25634,7 @@ const LsFieldPlacement = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '6a0f7b6a8c5dc94cde14c81ee6be2397b27e3be5' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '99ef4a60bb31d91649288da9f8c78fb9dbe15196', class: 'ls-field-properties-section' }, index.h("div", { key: '9399eeb98d0ecaae3f16ea5535a2041308113db2' }, "Top: ", index.h("input", { key: '995214d8614f4dc6166d43419c0f6837b2e937e6', value: '', onChange: e => this.alter({ top: e.target.value }), width: "30" })), index.h("div", { key: '857a4248fc0be62c2de1496cc46777477cc7ab34' }, "Left: ", index.h("input", { key: 'e49db0de0b0044227668f8fa651bb4aab8d31145', value: '', onChange: e => this.alter({ left: e.target.value }), width: "30" })))), this.isSingle(this.dataItem) && (index.h("div", { key: 'a31cbbb2991fe43f312a42a1b8d4d6b9d069db32', class: 'field-set' }, index.h("div", { key: '2388774b0c3c078fc8e72ed328dcfd256437098b', class: 'ls-field-properties-section' }, index.h("div", { key: '39a346434ba2439c692623a71cc69567359c432f', class: 'ls-field-properties-section-text' }, index.h("p", { key: '74d47b7f6db5be09b56ae08e102591689a27044c', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: 'bbd451ef39808d320c6bb57cba1570af4410708a', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '6630c43f54b472aafb962516e2588df47d80c196', class: 'input-row' }, index.h("div", { key: '78ffbda8a8576a9806d8052020af8a5dc287785a', class: 'input-wrapper' }, index.h("ls-icon", { key: '7d20243698615ceaf080fd4fbb8d9acef287cce7', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '5101713e0a86e315c9e9bb6b4b4d12c4f163bab2', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }) })), index.h("div", { key: '52062eaa3342d2ff605cb3ae88a0f4e5b3970ef1', class: 'input-wrapper' }, index.h("ls-icon", { key: 'e164c0b662367ed76c437f677ec491c7b987ede5', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: '0f75d89d266ec35a37504209da986c6886ccffa1', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), width: "30" })))), index.h("div", { key: '9cdc2157455ad96575bf44adaa6ce651409f4af9', class: 'ls-field-properties-section' }, index.h("div", { key: '21d853b2adfd9c603b7a44ea186bec339722805e', class: 'ls-field-properties-section-text' }, index.h("p", { key: '8447f40ba847665b408ee9d5e843ac380e5576ab', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'f81f48bebb40c4ee7b3a02a8f1d42606306b4b4c', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '9963c2c0a7b1cf29f833344dd909f3bc2f11350b', class: 'button-group' }, index.h("button", { key: 'e1f9e3ffbd836d9d0829a2caefccd5b6a9f6e2f0', disabled: true }, index.h("ls-icon", { key: 'e259983fc064b02148b977901a8f8ec6fd08ed86', name: "field-distribute-vertically" })), index.h("button", { key: '14e31e45a360b4621886fa6ba5fc7fac6bd657a7', disabled: true }, index.h("ls-icon", { key: 'c045fcc5a5f7330b0a578c12630e0b078181b948', name: "field-distribute-horizontally" })))), index.h("div", { key: '9a84503f0b4e779d731cca2c153ac81f6b9f2588', class: 'ls-field-properties-section' }, index.h("div", { key: 'e531166182eea81dff63f27c0590b70889b0a982', class: 'ls-field-properties-section-text' }, index.h("p", { key: '43a8c468645308af2b50427efc5cba290d40ba82', class: 'ls-field-properties-section-title' }, "Scale and Gap"), index.h("p", { key: '01f2a1dcd782b9556aa750ed7ec76a81feb379a7', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '51503e9dd0e20b1ac514e06f44c3e8196d309279', class: 'input-row' }, index.h("div", { key: '5d5e2e4bbc76334243b1b83e9c9e47cf7dafef02', class: 'input-wrapper' }, index.h("ls-icon", { key: 'c85652c6cb40c6af1c9c5fa8aa050e462e2629a7', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '463d16d911ca88612bc6c922dbdb96d848f332b4', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: '6aa81eee5a4ef286e4caea458b7559b1d7073018', class: 'input-wrapper' }, index.h("ls-icon", { key: 'd39f4bc6fcdebe4c2c1133daceccda27a067c813', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: '9c8389f6edc9329dbcfb8092fd63037f686b9cb4', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
+        return (index.h(index.Host, { key: 'b177a99ffcb4fde8408326148b8ce77d6e67182e' }, this.isMultiple(this.dataItem) && (index.h("div", { key: '2115059af55775f217c258a2b1325ec301aef124', class: 'ls-field-properties-section' }, index.h("div", { key: '1796203332bc3bed40ed9cd1476b46bca79157fc', class: 'ls-field-properties-section-text' }, index.h("p", { key: '3369ba18dd537732bfc1a647aaa0bcc7a4f9f4b2', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: '631b396d7e8eca43eeda1e4e5c30f4007dd50269', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '36a66f3f2dd69f97135d31a24c3ca17652772d5a', class: 'input-row' }, index.h("div", { key: '54a3f6ca14bbdf2b4854e716fc8edb03c3a0377e', class: 'input-wrapper' }, index.h("ls-icon", { key: 'e37871622caa8811130b0e70d3132e1372d008cc', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '6d1db1d3756e0ff25c7c0553dee26f6d0a3e3305', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ top: e.target.value }) })), index.h("div", { key: 'db6c1b3c235a4aa3604778123131cb7c9a669cc4', class: 'input-wrapper' }, index.h("ls-icon", { key: '998b63539de46fe19ced6ce8db40513823abd03b', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: 'dad95a2bfb80c74af431d9a1bc2223486fea05e1', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ left: e.target.value }) }))))), this.isSingle(this.dataItem) && (index.h("div", { key: '6a015090146c812554e7864c8c5d5f0a58c8dae4', class: 'field-set' }, index.h("div", { key: '3bec1b9351ab94a597de4558353aac392482c4ef', class: 'ls-field-properties-section' }, index.h("div", { key: '4ae7786982a6f9ca8268dac593ab65461ea4c0f9', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'fb26f97aa12fab8758976ea4723e450f338fc7d9', class: 'ls-field-properties-section-title' }, "Alignment"), index.h("p", { key: '67b2561850d59c1d34b672d7c8f317ee297f2dd7', 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: '03f959b41d217a68916df6d7094c766666f4b1f8', class: 'multi-button-group-row' }, index.h("div", { key: '22c542d77db67527b930b90cedfae90432f8ae41', class: 'button-group' }, index.h("button", { key: '24523466ae0dbfc17f4c51fe1088abb479626e53', onClick: () => this.alter({ left: 0 }) }, index.h("ls-icon", { key: '0b5d94181a4d0c4b87bf9f61052de5acbc3f2517', name: "field-alignment-left" })), index.h("button", { key: '9d262c51db3f4b2bd3264fb8697833bb36441d8b', disabled: true }, index.h("ls-icon", { key: '36bc7b3753a71e1963556567701b96ac6efbf9e4', name: "field-alignment-centre" })), index.h("button", { key: '2dec2561166ea581dc419934f08dda30caa29112', disabled: true }, index.h("ls-icon", { key: '70392cfecfa647c8e88295a3cdee08d59bc400d1', name: "field-alignment-right" }))), index.h("div", { key: 'a64537fc954be0c87d36f3ec448257de3548ae0f', class: 'button-group' }, index.h("button", { key: 'e8721c8ddaafe17893e8d6115e64bc5df83b4653', onClick: () => this.alter({ top: 0 }) }, index.h("ls-icon", { key: '16b47f99fe18db4ecb4bb2b711b9147d5721f428', name: "field-alignment-top" })), index.h("button", { key: 'cac48fe4d53f9aeb76f1a3f8b3fbcbcdd1afb224', disabled: true }, index.h("ls-icon", { key: 'bc0297d6b222886e09bb190678695f24e0f52b23', name: "field-alignment-middle" })), index.h("button", { key: '44d54b27d2f72e0769f399652fcc51e00b2a1b8f', disabled: true }, index.h("ls-icon", { key: '367a5ac69cf643cea71d730dc32059ef767dc940', name: "field-alignment-bottom" }))))), index.h("div", { key: 'd6c3bee8c8edfee5454e5595c14c3771497b00ef', class: 'ls-field-properties-section' }, index.h("div", { key: '2e619fb98e2d37e408b20ab38e2755ec5134e5f9', class: 'ls-field-properties-section-text' }, index.h("p", { key: '15971e94cc90e90c3d4a9480242ac3129206074f', class: 'ls-field-properties-section-title' }, "Location"), index.h("p", { key: 'ff46cf459b2cdcec46a77a44c5070d59cca08e85', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), index.h("div", { key: '69f7338e979e01c33cea42a15ee56a94fffd35d4', class: 'input-row' }, index.h("div", { key: '5ced6739a14b500d5f05e33040e245827ba86d42', class: 'input-wrapper' }, index.h("ls-icon", { key: 'a928d8ce74e00c1588b4e35e005da430dc87e4f3', id: "selectLeadingIcon", name: "x-letter" }), index.h("input", { key: '4630c6e449e82499261338aff773b01aafa89888', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }) })), index.h("div", { key: 'ba26998241290de17a1f1c7b922187b10a24690c', class: 'input-wrapper' }, index.h("ls-icon", { key: '5ca0b818449a648cb53e3292f95d060b4bd17538', id: "selectLeadingIcon", name: "y" }), index.h("input", { key: 'af8839028d5310e5bfd6e211f8513f5db69bf30c', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), width: "30" })))), index.h("div", { key: '4619be4c5a343dd024a81529c1377b1f17c7e5bc', class: 'ls-field-properties-section' }, index.h("div", { key: '3b5425469e865b161045d8d451adf85729cd9960', class: 'ls-field-properties-section-text' }, index.h("p", { key: '789cf6f38966a01eae08a566e0e4163531309dc4', class: 'ls-field-properties-section-title' }, "Distribution"), index.h("p", { key: 'f9d30a98d11d7fbbe186ca8e2d9b42befb302b8b', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), index.h("div", { key: '546ca427edb7ef8ca783ab61365923906955555f', class: 'button-group' }, index.h("button", { key: 'acc5401214b558744f1b66067d25aeae383d4ca6', disabled: true }, index.h("ls-icon", { key: '92170916ae903395fbac9850f76ff6151df9d4ad', name: "field-distribute-vertically" })), index.h("button", { key: 'acff43cbf2d8bf66844f54e3c584f7b3eabba6d7', disabled: true }, index.h("ls-icon", { key: 'f6340d50fe90bb86aa45dbe7a92d230b67958dc9', name: "field-distribute-horizontally" })))), index.h("div", { key: '8ee2e97e0eda589a2a5970069a4532dc6d40ce22', class: 'ls-field-properties-section' }, index.h("div", { key: '0ea4d3aa27f12f78dac7bc64c77e08ba026bfe7c', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'cfe6e505e258ead4404a1f335fbfe34ca828d111', class: 'ls-field-properties-section-title' }, "Gap"), index.h("p", { key: 'a0f84726326a04905b449af09e34a8c3ddb961b4', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), index.h("div", { key: '122dfcefeb52bd58b8cfd8bf2bbc2973c48a92eb', class: 'input-row' }, index.h("div", { key: '544e80a1935f4785f85283bbca238cdac6a47503', class: 'input-wrapper' }, index.h("ls-icon", { key: '5e53109292e2bc395dcebde922afde3092dc3aeb', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), index.h("input", { key: '01119934f6ca27eaed198e8d20e7e019925b62a6', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), index.h("div", { key: '7c90de7b3865bef2149cd35d5c6047dedec56303', class: 'input-wrapper' }, index.h("ls-icon", { key: '3507bca1a8243a48913c76e87a63382f9e132c66', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), index.h("input", { key: '5400cad90eaae4849227a76bb732afd623cb54fa', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
     }
 };
 LsFieldPlacement.style = lsFieldPlacementCss;
@@ -25507,7 +25675,7 @@ const LsFieldProperties = class {
             return index.h("ls-field-properties-multiple", { dataItem: this.dataItem });
     }
     render() {
-        return (index.h(index.Host, { key: '309f411a7efb7960a8e207eb32c178f3d68d775e' }, this.dataItem && this.renderFields(), index.h("slot", { key: '3cfe6de10eaa41e4d7ce72ba825d2202316b9b86' })));
+        return (index.h(index.Host, { key: '4f0c36a7bde5177369e905868caff830a71af2ff' }, this.dataItem && this.renderFields(), index.h("slot", { key: '80fc4787efdadb306ba926f895f45eaf84717d39' })));
     }
 };
 LsFieldProperties.style = lsFieldPropertiesCss;
@@ -25520,7 +25688,7 @@ const LsFieldPropertiesAutosign = class {
     }
     dataItem;
     render() {
-        return (index.h(index.Host, { key: 'b92e0d9344c0443598e16dfb603c8bb9c33e86f9' }, index.h("div", { key: 'cf3191dbbdb254d9a571e7a5a213d6ccd5fb22da', class: "ls-field-properties-section" }, "Self Sign Field"), index.h("div", { key: 'e55e1bc4078c5fa0d1697402d790e53f49ffc7e4' }, "Label: ", index.h("input", { key: '3d519f647bafeb12c028e199ec4f7897da82129d', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: '6113d5217406e9bb172449a4c0ab93432ac3d059', dataItem: this.dataItem }), index.h("slot", { key: 'd1d085d0099e3d9185e677a9511e39d3d9df37b9' })));
+        return (index.h(index.Host, { key: '14e8816d8a1b469e277e7af51b2141e4338ba1e2' }, index.h("div", { key: '59f5e6ab5aa858f59082e36e7e74b60002e331ed', class: "ls-field-properties-section" }, "Self Sign Field"), index.h("div", { key: '14d7513183cbca4d203ce99b95d4e41f585d9b71' }, "Label: ", index.h("input", { key: '345895e5c19328992ae43a69c0b8e5eb2449b1ac', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: '6b783594d4167a01a4deaf022d3f04d84a6897b7', dataItem: this.dataItem }), index.h("slot", { key: '5e05f3cee5def0994e9c9b7421d7ebbd34eb88e7' })));
     }
 };
 LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss;
@@ -25537,7 +25705,7 @@ const LsFieldPropertiesDate = class {
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: '28e26ac6bcf4f5ec3e469ca42d539953ed757e32' }, index.h("div", { key: '899362fdb9f354535b59274df592562c632472e8', class: 'tabs-container' }, index.h("button", { key: 'e8c62f54808b383b06b10779ee09c0a647e3a862', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '24712078c0e55c4ad33b055296d1dc6bbeab1def', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: 'c43695c3affe8d3d8e7864f6a31d5b75b9c5fe0f', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: '7dedaac7e3acfe1ea869fc07ccacf6918319876a', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: 'b06a05273c080fa2adc6f509d119a0da69ddf46a' }, index.h("div", { key: '230e127b70cb0970e25d6ab2093c0638b23c36fa', class: 'tabs-container' }, index.h("button", { key: 'da64c8dbbe138e2f0a7642ac5f15b785aa37f642', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '1a5dd9d8d793a9fbe38c743b5be061017c7e5cfc', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: '74535a6f94e51d3ff5476a7b8aea87ed5638931a', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: 'be04d97b8543b8c16c1845651893018fca388b4b', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
@@ -25546,7 +25714,7 @@ const LsFieldPropertiesDate = class {
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, index.h("ls-icon", { name: "calender", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "Date")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), index.h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), index.h("div", { class: 'input-wrapper' }, index.h("ls-icon", { id: "selectorIcon", name: "selector" }), index.h("select", null, validationTypes
             .filter(type => type.formType === 'date')
-            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: 'b8aa134277c9c97dbe055c9c4a0d063674d902f0', class: 'button-footer' }, index.h("button", { key: '1e48e484cdfa1979401ff7c2d569e09a95b4e6ce', class: 'secondary' }, index.h("ls-icon", { key: 'e813c24682528c0c43a44b56437b8b605d142126', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '31e153b6a547c20d9a9750f8e7773d16815b57ca', class: 'destructive' }, index.h("ls-icon", { key: '747b02f9578f2e6ca14fa1020925504c98be6cf7', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: 'cf1fe9517aadac9fbfaa606121b0a10e904628ea' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: 'd0f4de7d4aaefd389eaf32c828b2a546ac9dda60', class: 'button-footer' }, index.h("button", { key: 'cfdb665c27629f9ea5cdff3d6eb0727a55049b08', class: 'secondary' }, index.h("ls-icon", { key: 'e8f40090edd72678f25137f6ec642ee778780680', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '6e4cd8e4729ddf9ecb26432edae07d934f247f1a', class: 'destructive' }, index.h("ls-icon", { key: '12ba0890b9ef7a3cc697eacbae237317c6238600', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: 'c5705c26d5bd0eb3af5ffc06c1857ff9d64257de' })));
     }
 };
 LsFieldPropertiesDate.style = lsFieldPropertiesDateCss;
@@ -25563,7 +25731,7 @@ const LsFieldPropertiesEmail = class {
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: '366b730ea9a1096ab6098ae9b2bb98ca9e11d29a' }, index.h("div", { key: '8e6839f5c298a391fcae2e79ce03478ad469d64f', class: 'tabs-container' }, index.h("button", { key: '88756cc3cae04027c89fce3760223308bf55ebcf', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '41d1e59547bb3d5f7bba58a067d87f4672387a2a', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: 'e958ed78f39d46ea879a51d21fb902006904470b', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: '53164cca19d076f7d49d263b53abd11bbea7e982', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: 'a3dd378ca7a4657f444631bf34309b539c9922b0' }, index.h("div", { key: 'f3f0dcc6ffb58910fd2c370f82d3b91d892ee8e9', class: 'tabs-container' }, index.h("button", { key: '38e153312729d12fd99a3964ab674823bff8966a', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '3a4783712e34f526de913afd283dd6b02ec3d1d6', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: '6fefa0a10ac674b6fed666bdc962be77252c01fe', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: '6260c65ce6f49f215d964c7c7482a2857d4f8939', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
@@ -25572,7 +25740,7 @@ const LsFieldPropertiesEmail = class {
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, index.h("ls-icon", { name: "at-symbol", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "Email")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), index.h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), index.h("div", { class: 'input-wrapper' }, index.h("ls-icon", { id: "selectorIcon", name: "selector" }), index.h("select", null, validationTypes
             .filter(type => type.formType === 'email')
-            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: 'b497ae9483f55bbd6111b63a3e3b75c9660d4937', class: 'button-footer' }, index.h("button", { key: '0c0d68dd36200ea19ce9eaf11075599d0fe50b43', class: 'secondary' }, index.h("ls-icon", { key: 'c2c54a3b8a744c494e684592f0a6d7d08c2843d8', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: 'd88a0eb280d075c4adad2abdd548897e82fcbae6', class: 'destructive' }, index.h("ls-icon", { key: '31ddc278180530e8a1b9452249b1b784d77b56ce', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '0e166025806021ba078d0d0eec65c1f41ef20789' })));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: '0d3d291a2f590c13aa1b890432bf48212b9dd5b1', class: 'button-footer' }, index.h("button", { key: '90f886ce51be759a58afa1cd01f1ec03225ec755', class: 'secondary' }, index.h("ls-icon", { key: 'ea4d0f14452a816c03423ab423a9049dca5155be', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '8bebe74cf0eade279e886c6b235269d4803370d0', class: 'destructive' }, index.h("ls-icon", { key: '39b4a3b7d93db99625be6628e52b65e4c4011614', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '568bd84291bf013457effe5cc1d759661644d24a' })));
     }
 };
 LsFieldPropertiesEmail.style = lsFieldPropertiesEmailCss;
@@ -25589,7 +25757,7 @@ const LsFieldPropertiesFile = class {
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: '979c8b325bf4675630a746fac203cf0b45811896' }, index.h("div", { key: '79f61e9f1afbac6e2dd5b9395ea01d89b771a6a7', class: 'tabs-container' }, index.h("button", { key: '36fe49eac7cb389333f2cd73b732845ec7617024', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: 'd7c6d114aa43a8b1d287ced8663712ac76c4b9f7', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: '7d94a07973d9927e3289a81ab1cc14b9890b6d26', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: 'f351044ba72e63b37f1d55292fc2e29eb527df65', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: 'c8e07d4787ce26212c42a9b943db4ee5d1b4ec1d' }, index.h("div", { key: 'bcf85e4e3c1cb558a3f58a3d292add6631c17512', class: 'tabs-container' }, index.h("button", { key: '82767a10336fc20609454a233c52c6ba66db2513', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '1341ceec3b916b8fd58b44ae73dfab2fb0b46345', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: '67cb7586e9cbad65860b30d42c3cfb7016856dfc', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: '354d56fa0aaccaa917997b6e68eba25521b8c7e7', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
@@ -25598,101 +25766,206 @@ const LsFieldPropertiesFile = class {
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, index.h("ls-icon", { name: "upload", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "File")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), index.h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), index.h("div", { class: 'input-wrapper' }, index.h("ls-icon", { id: "selectorIcon", name: "selector" }), index.h("select", null, validationTypes
             .filter(type => type.formType === 'file')
-            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: 'e6d801473e74d51783c11e507ee5d5fc81310c21', class: 'button-footer' }, index.h("button", { key: 'd17ea5d20f26c43015cfe3441040f4bb59640c8f', class: 'secondary' }, index.h("ls-icon", { key: '419df479abff15f4d6812b010d1b9373083959e3', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: 'c5d41606e3bf716e10d6b117a32164ce4ecb026a', class: 'destructive' }, index.h("ls-icon", { key: 'fe495b8b5c5fe40bd33066ae2a19896374817fc1', name: "trash", size: "20" }), "Delete"))));
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: '6ab762d9b5eb86930776337353f29d423e013bed', class: 'button-footer' }, index.h("button", { key: '68d9c4e9495cba13cd9c99e234d2f865990f237c', class: 'secondary' }, index.h("ls-icon", { key: '0e0110b20dad1dd0e3d27f3acae18f5f9c133b40', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: 'dd26a1d8859a62b2cda8e2e526bc575cc7f2496a', class: 'destructive' }, index.h("ls-icon", { key: 'a701332630f5099106b710d7afbfe91d935ea533', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '50c5e590c316ab28c3ef71ed1b2eb4778b9fe2c5' })));
     }
 };
 LsFieldPropertiesFile.style = lsFieldPropertiesFileCss;
 
-const lsFieldPropertiesGeneralCss = ":host{display:block}.ls-field-properties-section{display:flex;flex-direction:column;min-width:110px;background-color:white;border-radius:0.75rem;border:1px solid var(--gray-20, #EDEFF2);background:var(--white, #FFF);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)}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 lsFieldPropertiesGeneralCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;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.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.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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 LsFieldPropertiesGeneral = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (index.h(index.Host, { key: 'e87b03ad929cc1dea1d030fd612a310d5173c838' }, index.h("div", { key: 'cf2d750d5aa86e737e54b2c7175e0f9af84b5fde', class: "ls-field-properties-section" }, "General Field"), index.h("div", { key: '4f18444c661c88c4b79510d5b0b7258285c15858' }, "Label: ", index.h("input", { key: '532c0119c5bbbda70844d91616c4ee50b8d783f7', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: '9f38fd900b3133eec3bcb0f8d36cc576f33dfa41', dataItem: this.dataItem }), index.h("slot", { key: '15467859e256ec22ec6201002cce2605bf4d3f27' })));
+        return (index.h(index.Host, { key: '66c7c1e07a4d46fe9272b8de3084c2446a7df45e' }, index.h("div", { key: '5656760e45235dc200c67a23029c6b46083ccd13', class: 'tabs-container' }, index.h("button", { key: '9784275994038a7fdee05ab1d32dd2c04746d243', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '85f90b1461e68df6bc363fb58430d79b79a67842', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: '4ac939867be3e021852fcecf195a7e0f3908de4e', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: '7e7029e78a0ff86e61823eecbc955a15772f00da', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, index.h("ls-icon", { name: "field-placement", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "General Field")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), index.h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), index.h("div", { class: 'input-wrapper' }, index.h("ls-icon", { id: "selectorIcon", name: "selector" }), index.h("select", null, validationTypes.map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: 'bae5baaa40a845115568677631f393393354312e', class: 'button-footer' }, index.h("button", { key: 'c47c6ce5b6104a9c53e2e8376abf92b29a6385d2', class: 'secondary' }, index.h("ls-icon", { key: '8a53d65c2060cb3bdc9143403d7250cbefdfdac6', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: 'a0fa01929abbacec569bd449320cd9d720597e3d', class: 'destructive' }, index.h("ls-icon", { key: '4c6bb00579832f8e44c82b516cf3e47200d1ad71', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: 'b18c96fbcac26a8e5c73bd1d5f97f3d58f839d73' })));
     }
 };
 LsFieldPropertiesGeneral.style = lsFieldPropertiesGeneralCss;
 
-const lsFieldPropertiesImageCss = ":host{display:block}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 lsFieldPropertiesImageCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;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.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.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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 LsFieldPropertiesImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (index.h(index.Host, { key: 'c690e84f0aaa5c21f912350d9edf2ff1805ee7c8' }, index.h("div", { key: 'bb1c3cd8c3a50f62010689e22b043bcce518a365', class: "ls-field-properties-section" }, "Image Properties"), index.h("div", { key: '8805a1f3f16fcd8a662622af4c153a40cd9fa113' }, "Label: ", index.h("input", { key: 'fdacaeeb623483d8ff9a1485223eb2e88d3a6f47', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: 'f666dd08fe2c5d1e013bb36bf441e32be69b0b04', dataItem: this.dataItem }), index.h("slot", { key: 'fda720e8f6e3cdabd50a9e41e40172a34681c300' })));
+        return (index.h(index.Host, { key: '635907f2562fd34d194247189529350ce08472c1' }, index.h("div", { key: '29ebc137c3e2e94ef51d65a338feefdb5568e6f2', class: 'tabs-container' }, index.h("button", { key: '2589dd19e0cc82ae107a4cd7d59686a4d36650c0', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: 'c783bd7b3fc67ef709d09b3edcb1dea4ee4964f8', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: 'fd264269a617d7aada8808121566524bdff64ae6', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: 'a7f3daddab93c4dd0e5558c1ce6cbff94a49d0e6', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, index.h("ls-icon", { name: "photograph", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "Image")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), index.h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), index.h("div", { class: 'input-wrapper' }, index.h("ls-icon", { id: "selectorIcon", name: "selector" }), index.h("select", null, validationTypes
+            .filter(type => type.formType === 'image')
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: '7a865a32f7df9ba68e422d8fed59ad2dc9da8390', class: 'button-footer' }, index.h("button", { key: '808702e7bbdaae99f009f1bee44055e6d251f2ff', class: 'secondary' }, index.h("ls-icon", { key: '378f763114db8cb053b78dc09c6e72423104b14c', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '8e59f7c362245d958b1438d27ec0b825e561f0d2', class: 'destructive' }, index.h("ls-icon", { key: 'e093ee2b95bb0f7e2212f3fb8d2291833c788cb6', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '95136c1553098b6146b1f67ed17a38b30e727c2d' })));
     }
 };
 LsFieldPropertiesImage.style = lsFieldPropertiesImageCss;
 
-const lsFieldPropertiesMultipleCss = ":host{display:block}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 defaultFieldIcons = {
+    'signature': 'signature',
+    'text': 'text',
+    'signing date': 'auto-date',
+    'date': 'calender',
+    'initials': 'initials',
+    'checkbox': 'check',
+    'email': 'at-symbol',
+    'number': 'hashtag',
+    'image': 'photograph',
+    'dropdown': 'document-text',
+    'file': 'upload',
+    'drawn field': 'pencil',
+    'regular expression': 'code',
+};
+function getFieldIcon(key) {
+    return defaultFieldIcons[key] || 'view-grid';
+}
+
+const lsFieldPropertiesMultipleCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;text-transform:capitalize}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;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.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.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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 LsFieldPropertiesMultiple = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
+    allSignersSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, signer: undefined };
+        const firstSigner = this.dataItem[0].signer;
+        const allSame = this.dataItem.every(item => item.signer === firstSigner);
+        return { isSame: allSame, signer: allSame ? firstSigner : 13 };
+    };
+    allLabelsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, label: undefined };
+        const firstLabel = this.dataItem[0].label;
+        const allSame = this.dataItem.every(item => item.label === firstLabel);
+        return { isSame: allSame, label: allSame ? firstLabel : undefined };
+    };
+    allElementsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, elementType: 'mixed' };
+        const firstElementType = this.dataItem[0].elementType;
+        const allSame = this.dataItem.every(item => item.elementType === firstElementType);
+        return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
+    };
     render() {
-        return (index.h(index.Host, { key: 'b4efff7bf847390c74406f2cdb74ce1494760913' }, index.h("div", { key: 'bab7582267affd8d2869f1644c277cafbf7193ca' }, this.dataItem.length, " items"), index.h("ls-field-dimensions", { key: '0b49d95f9a49b3a5f99b8ce03c7f7b9761507d9e', dataItem: this.dataItem }), index.h("slot", { key: 'acb018458e9772db9107c024f982a3b575976c06' })));
+        return (index.h(index.Host, { key: 'd47418c11bf08918bbc5de9815c9ed0060637730' }, index.h("div", { key: 'ffbe7dddad76d40c13d394b94f560bc28f0efd49', class: 'tabs-container' }, index.h("button", { key: '215fa1ffeb0fc0e7e5f5f74268245a0bfc24b578', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '38cbd8b91dc129be1398ba79384c316bee79eedc', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: '8ca2cb33b774b93d2a9ca2dd84dab64c5f757fec', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: '584ff1cce354ad1f7326a73c3d2d6729dbaccac7', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-alignment", { dataItem: this.dataItem }), index.h("ls-field-placement", { dataItem: this.dataItem }), index.h("ls-field-distribute", { dataItem: this.dataItem }))) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }), index.h("ls-field-size", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.allSignersSame().signer)}-30)`,
+                background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,
+            } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.allSignersSame().signer)}-60)`,
+                color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,
+                background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,
+            } }, index.h("ls-icon", { name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), index.h("p", { class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))))), index.h("ls-field-footer", { key: '4ac7b3459381ce8b58dbed6aa0de6612e26ecbb4' }), index.h("slot", { key: 'c07eed0aa02861a7cc12939dcb11c16ccfebb58c' })));
     }
 };
 LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss;
 
-const lsFieldPropertiesNumberCss = ":host{display:block}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 lsFieldPropertiesNumberCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;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.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.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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 LsFieldPropertiesNumber = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (index.h(index.Host, { key: '38689e88511a48f76700b6690b6f16bbdcf5c275' }, index.h("div", { key: 'e0256e1b6323656b6f8b7b088a1ef11ba5c64bf5', class: "ls-field-properties-section" }, "Number Field"), index.h("div", { key: '5c7465ccfd35e26ac079ad9daf55a53aefd46e26' }, "Label: ", index.h("input", { key: '62437f98d0d2998c304caeb5dd86f1c750d13681', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: 'c023c4022d367594fe0ccc564343f8190327300d', dataItem: this.dataItem }), index.h("slot", { key: '29dfa45d57e3b9b6532dbf2730567b71fd1c0096' })));
+        return (index.h(index.Host, { key: 'e50acbaa72b3d4f4e71a1948d3de757583362b8b' }, index.h("div", { key: '09dd8369b976fe3cf3bcc84bc91ac4c1f553e454', class: 'tabs-container' }, index.h("button", { key: '41157341ca616277c51a6787cf6eec75b234600e', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: 'cc649303cc7a4bec0322f9cd6e9f2b68418b86b5', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: 'e84e1bae951d8a200fb0f93796a1e2a0069783d2', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: '2f5621dbc686dcb5613f42537adcf6733809ed70', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, index.h("ls-icon", { name: "hashtag", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "Number")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), index.h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), index.h("div", { class: 'input-wrapper' }, index.h("ls-icon", { id: "selectorIcon", name: "selector" }), index.h("select", null, validationTypes
+            .filter(type => type.formType === 'number')
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: '7eb13a8e3801d7e9a9908d9efa21703b47cbbeb9', class: 'button-footer' }, index.h("button", { key: '8376532dd6f07807bf824515146e4f6cd39f47fb', class: 'secondary' }, index.h("ls-icon", { key: '8a5b3635ba8ef24b4fedfb72b48681f672a9a5f1', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: 'c2af55b4f3f3dbf24ef8ea592812d98501d8d948', class: 'destructive' }, index.h("ls-icon", { key: 'befbf4e7e625d4bc26bfaadfc1f8c6b9494e9346', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '9323c591f57fe3e110a9850c0f6ae1fcc14ffc0d' })));
     }
 };
 LsFieldPropertiesNumber.style = lsFieldPropertiesNumberCss;
 
-const lsFieldPropertiesSignatureCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;border:1px dashed var(--primary-30, #9dc3fc);background:var(--primary-10, #eff4ff);padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--blue-60, #5684f0);background:var(--blue-10, #f0f6ff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--blue-60, #5684f0)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;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.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.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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 lsFieldPropertiesSignatureCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;border:1px dashed var(--primary-30, #9dc3fc);background:var(--primary-10, #eff4ff);padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--blue-60, #5684f0);background:var(--blue-10, #f0f6ff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--blue-60, #5684f0)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;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.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.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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 LsFieldPropertiesSignature = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
     dataItem;
     fieldSet = 'content';
     signerColor = (index) => {
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: 'df0094f1092e955e6dd14b91a7e67e7c03b18ee2' }, index.h("div", { key: '93e2fc1e8d557cebcd9c898ed318a5c63b01719f', class: 'tabs-container' }, index.h("button", { key: '5ac877ef74986931e2f2c3d1521f14f09776dadd', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '10e426f98422863ce40b7026ad3af7fda567615f', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: 'a452edbb8356e27c53637d90bb30175c4ec78303', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: 'b91ec8aa31925a648ce5c94243e2056c05f4bbf1', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+        return (index.h(index.Host, { key: 'bba78cf458f70fbc544cb60f680da3caaeb75dc2' }, index.h("div", { key: '0872f0b8f0ef07c26e5057dff8063a7585cbe209', class: 'tabs-container' }, index.h("button", { key: 'f70b0321dc59359a1b940d9c9c2bfc23c945e0f4', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: '835388d8c1a7c9f196254f75cbe4ff19d1a12dbe', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: '95cfe797b9abf9f90580a29e607c132295590719', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: 'a0b2c962acefbe939c3c41303f9def72bf10a0ed', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
             } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
                 border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
                 color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
                 background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
-            } }, index.h("ls-icon", { name: "signature", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "Signature")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" }))))), index.h("div", { key: '386d082d5cc813c9c195ecc7ece0855b86e0cd7c', class: 'button-footer' }, index.h("button", { key: '35d6174b961aa32db31047c7b401553ccb82f579', class: 'secondary' }, index.h("ls-icon", { key: 'f901fbf9aa48417f2ea0a2a8fc527fa6e90cca33', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '8be34a33298fde349fa6a7d42e8c4d5c44eb756d', class: 'destructive' }, index.h("ls-icon", { key: 'a56208fc1ae308a1f8eace45c0a5c5d5d35a12d7', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '5facdb89f9df774f31a1218b268746b418f8e3c3' })));
+            } }, index.h("ls-icon", { name: "signature", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "Signature")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" }))))), index.h("ls-field-footer", { key: '9a506f882be185fa072f577de42300275e7c6237', dataItem: this.dataItem }), index.h("slot", { key: '3c992d87c93531c50a6160f82c66b0ae83020ae3' })));
     }
 };
 LsFieldPropertiesSignature.style = lsFieldPropertiesSignatureCss;
 
-const lsFieldPropertiesTextCss = ":host{display:block}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 lsFieldPropertiesTextCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;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.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.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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 LsFieldPropertiesText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (index.h(index.Host, { key: 'a4db8b126a38153d494b6a2e4005d08b93455f21' }, index.h("div", { key: '220eac7c15bf25713e9d7688410fb7a19fd08a0e', class: "ls-field-properties-section" }, "Text Field"), index.h("div", { key: 'e93bac0aac9e1db6e73c59a5ccedc74ebc6112de' }, "Label: ", index.h("input", { key: '23fa2aaa09a4923ff6d15647b6ed5c868d769388', value: this.dataItem?.label, width: "30" })), index.h("ls-field-dimensions", { key: '4bf078ffa799a5ca66f95de683957675d7dcb406', dataItem: this.dataItem }), index.h("slot", { key: '91fd6d676d88d718f84aca7a9b3742f8a5523053' })));
+        return (index.h(index.Host, { key: '3c866e6f227934dff07ee9d2a26d65ed1c9afa82' }, index.h("div", { key: 'f0348081e8a5ffc70d6888e41ecd88c948150a60', class: 'tabs-container' }, index.h("button", { key: '0499e9d95ea152b86bd4e6440646de92b94d59df', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), index.h("button", { key: 'd6fa7d56ee8c7700b4395ade178ce577367d1b69', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), index.h("button", { key: '1449b28a226629068439b9f7277f3fa00549f273', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), index.h("div", { key: '4863f52297c424990c72d1aff181fa72c3f4d03b', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (index.h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (index.h("div", { class: 'field-set' }, index.h("ls-field-dimensions", { dataItem: this.dataItem }))) : (index.h("div", { class: 'field-set' }, index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), index.h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), index.h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, index.h("div", { class: 'ls-field-type-inner' }, index.h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
+                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
+            } }, index.h("ls-icon", { name: "text", size: "20" })), index.h("p", { class: 'ls-field-type-name' }, "Text")))), index.h("div", { class: 'ls-field-properties-section row' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), index.h("ls-toggle", null)), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), index.h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), index.h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), index.h("div", { class: 'ls-field-properties-section' }, index.h("div", { class: 'ls-field-properties-section-text' }, index.h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), index.h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), index.h("div", { class: 'input-wrapper' }, index.h("ls-icon", { id: "selectorIcon", name: "selector" }), index.h("select", null, validationTypes
+            .filter(type => type.formType === 'text')
+            .map(type => (index.h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), index.h("div", { key: 'a437d78978c9937a48278a46f4a3998a88a9f638', class: 'button-footer' }, index.h("button", { key: '7dd5225d65d6dfa5fc2c8f0ebf6b921877aaa75f', class: 'secondary' }, index.h("ls-icon", { key: '764bc166996b128c8861bb82a7545814851ad162', name: "field-duplicate", size: "20" }), "Duplicate"), index.h("button", { key: '9e0d8e4d4fa8374d85ad62e1530344b20aea9bfa', class: 'destructive' }, index.h("ls-icon", { key: 'ce98729c0518cb7df746418e86a2bde57fb58efc', name: "trash", size: "20" }), "Delete")), index.h("slot", { key: '68766f87c0fb2705681f5b255cab2b089324dcad' })));
     }
 };
 LsFieldPropertiesText.style = lsFieldPropertiesTextCss;
 
-const lsFieldSizeCss = ":host{display:inline-block}button{display:inline-flex;background-color:transparent;min-width:24px;min-height:24px;border-radius:0.5rem;margin:0.25rem;width:27px;height:27px;justify-content:center;vertical-align:middle;border:0}button:hover{background-color:rgb(219, 219, 219)}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 lsFieldSizeCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-toolbar-numeric{width:45px;max-height:18px;margin:0px;padding:0px}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.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:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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 LsFieldSize = class {
     constructor(hostRef) {
@@ -25707,14 +25980,14 @@ const LsFieldSize = class {
     // The source of the chain fires the mutation
     alter(diff) {
         const diffs = this.dataItem.map(c => {
-            return { action: "update", data: { ...c, ...diff } };
+            return { action: 'update', data: { ...c, ...diff } };
         });
         this.dataItem = diffs.map(d => d.data);
         this.mutate.emit(diffs);
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '370469e2e9bbfb5d9c1b034aa5a6056c125b1563' }, index.h("div", { key: 'b5807f2770fd9cfd9fc257aec00c113ffb3e22b4', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, index.h("button", { key: '31f39a39290f7edf4669f30ffe20cd5056aa07e6', "aria-label": "Make selected fields the same width as the first selected field.", class: "ls-round-button", 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("svg", { key: '50e12865b2fb41cce603a8017793dda5283efaef', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '281ec1021546c1701f6984c5d47f0812c11ecff7', d: "M14 9V6C14 5.44772 13.5523 5 13 5H11C10.4477 5 10 5.44772 10 6V9M14 15.0104V18C14 18.5523 13.5523 19 13 19H11C10.4477 19 10 18.5523 10 18V15.0104M6.00751 15.0104L4.00751 12M4.00751 12L6.00751 9M4.00751 12H20.0013M18.0013 15.0104L20.0013 12M20.0013 12L18.0013 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '2ddfd3aafb6d8f45f9807a71e892ff8faf2485b9', class: "ls-round-button", 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("svg", { key: 'e39193ff14ed9dd817268fab706d662df75b68de', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'a2d6c9aefe4da11be709b88d9745e646273885c9', d: "M9.00439 10.0042H6.00439C5.45211 10.0042 5.00439 10.4519 5.00439 11.0042V13.0042C5.00439 13.5565 5.45211 14.0042 6.00439 14.0042H9.00439M15.0148 10.0042H18.0044C18.5567 10.0042 19.0044 10.4519 19.0044 11.0042V13.0042C19.0044 13.5565 18.5567 14.0042 18.0044 14.0042H15.0148M15.0148 17.9967L12.0044 19.9967M12.0044 19.9967L9.00439 17.9968M12.0044 19.9967V4.00293M15.0148 6.00299L12.0044 4.00293M12.0044 4.00293L9.00439 6.00293", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '692649a6564f3df46d04360108fecf1bad055bb7', class: "ls-round-button", 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("svg", { key: '7905e0ab8fd9d51fe6823ada2dbe50a6f5c0e51e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '51fef530c0a273c0850cd859ae3db3af51213110', d: "M4 8V4M4 4H8M4 4L8 8M20 8V4M20 4H16M20 4L16 8M4 16V20M4 20H8M4 20L8 16M20 16V20M20 20H16M20 20L16 16M8 8H10M8 8V10M16 8H14M16 8V10M8 16H10M8 16V14M16 16V14M16 16H14", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("slot", { key: 'e5a1ccbd3d3fac7280a9273ca2c19ed672ca1d89' })));
+        return (index.h(index.Host, { key: '90092261b158a8c5417d7745b58b8e9a0feb8852' }, index.h("div", { key: '97b5accd42cf1301a50260f60722e977130952db', class: 'ls-field-properties-section' }, index.h("div", { key: '302a99cce209ab3435384649e22ded2f17ad8d4b', class: 'ls-field-properties-section-text' }, index.h("p", { key: 'c4ae8bfd79a563db422b5a9e70076fb6c13e49a7', class: 'ls-field-properties-section-title' }, "Scale and Resize"), index.h("p", { key: '74911d50258b788e430c1b23171269d3a2aa8596', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), index.h("div", { key: '665ac7372b6c2728c864de3be654a61677da70fa', class: 'button-group' }, index.h("button", { key: 'bac5011c1d6b61a6ee5eae3e262f3400fa1d4944', 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: '9599ead6bbdc0d994316b97fe9dc00a7875ed7a2', name: "field-scale" })), index.h("button", { key: '34a921f82812e5c3cf64a794d7ff1ae1f1661adb', "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: '597a69fb82f407187d7c5fde43e7144d17aa4be4', name: "field-match-width" })), index.h("button", { key: 'd05fbbd24ad75268bb64ec82a75fa878f7cbb1b3', 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: 'a3f3f8e51a70e0ba38607e0856718d5534c86456', name: "field-match-height" })))), index.h("slot", { key: '19e743f951e9ca9c6484941edce58248818052c7' })));
     }
 };
 LsFieldSize.style = lsFieldSizeCss;
@@ -25762,10 +26035,10 @@ const LsFormfield = class {
     render() {
         const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
         const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
-        return (index.h("host", { key: '1a31b37448b48d4d89b7c73e8ac26e951b3eacc1', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: 'e652e0b4d24b3c79c722ffbdcc7487478285db5f', class: "formfield-top-elements" }, index.h("div", { key: '384366ebbf68834977299e5e6e676343e06bbe01', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: 'c8d197bbeca42e72a9c69faa4cef98274be8b1f1', name: labelIcon }), index.h("label", { key: 'bae645add69fe37ac8cde9eef4c0b38566ed7bd4', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: '1d7a22559e0cbaa31cd9634f003a24b5e4533f67', 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, onInput: (event) => this.handleChange(event) })) : as === 'select' ? (index.h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, index.h("slot", null))) : as === 'radio' ? (index.h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (index.h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (index.h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (index.h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (index.h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (index.h("p", null, "placeholder")), errorText ||
+        return (index.h("host", { key: 'b97320b063e1c80460b03b61637c82db67d42f2c', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (index.h("div", { key: '878ecc2332b69c6801d2818a0e7c5fd1fe4009a8', class: "formfield-top-elements" }, index.h("div", { key: '8430689883d2b6ae6f2738c8854ff0bbc3662074', class: "formfield-left-side" }, labelIcon && index.h("ls-icon", { key: 'f4430dddc52d37be775d817ee54f442d6a17c013', name: labelIcon }), index.h("label", { key: '6914de667241020f4c23eddd7ca81fd02ef0481c', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && index.h("ls-icon", { key: '2e3202967b3acd4bc834c6e809f307af79f74316', 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, onInput: (event) => this.handleChange(event) })) : 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: '28d90f818b3d0b80d5d2f2af79dcdf84c4f169b8', 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: '36d89672d85a3a702fdef0be12e85864e8592e83', class: "formfield-count-container" }, index.h("p", { key: 'a936d3309ba99a82378596b6c6b01a1b63b6508e', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: '11436b2e9bfd90c1bf9bb0c092d575b04312ad6f', class: countClass }, index.h("p", { key: 'c294b63dc89642ec8d18871ab7929225d34a252a' }, "/"), index.h("p", { key: '12e3ae9fa67ce3a12fecd935b0db5d66661f7082' }, countMax))))))))));
+            (descriptionText && (index.h("div", { key: 'c2469ddfb668d4f91161245beb9828d3aaa78cfc', 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: '657abb6daeccc091b7bf2b603c0d5f52288c4f21', class: "formfield-count-container" }, index.h("p", { key: '8e47dc6bd491f6c6b9ba9ce926187c588d7b8f1b', class: countClass }, value?.toString()?.length), countMax > 0 && (index.h("div", { key: '1362cf5526896aa051560d0a5a97cf13fab52ffe', class: countClass }, index.h("p", { key: '88e5d634fc4537fbc7bd0d7e41cb59dcf128cfdc' }, "/"), index.h("p", { key: '73e0c0238b0567e28c819b55976164d968037e3c' }, countMax))))))))));
     }
     static get watchers() { return {
         "value": ["valueWatcher"]
@@ -25792,6 +26065,26 @@ const icons = [
       />
     </svg>`,
     },
+    {
+        name: 'auto-sign',
+        svgSolid: html `No Solid`,
+        svgOutline: html `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.56982 14.9622C9.47363 2.35513 4.24988 1.06281 3.25357 3.48957C2.25725 5.91634 2.31282 18.1037 6.76179 17.5019C8.62002 17.2506 10.5361 13.9836 10.5361 11.7403C10.5361 9.1703 8.37459 9.25167 7.82834 10.7181C6.98876 12.9721 7.80105 17.6966 10.5361 17.5019C12.137 17.388 12.2369 15.7379 12.2369 15.7379C12.2369 15.7379 12.5741 17.4006 13.8501 17.5019C15.1261 17.6032 15.5111 16.2249 15.5111 16.2249C15.5111 16.2249 15.9152 17.7481 17.6133 17.5019"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15.2217 5.6746L14.2694 2.5L13.317 5.6746L10.936 6.66667L13.317 7.65873L14.2694 10.8333L15.2217 7.65873L17.6027 6.66667L15.2217 5.6746Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg> `,
+    },
     {
         name: 'bell',
         svgSolid: html `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
@@ -32396,6 +32689,7 @@ var IconEnum;
 (function (IconEnum) {
     // Hero Icons
     IconEnum["MailIcon"] = "mail";
+    IconEnum["AutoSign"] = "auto-sign";
     IconEnum["BellIcon"] = "bell";
     IconEnum["HomeIcon"] = "home";
     IconEnum["BriefcaseIcon"] = "briefcase";
@@ -32776,7 +33070,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: '50d59c76f04664a23e2ba5c2c841f600efec02c1' }, icons
+        return (index.h("host", { key: 'e53edb8f22349510399881fb8e76190b03209751' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (index.h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}px`,
@@ -32827,7 +33121,7 @@ const LsNumberInput = class {
                     ? 'invalid'
                     : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
         const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (index.h("host", { key: '794d35ed6560fe1ec5798e54ef29306978d03d50', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: '4f87d8841c7888ef60dc49f1858611c60830c5e1', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: 'd21f4db0b255d2615dec43e8b0ea0acc83e8f8fe', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: 'd5e398cf289a86f6bbe4634347e1cf199e9fe1de', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: '8ba911402323ee7c7eb91124f3fa3a988f439e1f', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '203390784de95eaf47fe1b2f8e44d0370dd08ddd', 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: '432584cb1e38877df70256a331a62478b386d6cb', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'acada7eab9b490d2505fcd2c0d1bb08ba0ae7d8f', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: 'dbc5e58f0d8310445d4717b110ec6ee59c349513', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'a5974c1990792c95f1aa6d260ba53720ac33afdb', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: 'a9a50f10982d7d357f0ea69eea951a534b7e5dec', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '1553817d47191ba8eacfc68cabe0896613f2d7e5', id: 'buttonIcon', name: 'plus-sm' })))));
+        return (index.h("host", { key: 'beb0a335033fe6f62f8fd5a753547dc30b1b9ca3', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: 'bea2559e9a33458628f15ec7dc5e262c1c75b00d', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '85b15e026a28bc9975861d9e0baebe4168d03422', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: 'f3874bc425a87aa07513aca5ea603e28d6b489fb', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: '6c812a63124cbd3f745de5dc6c1ec78faf01d49b', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '9f24c493dfa34436183121fa06115511b9d078d0', 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: '56e238651c4716be0229d8ecb02e3c332ab48545', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'e72d8f9ea8094bd3a5778b76b881f93abaea94b5', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: '99d14f1c814972f434a4d301e3314ae97005508f', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '51e815f1d9c8cf3840c7dd5a908e5721736d458d', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: '1bde6ed929ef2dde774be6c23c30756e3a1fbea1', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '76e662184421697ee480fdaddfc37dd59f51bb40', id: 'buttonIcon', name: 'plus-sm' })))));
     }
 };
 LsNumberInput.style = lsNumberInputCss;
@@ -32857,22 +33151,25 @@ const LsParticipantManager = class {
     }
     deleteHandler(role) {
         this.update.emit([{ action: 'delete', data: role }]);
+        this.mutate.emit([{ action: 'delete', data: role }]);
     }
     swapHandler(role1, role2) {
         this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
     }
     createHandler() {
+        const defaultExperience = this.editor._group.experienceConnection.experiences.find(x => x.defaultExperience === true);
         const data = [
             {
                 action: 'create',
                 data: {
                     id: btoa('rol' + crypto.randomUUID()),
-                    name: 'Signer ' + this.template.roles.length,
+                    name: 'Signer ' + (this.template.roles.length + 1),
                     roleType: 'SIGNER',
-                    signerIndex: this.template.roles.length,
+                    signerIndex: this.template.roles.length + 1,
                     ordinal: this.template.roles.length,
                     signerParent: null,
-                    experience: '',
+                    experience: defaultExperience.id,
+                    templateId: this.template.id
                 },
             },
         ];
@@ -32883,7 +33180,7 @@ const LsParticipantManager = class {
         return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: '846505f31da41d85e4aae5119637975ce94f736d' }, index.h("div", { key: 'fee2a1a3cc304c61a915a9583372263148acc4cc', class: "ls-editor-infobox" }, index.h("h2", { key: '706f3d3c7a15d132fd4e449d4dc6544076f27ab6', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: '57fa9b430561cb6439ef5c60141d5d9ffbd115ee', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: 'e21c5e1ce563b6acc7c3135581ae23d45fcff829', class: "participant-list" }, this.template?.roles.map((r, index$1) => {
+        return (index.h(index.Host, { key: '4f05b9b42935d385ac4dcf575dff6655a39b625c' }, index.h("div", { key: '07ec67a5c919dbc1258768dd7db80d21790a8c1e', class: "ls-editor-infobox" }, index.h("h2", { key: '365f0a1c25e77ffc1b89354b867e7844b53a40fe', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: 'cc7e0187d20492ea7568bd77ef4c3cb2df8b12ce', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '61045bc3accf319bfd5c84953f6a0066b6bd2114', class: "participant-list" }, this.template && this.template?.roles.map((r, index$1) => {
             return (index.h("div", { class: "participant-card", onClick: () => {
                     this.selectedHandler(r);
                 }, style: {
@@ -32901,13 +33198,14 @@ const LsParticipantManager = class {
                     color: `var(--${this.participantColor(r?.signerIndex)}-100)`,
                 } }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index$1 + 1}`), index.h("p", { class: "participant-text-type", style: {
                     color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
-                } }, r.signerIndex > 100 ? 'Witness' : 'Signer'))));
-        })), index.h("div", { key: '8d8b004e6e30e748a63c63b4315fdd58d1748aab', class: 'add-participant-button' }, index.h("button", { key: '41312ffdafec9bca1a0e3ef7b0e554d74739f957', onClick: () => this.createHandler() }, index.h("ls-icon", { key: '03cbcf950e7a61b7a35083034dfe160e6537d7b2', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: '2644a582f45a54ca06661d21cc47d81cb224c94d' }, "Add Participant"))), index.h("slot", { key: '2eb37c729f03886331c2bb0fe28c77bb26b2e232' })));
+                    textTransform: 'capitalize'
+                } }, r.roleType))));
+        })), index.h("div", { key: '295045bfeca2144d556311574fe6c34e74453c40', class: 'add-participant-button' }, index.h("button", { key: '6a0a02834fd09aff180fffc58983a0eac9fde61d', onClick: () => this.createHandler() }, index.h("ls-icon", { key: 'd623a2c621f730b96339657d49be661c96d1d9fa', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: 'ce3954251ce0b939dab95f9ea1772da1bb0cf9ea' }, "Add Participant"))), index.h("slot", { key: '65e160a9fde84fb8a09b14e60c992324bd9a8892' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
 
-const lsParticipantSelectCss = ":host{display:inline-block}*{margin:0}.dropdown{display:flex;align-items:center;position:relative}.dropdown-header{border-radius:0.625rem;border:1px solid var(--gray-20, #edeff2);background:var(--gray-10, #f7f8fa);display:flex;padding:0.125rem 0.125rem 0.125rem 0.5rem;align-items:center;gap:0.5rem}.placing-fields-text{color:var(--gray-90, #5e6066);text-align:center;font-size:0.875rem;font-style:normal;font-weight:500;margin:0}.selected-role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.dropdown-list{position:absolute;top:3rem;left:50%;transform:translateX(-50%);display:flex;width:18.5625rem;padding:0.25rem;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid var(--gray-30, #e0e2e5);background:white;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:40vh;overflow-y:auto}.dropdown-item{display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.5rem}.dropdown-item.selected,.dropdown-item.selected:hover{background:var(--primary-10, #f7f8fa)}.dropdown-item:hover{background:var(--gray-10, #f7f8fa)}.role-icon{display:flex;padding:0.5rem;border-radius:0.625rem}.role-text{display:flex;flex-direction:column;width:100%}.dropdown-item .check-icon{color:var(--gray-40, #d8d9dc)}.dropdown-item.selected .check-icon{color:var(--primary-50, #5185ff)}.role-name{color:var(--gray-100, #45484d);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem;}.role-type{color:var(--gray-80, #787a80);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.dropdown-item.selected .role-name{color:var(--blue-100, #0c1457)}.dropdown-item.selected .role-type{color:var(--blue-80, #2d4dcc)}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)}.expand-button{border:0;cursor:pointer;display:inline-flex;align-items:center;border-radius:0.5rem;justify-content:center;text-transform:capitalize;min-height:2rem;min-width:2rem;max-height:2rem;max-width:2rem}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 lsParticipantSelectCss = ":host{display:inline-block}*{margin:0}.dropdown{display:flex;align-items:center;position:relative}.dropdown-header{border-radius:0.625rem;border:1px solid var(--gray-20, #edeff2);background:var(--gray-10, #f7f8fa);display:flex;padding:0.125rem 0.125rem 0.125rem 0.5rem;align-items:center;gap:0.5rem}.placing-fields-text{color:var(--gray-90, #5e6066);text-align:center;font-size:0.875rem;font-style:normal;font-weight:500;margin:0}.selected-role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.dropdown-list{position:absolute;top:3rem;left:50%;transform:translateX(-50%);display:flex;width:18.5625rem;padding:0.25rem;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid var(--gray-30, #e0e2e5);background:white;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:40vh;overflow-y:auto}.dropdown-item{display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.5rem}.dropdown-item.selected,.dropdown-item.selected:hover{background:var(--background-selected, #e0e2e5)}.dropdown-item:hover{background:var(--gray-10, #f7f8fa)}.role-icon{display:flex;padding:0.5rem;border-radius:0.625rem}.role-text{display:flex;flex-direction:column;width:100%}.dropdown-item .check-icon{color:var(--gray-40, #d8d9dc)}.dropdown-item.selected .check-icon{color:var(--check-icon-selected)}.role-name{color:var(--gray-100, #45484d);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem;}.role-type{color:var(--gray-80, #787a80);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.dropdown-item.selected .role-name{color:var(--role-name-selected)}.dropdown-item.selected .role-type{color:var(--role-type-selected)}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)}.expand-button{border:0;cursor:pointer;display:inline-flex;align-items:center;border-radius:0.5rem;justify-content:center;text-transform:capitalize;min-height:2rem;min-width:2rem;max-height:2rem;max-width:2rem}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 LsParticipantSelect = class {
     constructor(hostRef) {
@@ -32921,7 +33219,7 @@ const LsParticipantSelect = class {
      * The currently selected role.
      * {number}
      */
-    selectedRole = { signerIndex: 0, name: 'Sender' };
+    selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER' };
     /**
      * The current template roles.
      * {LSApiRole}
@@ -32953,21 +33251,37 @@ const LsParticipantSelect = class {
         console.log('Selected role:', this.selectedRole);
     }
     participantColor = (index) => {
-        return index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: 'adc06aa02f40eb9f365bd054fdbc17ec37ff8716' }, index.h("div", { key: 'c9c48044bdd4b590145f459ab299e76accef6ffa', class: "dropdown" }, index.h("div", { key: '9895a30c6a2e6962feedfd09436d7f6b45c2e6be', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: '216a68483c4ba3463e9bd49a7c228e57b00fa2a7', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'e09aa4f1fd4f13dc58bf4c0849f1fd78cb80dda8', 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: 'f2fdb78217f014be89293f38d858154d0913e5a5', 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: '6d67903da3a1d5ccadb81e6d52cd745d7de2267b', 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: 'ae2f8081640fe8f320a8445b451ab75c51ff7415', 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: '5e9fe963642411d4e55a96d5582836400f3dd374', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '8ffffe29c80d7c4eb1891659c709378a9c3f6fc9', class: 'selected-role-label', style: {
+        console.log(this.selectedRole);
+        return (index.h(index.Host, { key: '097514e82e870acdeaea5520a07dee58d623e8dd' }, index.h("div", { key: '520a4fc7e5d787795147eb09c28a69b7c31fd1c6', class: "dropdown" }, index.h("div", { key: '3319bd3d55f1cc265deebe05d065af83a79631bf', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: '0454343f6b2a6af37933b30d7c50c757f2cc389f', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'a8e03eee8c2baa5f3d35faac7c7c32a8ee467a97', 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: '935be72455a27991639c6fa9affdc040a14e220a', 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: 'ff42263315110f6fe02a926d075aebb753dcc9f6', 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: '0d54951d113826d171f3de27b5e0ffeaf11ad69d', 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: '07e310527a339b51a36069832fee0cf891eadf8c', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: '2bc97987345d296f8426aa0359b84c65bb675b48', class: 'selected-role-label', style: {
                 background: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-20)`,
                 color: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-90)`,
-            } }, index.h("ls-icon", { key: 'adf53e3bfec038ea29501a9a345660e05e2df96b', size: "18", name: this.selectedRole?.signerIndex === 0 ? 'user' : this.selectedRole?.signerIndex > 100 ? 'eye' : 'signature' }), this.selectedRole.name || `Participant ${this.selectedRole.signerIndex}`), index.h("button", { key: 'c5ad6fe12825485d2b07d2e24ff96914cc1c8713', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: '2f8b34f2f213b794e8c08d56834de53608e86ae6', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '025633acc266061aae0ff2e71c1a8288d8419aa0', class: "dropdown-list" }, index.h("div", { key: 'c3bb123591c89ca9ddc165e45974c463e416cf0c', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', onClick: () => this.selectRole({ signerIndex: 0, name: '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: '7b7e2539026fcc467985871a8a3ec5090a990690', class: 'role-icon', style: {
+            } }, index.h("ls-icon", { key: '90318f0f94f60b0e95d0ffc30576c31759df2ff9', size: "18", name: this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature' }), this.selectedRole.name ||
+            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: '4f53ff5d8f3e14f6f705fc57b5bb3206ea350562', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: '326107f673004346ff3232515e1630ee7090f927', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: 'bc188253d880bf993b585f924defabb0efd66ea7', class: "dropdown-list" }, index.h("div", { key: 'c3886e83c8514ae2ac2616c23f3583a3cf036ff5', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+                '--background-selected': `var(--${defaultRolePalette[0]}-10)`,
+                '--check-icon-selected': `var(--${defaultRolePalette[0]}-50)`,
+            }, 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: '25c93faa92cdbeed92514b5df9181cc7673135cc', class: 'role-icon', style: {
                 background: `var(--${defaultRolePalette[0]}-40)`,
                 color: `var(--${defaultRolePalette[0]}-80)`,
-            } }, index.h("ls-icon", { key: 'f5c41d6441598e8e5521b03b68036fca4334deb6', name: "user" })), index.h("div", { key: '9ff52f210dbc37b22ad8fbfc11ca5c97f4e93e0f', class: 'role-text' }, index.h("p", { key: '4264fc560cd02f2f4b569be4ae3b4dba7a27984f', class: 'role-name' }, 'Sender'), index.h("p", { key: '916b0b78771ad2f57286ac851da0024b2090046e', class: 'role-type' }, "You")), index.h("ls-icon", { key: 'ee7a56441d57d661c79981b51aee2e6f4fbc30e6', 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', onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
+            } }, index.h("ls-icon", { key: 'f8285a338ea604f76b1a1dc7e3f716e7c99890fe', name: "user" })), index.h("div", { key: '2678585faff4e351e0d4ab14b3ad198e2dd7a89c', class: 'role-text' }, index.h("p", { key: '5e4aaa375421f9a5f7a03c4c937f7f43bf29906b', class: 'role-name', style: {
+                '--role-name-selected': `var(--${defaultRolePalette[0]}-100)`,
+            } }, 'Sender'), index.h("p", { key: '16bc966af7ea7462505ac34806b98ac94295ee61', class: 'role-type', style: {
+                '--role-type-selected': `var(--${defaultRolePalette[0]}-80)`,
+            } }, "You")), index.h("ls-icon", { key: '55f4d9f94a4b7dfec072e4a26a239b44f9b4b36f', 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': `var(--${this.participantColor(r?.signerIndex)}-10)`,
+                '--check-icon-selected': `var(--${this.participantColor(r?.signerIndex)}-50)`,
+            }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
                 .querySelector('.check-icon')
                 ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, index.h("div", { class: 'role-icon', style: {
                 background: r.signerIndex > 100 ? `var(--${this.participantColor(r?.signerIndex)}-30)` : `var(--${this.participantColor(r?.signerIndex)}-40)`,
                 color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
-            } }, index.h("ls-icon", { name: r.signerIndex > 100 ? 'eye' : 'signature' })), index.h("div", { class: 'role-text' }, index.h("p", { class: 'role-name' }, r.name || `Participant ${r.signerIndex}`), index.h("p", { class: 'role-type' }, r.signerIndex > 200 ? 'Approver' : r.signerIndex > 100 ? 'Witness' : '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("slot", { key: '3051c3214e714789a52a94b06044deb2e6b61066' })));
+            } }, index.h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature' })), index.h("div", { class: 'role-text' }, index.h("p", { class: 'role-name', style: {
+                '--role-name-selected': `var(--${this.participantColor(r?.signerIndex)}-100)`,
+            } }, r.name || r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`), index.h("p", { class: 'role-type', style: {
+                '--role-type-selected': `var(--${this.participantColor(r?.signerIndex)}-80)`,
+            } }, 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("slot", { key: '36d04c99b0eea3e78c11e1cc269b82a35562ab2a' })));
     }
 };
 LsParticipantSelect.style = lsParticipantSelectCss;
@@ -32988,7 +33302,7 @@ const LsRadioInput = class {
     render() {
         const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
         const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (index.h("label", { key: '621ef21ba0ad35eea192888b38baa71cb0b7b5c0', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '81ab1231ce9321fc949126ec4f3b41e1a45a7229', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: '96b420d8564684aebc9e26240e9435adeb89f295', class: 'spanContainer' }, index.h("span", { key: 'd5ae7c5e0b47868453aef50429609060fc0d6989' }, icon && index.h("ls-icon", { key: 'c40866a3d56e08c08cb5c44e0a296902fb96df9e', name: icon, size: "16" })), index.h("span", { key: '4efebbaf9020a29f8c2b439d45f772b902f7019d' }, label))));
+        return (index.h("label", { key: '0a42e5e7876168eeac63f3d1005d64b2ab90107c', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '106b67793bf5dde83ef6086cd588b3fdc59befe7', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: '2fcabb808dd94c490ddb855d5da1261f6965be55', class: 'spanContainer' }, index.h("span", { key: 'b5b74b98e6553da9497d9da33f4a268292b2bec5' }, icon && index.h("ls-icon", { key: '700388ccde573f6432597eb4111fff01577ee8f7', name: icon, size: "16" })), index.h("span", { key: 'f0a9bf1243d429bd4d62c619c6f043057099a8ff' }, label))));
     }
 };
 LsRadioInput.style = lsRadioInputCss;
@@ -33025,7 +33339,7 @@ const LsSelectInput = class {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: '23a3bd28d346226d7c5c6797a8fb8235bc826ca3', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'e3e62e3955940b53fbfe77109de407049ddc33ca', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: '538f2ffec923748499d56619db951587421bb0cc', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '703df2c5108e0e968be453c13db77da508f4675f' })), index.h("div", { key: '3ff197806e02d925e5d677b472a2502784cac157', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '4eb47121bc35a79ae4fb3b763c38b8d5a68f62ed', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (index.h("host", { key: '6057a8c24ad92b90d7d0306cc33e1d1203013d57', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'bd93aa8411864400f3252b07d0422e3878f064c8', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: '89f56b035f9406771bcfd02c4e028d246a1c3132', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '325b4225d203241b8be7566a60ac506ca77108eb' })), index.h("div", { key: '2d28afc89b2155e0fa629d174dc9601283002fb8', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '0b5d46698d73145af331452c27b5c4ecf9b03491', 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;
@@ -33071,11 +33385,11 @@ const LsStatusbar = class {
     }
     render() {
         console.log('editor', this.editor);
-        return (index.h(index.Host, { key: '29e74976e7444161b89f0fa80ba142eff3032d63' }, index.h("div", { key: '4503a9ff460e9266d8432e1ad8d0927753fc46c6', class: "status-bar-section" }, index.h("button", { key: 'bca26ed3b8d5b788b0a4359e5d5ddd793a3e98a7', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: 'f249a5e2adcf4395caf67dbd584ca463084a4830', name: "zoom-out" })), index.h("div", { key: 'aa832c008d5f55566c3bb2986fe39dc32158f8cf' }, index.h("input", { key: '12562098a3495a8b5daefaaa56241ce7ac72cae2', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: '2d37fb2a3dd4834ac8eab5471e6d5382a5cbe4b2', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: '885fb40cafe1d04a5fc2282f0488167e3787104b', name: "zoom-in" }))), index.h("div", { key: '3fb58e160add6ec615df61d7c31727ffba1073d3', class: "status-bar-section" }, index.h("button", { key: '26b3681201915faecfa5c54093dc7f6f4c2e2bae', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: 'cde71d2e228468736d6f61d8dbb9a985d56ed87b', name: "fit-width" })), index.h("button", { key: '03ce74b5f0669a43ee1630b6c99eb583f5572d6a', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: 'c7ca92cc5ca9ea331f933b523fd451d9cca494bf', name: "fit-height" }))), index.h("div", { key: 'd6677fed47861805989c4a52cfbfcf6754857864', class: "status-bar-section" }, index.h("button", { key: '0d5a5616e15f68911efce0573507337491c7e304', onClick: () => {
+        return (index.h(index.Host, { key: '8e9e1e244b4fc8ea111d2f8ae389b226caf204d9' }, index.h("div", { key: 'cb05827b0b9c57cc038ccb854669a7fa687a8559', class: "status-bar-section" }, index.h("button", { key: '9626704051c452f0b2aa4160fc0940a269aa0b97', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, index.h("ls-icon", { key: '848e4d939f839f5d12ed193e802ee936030929da', name: "zoom-out" })), index.h("div", { key: 'd95981efcabe65e1101659904df22555245eb31a' }, index.h("input", { key: '880ca323ccef733bf8557412a7d45a732aa5cb12', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), index.h("button", { key: '49754f8b4b8b55a948e1d18ca1eabfc7178f001d', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, index.h("ls-icon", { key: '582907c3c513ae45237334fc988ca551a1df24f0', name: "zoom-in" }))), index.h("div", { key: '5e8ba9b4958d4ba01fea0a5eb6cccdbc645b9385', class: "status-bar-section" }, index.h("button", { key: '68e06dd284961cf8dec02e16c302dc1fc6a22796', onClick: () => this.fitWidth() }, index.h("ls-icon", { key: '84a8b7bd659d3d80fc52201f44725bb5670b4905', name: "fit-width" })), index.h("button", { key: '49f1dd909454a0adbd6e8cb950ba5b1c93e6a99c', onClick: () => this.fitHeight() }, index.h("ls-icon", { key: 'b41c9c936499852e7eaf45417b2f2f492800731e', name: "fit-height" }))), index.h("div", { key: 'cb133d10f67ea7eec2fadcd202879fb429026a1c', class: "status-bar-section" }, index.h("button", { key: 'c65d52ad4801488b5a734047dd6866c467b8b3b4', onClick: () => {
                 this.editor.pagePrev();
-            } }, index.h("ls-icon", { key: '599d5eee4d7aae6719972efd8c150a90d3a61245', name: "chevron-left" })), index.h("p", { key: 'afbbd26449146e65a5f44e21bf49095da39bc59d' }, "1 / 2"), index.h("button", { key: 'b751678f28ac886ff4aba3df87d7368e1b80d504', onClick: () => {
+            } }, index.h("ls-icon", { key: '47661f31d5e771a3e5fa5b33679afe6c4e2c851b', name: "chevron-left" })), index.h("p", { key: 'b707b96884c61814dc82e331c0bb4d132b093fd3' }, "1 / 2"), index.h("button", { key: '23c87501b81c71dc9c1ac7f2e861467138a4d71c', onClick: () => {
                 this.editor.pageNext();
-            } }, index.h("ls-icon", { key: '95175e526b2e7361d94d6ae1d1b704b402ae17ba', name: "chevron-right" }))), index.h("slot", { key: '35082524ac623c9146016b6c7fb344365e48625c' })));
+            } }, index.h("ls-icon", { key: '6f6f802e9237a16f1ac83b094b79918e89f47cd0', name: "chevron-right" }))), index.h("slot", { key: '555034a1229da45a3ce6e00a814ceedd6e72f4b6' })));
     }
 };
 LsStatusbar.style = lsStatusbarCss;
@@ -33115,7 +33429,7 @@ const LsTextInput = class {
                     : dirty && !valid
                         ? 'invalid'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h(index.Host, { key: 'ece2114bb17097f9748baf7b5ba7816c940b0da3', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '42566241f476a8d076379977825a021568d2eaff', 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 })) : type === 'displayonly' ? (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true })) : (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })), index.h("div", { key: 'f23fd439c838e6433856b1a8c844f3885c1afcd5', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'dcad35ca05b968901cb7477aeede0d6267b23d41', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '76fc749f7551b089f38cb7def68dac0b62ed350e', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '52f58af15ca770863e09bb4c46f4017304a5effb', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '73f521570c8846caa8ca5f5e2b50bf9602544782', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+        return (index.h(index.Host, { key: 'efd1b5f431d736f4169fde7427c03928cc97aabd', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'bf6c98bb8531835cfddb19f94b64cc199e5f61b0', 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 })) : type === 'displayonly' ? (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true })) : (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })), index.h("div", { key: '0edc424a3a5d351f0643aacacfe681f7964c13db', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '586286e7682dc19b140da077381a9495594f1552', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '40c3321547d42662cfb72e50e42582d2d925f4d9', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'c2b290f3ed83e6c3f57bc3b3097b2d42377093e7', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '8f98aeaa1c086e2ba3f0813a07e74df9838e3968', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
     }
 };
 LsTextInput.style = lsTextInputCss;
@@ -33151,7 +33465,7 @@ const LsTextareaInput = class {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: '33417515941cf937c4734d99c744cac2050c1517', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '3d0d5ffe3a48a0bcdd034d7956b32536e645fa43', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '7bed853348e26ea3436cd98b3f8fe44ac644a70f', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: '7ac04c2c6fea8dd58d54573bd242be1dd9603f53', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'd01bd35115a651fe7cbd752dfbdf49625cdcc1a1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '43dc1db404f654aaa6d38d7cb71b1b0eebae6fb2', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: 'facf4fbde3b718a93d7198ed4f77bd293b8df5f5', id: 'buttonIcon', name: buttonIcon }))))));
+        return (index.h("host", { key: '1d15c458b28af68b80aa8202a0752428309a2fb8', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'f50cbadb5ad3dbead6e5b3e05827fe40e445e63e', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '1ddb10713cda1237a569d00e66baabfe4573519e', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'da68e9d7eceb82ed4842ec013dc7c9c571490663', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '2d0b2def44cda6324ffde6b166c097ea7e5d27c6', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '441ce62d6eb057295b18bd7b10d2214247079a4d', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '746d2a9fcc47146be5b62d5afd6337f332db2427', id: 'buttonIcon', name: buttonIcon }))))));
     }
 };
 LsTextareaInput.style = lsTextareaInputCss;
@@ -33163,7 +33477,7 @@ const LsToggle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '14aa511f200cbc949d135b07cb07a70b7edfbdcf' }, index.h("label", { key: 'f994ca1531ab9080830b74c751965475308f3572', class: "switch" }, index.h("input", { key: 'be377728a99b1163f6d61e8d3ffe12d2f9da205a', type: "checkbox" }), index.h("span", { key: 'a8498a99718af2a5be833eef6b6d95d76aae29ff', class: "slider round" })), index.h("slot", { key: 'bd760e7276a77d97bba2799beff818aef974d2ee' })));
+        return (index.h(index.Host, { key: '1ce88fcc6e390bb710e27c47b988574afaa9c9f6' }, index.h("label", { key: '6d76512b1bdd6c116ab62bfaf1b9178d87019b02', class: "switch" }, index.h("input", { key: 'eadd916c86f9dbe94fe9d22f65f82f6b72ea630a', type: "checkbox" }), index.h("span", { key: '9237d68fed12e736c01a5889f801a1398883dde4', class: "slider round" })), index.h("slot", { key: '19eca8c7489cdfb981d4a6093aef3246b9337abd' })));
     }
 };
 LsToggle.style = lsToggleCss;
@@ -33206,7 +33520,7 @@ const LsToolbar = class {
         this.update.emit(diffs);
     }
     render() {
-        return (index.h(index.Host, { key: '8692ee74e68449714b38624068b752b6161d5797' }, this.dataItem && this.dataItem.length > 1 ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }), index.h("ls-field-alignment", { dataItem: this.dataItem }), index.h("ls-field-distribute", { dataItem: this.dataItem }), index.h("ls-field-size", { dataItem: this.dataItem }))) : (index.h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (index.h("ls-field-format", { dataItem: this?.dataItem })) : (index.h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), index.h("slot", { key: '7790e788903c493268ab783df10ebce9662afc84' })));
+        return (index.h(index.Host, { key: 'c43519161f0c44b7f06b5b4e2a14bd81d83ecfdc' }, this.dataItem && this.dataItem.length > 1 ? (index.h("div", { class: 'rowbox' }, index.h("ls-field-format", { dataItem: this?.dataItem }))) : (index.h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (index.h("ls-field-format", { dataItem: this?.dataItem })) : (index.h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), index.h("slot", { key: 'e20ff476ede1359973876658c5e70fd6039b2e3d' })));
     }
 };
 LsToolbar.style = lsToolbarCss;
@@ -33260,7 +33574,7 @@ const LsToolboxField = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '14ad8062f22a1d3eb0130dbd26bf06c522c6b4e6', draggable: "true" }, index.h("div", { key: 'd4da463a5786f80d87d472ab19e812c4d4395f35', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, index.h("ls-icon", { key: 'a2453e407f4681bfc14ea9b4d01d54d8ae00a47f', name: this.icon, size: "20" })), index.h("p", { key: '61b6673d2b2af3a80e049bcccf01be4c94eabbe7', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: '53a1e91ee1ddc89e1e6835c7e96efb56583fbce5', name: "drag-vertical", size: "16", color: "#787a80" })));
+        return (index.h(index.Host, { key: '28635190b959516d2805743afe73a75899e93188', draggable: "true" }, index.h("div", { key: 'ebac5f01b6e811b287d3602e11ff9d9b2d2cbf42', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, index.h("ls-icon", { key: '8c90a428b4996db02725b8c69c347fbd3e7f7f98', name: this.icon, size: "20" })), index.h("p", { key: '7707d244b00898a9c3efb2ba8d2a64665b737b69', class: "toolbox-field-label" }, this.label), index.h("ls-icon", { key: '9dc296c2b3da9b561a95fc7cc5cf28f7a85e27c2', name: "drag-vertical", size: "16", color: "#787a80" })));
     }
 };
 LsToolboxField.style = lsToolboxFieldCss;
@@ -33273,6 +33587,7 @@ exports.ls_feature_column = LsFeatureColoumn;
 exports.ls_field_alignment = LsFieldAlignment;
 exports.ls_field_dimensions = LsFieldDimensions;
 exports.ls_field_distribute = LsFieldDistribute;
+exports.ls_field_footer = LsFieldFooter;
 exports.ls_field_format = LsFieldFormat;
 exports.ls_field_placement = LsFieldPlacement;
 exports.ls_field_properties = LsFieldProperties;
@@ -33300,6 +33615,6 @@ exports.ls_textarea_input = LsTextareaInput;
 exports.ls_toggle = LsToggle;
 exports.ls_toolbar = LsToolbar;
 exports.ls_toolbox_field = LsToolboxField;
-//# sourceMappingURL=ls-document-options.ls-document-viewer.ls-editor-field.ls-editor-table.ls-feature-column.ls-field-alignment.ls-field-dimensions.ls-field-distribute.ls-field-format.ls-field-placement.ls-field-properties.ls-field-properties-autosign.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-formfield.ls-icon.ls-number-input.ls-participant-manager.ls-participant-select.ls-radio-input.ls-select-input.ls-statusbar.ls-text-input.ls-textarea-input.ls-toggle.ls-toolbar.ls-toolbox-field.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-dimensions.ls-field-distribute.ls-field-footer.ls-field-format.ls-field-placement.ls-field-properties.ls-field-properties-autosign.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-formfield.ls-icon.ls-number-input.ls-participant-manager.ls-participant-select.ls-radio-input.ls-select-input.ls-statusbar.ls-text-input.ls-textarea-input.ls-toggle.ls-toolbar.ls-toolbox-field.entry.cjs.js.map
 
-//# sourceMappingURL=ls-document-options_35.cjs.entry.js.map
+//# sourceMappingURL=ls-document-options_36.cjs.entry.js.map