legalesign-document-viewer 0.4.6 → 0.4.8

package/dist/collection/components/ls-validation-tag/ls-validation-tag.css

@@ -9,7 +9,7 @@
 
 .valid-label {
   display: flex;
-  padding: 2px 0.5rem;
+  padding: 0.125rem 0.5rem;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
@@ -138,7 +138,7 @@
 
 .role-label {
   display: flex;
-  padding: 2px 3px;
+  padding: 0.125rem 0.1875rem;
   justify-content: center;
   align-items: center;
   border-radius: 0.25rem;
@@ -167,30 +167,30 @@
 }
 
 .validation-tag-container {
-  padding: 12px;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .validation-tag-header {
-  padding-bottom: 8px;
+  padding-bottom: 0.5rem;
   border-bottom: 1px solid #edeff2;
 }
 
 .validation-tag-title {
   font-family: 'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #45484d;
-  line-height: 20px;
+  line-height: 1.5rem;
 }
 
 .validation-tag-row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 8px;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
   cursor: pointer;
   transition: background-color 0.2s;
 }
@@ -200,8 +200,8 @@
 }
 
 .validation-tag-bar {
-  width: 4px;
-  height: 32px;
+  width: 0.25rem;
+  height: 2rem;
   border-radius: 9999px;
   flex-shrink: 0;
 }
@@ -213,9 +213,9 @@
 
 .validation-tag-name {
   font-family: 'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #45484d;
-  line-height: 20px;
+  line-height: 1.5rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -223,9 +223,9 @@
 
 .validation-tag-email {
   font-family: 'IBM Plex Sans Light', 'IBM Plex Sans', sans-serif;
-  font-size: 12px;
+  font-size: 0.75rem;
   color: #5e6066;
-  line-height: 16px;
+  line-height: 1rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/collection/components/ls-validation-tag/ls-validation-tag.js

@@ -8,7 +8,7 @@ export class LsValidationTag {
     showDropDown = true;
     changeSigner;
     render() {
-        return (h(Host, { key: '56d4edab1559ad588b75595f81e5225c4fca5ae9' }, h("div", { key: 'f0eda9f66ec990740dd5e55ee84a011c9e4cfe32', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'} ${this.type === 'compose' ? 'compose' : 'default'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length > 0 && h("div", { key: 'a6eed97b64022a6a01f799ead4d8abacb6c850e3', class: `field-counter ${this.type === 'compose' ? 'compose' : 'default'}` }, this.validationErrors.length), this.type === 'compose' ? (this.validationErrors.length === 0 ? 'Ready' : `Required`) : this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && this.showDropDown && this.type !== 'compose' && (h("ls-icon", { key: '44fdf98c392b1c90840f77587a8706fd06bfc809', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.validationErrors.length > 0 && this.type === 'compose' && h("ls-icon", { key: 'a3a7c71bf4db7608bb01999480ca617911ef4799', name: "cursor-click", solid: true, size: "16", customStyle: { color: 'var(--red-70, #DC2721);' } })), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (h("div", { key: '0e2c0587bb8fc4a30f1e7dac52daa9bb1908e65a', class: 'field-dropdown' }, h("div", { key: '6356acf2267aec3cd114a08ed1005ba126579519', class: 'dropdown-header' }, h("h2", { key: 'aeaa96f8765175d8ad8ef3443e69f22252344e6a' }, "Fields Required"), h("p", { key: '8a6465b75162bdc0069045240393afaa7a7ef793' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
+        return (h(Host, { key: '56d4edab1559ad588b75595f81e5225c4fca5ae9' }, h("div", { key: 'f0eda9f66ec990740dd5e55ee84a011c9e4cfe32', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'} ${this.type === 'compose' ? 'compose' : 'default'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length > 0 && h("div", { key: 'a6eed97b64022a6a01f799ead4d8abacb6c850e3', class: `field-counter ${this.type === 'compose' ? 'compose' : 'default'}` }, this.validationErrors.length), this.type === 'compose' ? (this.validationErrors.length === 0 ? 'Ready' : `Required`) : this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && this.showDropDown && this.type !== 'compose' && (h("ls-icon", { key: '44fdf98c392b1c90840f77587a8706fd06bfc809', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.validationErrors.length > 0 && this.type === 'compose' && h("ls-icon", { key: '43ceb3968753789e2e91016939f8faa16694dac5', name: "cursor-click", solid: true, size: "1rem", customStyle: { color: 'var(--red-70, #DC2721);' } })), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (h("div", { key: 'b1bc4540da6b37a98298630ab26be1b43a11fc33', class: 'field-dropdown' }, h("div", { key: 'be99543d63859599aec555191145ba842ca6b4a8', class: 'dropdown-header' }, h("h2", { key: 'bc31a3368340e72ee6da9bec445fab0c34c096d9' }, "Fields Required"), h("p", { key: '300e9dd9f7a5c3dde5da158a5ccbb3f49f388a55' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
             const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
             const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
             return (h("div", { key: idx, class: 'required-field', style: {
@@ -19,7 +19,7 @@ export class LsValidationTag {
                     '--field-text-color-hover': pallette.s80,
                     '--field-border-color-hover': pallette.s60,
                 } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
-        }))), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (h("div", { key: '13769805869726da8bcef70dedd1b7200ab47ca7', class: 'field-dropdown compose' }, h("div", { key: '42844a68f69899d936ca81d5f1eea60021d8aaff', class: "validation-tag-header" }, h("p", { key: '9ab9f5d30516c5e05c0d9ec1817fb53eb60c759f', class: "validation-tag-title" }, "Recipients Missing Signature")), this.validationErrors.map((field, idx) => {
+        }))), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (h("div", { key: 'bb4058c147e00ac825e470bad730f44966563efe', class: 'field-dropdown compose' }, h("div", { key: '549403e738740dd25b92519fb247ba1d3b230bc1', class: "validation-tag-header" }, h("p", { key: '177540f440276eaec3896b01936e710f9f5b8ced', class: "validation-tag-title" }, "Recipients Missing Signature")), this.validationErrors.map((field, idx) => {
             const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
             const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
             return (h("div", { class: "validation-tag-row", key: idx, onClick: () => {

package/dist/collection/components/ls-validation-tag/ls-validation-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-validation-tag.js","sourceRoot":"","sources":["../../../src/components/ls-validation-tag/ls-validation-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n  @Prop() type: 'compose' | 'default' = 'default';\n  @Prop() showDropDown: boolean = true;\n\n  @Event() changeSigner: EventEmitter<number>;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'} ${this.type === 'compose' ? 'compose' : 'default'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length > 0 && <div class={`field-counter ${this.type === 'compose' ? 'compose' : 'default'}`}>{this.validationErrors.length}</div>}\n          {this.type === 'compose' ? (this.validationErrors.length === 0 ? 'Ready' : `Required`) : this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && this.showDropDown && this.type !== 'compose' && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n          {this.validationErrors.length > 0 && this.type === 'compose' && <ls-icon name=\"cursor-click\" solid size=\"16\" customStyle={{ color: 'var(--red-70, #DC2721);' }} />}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n        {this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (\n          <div class={'field-dropdown compose'}>\n            <div class=\"validation-tag-header\">\n              <p class=\"validation-tag-title\">Recipients Missing Signature</p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n              return (\n                <div\n                  class=\"validation-tag-row\"\n                  key={idx}\n                  onClick={() => {\n                    this.changeSigner.emit(field?.role?.signerIndex);\n                    this.isExpanded = false;\n                  }}\n                >\n                  <div class=\"validation-tag-bar\" style={{ background: pallette.s60 }}></div>\n                  <div class=\"validation-tag-details\">\n                    <p class=\"validation-tag-name\">{`${field?.role?.firstname} ${field?.role?.lastname}`}</p>\n                    <p class=\"validation-tag-email\">{field?.role?.email}</p>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-validation-tag.js","sourceRoot":"","sources":["../../../src/components/ls-validation-tag/ls-validation-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n  @Prop() type: 'compose' | 'default' = 'default';\n  @Prop() showDropDown: boolean = true;\n\n  @Event() changeSigner: EventEmitter<number>;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'} ${this.type === 'compose' ? 'compose' : 'default'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length > 0 && <div class={`field-counter ${this.type === 'compose' ? 'compose' : 'default'}`}>{this.validationErrors.length}</div>}\n          {this.type === 'compose' ? (this.validationErrors.length === 0 ? 'Ready' : `Required`) : this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && this.showDropDown && this.type !== 'compose' && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n          {this.validationErrors.length > 0 && this.type === 'compose' && <ls-icon name=\"cursor-click\" solid size=\"1rem\" customStyle={{ color: 'var(--red-70, #DC2721);' }} />}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n        {this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (\n          <div class={'field-dropdown compose'}>\n            <div class=\"validation-tag-header\">\n              <p class=\"validation-tag-title\">Recipients Missing Signature</p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n              return (\n                <div\n                  class=\"validation-tag-row\"\n                  key={idx}\n                  onClick={() => {\n                    this.changeSigner.emit(field?.role?.signerIndex);\n                    this.isExpanded = false;\n                  }}\n                >\n                  <div class=\"validation-tag-bar\" style={{ background: pallette.s60 }}></div>\n                  <div class=\"validation-tag-details\">\n                    <p class=\"validation-tag-name\">{`${field?.role?.firstname} ${field?.role?.lastname}`}</p>\n                    <p class=\"validation-tag-email\">{field?.role?.email}</p>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/components/ls-document-options.js

@@ -1,4 +1,4 @@
-import { L as LsDocumentOptions$1, d as defineCustomElement$1 } from './p-RnnpDT-h.js';
+import { L as LsDocumentOptions$1, d as defineCustomElement$1 } from './p-DtfgidTY.js';
 
 const LsDocumentOptions = LsDocumentOptions$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-document-viewer.js

@@ -1,50 +1,50 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
-import { a as alter, o as oob, f as findDimensions, r as recalculateCoordinates, b as findIn, u as updateTemplate, d as defineCustomElement$J, m as matchData, v as validate, c as moveField, g as getApiType, e as addField, h as getTemplate } from './p-6rlVwY5W.js';
+import { a as alter, o as oob, f as findDimensions, r as recalculateCoordinates, b as findIn, u as updateTemplate, d as defineCustomElement$J, m as matchData, v as validate, c as moveField, g as getApiType, e as addField, h as getTemplate } from './p-CB6w78IO.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
-import { d as defineCustomElement$K } from './p-RnnpDT-h.js';
+import { d as defineCustomElement$K } from './p-DtfgidTY.js';
 import { d as defineCustomElement$I } from './p-CB2IouRT.js';
-import { d as defineCustomElement$H } from './p-Nj0OCBoq.js';
-import { d as defineCustomElement$G } from './p-oiSMxbl6.js';
-import { d as defineCustomElement$F } from './p-DC1C7wSu.js';
-import { d as defineCustomElement$E } from './p-ByNRBaHk.js';
-import { d as defineCustomElement$D } from './p--zZz_own.js';
-import { d as defineCustomElement$C } from './p-DEWvb3CA.js';
-import { d as defineCustomElement$B } from './p-ecEYUtBb.js';
-import { d as defineCustomElement$A } from './p-CnzdsJ7f.js';
-import { d as defineCustomElement$z } from './p-DUSbyLyO.js';
-import { d as defineCustomElement$y } from './p-DfaX9tao.js';
-import { d as defineCustomElement$x } from './p-Bk5EZZj6.js';
+import { d as defineCustomElement$H } from './p-C0vy7fEN.js';
+import { d as defineCustomElement$G } from './p-SymuFFwR.js';
+import { d as defineCustomElement$F } from './p-hgs41zT_.js';
+import { d as defineCustomElement$E } from './p-BHTy08Q0.js';
+import { d as defineCustomElement$D } from './p-CqvHgqQi.js';
+import { d as defineCustomElement$C } from './p-CYeSt5Fo.js';
+import { d as defineCustomElement$B } from './p-Ce_FwQKY.js';
+import { d as defineCustomElement$A } from './p-D5Lt75HV.js';
+import { d as defineCustomElement$z } from './p-BXjDp97T.js';
+import { d as defineCustomElement$y } from './p-4zazHXkZ.js';
+import { d as defineCustomElement$x } from './p-mtgdqmoW.js';
 import { d as defineCustomElement$w } from './p-BSoZFh0I.js';
-import { d as defineCustomElement$v } from './p-Cjs9opNb.js';
-import { d as defineCustomElement$u } from './p-DSfRG8h-.js';
-import { d as defineCustomElement$t } from './p-CtqzTrW1.js';
-import { d as defineCustomElement$s } from './p-C5Wwr500.js';
-import { d as defineCustomElement$r } from './p-dMh2qwev.js';
-import { d as defineCustomElement$q } from './p-BE42_s-A.js';
-import { d as defineCustomElement$p } from './p-oLmlMT4P.js';
-import { d as defineCustomElement$o } from './p-C-jvthbB.js';
-import { d as defineCustomElement$n } from './p-Dgc5eQou.js';
-import { d as defineCustomElement$m } from './p-CSShMZoN.js';
-import { d as defineCustomElement$l } from './p-B4SrLUIV.js';
-import { d as defineCustomElement$k } from './p-DKR6lJi9.js';
-import { d as defineCustomElement$j } from './p-BQN3l4X7.js';
-import { d as defineCustomElement$i } from './p-DeA6P5Nw.js';
+import { d as defineCustomElement$v } from './p-Ca9OGLvH.js';
+import { d as defineCustomElement$u } from './p-DjunXuAM.js';
+import { d as defineCustomElement$t } from './p-B8NAATla.js';
+import { d as defineCustomElement$s } from './p-BdTy5xDV.js';
+import { d as defineCustomElement$r } from './p-DhQKM6mo.js';
+import { d as defineCustomElement$q } from './p-D0oqtZ7v.js';
+import { d as defineCustomElement$p } from './p-BArB45ep.js';
+import { d as defineCustomElement$o } from './p-CnLhdSVD.js';
+import { d as defineCustomElement$n } from './p-DXAEPHmo.js';
+import { d as defineCustomElement$m } from './p-COuOscFT.js';
+import { d as defineCustomElement$l } from './p-DpEeDtkU.js';
+import { d as defineCustomElement$k } from './p-6l08SdGl.js';
+import { d as defineCustomElement$j } from './p-95nSEls8.js';
+import { d as defineCustomElement$i } from './p-Myru1I0U.js';
 import { d as defineCustomElement$h } from './p-DMtkP3At.js';
 import { d as defineCustomElement$g } from './p-DuLbniAl.js';
-import { d as defineCustomElement$f } from './p-Fw6kMqPe.js';
-import { d as defineCustomElement$e } from './p-Cwm6iZnk.js';
-import { d as defineCustomElement$d } from './p-8Uklt2-a.js';
+import { d as defineCustomElement$f } from './p-Dp_6qCVD.js';
+import { d as defineCustomElement$e } from './p-Dt8uznTD.js';
+import { d as defineCustomElement$d } from './p-8ubyIwnl.js';
 import { d as defineCustomElement$c } from './p-C3Qs4SL0.js';
-import { d as defineCustomElement$b } from './p-DMbfojtQ.js';
-import { d as defineCustomElement$a } from './p-dsAPfCxI.js';
-import { d as defineCustomElement$9 } from './p-Dr_eGXsl.js';
-import { d as defineCustomElement$8 } from './p-Ba9CMqrU.js';
-import { d as defineCustomElement$7 } from './p-D3F0Jtj5.js';
-import { d as defineCustomElement$6 } from './p-zC7rIWhO.js';
-import { d as defineCustomElement$5 } from './p-C7jd-O6l.js';
+import { d as defineCustomElement$b } from './p-CpKruuk0.js';
+import { d as defineCustomElement$a } from './p-DNojPpNK.js';
+import { d as defineCustomElement$9 } from './p-B28ZaK_Y.js';
+import { d as defineCustomElement$8 } from './p-bm-gsw1C.js';
+import { d as defineCustomElement$7 } from './p-CMrBTV-g.js';
+import { d as defineCustomElement$6 } from './p-BzEEnXM3.js';
+import { d as defineCustomElement$5 } from './p-2R-Lmtr0.js';
 import { d as defineCustomElement$4 } from './p-CwVY532N.js';
-import { d as defineCustomElement$3 } from './p-CO-U7TRb.js';
-import { d as defineCustomElement$2 } from './p-K67Z4FW4.js';
+import { d as defineCustomElement$3 } from './p-CRf3zadK.js';
+import { d as defineCustomElement$2 } from './p-CEARE5Dy.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -24435,7 +24435,7 @@ const getGroupData = (id) => {
       `;
 };
 
-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}.left-slot-wrapper{position:fixed;top:0.375rem;left:0.675rem;z-index:2000}slot{justify-content:center;align-items:center;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content;background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.right-slot-wrapper{position:fixed;top:0.375rem;right:0.675rem;z-index:2000}.validation-tag-wrapper{position:fixed;top:0.375rem;right:0.375rem;z-index:2000}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{position:relative;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%;z-index:1000;left:0;top:0}.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}.compose-toolbox{display:flex;flex-direction:column;width:100%;height:100%;overflow:none;border-radius:0;border:none;background:white;padding:0.25rem}.recipients-box{position:relative;display:flex;flex-direction:column;gap:0.75rem;overflow-y:auto;width:calc(100% + 4px);padding:0.75rem 0.25rem 0.25rem 0.25rem}.scroll-gradient-top{position:absolute;top:95px;left:0;width:100%;height:1rem;background:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));pointer-events:none;z-index:100}.scroll-gradient-bottom{position:absolute;bottom:1rem;left:0.75rem;width:calc(100% - 1.5rem);height:1rem;background:linear-gradient(to top, white, rgba(255, 255, 255, 0));pointer-events:none;z-index:100}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px;box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.12)}#ls-mid-area{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;width:100vw;height:100%}.document-frame-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:visible;max-height:100%;width:100vw;overflow:scroll;padding:5rem 380px 2rem 380px}#ls-document-frame{position:relative;height:98vh;margin-right:auto;margin-left: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;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)}";
+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}.left-slot-wrapper{position:fixed;top:0.375rem;left:0.675rem;z-index:2000}slot{justify-content:center;align-items:center;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content;background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.right-slot-wrapper{position:fixed;top:0.375rem;right:0.675rem;z-index:2000}.validation-tag-wrapper{position:fixed;top:0.375rem;right:0.375rem;z-index:2000}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{position:relative;border-radius:1rem;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%;z-index:1000;left:0;top:0}.left-box-inner{position:relative;display:flex;height:100%;padding:0.75rem;gap:0.75rem}.rightBox{border:1px gray solid;width:29.375rem;min-width:24.375rem;padding:0.25rem;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.compose-toolbox{display:flex;flex-direction:column;width:100%;height:100%;overflow:none;border-radius:0;border:none;background:white;padding:0.25rem}.recipients-box{position:relative;display:flex;flex-direction:column;gap:0.75rem;overflow-y:auto;width:calc(100% + 0.25rem);padding:0.75rem 0.25rem 0.25rem 0.25rem}.scroll-gradient-top{position:absolute;top:5.9375rem;left:0;width:100%;height:1rem;background:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));pointer-events:none;z-index:100}.scroll-gradient-bottom{position:absolute;bottom:1rem;left:0.75rem;width:calc(100% - 1.5rem);height:1rem;background:linear-gradient(to top, white, rgba(255, 255, 255, 0));pointer-events:none;z-index:100}.ls-editor-infobox{padding:0.125rem 0.5rem 0.125rem 0.5rem}#pdf-canvas{top:0px;left:0px;width:6.25rem;height:6.25rem;box-shadow:0 0.5rem 2rem 0 rgba(0, 0, 0, 0.12)}#ls-mid-area{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;width:100vw;height:100%}.document-frame-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:visible;max-height:100%;width:100vw;overflow:scroll;padding:5rem 23.75rem 2rem 23.75rem}#ls-document-frame{position:relative;height:98vh;margin-right:auto;margin-left:auto}.prevButton{position:relative;bottom:1.875rem}.nextButton{position:relative;bottom:1.875rem}.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;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:2.25rem}.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';
 const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentViewer extends H {
@@ -24967,7 +24967,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (h(Host, { key: '62402c417f86fc4281d953b1a4f8709d0f1d6cd7' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '15a4db508ee9d16e44a9e84ac4c5be7f2c4f3686' }), h("div", { key: '76f9909417bc27bb9bc2f2524076f05d6c88e9bf', class: "page-header" }, h("div", { key: 'e859052dfb395701cc79b273e93877028628cf15', class: 'left-slot-wrapper' }, h("slot", { key: '34dfd7d2989bb1f96ee822517a709a4ed9820705', name: "left-button" })), h("div", { key: '1d6a035338ce475b564679b7ca1722133247d7b4', class: 'right-slot-wrapper' }, h("slot", { key: '266cce39667d3d4455ffc2f0ce2f20ee27058759', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'd54a9943c81adf4b8fe1906aa5c162b05a657373' }, h("span", { key: '7f81f4fa0ef0a94f1fac293aca22aa61ec273196', class: "header-text-1" }, "Template Creation"), h("span", { key: 'e949e88dc267a1d6317d222dbbdfde6a4953243a' }, "/"), h("span", { key: 'f9f9bad3007748b69d6a9371caab1f1cf0134be9', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '50db2b3742fab5434332c87c95429902b79e21c6', style: { display: 'flex', alignItems: 'center', gap: '4px' } }, h("span", { key: '23e1c2c04ab0151cb3d174a0598fa4d56edf856f', class: "header-text-1" }, "Compose"), " ", h("span", { key: '26ca47d4f420287047d77988b0a5841849ad910b' }, "/"), " ", h("ls-title-input", { key: 'b9ff06b3f93940cb1bd07737c4bcf8cfa33d975a', template: this._template })))), this.mode === 'editor' && (h("div", { key: 'dce96808076d4b89df82bda46f783ce5de32cef0', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'd7e12a889847de388a56a54c2d250e08e8e437af', validationErrors: this.validationErrors }))), h("form", { key: '62c5c2adf9afeb222cac40daa84ad050142592e4', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
+        return (h(Host, { key: '62402c417f86fc4281d953b1a4f8709d0f1d6cd7' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '15a4db508ee9d16e44a9e84ac4c5be7f2c4f3686' }), h("div", { key: '76f9909417bc27bb9bc2f2524076f05d6c88e9bf', class: "page-header" }, h("div", { key: 'e859052dfb395701cc79b273e93877028628cf15', class: 'left-slot-wrapper' }, h("slot", { key: '34dfd7d2989bb1f96ee822517a709a4ed9820705', name: "left-button" })), h("div", { key: '1d6a035338ce475b564679b7ca1722133247d7b4', class: 'right-slot-wrapper' }, h("slot", { key: '266cce39667d3d4455ffc2f0ce2f20ee27058759', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'd54a9943c81adf4b8fe1906aa5c162b05a657373' }, h("span", { key: '7f81f4fa0ef0a94f1fac293aca22aa61ec273196', class: "header-text-1" }, "Template Creation"), h("span", { key: 'e949e88dc267a1d6317d222dbbdfde6a4953243a' }, "/"), h("span", { key: 'f9f9bad3007748b69d6a9371caab1f1cf0134be9', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: 'a3a1247ae9f2f3a0af62f8edf126d4a183062ba1', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("span", { key: '5481c7f19fd6f0bb01ef4ac2423bf31c89044fac', class: "header-text-1" }, "Compose"), " ", h("span", { key: '80b479704b6cb18916e573958930bb7e30b0010a' }, "/"), " ", h("ls-title-input", { key: 'c21d49a7e4eeaebbc8c1234f0b73d0a2b93aa5d3', template: this._template })))), this.mode === 'editor' && (h("div", { key: '574f02201940531dab79ea39680935d987bd581d', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'ce68bb580c64ef38b5ab9fe286a2c01dac46a802', validationErrors: this.validationErrors }))), h("form", { key: '13325057436527a2aee93c34d43cf2c9f9cd7e9e', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -24982,11 +24982,11 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                     validationManager.validationErrors = this.validationErrors;
                 }
                 this.manager = manager.detail;
-            } })), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Fields"), h("p", { class: "toolbox-section-description" }, "Drag and drop, or select and double click, to place fields on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 && this.showTool('signature') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.signer })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'toolbox' : 'hidden' }), h("ls-recipient-manager", { id: "ls-recipient-manager", class: this.manager === 'recipient' ? 'compose-toolbox' : 'hidden' }, h("div", { class: 'scroll-gradient-top' }), h("div", { class: 'scroll-gradient-bottom' }), h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '18px', right: '16px' }, type: "compose" }), h("div", { class: 'recipients-box' }, this._recipients &&
+            } })), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Fields"), h("p", { class: "toolbox-section-description" }, "Drag and drop, or select and double click, to place fields on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 && this.showTool('signature') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.signer })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'toolbox' : 'hidden' }), h("ls-recipient-manager", { id: "ls-recipient-manager", class: this.manager === 'recipient' ? 'compose-toolbox' : 'hidden' }, h("div", { class: 'scroll-gradient-top' }), h("div", { class: 'scroll-gradient-bottom' }), h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '1.125rem', right: '1rem' }, type: "compose" }), h("div", { class: 'recipients-box' }, this._recipients &&
             this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, "data-signer-index": recipient.signerIndex })))))), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: 'd2cd3c8b66d53b227beb35f441cedb808d5ad91e', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '753752c0987efd7cd86b53ad3f00a74adca1fabe', id: "ls-mid-area" }, h("div", { key: 'bec6d9793a453e0a6efaf7984cbdbe2001e51eff', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'c92c1fd73afcff335655e00c2d26f990693eaf45', id: "ls-document-frame" }, h("canvas", { key: '63dc6920f052cf6c78473009f58144f8353f8e34', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '8598600d059adf0497c4f9c6c80de60b44594408', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '1a473a145bb081bac583f53b00b12338260a4323', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'c0e286f2402be48c8242ea6fd17d8088ce95283c', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '6722839e866df4b08b0ca43c0363044d3f6888b6', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "1.25rem" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: '3dfaa11e478b1869eef9a3a4aa90a522b9a533b2', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'ecca8f68c1cb6745ee0322dd4b32d903f40ffc9e', id: "ls-mid-area" }, h("div", { key: '4e70ad5fb15755747fa78385a14b0b5c1629af2d', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '49f3923bb36f1415e791771588aa11b4d5272cad', id: "ls-document-frame" }, h("canvas", { key: '6632d26bba751070acf649939d2e090763d3b7e1', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '5528e11634d1eeee5fdf1c40f390be5fcc53a757', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'd7db1734c8340f5914086992e96ee211aea42e51', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'b03bf614bc06460a573ee9a83756a1d1e424bd83', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '016522d8cf6bc49ab28eb556395d0d1d28f53a02', id: "ls-tooltip-master" })));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],