legalesign-document-viewer 0.4.2 → 0.4.4

package/dist/components/ls-editor-field.js

@@ -1,4 +1,4 @@
-import { L as LsEditorField$1, d as defineCustomElement$1 } from './p-CIoxINZp.js';
+import { L as LsEditorField$1, d as defineCustomElement$1 } from './p-C8ZQeYj-.js';
 
 const LsEditorField = LsEditorField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-content.js

@@ -1,4 +1,4 @@
-import { L as LsFieldContent$1, d as defineCustomElement$1 } from './p-CUXWZqch.js';
+import { L as LsFieldContent$1, d as defineCustomElement$1 } from './p-DPtMBZYM.js';
 
 const LsFieldContent = LsFieldContent$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-distribute.js

@@ -1,4 +1,4 @@
-import { L as LsFieldDistribute$1, d as defineCustomElement$1 } from './p-BHQ0WY5x.js';
+import { L as LsFieldDistribute$1, d as defineCustomElement$1 } from './p-FjzffTyc.js';
 
 const LsFieldDistribute = LsFieldDistribute$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-date.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesDate$1, d as defineCustomElement$1 } from './p-DrfpABSq.js';
+import { L as LsFieldPropertiesDate$1, d as defineCustomElement$1 } from './p-B2etz1Ic.js';
 
 const LsFieldPropertiesDate = LsFieldPropertiesDate$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-dropdown.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
-import { d as defineCustomElement$e } from './p-CIoxINZp.js';
-import { d as defineCustomElement$d } from './p-CUXWZqch.js';
+import { d as defineCustomElement$e } from './p-C8ZQeYj-.js';
+import { d as defineCustomElement$d } from './p-DPtMBZYM.js';
 import { d as defineCustomElement$c } from './p-DCZnqvsu.js';
 import { d as defineCustomElement$b } from './p-B3axAGVs.js';
 import { d as defineCustomElement$a } from './p-BzY8ubZE.js';

package/dist/components/ls-field-properties-email.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesEmail$1, d as defineCustomElement$1 } from './p-DYB1QfP2.js';
+import { L as LsFieldPropertiesEmail$1, d as defineCustomElement$1 } from './p-B7S9E2ci.js';
 
 const LsFieldPropertiesEmail = LsFieldPropertiesEmail$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-file.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesFile$1, d as defineCustomElement$1 } from './p-CXoPln5K.js';
+import { L as LsFieldPropertiesFile$1, d as defineCustomElement$1 } from './p-QEWyXsBw.js';
 
 const LsFieldPropertiesFile = LsFieldPropertiesFile$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-general.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesGeneral$1, d as defineCustomElement$1 } from './p-qC7H9a3g.js';
+import { L as LsFieldPropertiesGeneral$1, d as defineCustomElement$1 } from './p-DKx68i7a.js';
 
 const LsFieldPropertiesGeneral = LsFieldPropertiesGeneral$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-image.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesImage$1, d as defineCustomElement$1 } from './p-AZOh1kUH.js';
+import { L as LsFieldPropertiesImage$1, d as defineCustomElement$1 } from './p-DDNZkGBj.js';
 
 const LsFieldPropertiesImage = LsFieldPropertiesImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-multiple.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesMultiple$1, d as defineCustomElement$1 } from './p-jBcf1cHz.js';
+import { L as LsFieldPropertiesMultiple$1, d as defineCustomElement$1 } from './p-DyU3O3tg.js';
 
 const LsFieldPropertiesMultiple = LsFieldPropertiesMultiple$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-number.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesNumber$1, d as defineCustomElement$1 } from './p-BvGLH5NQ.js';
+import { L as LsFieldPropertiesNumber$1, d as defineCustomElement$1 } from './p-BzxhEsKd.js';
 
 const LsFieldPropertiesNumber = LsFieldPropertiesNumber$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-signature.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesSignature$1, d as defineCustomElement$1 } from './p-BmIVpWDh.js';
+import { L as LsFieldPropertiesSignature$1, d as defineCustomElement$1 } from './p-BiOHci04.js';
 
 const LsFieldPropertiesSignature = LsFieldPropertiesSignature$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-text.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesText$1, d as defineCustomElement$1 } from './p-U9xqUgfL.js';
+import { L as LsFieldPropertiesText$1, d as defineCustomElement$1 } from './p-CCt1S0nA.js';
 
 const LsFieldPropertiesText = LsFieldPropertiesText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties.js

@@ -1,4 +1,4 @@
-import { L as LsFieldProperties$1, d as defineCustomElement$1 } from './p-BiG71xua.js';
+import { L as LsFieldProperties$1, d as defineCustomElement$1 } from './p-DmszHmWG.js';
 
 const LsFieldProperties = LsFieldProperties$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-recipient-card.js

@@ -1,4 +1,4 @@
-import { L as LsRecipientCard$1, d as defineCustomElement$1 } from './p-Kpy4Ytig.js';
+import { L as LsRecipientCard$1, d as defineCustomElement$1 } from './p-B2ofj7BM.js';
 
 const LsRecipientCard = LsRecipientCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-statusbar.js

@@ -1,4 +1,4 @@
-import { L as LsStatusbar$1, d as defineCustomElement$1 } from './p-BooZeojy.js';
+import { L as LsStatusbar$1, d as defineCustomElement$1 } from './p-BNX_U6jC.js';
 
 const LsStatusbar = LsStatusbar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-DrfpABSq.js → p-B2etz1Ic.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
-import { d as defineCustomElement$d } from './p-CIoxINZp.js';
-import { d as defineCustomElement$c } from './p-CUXWZqch.js';
+import { d as defineCustomElement$d } from './p-C8ZQeYj-.js';
+import { d as defineCustomElement$c } from './p-DPtMBZYM.js';
 import { d as defineCustomElement$b } from './p-DCZnqvsu.js';
 import { d as defineCustomElement$a } from './p-B3axAGVs.js';
 import { d as defineCustomElement$9 } from './p-BzY8ubZE.js';
@@ -110,6 +110,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesDate as L, defineCustomElement as d };
-//# sourceMappingURL=p-DrfpABSq.js.map
+//# sourceMappingURL=p-B2etz1Ic.js.map
 
-//# sourceMappingURL=p-DrfpABSq.js.map
+//# sourceMappingURL=p-B2etz1Ic.js.map

package/dist/components/{p-DrfpABSq.js.map → p-B2etz1Ic.js.map}

@@ -1 +1 @@
-{"file":"p-DrfpABSq.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,ktJAAktJ;;MCQtuJ,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;AACxB,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-date/ls-field-properties-date.css?tag=ls-field-properties-date&encapsulation=shadow","src/components/ls-field-properties-date/ls-field-properties-date.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-date',\n  styleUrl: 'ls-field-properties-date.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesDate {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B2etz1Ic.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,ktJAAktJ;;MCQtuJ,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;AACxB,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-date/ls-field-properties-date.css?tag=ls-field-properties-date&encapsulation=shadow","src/components/ls-field-properties-date/ls-field-properties-date.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-date',\n  styleUrl: 'ls-field-properties-date.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesDate {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Kpy4Ytig.js → p-B2ofj7BM.js}

@@ -12,7 +12,9 @@ const LsRecipientCard = /*@__PURE__*/ proxyCustomElement(class LsRecipientCard e
         this.__registerHost();
         this.__attachShadow();
         this.changeSigner = createEvent(this, "changeSigner");
+        this.fieldSelected = createEvent(this, "fieldSelected");
     }
+    get component() { return this; }
     /**
      * The initial template data, including the link for background PDF. See README and
      * example for correct GraphQL query and data structure.
@@ -20,6 +22,14 @@ const LsRecipientCard = /*@__PURE__*/ proxyCustomElement(class LsRecipientCard e
      */
     recipient;
     activeRecipient;
+    fieldTypeSelected = {
+        label: 'Signature',
+        formElementType: 'signature',
+        elementType: 'signature',
+        validation: 0,
+        defaultHeight: 27,
+        defaultWidth: 120,
+    };
     template;
     isHovered = false;
     setIsHovered(value) {
@@ -33,13 +43,24 @@ const LsRecipientCard = /*@__PURE__*/ proxyCustomElement(class LsRecipientCard e
     filtertoolbox = null;
     // Send an internal event to be processed
     changeSigner;
+    // Send an internal event to be processed
+    fieldSelected;
+    handleFieldTypeSelected(event) {
+        console.log(event);
+        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
+        console.log(fields);
+        fields.forEach(element => {
+            element.isSelected = element.formElementType === event.detail.formElementType;
+        });
+        this.fieldTypeSelected = event.detail;
+    }
     showTool(fieldFormType) {
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
         const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];
         const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');
-        return (h(Host, { key: 'a61996a542ccf7e67c50d27a206311b836ffd331' }, h("div", { key: 'c7e1b9cdc6e23240953386ce15277f21d07d7042', class: 'participant-card top-card full-card', style: {
+        return (h(Host, { key: '4f5d189dbc71916be6d7154e9f12d48ebe12b249' }, h("div", { key: '50fda2b924adb494baaf57d3aff345166af49a67', class: 'participant-card top-card full-card', style: {
                 background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,
                 outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,
@@ -51,24 +72,25 @@ const LsRecipientCard = /*@__PURE__*/ proxyCustomElement(class LsRecipientCard e
                 this.setIsHovered(true);
             }, onMouseLeave: () => {
                 this.setIsHovered(false);
-            } }, h("div", { key: '340f57166fc89348676fb4f04c9bf11c28f354f3', class: 'participant-card-inner' }, h("div", { key: '093fc0179aa7ccbaf59b3fb1e317eab48a1b1e39', class: 'participant-card-top-items' }, h("div", { key: '5dcb9006a31945c30a8819f47bc2a1e5d09115f1', class: 'role-label', style: {
+            } }, h("div", { key: '220d962cbfa360b7e19cb1c2ffe032f1d911f14f', class: 'participant-card-inner' }, h("div", { key: 'c750c5ea63887ef7fcb021df307694cfac0392a1', class: 'participant-card-top-items' }, h("div", { key: '65fb65be87735b687c37d0c0dca3f254a726b533', class: 'role-label', style: {
                 background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,
-            } }, h("ls-icon", { key: '57fece7def421db9ad2c75d249bb78307b80fd9f', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature' }), String(this.recipient?.signerIndex).padStart(2, '0')), h("ls-icon", { key: '4420600e91f6ae98fd3ec380e3e8df5de65cf320', name: "cursor-click", size: "16", customStyle: { color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }, solid: true, style: { display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' } }), h("div", { key: '7810f97612a5a67e3a5d83c2e5795714e24141db', class: "dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' } })), h("div", { key: 'b95ed306f8c102bacae11a31f3d695ba1e2880b8', class: 'participant-card-text' }, h("p", { key: 'b14508d659d06b32958b4cfadf6482d170b88752', class: "participant-text-description", style: {
+            } }, h("ls-icon", { key: '3f37163f6691206abb77b6473ff0fddc4c6cb89f', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature' }), String(this.recipient?.signerIndex).padStart(2, '0')), h("ls-icon", { key: 'cff1e9cad9cc485b582571f445caa141a842ed8a', name: "cursor-click", size: "16", customStyle: { color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }, solid: true, style: { display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' } }), h("div", { key: '9286eeb38b3a561d60fccf39b6983bff424def8b', class: "dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' } })), h("div", { key: 'b6ff47eb82f7a7a4ce60dd458b5e81de7e2eb902', class: 'participant-card-text' }, h("p", { key: '8f5adf381c831f604a772aa554abb3e745a81339', class: "participant-text-description", style: {
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,
-            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '3514b5b0159ad4f2dcb4eac61316168557841ee8', class: "participant-text-type", style: {
+            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '013de8ebb99f5e0828b11d1b04ac9c0128d2b45c', class: "participant-text-type", style: {
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,
-            } }, this.recipient.email)), this.recipient.signerIndex === this.activeRecipient && (h("div", { key: 'e359cfa64086998b6b8f28608b4f27c5196a1cb3', class: "fields-box" }, this.recipient.signerIndex > 0 && this.showTool('signature') && (h("ls-toolbox-field", { key: '60a8368bca61edf6d0d4c902ecc11271ab8190c7', 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.recipient.signerIndex, redDot: recipientSignatures.length === 0 })), this.recipient.signerIndex === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { key: '5aa6302e0f08af58730278ca3e50f82c4b6e2e6d', 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.recipient.signerIndex })), this.showTool('text') && (h("ls-toolbox-field", { key: 'e8145ff9b67fe928b328c6d6d0c05f8035096d1c', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { key: '2b3abf2743037a6a29df2f3e21e217d76c7b3eba', 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.recipient.signerIndex })), this.showTool('date') && (h("ls-toolbox-field", { key: 'e2991a8eb23d6355ba439cd365261525fd098e15', 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.recipient.signerIndex })), this.showTool('email') && (h("ls-toolbox-field", { key: '645d024c0e2b8ce8b88447f1829f9c60512f96a2', 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.recipient.signerIndex })), this.showTool('initials') && (h("ls-toolbox-field", { key: 'a50f70b67e2e3d4655334624824dce66d60b72e3', 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.recipient.signerIndex })), this.showTool('number') && (h("ls-toolbox-field", { key: 'd07a3754d0e3a5f0f9b91c3184d1223a3835eedd', 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.recipient.signerIndex })), this.showTool('dropdown') && (h("ls-toolbox-field", { key: '04a765bf3c5ae0777fd5a7ca3005253a95f47a2d', 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.recipient.signerIndex })), this.showTool('checkbox') && (h("ls-toolbox-field", { key: '26129ce59e002c24af33dc30595872a446fb85f0', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('regex') && (h("ls-toolbox-field", { key: '2c79066642214c45d2ac2905efdceb95fd90dded', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('image') && (h("ls-toolbox-field", { key: '365192282126b7a5d076e92c5432b08ab97b76b5', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('file') && (h("ls-toolbox-field", { key: '9e727a702c3afdc705114f01c81cc30b70499603', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { key: '249819b054e52899b9b5dbdf582a766be313a874', 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.recipient.signerIndex })))))), h("slot", { key: '48d6c0e3df1cbb2623bdd9e39a42681c0ae6f64b' }), h("ls-tooltip", { key: 'd56c2c5f27650cafa149e2dad4cc4f99cdd604d9', id: "ls-tooltip-master" })));
+            } }, this.recipient.email)), this.recipient.signerIndex === this.activeRecipient && (h("div", { key: '285107d5913e04b702626e88b262fb079bd765f5', class: "fields-box" }, this.recipient.signerIndex > 0 && this.showTool('signature') && (h("ls-toolbox-field", { key: '5f32fbcd9bf5f5cc66aa24128a62b5f2edc6039d', 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.recipient.signerIndex, redDot: recipientSignatures.length === 0 })), this.recipient.signerIndex === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { key: 'da24ec0e8db3d5a192f9c321ddbc6c5a9253d226', 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.recipient.signerIndex })), this.showTool('text') && (h("ls-toolbox-field", { key: '52415f19ee72c572e029144ab81855adafb9f9d2', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { key: 'ccf6842a97068348b6a50897744c6f198e6583b7', 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.recipient.signerIndex })), this.showTool('date') && (h("ls-toolbox-field", { key: '2070f596b04ef969f8aee7b3b8de0b5b499d73ca', 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.recipient.signerIndex })), this.showTool('email') && (h("ls-toolbox-field", { key: '78cd2421bd0039912fbb7de9b2aa47bbb0cdde5d', 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.recipient.signerIndex })), this.showTool('initials') && (h("ls-toolbox-field", { key: '7c6216f0b237b4aaadd1b588ff3092789b20f210', 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.recipient.signerIndex })), this.showTool('number') && (h("ls-toolbox-field", { key: '9b0d4b004a214021df6a7633b43187438fd0e74d', 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.recipient.signerIndex })), this.showTool('dropdown') && (h("ls-toolbox-field", { key: '5f46b8fbca296c4e2e454c5d5245d8dc05677893', 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.recipient.signerIndex })), this.showTool('checkbox') && (h("ls-toolbox-field", { key: '5cc4c83690de16b26bf13b0b1bb873af7f6474aa', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('regex') && (h("ls-toolbox-field", { key: 'cf499a07dcf68608172072a9bd644c732083a5be', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('image') && (h("ls-toolbox-field", { key: 'c0c94309cff45e0a2254b75390da463801254d48', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('file') && (h("ls-toolbox-field", { key: '08ba12800db536bc6a99ea35f652139f16abcfa1', 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.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { key: '40cbc830211f62f68c1f9ebaf625d2b25929726f', 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.recipient.signerIndex })))))), h("slot", { key: 'de53e3523ad0a7eb236a9a89984bfb5c0cfaf0eb' }), h("ls-tooltip", { key: 'a4c0517ec26339b666a8612f9a36937c92f7d039', id: "ls-tooltip-master" })));
     }
     static get style() { return lsRecipientCardCss; }
 }, [257, "ls-recipient-card", {
         "recipient": [16],
         "activeRecipient": [2, "active-recipient"],
+        "fieldTypeSelected": [16, "field-type-selected"],
         "template": [16],
         "validationErrors": [16, "validation-errors"],
         "filtertoolbox": [1],
         "isHovered": [32]
-    }]);
+    }, [[0, "fieldTypeSelected", "handleFieldTypeSelected"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -100,6 +122,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsRecipientCard as L, defineCustomElement as d };
-//# sourceMappingURL=p-Kpy4Ytig.js.map
+//# sourceMappingURL=p-B2ofj7BM.js.map
 
-//# sourceMappingURL=p-Kpy4Ytig.js.map
+//# sourceMappingURL=p-B2ofj7BM.js.map

package/dist/components/p-B2ofj7BM.js.map

@@ -0,0 +1 @@
+{"file":"p-B2ofj7BM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-recipient-card/ls-recipient-card.css?tag=ls-recipient-card&encapsulation=shadow","src/components/ls-recipient-card/ls-recipient-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.participant-card {\n  display: flex;\n  padding: 0.75rem;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  align-self: stretch;\n}\n\n.dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  background: var(--red-50, #ff706b);\n  border-radius: 50%;\n  margin-right: 0.25rem;\n}\n\n.top-card {\n  border-radius: 1rem 1rem 0 0;\n}\n\n.full-card {\n  border-radius: 1.5rem;\n}\n\n.bottom-card {\n  border-radius: 0 0 1rem 1rem;\n}\n\n.participant-card-inner {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n\n.form-button-set {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.role-label {\n  display: flex;\n  padding: 0.125rem 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.fields-box {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.role-label.fields {\n  border-radius: 1rem;\n  margin-top: 0.5rem;\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--default-button-colour);\n}\n\n.innerButton:hover {\n  color: var(--hover-button-colour);\n}\n\n.participant-card-top-items {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.button-set {\n  display: flex;\n  gap: 0.125rem;\n}\n\n.participant-text-description {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.participant-text-type {\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\n}\n\n/* Global Styles */\n\n.full-width {\n  width: 100%;\n}\n\n.participant-card-text {\n  padding: 0 0.125rem 0.125rem 0.125rem;\n}\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.tertiary {\n  border: 1px solid var(--primary-60, #4456f6);\n  background: transparent;\n  color: var(--primary-70, #2134dc);\n}\n\nbutton.tertiary:hover {\n  border: 1px solid var(--primary-70, #2134dc);\n  border: 1px solid var(--primary-80, #0c34b8);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background: transparent;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n  background-color: var(--red-10, #fff1f0);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State, Listen, Element } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSApiRecipient } from '../../types/LSApiRecipient';\nimport { LSApiTemplate } from '../../components';\nimport { ValidationError } from '../../types/ValidationError';\nimport { IToolboxField } from '../interfaces/IToolboxField';\n\n@Component({\n  tag: 'ls-recipient-card',\n  styleUrl: 'ls-recipient-card.css',\n  shadow: true,\n})\nexport class LsRecipientCard {\n  @Element() component: HTMLElement;\n  /**\n   * The initial template data, including the link for background PDF. See README and\n   * example for correct GraphQL query and data structure.\n   * {LSApiTemplate}\n   */\n  @Prop() recipient: LSApiRecipient;\n  @Prop() activeRecipient: number;\n  @Prop() fieldTypeSelected: IToolboxField = {\n    label: 'Signature',\n    formElementType: 'signature',\n    elementType: 'signature',\n    validation: 0,\n    defaultHeight: 27,\n    defaultWidth: 120,\n  };\n  @Prop() template: LSApiTemplate;\n  @State() isHovered: boolean = false;\n\n  private setIsHovered(value: boolean) {\n    this.isHovered = value;\n  }\n  @Prop() validationErrors: ValidationError[] = [];\n  \n  /**\n   * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.\n   * {string}\n   */\n  @Prop() filtertoolbox?: string = null;\n\n  // Send an internal event to be processed\n  @Event() changeSigner: EventEmitter<number>;\n\n  // Send an internal event to be processed\n  @Event() fieldSelected: EventEmitter<IToolboxField>;\n\n    @Listen('fieldTypeSelected')\n    handleFieldTypeSelected(event) {\n      console.log(event);\n      const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');\n  \n      console.log(fields);\n  \n      fields.forEach(element => {\n        element.isSelected = element.formElementType === event.detail.formElementType;\n      });\n  \n      this.fieldTypeSelected = event.detail;\n    }\n\n  \n  showTool(fieldFormType: string): boolean {\n    return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);\n  }\n\n  render() {\n    const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];\n    const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');\n    return (\n      <Host>\n        <div\n          class={'participant-card top-card full-card'}\n          style={{\n            background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,\n            border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,\n            outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,\n            marginTop: this.recipient.roleType === 'WITNESS' ? '-0.813rem' : '0',\n            cursor: 'pointer',\n          }}\n          onClick={() => {\n            this.changeSigner.emit(this.recipient.signerIndex);\n          }}\n          onMouseEnter={() => {\n            this.setIsHovered(true);\n          }}\n          onMouseLeave={() => {\n            this.setIsHovered(false);\n          }}\n        >\n          <div class={'participant-card-inner'}>\n            <div class={'participant-card-top-items'}>\n              <div\n                class={'role-label'}\n                style={{\n                  background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n                }}\n              >\n                <ls-icon name={this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\n                {String(this.recipient?.signerIndex).padStart(2, '0')}\n              </div>\n              <ls-icon\n                name=\"cursor-click\"\n                size=\"16\"\n                customStyle={{ color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }}\n                solid\n                style={{ display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' }}\n              />\n              <div class=\"dot\" style={{ display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' }} />\n            </div>\n\n            <div class={'participant-card-text'}>\n              <p\n                class=\"participant-text-description\"\n                style={{\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,\n                }}\n              >\n                {this.recipient?.firstname + ' ' + this.recipient?.lastname}\n              </p>\n              <p\n                class=\"participant-text-type\"\n                style={{\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,\n                }}\n              >\n                {this.recipient.email}\n              </p>\n              {/* {this.recipient?.roleType !== 'APPROVER' && (\n                <div\n                  class={'role-label fields'}\n                  style={{\n                    background:\n                      recipientFields.length === 0 ? defaultRolePalette[this.recipient?.signerIndex % 100].s60 : defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n                    color: recipientFields.length === 0 ? 'white' : defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n                    // display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? '' : 'none',\n                  }}\n                >\n                  {recipientSignatures.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n                  {recipientSignatures.length === 0 ? 'Signature Required' : `${recipientFields.length} ${recipientFields.length === 1 ? 'Field' : 'Fields'}`}\n                </div>\n              )} */}\n            </div>\n            {this.recipient.signerIndex === this.activeRecipient && (\n              <div class=\"fields-box\">\n                {this.recipient.signerIndex > 0 && this.showTool('signature') && (\n                  <ls-toolbox-field\n                    elementType=\"signature\"\n                    formElementType=\"signature\"\n                    label=\"Signature\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={0}\n                    icon=\"signature\"\n                    tooltip=\"Use this field to collect Signatures from Participants\"\n                    signer={this.recipient.signerIndex}\n                    redDot={recipientSignatures.length === 0}\n                  />\n                )}\n\n                {this.recipient.signerIndex === 0 && this.showTool('auto sign') && (\n                  <ls-toolbox-field\n                    elementType=\"auto sign\"\n                    formElementType=\"auto sign\"\n                    label=\"Auto Sign\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={3000}\n                    icon=\"auto-sign\"\n                    tooltip=\"Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.showTool('text') && (\n                  <ls-toolbox-field\n                    elementType=\"text\"\n                    formElementType=\"text\"\n                    label=\"Text\"\n                    defaultHeight={27}\n                    defaultWidth={100}\n                    validation={0}\n                    icon=\"text\"\n                    tooltip=\"A field for collecting any plain text values such as: names, addresses or descriptions\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.recipient.signerIndex > 0 && this.showTool('signing date') && (\n                  <ls-toolbox-field\n                    elementType=\"signing date\"\n                    formElementType=\"signing date\"\n                    label=\"Signing Date\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={30}\n                    icon=\"auto-date\"\n                    tooltip=\"Automatically inserts the date upon completion by the assigned Participant\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('date') && (\n                  <ls-toolbox-field\n                    elementType=\"date\"\n                    formElementType=\"date\"\n                    label=\"Date\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={2}\n                    icon=\"calender\"\n                    tooltip=\"A field for collecting dates with built-in date formatting options\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.showTool('email') && (\n                  <ls-toolbox-field\n                    elementType=\"email\"\n                    formElementType=\"email\"\n                    label=\"Email\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={1}\n                    icon=\"at-symbol\"\n                    tooltip=\"A Field to only accept entries formatted as an email address (e.g., example@example.com)\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('initials') && (\n                  <ls-toolbox-field\n                    elementType=\"initials\"\n                    formElementType=\"initials\"\n                    label=\"Initials\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={2000}\n                    icon=\"initials\"\n                    tooltip=\"Use this field anywhere Participants are required to Initial your document\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('number') && (\n                  <ls-toolbox-field\n                    elementType=\"number\"\n                    formElementType=\"number\"\n                    label=\"Number\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={50}\n                    icon=\"hashtag\"\n                    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)\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('dropdown') && (\n                  <ls-toolbox-field\n                    elementType=\"dropdown\"\n                    formElementType=\"dropdown\"\n                    label=\"Dropdown\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={20}\n                    icon=\"dropdown\"\n                    tooltip=\"Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('checkbox') && (\n                  <ls-toolbox-field\n                    elementType=\"checkbox\"\n                    formElementType=\"checkbox\"\n                    label=\"Checkbox\"\n                    defaultHeight={27}\n                    defaultWidth={27}\n                    validation={25}\n                    icon=\"check\"\n                    tooltip=\"Places a checkbox on your document. Handy for T&Cs or  ✔/✗ sections\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.recipient.signerIndex > 0 && this.showTool('regex') && (\n                  <ls-toolbox-field\n                    elementType=\"regex\"\n                    formElementType=\"regex\"\n                    label=\"Regex\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={93}\n                    icon=\"code\"\n                    tooltip=\"Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('image') && (\n                  <ls-toolbox-field\n                    elementType=\"image\"\n                    formElementType=\"image\"\n                    label=\"Image\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={90}\n                    icon=\"photograph\"\n                    tooltip=\"Use when you need Participants to upload their own images during the signing process\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('file') && (\n                  <ls-toolbox-field\n                    elementType=\"file\"\n                    formElementType=\"file\"\n                    label=\"File\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={74}\n                    icon=\"upload\"\n                    tooltip=\"Use when you need Participants to upload their own documents during the signing process\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('drawn') && (\n                  <ls-toolbox-field\n                    elementType=\"drawn\"\n                    formElementType=\"drawn\"\n                    label=\"Drawn\"\n                    defaultHeight={120}\n                    defaultWidth={120}\n                    validation={90}\n                    icon=\"pencil\"\n                    tooltip=\"Allow users to draw on the document using their mouse or touchscreen\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DYB1QfP2.js → p-B7S9E2ci.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
-import { d as defineCustomElement$d } from './p-CIoxINZp.js';
-import { d as defineCustomElement$c } from './p-CUXWZqch.js';
+import { d as defineCustomElement$d } from './p-C8ZQeYj-.js';
+import { d as defineCustomElement$c } from './p-DPtMBZYM.js';
 import { d as defineCustomElement$b } from './p-DCZnqvsu.js';
 import { d as defineCustomElement$a } from './p-B3axAGVs.js';
 import { d as defineCustomElement$9 } from './p-BzY8ubZE.js';
@@ -110,6 +110,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesEmail as L, defineCustomElement as d };
-//# sourceMappingURL=p-DYB1QfP2.js.map
+//# sourceMappingURL=p-B7S9E2ci.js.map
 
-//# sourceMappingURL=p-DYB1QfP2.js.map
+//# sourceMappingURL=p-B7S9E2ci.js.map

package/dist/components/{p-DYB1QfP2.js.map → p-B7S9E2ci.js.map}

@@ -1 +1 @@
-{"file":"p-DYB1QfP2.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,ktJAAktJ;;MCSvuJ,sBAAsB,iBAAAA,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;;;;;;AACzB,IAAA,QAAQ;IAEd,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-email/ls-field-properties-email.css?tag=ls-field-properties-email&encapsulation=shadow","src/components/ls-field-properties-email/ls-field-properties-email.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n\n@Component({\n  tag: 'ls-field-properties-email',\n  styleUrl: 'ls-field-properties-email.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesEmail {\n  @Prop() dataItem: LSApiElement;\n  \n    render() {\n      return (\n        <Host>\n          <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n            <div class={'field-set'} slot=\"content\">\n              <ls-field-content dataItem={this.dataItem} />\n              <ls-field-properties-advanced dataItem={this.dataItem} />\n            </div>\n            <div class={'field-set'} slot=\"dimensions\">\n              <ls-field-dimensions dataItem={this.dataItem} />\n            </div>\n            <div class={'field-set'} slot=\"placement\">\n              <ls-field-placement dataItem={this.dataItem} />\n            </div>\n          </ls-field-properties-container>\n          <ls-field-footer dataItem={this.dataItem} />\n        </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B7S9E2ci.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,ktJAAktJ;;MCSvuJ,sBAAsB,iBAAAA,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;;;;;;AACzB,IAAA,QAAQ;IAEd,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-email/ls-field-properties-email.css?tag=ls-field-properties-email&encapsulation=shadow","src/components/ls-field-properties-email/ls-field-properties-email.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n\n@Component({\n  tag: 'ls-field-properties-email',\n  styleUrl: 'ls-field-properties-email.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesEmail {\n  @Prop() dataItem: LSApiElement;\n  \n    render() {\n      return (\n        <Host>\n          <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n            <div class={'field-set'} slot=\"content\">\n              <ls-field-content dataItem={this.dataItem} />\n              <ls-field-properties-advanced dataItem={this.dataItem} />\n            </div>\n            <div class={'field-set'} slot=\"dimensions\">\n              <ls-field-dimensions dataItem={this.dataItem} />\n            </div>\n            <div class={'field-set'} slot=\"placement\">\n              <ls-field-placement dataItem={this.dataItem} />\n            </div>\n          </ls-field-properties-container>\n          <ls-field-footer dataItem={this.dataItem} />\n        </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BooZeojy.js → p-BNX_U6jC.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
-import { d as defineCustomElement$5, j as debounce } from './p-CIoxINZp.js';
+import { d as defineCustomElement$5, j as debounce } from './p-C8ZQeYj-.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
 import { d as defineCustomElement$4 } from './p-DZ_KhOns.js';
 import { d as defineCustomElement$3 } from './p-CtV1B-_5.js';
@@ -107,6 +107,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsStatusbar as L, defineCustomElement as d };
-//# sourceMappingURL=p-BooZeojy.js.map
+//# sourceMappingURL=p-BNX_U6jC.js.map
 
-//# sourceMappingURL=p-BooZeojy.js.map
+//# sourceMappingURL=p-BNX_U6jC.js.map

package/dist/components/{p-BooZeojy.js.map → p-BNX_U6jC.js.map}

@@ -1 +1 @@
-{"file":"p-BooZeojy.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-statusbar/ls-statusbar.css?tag=ls-statusbar&encapsulation=shadow","src/components/ls-statusbar/ls-statusbar.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 1000;\n  right: 1rem;\n  bottom: 1rem;\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  align-items: end;\n  height: 2.25rem;\n  overflow: visible;\n}\n\n.controls-bar {\n  display: flex;\n  flex-direction: row;\n  background-color: white;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 1rem;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.status-bar-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.controls-bar > :not(:nth-child(1)) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\nbutton {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--gray-100, #45484d);\n  border-radius: 0.5rem;\n}\n\nbutton:disabled {\n  color: var(--gray-40, #c1c4c8);\n  cursor: not-allowed;\n}\n\ninput[type=\"range\"] {\n  -webkit-appearance: none; /* Remove default styling */\n  width: 100%;\n  height: 8px;\n  background: var(--gray-20, #EDEFF2);\n  border-radius: 5px;\n  outline: none;\n}\n\n/* Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 8px;\n  height: 8px;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Firefox */\ninput[type=\"range\"]::-moz-range-thumb {\n  width: 8px;\n  height: 8%;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Track color for Firefox */\ninput[type=\"range\"]::-moz-range-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\n/* Track color for Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\n\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\nbutton {\n  all: unset;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--gray-80, #6c6e73);\n  text-transform: capitalize;\n}\n\nbutton.tertiaryGrey:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n   * The zoom or scale level 100 === 100%.\n   * {number}\n   */\n  @Prop({ mutable: true }) zoom: number;\n  @Prop({ mutable: true }) page: number;\n  @Prop({ mutable: true }) pageCount: number;\n\n  /**\n   * The parent editor control.\n   * {LsDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value);\n    this.zoom = value;\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n  }\n\n  fitWidth() {\n    const leftBox = this.editor.component.shadowRoot.getElementById('ls-left-box');\n    const space = window.screen.width - leftBox.clientWidth - 60; // 40 for padding/margin\n\n    console.log('Space width:', space, 'Page width:', this.editor.pageDimensions[0].width);\n    const scale: number = space / this.editor.pageDimensions[0].width;\n    console.log(Math.round(scale * 1e2) / 1e2);\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const space = window.screen.height - 40; // 40 for padding/margin\n    const scale: number = space / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n    this.zoom = this.editor.zoom;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'}>\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.setZoom(this.editor.zoom * 0.8)} id=\"zoom-out-btn\" data-tooltip=\"Zoom Out\">\n            <ls-icon name=\"zoom-out\" />\n          </button>\n          <div>\n            <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n          </div>\n          <button onClick={() => this.setZoom(this.editor.zoom / 0.8)} id=\"zoom-in-btn\" data-tooltip=\"Zoom In\">\n            <ls-icon name=\"zoom-in\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.fitWidth()} id=\"fit-width-btn\" data-tooltip=\"Fit Width\">\n            <ls-icon name=\"fit-width\" />\n          </button>\n          <button onClick={() => this.fitHeight()} id=\"fit-height-btn\" data-tooltip=\"Fit Height\">\n            <ls-icon name=\"fit-height\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'} style={this.pageCount === 1 && { display: 'none' }}>\n          <button\n            onClick={() => {\n              this.editor.pagePrev();\n            }}\n            disabled={this.page === 1}\n            id=\"prev-page-btn\"\n            data-tooltip={this.page === 1 ? 'No Previous Page' : 'Previous Page'}\n          >\n            <ls-icon name=\"chevron-left\" />\n          </button>\n          <p>\n            {this.page} / {this.pageCount}\n          </p>\n          <button\n            onClick={() => {\n              this.editor.pageNext();\n            }}\n            disabled={this.page === this.pageCount}\n            id=\"next-page-btn\"\n            data-tooltip={this.page === this.pageCount ? 'No Next Page' : 'Next Page'}\n          >\n            <ls-icon name=\"chevron-right\" />\n          </button>\n        </div>\n        </div>\n        <ls-helper-bar />\n        <ls-tooltip id=\"ls-tooltip-master\" />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BNX_U6jC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-statusbar/ls-statusbar.css?tag=ls-statusbar&encapsulation=shadow","src/components/ls-statusbar/ls-statusbar.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 1000;\n  right: 1rem;\n  bottom: 1rem;\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  align-items: end;\n  height: 2.25rem;\n  overflow: visible;\n}\n\n.controls-bar {\n  display: flex;\n  flex-direction: row;\n  background-color: white;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 1rem;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.status-bar-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.controls-bar > :not(:nth-child(1)) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\nbutton {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--gray-100, #45484d);\n  border-radius: 0.5rem;\n}\n\nbutton:disabled {\n  color: var(--gray-40, #c1c4c8);\n  cursor: not-allowed;\n}\n\ninput[type=\"range\"] {\n  -webkit-appearance: none; /* Remove default styling */\n  width: 100%;\n  height: 8px;\n  background: var(--gray-20, #EDEFF2);\n  border-radius: 5px;\n  outline: none;\n}\n\n/* Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 8px;\n  height: 8px;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Firefox */\ninput[type=\"range\"]::-moz-range-thumb {\n  width: 8px;\n  height: 8%;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Track color for Firefox */\ninput[type=\"range\"]::-moz-range-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\n/* Track color for Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\n\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\nbutton {\n  all: unset;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--gray-80, #6c6e73);\n  text-transform: capitalize;\n}\n\nbutton.tertiaryGrey:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n   * The zoom or scale level 100 === 100%.\n   * {number}\n   */\n  @Prop({ mutable: true }) zoom: number;\n  @Prop({ mutable: true }) page: number;\n  @Prop({ mutable: true }) pageCount: number;\n\n  /**\n   * The parent editor control.\n   * {LsDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value);\n    this.zoom = value;\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n  }\n\n  fitWidth() {\n    const leftBox = this.editor.component.shadowRoot.getElementById('ls-left-box');\n    const space = window.screen.width - leftBox.clientWidth - 60; // 40 for padding/margin\n\n    console.log('Space width:', space, 'Page width:', this.editor.pageDimensions[0].width);\n    const scale: number = space / this.editor.pageDimensions[0].width;\n    console.log(Math.round(scale * 1e2) / 1e2);\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const space = window.screen.height - 40; // 40 for padding/margin\n    const scale: number = space / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n    this.zoom = this.editor.zoom;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'}>\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.setZoom(this.editor.zoom * 0.8)} id=\"zoom-out-btn\" data-tooltip=\"Zoom Out\">\n            <ls-icon name=\"zoom-out\" />\n          </button>\n          <div>\n            <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n          </div>\n          <button onClick={() => this.setZoom(this.editor.zoom / 0.8)} id=\"zoom-in-btn\" data-tooltip=\"Zoom In\">\n            <ls-icon name=\"zoom-in\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.fitWidth()} id=\"fit-width-btn\" data-tooltip=\"Fit Width\">\n            <ls-icon name=\"fit-width\" />\n          </button>\n          <button onClick={() => this.fitHeight()} id=\"fit-height-btn\" data-tooltip=\"Fit Height\">\n            <ls-icon name=\"fit-height\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'} style={this.pageCount === 1 && { display: 'none' }}>\n          <button\n            onClick={() => {\n              this.editor.pagePrev();\n            }}\n            disabled={this.page === 1}\n            id=\"prev-page-btn\"\n            data-tooltip={this.page === 1 ? 'No Previous Page' : 'Previous Page'}\n          >\n            <ls-icon name=\"chevron-left\" />\n          </button>\n          <p>\n            {this.page} / {this.pageCount}\n          </p>\n          <button\n            onClick={() => {\n              this.editor.pageNext();\n            }}\n            disabled={this.page === this.pageCount}\n            id=\"next-page-btn\"\n            data-tooltip={this.page === this.pageCount ? 'No Next Page' : 'Next Page'}\n          >\n            <ls-icon name=\"chevron-right\" />\n          </button>\n        </div>\n        </div>\n        <ls-helper-bar />\n        <ls-tooltip id=\"ls-tooltip-master\" />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BmIVpWDh.js → p-BiOHci04.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
-import { d as defineCustomElement$d } from './p-CIoxINZp.js';
-import { d as defineCustomElement$c } from './p-CUXWZqch.js';
+import { d as defineCustomElement$d } from './p-C8ZQeYj-.js';
+import { d as defineCustomElement$c } from './p-DPtMBZYM.js';
 import { d as defineCustomElement$b } from './p-DCZnqvsu.js';
 import { d as defineCustomElement$a } from './p-B3axAGVs.js';
 import { d as defineCustomElement$9 } from './p-BzY8ubZE.js';
@@ -110,6 +110,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesSignature as L, defineCustomElement as d };
-//# sourceMappingURL=p-BmIVpWDh.js.map
+//# sourceMappingURL=p-BiOHci04.js.map
 
-//# sourceMappingURL=p-BmIVpWDh.js.map
+//# sourceMappingURL=p-BiOHci04.js.map