legalesign-document-viewer 0.3.8 → 0.4.0

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

@@ -1 +1 @@
-{"file":"p-CeKcOUyM.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-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}

package/dist/components/{p-CdEPt9fv.js → p-DZ_KhOns.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
-import { d as defineCustomElement$3 } from './p-CWfyjOto.js';
-import { d as defineCustomElement$2 } from './p-sqcHMrnp.js';
-import { d as defineCustomElement$1 } from './p-XkANRt3Q.js';
+import { d as defineCustomElement$3 } from './p-CtV1B-_5.js';
+import { d as defineCustomElement$2 } from './p-DPVPaPb1.js';
+import { d as defineCustomElement$1 } from './p-DC0HL60H.js';
 
 const lsHelperBarCss = ".controls-bar{display:flex;flex-direction:column;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem;gap:0.75rem;padding:0.5rem}button{all:unset;border:0;color:var(--gray-80, #6c6e73)}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}button:disabled{color:var(--gray-40, #c1c4c8);cursor:not-allowed}.divider{height:1px;background-color:var(--gray-30, #e0e2e5);width:100%;margin:-0.25rem 0}";
 
@@ -19,11 +19,11 @@ const LsHelperBar = /*@__PURE__*/ proxyCustomElement(class LsHelperBar extends H
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '0242b574b0c0ba959a967b662728d4c1efcedf91' }, h("div", { key: '655d3577366a9a89c1020deb4331de5b802678f0', class: 'controls-bar', onMouseEnter: () => (this.expanded = true), onMouseLeave: () => (this.expanded = false) }, h("button", { key: '5ccc942d2074f1a2d96e599765b9a6a738c476ac', style: !this.expanded ? { display: 'none' } : { display: 'block' }, id: "keyboard-btn", ref: el => {
+        return (h(Host, { key: '061822abff6f324af19fc264ca4ef838bb0bbe0a' }, h("div", { key: '76cc6c198cf588c9f25557094449edc9522d22f4', class: 'controls-bar', onMouseEnter: () => (this.expanded = true), onMouseLeave: () => (this.expanded = false) }, h("button", { key: '8b8d38b8625b4b4f072beb2c4eb31379d90d40be', style: !this.expanded ? { display: 'none' } : { display: 'block' }, id: "keyboard-btn", ref: el => {
                 if (el) {
                     this.shortcutsBtn = el;
                 }
-            } }, h("ls-keyboard-shortcuts", { key: '6a1068c2875a3b2bd7eaa177ad9a88ecd1ce7ade', referenceElement: this.shortcutsBtn }), h("ls-icon", { key: '4cd22a3a90d8043d1ddcb42371dcc2dcd8bd2b13', name: "keyboard" })), h("button", { key: '603450f893dedef6f328fc37e18481432c6fa2b2', style: !this.expanded ? { display: 'none' } : { display: 'block' }, "data-pendo": "launch-new-edit-tour" }, h("ls-icon", { key: '125053796a842e701ee55602fe43fa02800bbe78', name: "map", "data-tooltip": "Take a Guided Tour", "data-tooltip-placement": "left" })), h("button", { key: '61621774787715e41c57a8a5ab3fb1d160428380', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://legalesign.com/articles/', '_blank') }, h("ls-icon", { key: 'f7b2cacaee5ed9b10e1f52619e7f91c25c41a269', name: "book-open", "data-tooltip": "View Documentation \u2197", "data-tooltip-placement": "left" })), h("div", { key: '794b4362a4f338af6b8a7000c9e163aa17c0cb38', class: "divider", style: !this.expanded ? { display: 'none' } : { display: 'block' } }), h("button", { key: '7830114f56e458cc507a05a1f0198ee96d833454' }, h("ls-icon", { key: '3d4dd69c36922d3aef54d7936ae2f13d980a5446', name: "question-mark-circle" }))), h("slot", { key: '38d21c37b910bb7e759d94516c6f9ba19cc29715' }), h("ls-tooltip", { key: 'a0a1b1e60c81168afb1278e1280c5eabb92cc824', id: "ls-tooltip-master" })));
+            } }, h("ls-keyboard-shortcuts", { key: '23c97b13dad7092a849dfe3093000e07d2f9ff7b', referenceElement: this.shortcutsBtn }), h("ls-icon", { key: '5a64cbe09d163178f2cfb613b4a9d871bc7661cd', name: "keyboard" })), h("button", { key: '3fd30dd762bf8bf3266d5be0cee8c41a4cedcdb1', style: !this.expanded ? { display: 'none' } : { display: 'block' }, "data-pendo": "launch-new-edit-tour" }, h("ls-icon", { key: '4173bf9e2c74a21e7bc02b09657c2f9fab638dc0', name: "map", "data-tooltip": "Take a Guided Tour", "data-tooltip-placement": "left" })), h("button", { key: 'd2960e5793c7a3a0ccac756ace603714fb650f56', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://legalesign.com/articles/', '_blank') }, h("ls-icon", { key: '0fe4f8204e9988d4149b0988f71c8d4cf18ec6cf', name: "book-open", "data-tooltip": "View Documentation \u2197", "data-tooltip-placement": "left" })), h("div", { key: 'd9fc9f72efa34d85d49292a22483dceefe70fcf5', class: "divider", style: !this.expanded ? { display: 'none' } : { display: 'block' } }), h("button", { key: '27469a568bd52b8720fd1f7f09eb1847aea7504f' }, h("ls-icon", { key: '59025902862e563da1cc9f45bdf5b822b00ab4c9', name: "question-mark-circle" }))), h("slot", { key: '4336509f3a61062d59d5f5a87ccfeb1021de2a9a' }), h("ls-tooltip", { key: '0d9025118f530702b32903c96bdd468b7907a211', id: "ls-tooltip-master" })));
     }
     static get style() { return lsHelperBarCss; }
 }, [257, "ls-helper-bar", {
@@ -61,6 +61,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsHelperBar as L, defineCustomElement as d };
-//# sourceMappingURL=p-CdEPt9fv.js.map
+//# sourceMappingURL=p-DZ_KhOns.js.map
 
-//# sourceMappingURL=p-CdEPt9fv.js.map
+//# sourceMappingURL=p-DZ_KhOns.js.map

package/dist/components/{p-CdEPt9fv.js.map → p-DZ_KhOns.js.map}

@@ -1 +1 @@
-{"file":"p-CdEPt9fv.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,geAAge;;MCQ1e,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;IAEC,QAAQ,GAAY,KAAK;AACvC,IAAA,YAAY;IAErB,gBAAgB,GAAA;AACd,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,EAAA,EACjH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAClE,EAAE,EAAC,cAAc,EACjB,GAAG,EAAE,EAAE,IAAG;gBACR,IAAI,EAAE,EAAE;AACN,oBAAA,IAAI,CAAC,YAAY,GAAG,EAAE;;AAE1B,aAAC,EAAA,EAED,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAuB,gBAAgB,EAAE,IAAI,CAAC,YAAY,EAAI,CAAA,EAC9D,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,UAAU,EAAA,CAAG,CACpB,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAA,YAAA,EAAa,sBAAsB,EAAA,EAC3G,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,cAAA,EAAc,oBAAoB,EAAwB,wBAAA,EAAA,MAAM,GAAG,CAC/E,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,EAAA,EAClJ,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,cAAA,EAAc,2BAAsB,EAAwB,wBAAA,EAAA,MAAM,GAAG,CACvF,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAI,CAAA,EAC3F,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,sBAAsB,EAAA,CAAG,CAChC,CACL,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAG,CAAA,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-helper-bar/ls-helper-bar.css?tag=ls-helper-bar&encapsulation=shadow","src/components/ls-helper-bar/ls-helper-bar.tsx"],"sourcesContent":[".controls-bar {\n  display: flex;\n  flex-direction: column;\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  gap: 0.75rem;\n  padding: 0.5rem;\n}\n\nbutton {\n  all: unset;\n  border: 0;\n  color: var(--gray-80, #6c6e73);\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\n.divider {\n  height: 1px;\n  background-color: var(--gray-30, #e0e2e5);\n  width: 100%;\n  margin: -0.25rem 0;\n}","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-helper-bar',\n  styleUrl: 'ls-helper-bar.css',\n  shadow: true,\n})\nexport class LsHelperBar {\n  @Element() component: HTMLElement;\n  @Prop({mutable: true}) expanded: boolean = false;\n  @State() shortcutsBtn: HTMLElement;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'} onMouseEnter={() => (this.expanded = true)} onMouseLeave={() => (this.expanded = false)}>\n          <button\n            style={!this.expanded ? { display: 'none' } : { display: 'block' }}\n            id=\"keyboard-btn\"\n            ref={el => {\n              if (el) {\n                this.shortcutsBtn = el;\n              }\n            }}\n          >\n            <ls-keyboard-shortcuts referenceElement={this.shortcutsBtn} />\n            <ls-icon name=\"keyboard\" />\n          </button>\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} data-pendo=\"launch-new-edit-tour\">\n            <ls-icon name=\"map\" data-tooltip=\"Take a Guided Tour\" data-tooltip-placement=\"left\" />\n          </button>\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} onClick={() => window.open('https://legalesign.com/articles/', '_blank')}>\n            <ls-icon name=\"book-open\" data-tooltip=\"View Documentation ↗\" data-tooltip-placement=\"left\" />\n          </button>\n          <div class=\"divider\" style={!this.expanded ? { display: 'none' } : { display: 'block' }} />\n          <button>\n            <ls-icon name=\"question-mark-circle\" />\n          </button>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DZ_KhOns.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,geAAge;;MCQ1e,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;IAEC,QAAQ,GAAY,KAAK;AACvC,IAAA,YAAY;IAErB,gBAAgB,GAAA;AACd,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,EAAA,EACjH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAClE,EAAE,EAAC,cAAc,EACjB,GAAG,EAAE,EAAE,IAAG;gBACR,IAAI,EAAE,EAAE;AACN,oBAAA,IAAI,CAAC,YAAY,GAAG,EAAE;;AAE1B,aAAC,EAAA,EAED,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAuB,gBAAgB,EAAE,IAAI,CAAC,YAAY,EAAI,CAAA,EAC9D,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,UAAU,EAAA,CAAG,CACpB,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAA,YAAA,EAAa,sBAAsB,EAAA,EAC3G,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,cAAA,EAAc,oBAAoB,EAAwB,wBAAA,EAAA,MAAM,GAAG,CAC/E,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,EAAA,EAClJ,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,cAAA,EAAc,2BAAsB,EAAwB,wBAAA,EAAA,MAAM,GAAG,CACvF,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAI,CAAA,EAC3F,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,sBAAsB,EAAA,CAAG,CAChC,CACL,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAG,CAAA,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-helper-bar/ls-helper-bar.css?tag=ls-helper-bar&encapsulation=shadow","src/components/ls-helper-bar/ls-helper-bar.tsx"],"sourcesContent":[".controls-bar {\n  display: flex;\n  flex-direction: column;\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  gap: 0.75rem;\n  padding: 0.5rem;\n}\n\nbutton {\n  all: unset;\n  border: 0;\n  color: var(--gray-80, #6c6e73);\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\n.divider {\n  height: 1px;\n  background-color: var(--gray-30, #e0e2e5);\n  width: 100%;\n  margin: -0.25rem 0;\n}","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-helper-bar',\n  styleUrl: 'ls-helper-bar.css',\n  shadow: true,\n})\nexport class LsHelperBar {\n  @Element() component: HTMLElement;\n  @Prop({mutable: true}) expanded: boolean = false;\n  @State() shortcutsBtn: HTMLElement;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'} onMouseEnter={() => (this.expanded = true)} onMouseLeave={() => (this.expanded = false)}>\n          <button\n            style={!this.expanded ? { display: 'none' } : { display: 'block' }}\n            id=\"keyboard-btn\"\n            ref={el => {\n              if (el) {\n                this.shortcutsBtn = el;\n              }\n            }}\n          >\n            <ls-keyboard-shortcuts referenceElement={this.shortcutsBtn} />\n            <ls-icon name=\"keyboard\" />\n          </button>\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} data-pendo=\"launch-new-edit-tour\">\n            <ls-icon name=\"map\" data-tooltip=\"Take a Guided Tour\" data-tooltip-placement=\"left\" />\n          </button>\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} onClick={() => window.open('https://legalesign.com/articles/', '_blank')}>\n            <ls-icon name=\"book-open\" data-tooltip=\"View Documentation ↗\" data-tooltip-placement=\"left\" />\n          </button>\n          <div class=\"divider\" style={!this.expanded ? { display: 'none' } : { display: 'block' }} />\n          <button>\n            <ls-icon name=\"question-mark-circle\" />\n          </button>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,17 +1,17 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
-import { d as defineCustomElement$d } from './p-CAbrMIbN.js';
-import { d as defineCustomElement$c } from './p-DrD5JKw9.js';
-import { d as defineCustomElement$b } from './p-CWMW0nzH.js';
-import { d as defineCustomElement$a } from './p-CNX4llIr.js';
-import { d as defineCustomElement$9 } from './p-yu8Gmj9y.js';
-import { d as defineCustomElement$8 } from './p-BvIKgXkH.js';
-import { d as defineCustomElement$7 } from './p-DfYmuFSx.js';
-import { d as defineCustomElement$6 } from './p-BCoqHTq9.js';
-import { d as defineCustomElement$5 } from './p-CWfyjOto.js';
-import { d as defineCustomElement$4 } from './p-gE1FA92I.js';
-import { d as defineCustomElement$3 } from './p-Dk00ccBn.js';
-import { d as defineCustomElement$2 } from './p-DZPnGx2N.js';
-import { d as defineCustomElement$1 } from './p-XkANRt3Q.js';
+import { d as defineCustomElement$d } from './p-CIoxINZp.js';
+import { d as defineCustomElement$c } from './p-CUXWZqch.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';
+import { d as defineCustomElement$8 } from './p-DGuG1Bmj.js';
+import { d as defineCustomElement$7 } from './p-CaBVuofO.js';
+import { d as defineCustomElement$6 } from './p-Cqxe6wZe.js';
+import { d as defineCustomElement$5 } from './p-CtV1B-_5.js';
+import { d as defineCustomElement$4 } from './p-NoKw4xu7.js';
+import { d as defineCustomElement$3 } from './p-DKcMRnoh.js';
+import { d as defineCustomElement$2 } from './p-CrVSg3t4.js';
+import { d as defineCustomElement$1 } from './p-DC0HL60H.js';
 
 const lsFieldPropertiesDateCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
@@ -23,7 +23,7 @@ const LsFieldPropertiesDate = /*@__PURE__*/ proxyCustomElement(class LsFieldProp
     }
     dataItem;
     render() {
-        return (h(Host, { key: 'ea5bd0d382ad32fa79de34674dbb745a55048089' }, h("ls-field-properties-container", { key: '787ad9439736b7ee01ecb2c9042bb7308fe4ac45', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: 'ef59ba835a6ffedee3a197206924e9e39c01d820', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '4649ae40b11ccd292332cee9c27a6b1830bf33de', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '4459ea3865782cf7143e129ab8305f43133f51f1', dataItem: this.dataItem })), h("div", { key: 'a458ef9a2e60b54d3125c43be725384f09b9428e', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: 'f49bbb7263642b2f56d45011008e1b7a7d846dc8', dataItem: this.dataItem })), h("div", { key: '972244ffb6d6be51a0cce0daecd8adaaa2978c18', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: 'b03300627b1a07ca540c490c042decf092ecd71c', dataItem: this.dataItem }))), h("ls-field-footer", { key: '05a527172d65454d5094f3ad8af56050e485ad4b', dataItem: this.dataItem })));
+        return (h(Host, { key: 'f78f03bccce97c0d12ae21e3f7879f4a83452d0b' }, h("ls-field-properties-container", { key: '6f2391a7ed6e85dda3b868a15a735c05701c1f3d', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: 'cce3f53fa0b32efe341fe9682775928c7a1645a8', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '2a4a986d17ec0e3537d75988cd61820d673ab364', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: 'be070de8f0d9c212e8849498055b232e90f77a21', dataItem: this.dataItem })), h("div", { key: '4218d20c0ad2987fde6b7ad190c77e6f45580e0d', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '902fc665b8dd167afdb8fb90101458b63d381956', dataItem: this.dataItem })), h("div", { key: 'a9f23940fe88417be866999d8f03d53c24e9eef4', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '7b80f9305ae3ae83c4f807693faeb0085e9dae7d', dataItem: this.dataItem }))), h("ls-field-footer", { key: '5feb5badd9c982424988daa66127b2b89af53c47', dataItem: this.dataItem })));
     }
     static get style() { return lsFieldPropertiesDateCss; }
 }, [257, "ls-field-properties-date", {
@@ -110,6 +110,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesDate as L, defineCustomElement as d };
-//# sourceMappingURL=p-BphT81GV.js.map
+//# sourceMappingURL=p-DrfpABSq.js.map
 
-//# sourceMappingURL=p-BphT81GV.js.map
+//# sourceMappingURL=p-DrfpABSq.js.map

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

@@ -1 +1 @@
-{"file":"p-BphT81GV.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-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}

package/dist/components/p-G8kF15oY.js

@@ -0,0 +1,67 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
+import { d as defaultRolePalette } from './p-CwCWCxsI.js';
+import { d as defineCustomElement$1 } from './p-CtV1B-_5.js';
+
+const lsValidationTagCss = ":host{position:relative}*{box-sizing:border-box;margin:0}.valid-label{display:flex;padding:2px 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.valid-label:hover{cursor:pointer;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.invalid.default{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.invalid.compose{border:1px solid var(--red-40, #ffa19e);background:var(--red-10, #fff0f0);color:var(--red-80, #c1140e)}.field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.field-counter.compose{color:var(--red-10, #fff0f0);background:var(--red-60, #f64a44)}.field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.field-dropdown.compose{width:14rem;padding:0.75rem;gap:0.5rem}.field-dropdown.compose>*{width:100%}.required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{height:0.5rem;width:0.5rem;border-radius:50%}.role-label{display:flex;padding:2px 3px;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;text-transform:capitalize}.dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.dropdown-header p{color:var(--gray-80, #6c6e73);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.validation-tag-container{padding:12px;display:flex;flex-direction:column;gap:8px}.validation-tag-header{padding-bottom:8px;border-bottom:1px solid #edeff2}.validation-tag-title{font-family:'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;font-size:14px;color:#45484d;line-height:20px}.validation-tag-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;transition:background-color 0.2s}.validation-tag-row:hover{background-color:var(--gray-10, #f9f9fa)}.validation-tag-bar{width:4px;height:32px;border-radius:9999px;flex-shrink:0}.validation-tag-details{flex:1 1 0%;min-width:0}.validation-tag-name{font-family:'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;font-size:14px;color:#45484d;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.validation-tag-email{font-family:'IBM Plex Sans Light', 'IBM Plex Sans', sans-serif;font-size:12px;color:#5e6066;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+
+const LsValidationTag = /*@__PURE__*/ proxyCustomElement(class LsValidationTag extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    status = 'Invalid';
+    validationErrors = [];
+    isExpanded = false;
+    type = 'default';
+    showDropDown = true;
+    render() {
+        return (h(Host, { key: '2cb23996b1f76a86f990be88c19a6a735d68d0bd' }, h("div", { key: 'f860cabbefcd8301e9a6abacf975b32f6801023f', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'} ${this.type === 'compose' ? 'compose' : 'default'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length > 0 && h("div", { key: '2ee784742580633585c80480676e6d5fb0e8d9c3', class: `field-counter ${this.type === 'compose' ? 'compose' : 'default'}` }, this.validationErrors.length), this.type === 'compose' ? (this.validationErrors.length === 0 ? 'Ready' : `Required`) : this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && this.showDropDown && this.type !== 'compose' && (h("ls-icon", { key: '7529788de44e03778a2de157c67eaebe465bd91e', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.validationErrors.length > 0 && this.type === 'compose' && h("ls-icon", { key: 'c5d5a1733e7d3e1e3b2a8a1772967d989c424e62', name: "cursor-click", solid: true, size: "16", customStyle: { color: 'var(--red-70, #DC2721);' } })), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (h("div", { key: 'd8ca8af7c7e40cf7787a14e660810f0f07a316ed', class: 'field-dropdown' }, h("div", { key: '89170704b4ed80a258424f393c6e27049ae40ede', class: 'dropdown-header' }, h("h2", { key: 'fbb37a338f9afbeb37236f29270ce5e294aa5a7f' }, "Fields Required"), h("p", { key: '646cc51d9fb0c8fed4bfad453ca909a9b427f74f' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
+            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
+            return (h("div", { key: idx, class: 'required-field', style: {
+                    '--field-background': pallette.s10,
+                    '--field-border-color': pallette.s10,
+                    '--field-background-hover': pallette.s20,
+                    '--field-text-color': pallette.s70,
+                    '--field-text-color-hover': pallette.s80,
+                    '--field-border-color-hover': pallette.s60,
+                } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
+        }))), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (h("div", { key: '0dd55c5c191ceb713a1b2a89824ffaba367dcc91', class: 'field-dropdown compose' }, h("div", { key: 'c04834591fb59bf3ff13688fdee07c64e52836ad', class: "validation-tag-header" }, h("p", { key: '5dcb2bcf32daccc169fd902e31e42e7976f31907', class: "validation-tag-title" }, "Recipients Missing Signature")), this.validationErrors.map((field, idx) => {
+            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
+            return (h("div", { class: "validation-tag-row", key: idx }, h("div", { class: "validation-tag-bar", style: { background: pallette.s60 } }), h("div", { class: "validation-tag-details" }, h("p", { class: "validation-tag-name" }, field?.role?.name), h("p", { class: "validation-tag-email" }, field?.role?.name))));
+        })))));
+    }
+    static get style() { return lsValidationTagCss; }
+}, [257, "ls-validation-tag", {
+        "status": [1025],
+        "validationErrors": [1040, "validation-errors"],
+        "isExpanded": [1028, "is-expanded"],
+        "type": [1],
+        "showDropDown": [4, "show-drop-down"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-validation-tag", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-validation-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsValidationTag);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsValidationTag as L, defineCustomElement as d };
+//# sourceMappingURL=p-G8kF15oY.js.map
+
+//# sourceMappingURL=p-G8kF15oY.js.map

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

@@ -0,0 +1 @@
+{"file":"p-G8kF15oY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-validation-tag/ls-validation-tag.css?tag=ls-validation-tag&encapsulation=shadow","src/components/ls-validation-tag/ls-validation-tag.tsx"],"sourcesContent":[":host {\n  position: relative;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.valid-label {\n  display: flex;\n  padding: 2px 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 1rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: fit-content;\n}\n.valid-label:hover {\n  cursor: pointer;\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\n.valid {\n  background-color: var(--green-30, #9df5d4);\n  color: var(--green-100, #125241);\n}\n\n.invalid.default {\n  background: var(--yellow-20, #fff3c2);\n  color: var(--yellow-90, #8a3f0e);\n}\n\n.invalid.compose {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--red-10, #fff0f0);\n  color: var(--red-80, #c1140e);\n}\n\n.field-counter {\n  display: flex;\n  padding: 0.125rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 1rem;\n  font-size: 0.625rem;\n  line-height: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  color: var(--yellow-20, #fff3c2);\n  background: #e17100;\n  min-width: 1rem;\n}\n\n.field-counter.compose {\n  color: var(--red-10, #fff0f0);\n  background: var(--red-60, #f64a44);\n}\n\n.field-dropdown {\n  position: absolute;\n  top: 2rem;\n  right: 0;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 20rem;\n  padding: 1rem;\n  border-radius: 1rem;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  max-height: 20rem;\n  overflow-y: auto;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1000;\n}\n\n.field-dropdown.compose {\n  width: 14rem;\n  padding: 0.75rem;\n  gap: 0.5rem;\n}\n\n.field-dropdown.compose > * {\n  width: 100%;\n}\n.required-field {\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.5rem 0.5rem 0.5rem 1rem;\n  background: var(--field-background);\n  color: var(--field-text-color);\n  border: 1px solid var(--field-border-color);\n  transition: all 0.1s ease-in-out;\n}\n\n.required-field:hover {\n  background: var(--field-background-hover);\n  color: var(--field-text-color-hover);\n  border: 1px solid var(--field-border-color-hover);\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n.required-field-items-left {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  width: 100%;\n}\n\n.required-field-items-left p {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 0.875rem; /* 142.857% */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 50%;\n}\n\n.role-label {\n  display: flex;\n  padding: 2px 3px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-transform: capitalize;\n}\n\n.dropdown-header h2 {\n  color: var(--gray-100, #45484d);\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  margin-bottom: 0.125rem;\n}\n\n.dropdown-header p {\n  color: var(--gray-80, #6c6e73);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.validation-tag-container {\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.validation-tag-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #edeff2;\n}\n\n.validation-tag-title {\n  font-family: 'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;\n  font-size: 14px;\n  color: #45484d;\n  line-height: 20px;\n}\n\n.validation-tag-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.validation-tag-row:hover {\n  background-color: var(--gray-10, #f9f9fa);\n}\n\n.validation-tag-bar {\n  width: 4px;\n  height: 32px;\n  border-radius: 9999px;\n  flex-shrink: 0;\n}\n\n.validation-tag-details {\n  flex: 1 1 0%;\n  min-width: 0;\n}\n\n.validation-tag-name {\n  font-family: 'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;\n  font-size: 14px;\n  color: #45484d;\n  line-height: 20px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.validation-tag-email {\n  font-family: 'IBM Plex Sans Light', 'IBM Plex Sans', sans-serif;\n  font-size: 12px;\n  color: #5e6066;\n  line-height: 16px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n  @Prop() type: 'compose' | 'default' = 'default';\n  @Prop() showDropDown: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'} ${this.type === 'compose' ? 'compose' : 'default'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length > 0 && <div class={`field-counter ${this.type === 'compose' ? 'compose' : 'default'}`}>{this.validationErrors.length}</div>}\n          {this.type === 'compose' ? (this.validationErrors.length === 0 ? 'Ready' : `Required`) : this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && this.showDropDown && this.type !== 'compose' && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n          {this.validationErrors.length > 0 && this.type === 'compose' && <ls-icon name=\"cursor-click\" solid size=\"16\" customStyle={{ color: 'var(--red-70, #DC2721);' }} />}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n        {this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (\n          <div class={'field-dropdown compose'}>\n            <div class=\"validation-tag-header\">\n              <p class=\"validation-tag-title\">Recipients Missing Signature</p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n              return (\n                <div class=\"validation-tag-row\" key={idx}>\n                  <div class=\"validation-tag-bar\" style={{ background: pallette.s60 }}></div>\n                  <div class=\"validation-tag-details\">\n                    <p class=\"validation-tag-name\">{field?.role?.name}</p>\n                    <p class=\"validation-tag-email\">{field?.role?.name}</p>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C7ohAVHE.js → p-HB8K0xP0.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CEhCcP_A.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
-import { d as defineCustomElement$2 } from './p-CWfyjOto.js';
-import { d as defineCustomElement$1 } from './p-XkANRt3Q.js';
+import { d as defineCustomElement$2 } from './p-CtV1B-_5.js';
+import { d as defineCustomElement$1 } from './p-DC0HL60H.js';
 
 const lsFieldSizeCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.ls-toolbar-numeric{width:45px;max-height:18px;margin:0px;padding:0px}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
@@ -31,7 +31,7 @@ const LsFieldSize = /*@__PURE__*/ proxyCustomElement(class LsFieldSize extends H
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '0b8df35dcb2ee5245be7d0beb5f1ae984424978c' }, h("div", { key: '96bea8f8279951acb209d96d6a11b580b5862821', class: 'ls-field-properties-section' }, h("div", { key: '4b32cfaec2f3f8f2b677b5298b0f527f8139723c', class: 'ls-field-properties-section-text' }, h("p", { key: '050832fd7779067d66ffe20ef0698e52b25624bc', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: 'c99e2028b0d87e4ddf1f0e78c60e91e78a9f1a2d', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '3118c3d2cc73a8fcfa8bf9777ce5f9b95947c2e5', class: 'button-group' }, h("button", { key: '26820ee61e198b053f9f1c87bccf8394944538f5', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip": "Make selected fields the same height and width as the first selected field" }, h("ls-icon", { key: '4022d9a4a20aa8582f3f269795e1467437e0db5c', name: "field-scale" })), h("button", { key: '728050c518a04fd0a5304c32e15e44bbe99dbb0a', "aria-label": "Make selected fields the same width as the first selected field", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip": "Make selected fields the same width as the first selected field" }, h("ls-icon", { key: '6eb796f3793e6a15992e7b6e5a460c65bc787da6', name: "field-match-width" })), h("button", { key: '66639239b17674cb06359722b0b37d10a55dc365', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip": "Make selected fields the same height as the first selected field" }, h("ls-icon", { key: '2c48339fe3c5c2e9b097505933d761d922cae925', name: "field-match-height" })))), h("slot", { key: '79ef838cc29f96218979dca1e6bea57dcfa6c2ce' }), h("ls-tooltip", { key: '39fe2902455b9359639b84c320053c512b84c0ce', id: "ls-tooltip-master" })));
+        return (h(Host, { key: '4a8c5b6091593c6658d52f332dc0180a9aa7c234' }, h("div", { key: 'c2235c25b8c994e86191ee4c0b60aac827a99304', class: 'ls-field-properties-section' }, h("div", { key: '342929332fd0df3c4316713564a8a33b3a9ba7f5', class: 'ls-field-properties-section-text' }, h("p", { key: '511b3d62008d18fcd867a724bf66c4222b5b31db', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '246c72ab2973d7de15b9ee60eb684221d2de8c09', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '2f9956bd71a5195ca540f8e7c77d705c49b82eaa', class: 'button-group' }, h("button", { key: '5c66c06e562a38a15d1dba9a7a02d91facfcb79b', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip": "Make selected fields the same height and width as the first selected field" }, h("ls-icon", { key: '577fbb9f0309603f92c64c85dfd4bdebca26b08f', name: "field-scale" })), h("button", { key: '15f47dec9a4d8be2abd9cf49db82eed86efd6274', "aria-label": "Make selected fields the same width as the first selected field", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip": "Make selected fields the same width as the first selected field" }, h("ls-icon", { key: 'd586958503eda47fbe1c1ffd37737fbafb936857', name: "field-match-width" })), h("button", { key: 'e94c585c27941e00c5801ffce2ea4124e84a5c2f', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip": "Make selected fields the same height as the first selected field" }, h("ls-icon", { key: '3e1877707b12710e6d38fe7bd40bd653703e5d2e', name: "field-match-height" })))), h("slot", { key: '80290ec35de43ab1bb2f39ba303a6b4b1127a74a' }), h("ls-tooltip", { key: 'd7ae2421a26db540d0d440e9d987934601ab5257', id: "ls-tooltip-master" })));
     }
     static get style() { return lsFieldSizeCss; }
 }, [257, "ls-field-size", {
@@ -63,6 +63,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldSize as L, defineCustomElement as d };
-//# sourceMappingURL=p-C7ohAVHE.js.map
+//# sourceMappingURL=p-HB8K0xP0.js.map
 
-//# sourceMappingURL=p-C7ohAVHE.js.map
+//# sourceMappingURL=p-HB8K0xP0.js.map

package/dist/components/{p-C7ohAVHE.js.map → p-HB8K0xP0.js.map}

@@ -1 +1 @@
-{"file":"p-C7ohAVHE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-size/ls-field-size.css?tag=ls-field-size&encapsulation=shadow","src/components/ls-field-size/ls-field-size.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  position: relative;\n}\n\n.ls-toolbar-numeric {\n  width: 45px;\n  max-height: 18px;\n  margin: 0px;\n  padding: 0px;\n}\n\n* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\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: 100%;\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#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-50, #d8d9dc);\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:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\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:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\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  color: var(--gray-50, #d8d9dc);\n  box-shadow: none;\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\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  width: 100%;\n}\n\n.button-group button {\n  display: flex;\n  width: 100%;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n  background: var(--gray-10, #f7f8fa);\n  cursor: not-allowed;\n  color: var(--gray-50, #d8d9dc);\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, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-field-size',\n  styleUrl: 'ls-field-size.css',\n  shadow: true,\n})\nexport class LsFieldSize {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>Scale and Resize</p>\n            <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n          </div>\n          <div class={'button-group'}>\n            <button\n              onClick={() => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height })}\n              aria-label=\"Make selected fields the same height and width as the first selected field.\"\n              data-tooltip=\"Make selected fields the same height and width as the first selected field\"\n            >\n              <ls-icon name=\"field-scale\"></ls-icon>\n            </button>\n            <button\n              aria-label=\"Make selected fields the same width as the first selected field\"\n              onClick={() => this.alter({ width: this.dataItem[0].width })}\n              data-tooltip=\"Make selected fields the same width as the first selected field\"\n            >\n              <ls-icon name=\"field-match-width\"></ls-icon>\n            </button>\n            <button\n              onClick={() => this.alter({ height: this.dataItem[0].height })}\n              aria-label=\"Make selected fields the same height as the first selected field.\"\n              data-tooltip=\"Make selected fields the same height as the first selected field\"\n            >\n              <ls-icon name=\"field-match-height\"></ls-icon>\n            </button>\n          </div>\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\"></ls-tooltip>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-HB8K0xP0.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-size/ls-field-size.css?tag=ls-field-size&encapsulation=shadow","src/components/ls-field-size/ls-field-size.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  position: relative;\n}\n\n.ls-toolbar-numeric {\n  width: 45px;\n  max-height: 18px;\n  margin: 0px;\n  padding: 0px;\n}\n\n* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\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: 100%;\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#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-50, #d8d9dc);\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:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\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:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\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  color: var(--gray-50, #d8d9dc);\n  box-shadow: none;\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\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  width: 100%;\n}\n\n.button-group button {\n  display: flex;\n  width: 100%;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n  background: var(--gray-10, #f7f8fa);\n  cursor: not-allowed;\n  color: var(--gray-50, #d8d9dc);\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, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-field-size',\n  styleUrl: 'ls-field-size.css',\n  shadow: true,\n})\nexport class LsFieldSize {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>Scale and Resize</p>\n            <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n          </div>\n          <div class={'button-group'}>\n            <button\n              onClick={() => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height })}\n              aria-label=\"Make selected fields the same height and width as the first selected field.\"\n              data-tooltip=\"Make selected fields the same height and width as the first selected field\"\n            >\n              <ls-icon name=\"field-scale\"></ls-icon>\n            </button>\n            <button\n              aria-label=\"Make selected fields the same width as the first selected field\"\n              onClick={() => this.alter({ width: this.dataItem[0].width })}\n              data-tooltip=\"Make selected fields the same width as the first selected field\"\n            >\n              <ls-icon name=\"field-match-width\"></ls-icon>\n            </button>\n            <button\n              onClick={() => this.alter({ height: this.dataItem[0].height })}\n              aria-label=\"Make selected fields the same height as the first selected field.\"\n              data-tooltip=\"Make selected fields the same height as the first selected field\"\n            >\n              <ls-icon name=\"field-match-height\"></ls-icon>\n            </button>\n          </div>\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\"></ls-tooltip>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DWIo_K0q.js → p-Ji_SfsNu.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-CEhCcP_A.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$1 } from './p-CWfyjOto.js';
+import { d as defineCustomElement$1 } from './p-CtV1B-_5.js';
 
 const lsSelectInputCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n";
 
@@ -35,7 +35,7 @@ const LsSelectInput = /*@__PURE__*/ proxyCustomElement(class LsSelectInput exten
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: 'e22bd6924365a77cebda382a7ee9445263de716f', class: 'host' }, fieldIcon && (h("ls-icon", { key: '4e0d8d395c7874235f2618c39331ebb77112bd25', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '68077a1eae69a43ec4c37dff022c096bfd7c0c4d', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '13f5f193359e4752bb790d2d8b518b5bb6f91e49' })), h("div", { key: 'a06550b784b85776e9976b7a27e51dab2be69e5d', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '7d70d7d3a28ed3082518d588c0b6d6be04829412', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (h("host", { key: 'ad6571818f20395ecda1dbd22a574b999afa73ca', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'a68a46e5237f98a621a546b4d8295a3594b73ffd', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: 'd84a610ada56cb39fd0125184a9d5257b9127892', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '2a61c4932a822f0f813e20f6ef079569624ea3ad' })), h("div", { key: '7dddfb3625c9f1a0ed02dc5250e3db876299077d', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '405f8a0bfc03565b843001e746059adc77e1558b', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
     static get style() { return lsSelectInputCss; }
 }, [260, "ls-select-input", {
@@ -73,6 +73,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsSelectInput as L, defineCustomElement as d };
-//# sourceMappingURL=p-DWIo_K0q.js.map
+//# sourceMappingURL=p-Ji_SfsNu.js.map
 
-//# sourceMappingURL=p-DWIo_K0q.js.map
+//# sourceMappingURL=p-Ji_SfsNu.js.map

package/dist/components/{p-DWIo_K0q.js.map → p-Ji_SfsNu.js.map}

@@ -1 +1 @@
-{"file":"p-DWIo_K0q.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-select-input',\n  styleUrl: 'ls-select-input.css',\n  shadow: false,\n})\nexport class LsSelectInput {\n  @Prop() name: string;\n  @Prop() value: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() displayOnly: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  // handleChange(event) {\n  //   this.value = event.target.value;\n  // }\n\n  render() {\n    const {\n      name,\n      aria,\n      disabled,\n      displayOnly,\n      required,\n      valid,\n      dirty,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n    } = this;\n\n    const inputClass = clsx(\n      'input-base',\n      disabled\n        ? 'disabled'\n        : dirty && valid\n          ? 'valid'\n          : dirty && !valid\n            ? 'invalid'\n            : displayOnly\n              ? 'displayOnly'\n              : 'default',\n      fieldIcon && 'icon-input',\n      dirty && 'button-input',\n      buttonIcon && 'button-input',\n      buttonIcon && dirty && 'right-items-input',\n    );\n\n    return (\n      <host class='host'>\n        {fieldIcon && (\n          <ls-icon\n            id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n            name={fieldIcon}\n          ></ls-icon>\n        )}\n        <select\n          class={inputClass}\n          id={name}\n          name={name}\n          aria-label={aria}\n          required={required}\n          disabled={disabled}\n        >\n          <slot />\n        </select>\n        <div class='right-items'>\n          {dirty && !disabled && (\n            <ls-icon\n              id={valid ? 'validIcon' : 'invalidIcon'}\n              name={valid ? 'check-circle' : 'exclamation-circle'}\n            ></ls-icon>\n          )}\n          {buttonIcon ? (\n            <button class='button' onClick={buttonClick}>\n              <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n            </button>\n          ) : (<ls-icon\n            id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n            name={'chevron-down'}\n          ></ls-icon>) }\n        </div>\n      </host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Ji_SfsNu.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-select-input',\n  styleUrl: 'ls-select-input.css',\n  shadow: false,\n})\nexport class LsSelectInput {\n  @Prop() name: string;\n  @Prop() value: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() displayOnly: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  // handleChange(event) {\n  //   this.value = event.target.value;\n  // }\n\n  render() {\n    const {\n      name,\n      aria,\n      disabled,\n      displayOnly,\n      required,\n      valid,\n      dirty,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n    } = this;\n\n    const inputClass = clsx(\n      'input-base',\n      disabled\n        ? 'disabled'\n        : dirty && valid\n          ? 'valid'\n          : dirty && !valid\n            ? 'invalid'\n            : displayOnly\n              ? 'displayOnly'\n              : 'default',\n      fieldIcon && 'icon-input',\n      dirty && 'button-input',\n      buttonIcon && 'button-input',\n      buttonIcon && dirty && 'right-items-input',\n    );\n\n    return (\n      <host class='host'>\n        {fieldIcon && (\n          <ls-icon\n            id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n            name={fieldIcon}\n          ></ls-icon>\n        )}\n        <select\n          class={inputClass}\n          id={name}\n          name={name}\n          aria-label={aria}\n          required={required}\n          disabled={disabled}\n        >\n          <slot />\n        </select>\n        <div class='right-items'>\n          {dirty && !disabled && (\n            <ls-icon\n              id={valid ? 'validIcon' : 'invalidIcon'}\n              name={valid ? 'check-circle' : 'exclamation-circle'}\n            ></ls-icon>\n          )}\n          {buttonIcon ? (\n            <button class='button' onClick={buttonClick}>\n              <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n            </button>\n          ) : (<ls-icon\n            id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n            name={'chevron-down'}\n          ></ls-icon>) }\n        </div>\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-gE1FA92I.js → p-NoKw4xu7.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
-import { d as defineCustomElement$1 } from './p-CWfyjOto.js';
+import { d as defineCustomElement$1 } from './p-CtV1B-_5.js';
 
 const lsInputWrapperCss = "*{margin:0;padding:0;box-sizing:border-box}:host{position:relative}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}";
 
@@ -12,7 +12,7 @@ const LsInputWrapper = /*@__PURE__*/ proxyCustomElement(class LsInputWrapper ext
     leadingIcon;
     select = false;
     render() {
-        return (h(Host, { key: '3b9b239d8b6e72a48a89fc9e7d7945f8cc1d583f' }, h("ls-icon", { key: 'd67e95c422b422195798df26522030f151ea70ad', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && h("ls-icon", { key: 'c33527ba4e13a032c4858d33751015517cf5437c', id: "selectorIcon", name: "selector" }), h("slot", { key: 'de63a071f7c33a35da15eacfe46919b26dfd13b0' })));
+        return (h(Host, { key: '7750671f8dde3da2567df36c98dca70344b63ca4' }, h("ls-icon", { key: '20fe94a9a904f9872cdc106ad8b01432e9021211', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && h("ls-icon", { key: '45e1dddd802766e2e9c6c744c956864d641be133', id: "selectorIcon", name: "selector" }), h("slot", { key: 'cf176ab0464b7f7b01160391327b741733887c12' })));
     }
     static get style() { return lsInputWrapperCss; }
 }, [257, "ls-input-wrapper", {
@@ -40,6 +40,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsInputWrapper as L, defineCustomElement as d };
-//# sourceMappingURL=p-gE1FA92I.js.map
+//# sourceMappingURL=p-NoKw4xu7.js.map
 
-//# sourceMappingURL=p-gE1FA92I.js.map
+//# sourceMappingURL=p-NoKw4xu7.js.map

package/dist/components/{p-gE1FA92I.js.map → p-NoKw4xu7.js.map}

@@ -1 +1 @@
-{"file":"p-gE1FA92I.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,iVAAiV;;MCQ9V,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;AACjB,IAAA,WAAW;IACX,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAY,CAAA,EACjE,IAAI,CAAC,MAAM,IAAI,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EACrE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-input-wrapper/ls-input-wrapper.css?tag=ls-input-wrapper&encapsulation=shadow","src/components/ls-input-wrapper/ls-input-wrapper.tsx"],"sourcesContent":["* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\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\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Icon } from '../../components';\n\n@Component({\n  tag: 'ls-input-wrapper',\n  styleUrl: 'ls-input-wrapper.css',\n  shadow: true,\n})\nexport class LsInputWrapper {\n  @Prop() leadingIcon: Icon;\n  @Prop() select: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <ls-icon id=\"selectLeadingIcon\" name={this.leadingIcon}></ls-icon>\n        {this.select && <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>}\n        <slot></slot> \n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-NoKw4xu7.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,iVAAiV;;MCQ9V,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;AACjB,IAAA,WAAW;IACX,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAY,CAAA,EACjE,IAAI,CAAC,MAAM,IAAI,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EACrE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-input-wrapper/ls-input-wrapper.css?tag=ls-input-wrapper&encapsulation=shadow","src/components/ls-input-wrapper/ls-input-wrapper.tsx"],"sourcesContent":["* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\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\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Icon } from '../../components';\n\n@Component({\n  tag: 'ls-input-wrapper',\n  styleUrl: 'ls-input-wrapper.css',\n  shadow: true,\n})\nexport class LsInputWrapper {\n  @Prop() leadingIcon: Icon;\n  @Prop() select: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <ls-icon id=\"selectLeadingIcon\" name={this.leadingIcon}></ls-icon>\n        {this.select && <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>}\n        <slot></slot> \n      </Host>\n    );\n  }\n}\n"],"version":3}