@verdocs/web-sdk 4.0.9 → 4.1.3

package/dist/esm/{utils-61c1093b.js → utils-d1c95309.js}

@@ -182,15 +182,10 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             else {
                 el.setAttribute('tabIndex', tabIndex);
             }
-            if (editable) {
-                el.setAttribute('editable', true);
-            }
-            if (draggable) {
-                el.setAttribute('draggable', true);
-            }
-            if (done) {
-                el.setAttribute('done', true);
-            }
+            console.log(field.name, 'editable', editable);
+            el.setAttribute('editable', editable);
+            el.setAttribute('draggable', draggable);
+            el.setAttribute('done', done);
             setControlStyles(el, field, docPage.xScale, docPage.yScale);
             controlsDiv.appendChild(el);
             return el;
@@ -290,9 +285,7 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             return null;
     }
 };
-// TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,
-//   but then merge the SDK types to encourage developers to use just `settings`.
-const getFieldSettings = (field) => field.settings;
+const getFieldSettings = (field) => (field === null || field === void 0 ? void 0 : field.settings) || {};
 /**
  * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of
  * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the
@@ -397,4 +390,4 @@ const convertToE164 = (input) => {
     return `+1${temp}`;
 };
 
-export { saveAttachment as a, updateCssTransform as b, removeCssTransform as c, getFieldOptionId as d, defaultWidth as e, defaultHeight as f, getFieldId as g, commonjsGlobal as h, convertToE164 as i, renderedTextWidth as j, getFieldSettings as k, getControlStyles as l, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
+export { saveAttachment as a, updateCssTransform as b, removeCssTransform as c, getFieldOptionId as d, defaultWidth as e, defaultHeight as f, getFieldId as g, commonjsGlobal as h, convertToE164 as i, renderedTextWidth as j, getControlStyles as k, getFieldSettings as l, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };

package/dist/esm/verdocs-auth.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-b89cf6a4.js';
-import { VerdocsEndpoint, createBusinessAccount, authenticateUser, decodeAccessTokenBody, resendVerification, resetPassword } from '@verdocs/js-sdk';
+import { VerdocsEndpoint, createAccount, authenticateUser, decodeAccessTokenBody, resendVerification, resetPassword } from '@verdocs/js-sdk';
 import { V as VerdocsToast } from './Toast-b71de686.js';
 import { S as SDKError } from './errors-887f1e88.js';
 
@@ -117,7 +117,7 @@ const VerdocsAuth = class {
     handleSignup() {
         this.submitting = true;
         this.accessTokenForVerification = null;
-        createBusinessAccount(this.endpoint, {
+        createAccount(this.endpoint, {
             email: this.username,
             password: this.password,
             firstName: this.first,

package/dist/esm/verdocs-build.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b89cf6a4.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { g as getTemplateStore } from './TemplateStore-df5484bb.js';
+import { g as getTemplateStore } from './TemplateStore-78ad24d7.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './index-296aabaf.js';
-import './TemplateRoleStore-ddc3b96f.js';
-import './TemplateFieldStore-d7516adf.js';
+import './TemplateRoleStore-0a4f98cb.js';
+import './TemplateFieldStore-32329b5a.js';
 import './index-7456b04f.js';
 
 const verdocsBuildCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}verdocs-build .preview-container{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%;background-color:#eeeeee;max-height:100%}@media all and (max-width: 450px){verdocs-build .preview-container{-ms-flex-direction:column;flex-direction:column}}verdocs-build .preview-send-wrapper{display:-ms-flexbox;display:flex;-ms-flex:0 0 300px;flex:0 0 300px;background-color:#ffffff;-webkit-box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157);box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157)}@media all and (max-width: 450px){verdocs-build .preview-send-wrapper{-ms-flex:0;flex:0}}verdocs-build .preview-preview-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;overflow-y:scroll}";
@@ -22,45 +22,51 @@ const VerdocsBuild = class {
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.step = 'preview';
-        this.store = null;
+        this.templateStore = null;
     }
-    onTemplateIdChanged(newTemplateId) {
-        console.log('Template ID changed', newTemplateId);
+    onTemplateIdChanged(newTemplateId, oldTemplateId) {
+        if (!oldTemplateId && newTemplateId && this.step === 'attachments') {
+            this.step = 'preview';
+        }
         this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
     }
-    onStepChanged(newStep) {
-        console.log('Step changed', newStep);
+    onStepChanged() {
+        // We reload the template here even if only the step changed in case
+        // we were out of sync before
         this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
     }
     async componentWillLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         try {
             this.endpoint.loadSession();
+            if (!this.endpoint.session) {
+                console.log('[BUILD] Unable to start builder session, must be authenticated');
+                return;
+            }
             if (!this.templateId) {
                 console.log(`[BUILD] No template ID, activating upload mode`);
                 this.step = 'attachments';
                 return;
             }
-            if (!this.endpoint.session) {
-                console.log('[BUILD] Unable to start builder session, must be authenticated');
-                return;
+            try {
+                this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
+            }
+            catch (e) {
+                console.log('[BUILD] Error loading template', e);
+                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
             }
-            this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
         }
         catch (e) {
-            console.log('[BUILD] Error loading template', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            console.log('[BUILD] Error with builder session', e);
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
     async loadTemplate(templateId) {
         if (templateId) {
-            console.log('Loading store', templateId);
-            this.store = await getTemplateStore(this.endpoint, templateId, false);
-            // forceUpdate(this.el);
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
         }
     }
-    handleCancel(e) {
-        console.log('Cancel', e.detail);
+    handleCancel() {
         this.step = 'preview';
     }
     async handleTemplateCreated(templateId) {
@@ -90,7 +96,6 @@ const VerdocsBuild = class {
     }
     handleStepChanged(step) {
         var _a;
-        console.log('osc', step);
         this.step = step;
         (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(step);
     }
@@ -98,12 +103,12 @@ const VerdocsBuild = class {
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        if (!this.store) {
+        if (!this.templateStore) {
             console.log('[BUILD] No template ID, rendering created view');
-            return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
+            return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
         }
         console.log('[BUILD] Rendering build view', this.templateId, this.step, ['attachments', 'roles', 'settings', 'fields', 'preview'].indexOf(this.step));
-        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
+        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/verdocs-button-panel.entry.js

@@ -66,10 +66,10 @@ const VerdocsButtonPanel = class {
         }
     }
     render() {
-        return (h(Host, { key: 'cbf8d72d05c0a1461d0fb99e78879c42bd737336' }, h("div", { key: '87dec92b073c1dee35b40f08db6752e663b6249e', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (h(Host, { key: '37ce9f8d7615e703a4a41396d1bba667f25adb97' }, h("div", { key: 'a9f1795df2e640d053361325b2096fdba15f2b1d', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), h("div", { key: '86911772f264252db5527655d5ac459c20813f1c', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '0b4286031122fafe3927da086fd0b826bad6c388', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '0644253791590daa7faf9de9e8be9cd599c2f9cc' }))));
+            }, ref: el => (this.iconEl = el) }), h("div", { key: 'fa63de96387644fab4ef5e6047a0687edaec52cc', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '8224a9993d6acca9c0ccfbd4ace02eda803c41bf', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '3f3d910f4779e90dd5dd4b8b9c553ee09edc3625' }))));
     }
 };
 VerdocsButtonPanel.style = VerdocsButtonPanelStyle0;

package/dist/esm/verdocs-button_3.entry.js

@@ -17,12 +17,12 @@ const VerdocsButton = class {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '92cd9d2b91cd0c950ae687af05496c2edc095e95', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: '916c32a365115a8e4c1eaeb9a641acf376ff3f1c', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        return (h("button", { key: '822e0773075831cc4ab6a0c5a9fd3fc89c4cef43', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: '8ef9ac40620d885dd37fc776929224ea2e6cf596', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
     }
 };
 VerdocsButton.style = VerdocsButtonStyle0;
 
-const verdocsHelpIconCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;position:absolute;padding:5px 10px;font-size:13px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
+const verdocsHelpIconCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:500;position:absolute;padding:5px 10px;font-size:12px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
 const VerdocsHelpIconStyle0 = verdocsHelpIconCss;
 
 const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
@@ -55,7 +55,7 @@ const VerdocsHelpIcon = class {
         (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
     }
     render() {
-        return (h(Host, { key: '4efe69ab5b8edeffe892fbce06d31dddf3c17e6b', class: {} }, h("div", { key: '05917e2f774970456b6c56a528fbdfe5b1a95586', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '25c6b233a2e8dc60425d27611d0f9ea1b8804a90', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { key: '5ae3b1fce0724c421dc13c4439e79a9e88e4b40a', innerHTML: this.text }), h("div", { key: '136ce3de3ec515328f8b47fb35c052aad6e4e223', "data-popper-arrow": "true", class: "arrow" }))));
+        return (h(Host, { key: '85c73981ae3001eed65f75f7b3f7ac6236ec6468', class: {} }, h("div", { key: 'f7e1f58bef884fe6f1366b99c527c3e3e9df8052', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '596faf9cc53b66c22c4cb498adf8bdf21eadf734', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { key: '464b824ea27eb3a50b63c09b30e856d329784da4', innerHTML: this.text }), h("div", { key: '3a870ec5b129fbaa0350ddea76a255aa0aee1c16', "data-popper-arrow": "true", class: "arrow" }))));
     }
 };
 VerdocsHelpIcon.style = VerdocsHelpIconStyle0;
@@ -87,7 +87,7 @@ const VerdocsTextInput = class {
             .catch(e => console.log('Error copying to clipboard', e));
     }
     render() {
-        return (h(Host, { key: '01f4cc50d00022fec700dd1703c403f788a7f3ee', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '755ccc9d7978816128f25e14051a4148246e2172' }, this.label && (h("div", { key: '275d72bce18e285eab0c5afee67998ffa8ef1717', class: "input-label" }, this.label + ':', this.required && h("span", { key: '4bc22add83d9953a8f719fc1737bbecbe70ad6fd', class: "required" }, "*"))), h("div", { key: '89b5a9e5795574005f3e45ad6e6701f32963f528', class: "input-container" }, h("input", { key: '6ef1db6b39dd01e7f2168983b08fd17fb94e5451', type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: 'afbff38029e87d44b4bfe37ea654e2b3813d766d', innerHTML: ClearIcon, class: "clear", onClick: () => {
+        return (h(Host, { key: '5bc396cdd768637ac69a21dcb672a53809b979ed', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '6294f9b41603ce31f561aeb2940fe764f1e3b573' }, this.label && (h("div", { key: '593198e43df84cc8f57b950bfaeab7defd4b8a15', class: "input-label" }, this.label + ':', this.required && h("span", { key: 'aad606689352175230d4644884e2a9d8ff2726f1', class: "required" }, "*"))), h("div", { key: '238b830122b5278da983330b87cd84fdd7627297', class: "input-container" }, h("input", { key: 'af8888c6146e5f617e3121aa6bbb5f56846521dc', type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: 'd51ff8c5760437916d45514fe38832bd70a0ddb6', innerHTML: ClearIcon, class: "clear", onClick: () => {
                 // We need to allow the onInput event to fire first in case
                 // the user was focused on this field before clicking clear.
                 setTimeout(() => {
@@ -101,7 +101,7 @@ const VerdocsTextInput = class {
                         (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
                     }, 50);
                 }, 50);
-            } })), !this.clearable && this.copyable && this.value && h("span", { key: '099378e71c88710a9d2fdc9a34e38ff12b4ee85f', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: '1ac26e8e0513c247e8e04489026f5311eb51529f', text: this.helpText }))));
+            } })), !this.clearable && this.copyable && this.value && h("span", { key: 'e05ce0fb15f2ed2358edcbdfe1c5de77238311a8', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: 'b9d0e50d517e04e37636dd4d85e6e4409266b1e2', text: this.helpText }))));
     }
     get hostEl() { return getElement(this); }
 };

package/dist/esm/{verdocs-checkbox_5.entry.js → verdocs-checkbox_3.entry.js}

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, updateField, deleteField } from '@verdocs/js-sdk';
-import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-d7516adf.js';
-import { g as getTemplateRoleStore } from './TemplateRoleStore-ddc3b96f.js';
-import { g as getTemplateStore } from './TemplateStore-df5484bb.js';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-32329b5a.js';
+import { g as getTemplateRoleStore } from './TemplateRoleStore-0a4f98cb.js';
+import { g as getTemplateStore } from './TemplateStore-78ad24d7.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './index-296aabaf.js';
 import './index-7456b04f.js';
@@ -21,97 +21,11 @@ const VerdocsCheckbox = class {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '419474760206bae27e0ad8f578a0fb0d97702791', class: { disabled: this.disabled, [this.theme]: true } }, h("label", { key: '4cb5190cdc28bec1528637bfeeb130d392ce4347' }, h("input", { key: 'f032febf516c10b0540094f058a59031ce2c706b', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: 'c089f80a6a1060d775c1a13d8cbe8a577287f329' }, this.label))));
+        return (h(Host, { key: 'cddf35bef85cc89a90ac6e724e1953cbad96753b', class: { disabled: this.disabled, [this.theme]: true } }, h("label", { key: '0d5466a742992b5bf88b6931276f941015254afa' }, h("input", { key: '6fed5b64b0095d8977581e6d30b412fa9622b5ff', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: '6e56f6f607c883e5eb6a7eabe4de64a98878b101' }, this.label))));
     }
 };
 VerdocsCheckbox.style = VerdocsCheckboxStyle0;
 
-const verdocsComponentErrorCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-component-error{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-component-error .inner{-ms-flex:1;flex:1;height:300px;display:-ms-flexbox;display:flex;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 20px;background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
-const VerdocsComponentErrorStyle0 = verdocsComponentErrorCss;
-
-const VerdocsComponentError = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.message = '';
-    }
-    render() {
-        return (h(Host, { key: 'af86792a4a2d09d2242645a1a8db657c5cd984bf' }, h("div", { key: '52096cd84877537d50bea3e0e7a424e5d352c566', class: "inner" }, this.message)));
-    }
-};
-VerdocsComponentError.style = VerdocsComponentErrorStyle0;
-
-const verdocsPortalCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
-const VerdocsPortalStyle0 = verdocsPortalCss;
-
-const Z_INDEX = '10001';
-const VerdocsPortal = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.clickAway = createEvent(this, "clickAway", 7);
-        this.moved = false;
-        this.anchor = undefined;
-        this.voffset = 0;
-        this.align = 'left';
-    }
-    handleScroll() {
-        this.calculatePosition();
-    }
-    handleResize() {
-        this.calculatePosition();
-    }
-    handleClick(e) {
-        var _a;
-        if (!this.element.contains(e.target)) {
-            (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
-        }
-    }
-    calculateLeft() {
-        const anchorEl = document.getElementById(this.anchor);
-        if (!anchorEl)
-            return 0;
-        const anchorRect = anchorEl.getBoundingClientRect();
-        if (this.align === 'left') {
-            return Math.max(anchorRect.left, 0);
-        }
-        if (this.align === 'right') {
-            return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
-        }
-        return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
-    }
-    calculateTop() {
-        const anchorEl = document.getElementById(this.anchor);
-        if (!anchorEl)
-            return 0;
-        const anchorRect = anchorEl.getBoundingClientRect();
-        return anchorRect.bottom + this.voffset;
-    }
-    calculatePosition() {
-        this.portal.style.top = `${this.calculateTop()}px`;
-        this.portal.style.left = `${this.calculateLeft()}px`;
-    }
-    componentWillLoad() {
-        var _a;
-        const id = `${this.anchor}-portal`;
-        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
-        this.portal = document.createElement('div');
-        this.portal.setAttribute('id', id);
-        this.portal.style.zIndex = Z_INDEX;
-        this.portal.style.position = 'absolute';
-        document.body.append(this.portal);
-    }
-    componentDidLoad() {
-        this.portal.appendChild(this.element);
-        this.calculatePosition();
-    }
-    disconnectedCallback() {
-        this.moved ? this.portal.remove() : (this.moved = true);
-    }
-    render() {
-        return (h(Host, { key: 'bca4c2bfa7c2f16dcfd4046e66cf8011207c4902', ref: el => (this.element = el) }, h("slot", { key: '8e451491ccd52c55d08621198d916dc991487bfc' })));
-    }
-};
-VerdocsPortal.style = VerdocsPortalStyle0;
-
 const verdocsSelectInputCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-select-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-select-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;border:1px solid #cccccc;border-radius:4px;background:#ffffff;color:#092c4c;width:100%;font-size:16px;height:28px;padding:2px 8px}verdocs-select-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}";
 const VerdocsSelectInputStyle0 = verdocsSelectInputCss;
 
@@ -124,7 +38,7 @@ const VerdocsSelectInput = class {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'f4ed5ac0b8cd5321d4dc378dfb4118bd55993c6b', class: "input-field" }, h("label", { key: '0c46eaac6ae1e9044d477ee4e41cbb8ddf79ae91' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { key: '983b8be81f9c017acb69a8d23560b72a0f0bf729', class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
+        return (h(Host, { key: 'f2a13ba2272aa0e1379ce935b8fa89329f1c657e', class: "input-field" }, h("label", { key: 'cdbbe67f3ade5be5e44ff16436091bce7c4a9732' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { key: '8c0404328b52edfb3d99416abb0dc2c53e20fb63', class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
     }
 };
 VerdocsSelectInput.style = VerdocsSelectInputStyle0;
@@ -411,4 +325,4 @@ const VerdocsTemplateFieldProperties = class {
 };
 VerdocsTemplateFieldProperties.style = VerdocsTemplateFieldPropertiesStyle0;
 
-export { VerdocsCheckbox as verdocs_checkbox, VerdocsComponentError as verdocs_component_error, VerdocsPortal as verdocs_portal, VerdocsSelectInput as verdocs_select_input, VerdocsTemplateFieldProperties as verdocs_template_field_properties };
+export { VerdocsCheckbox as verdocs_checkbox, VerdocsSelectInput as verdocs_select_input, VerdocsTemplateFieldProperties as verdocs_template_field_properties };

package/dist/esm/verdocs-component-error.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h, H as Host } from './index-b89cf6a4.js';
+
+const verdocsComponentErrorCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-component-error{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-component-error .inner{-ms-flex:1;flex:1;height:300px;display:-ms-flexbox;display:flex;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 20px;background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
+const VerdocsComponentErrorStyle0 = verdocsComponentErrorCss;
+
+const VerdocsComponentError = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.message = '';
+    }
+    render() {
+        return (h(Host, { key: '24ef80b6da0d6be6cef8fc877f0d8f6c758870dd' }, h("div", { key: '869e285731c0531dbb1032d5bcb6ae851ae97289', class: "inner" }, this.message)));
+    }
+};
+VerdocsComponentError.style = VerdocsComponentErrorStyle0;
+
+export { VerdocsComponentError as verdocs_component_error };

package/dist/esm/verdocs-contact-picker_2.entry.js

@@ -1,15 +1,16 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { i as convertToE164 } from './utils-61c1093b.js';
+import { i as convertToE164 } from './utils-d1c95309.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';
 
-const verdocsContactPickerCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}";
+const verdocsContactPickerCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form .label-with-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-contact-picker form .label-with-icon verdocs-help-icon svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}";
 const VerdocsContactPickerStyle0 = verdocsContactPickerCss;
 
-const messageIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
-const delegateIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AssignmentIndIcon" tabindex="-1" title="AssignmentInd"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';
-const placeholderIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AccountCircleIcon" tabindex="-1" title="AccountCircle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';
+const messageIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
+const delegateIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';
+const kbaIcon = '<svg focusable="false" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clip-rule="evenodd" /></svg>';
+const placeholderIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';
 const VerdocsContactPicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -26,6 +27,9 @@ const VerdocsContactPicker = class {
         this.showSuggestions = false;
         this.showMessage = false;
         this.delegator = false;
+        this.showKba = false;
+        this.kbaMethod = '';
+        this.pinCode = '';
         this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
         this.emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;
         this.phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;
@@ -38,6 +42,10 @@ const VerdocsContactPicker = class {
             this.delegator = this.templateRole.delegator || false;
             this.message = this.templateRole.message || '';
             this.showMessage = this.message !== '';
+            this.kbaMethod = this.templateRole.kba_method || '';
+            this.showKba = !!this.kbaMethod;
+            // TODO
+            this.pinCode = '';
         }
     }
     handleNameChange(e) {
@@ -82,18 +90,29 @@ const VerdocsContactPicker = class {
     // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
     // and show a duplicate autocomplete picker on top of our own.
     render() {
-        return (h("form", { key: '45acdba47c2999d3d4aa88c72e4451c5565b222e', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '96b525fe36cb094bbd4492841cb095e62b4358b8', class: "row" }, h("label", { key: 'f264a4b8cc6da4ef82f78a1841d5b3bce0ae4fef', htmlFor: this.nameFieldId }, "Name:"), h("input", { key: '15898561eeff05ad20dd73787f39702ab862d295', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
+        return (h("form", { key: 'b4c1d548719a9e43b09e9632078efecf461728fd', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '010bfa4a4802cdf165f4a837d52143296eeb9615', class: "row" }, h("label", { key: 'baadc6a3159a5e9fe58c91d944269fa5f2319fc5', htmlFor: this.nameFieldId }, "Name:"), h("input", { key: 'e570c3218970843b9acfb276349a7b9b2cc0d4fc', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
             // onBlur={() => (this.showSuggestions = false)}
-            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { key: 'ad28ba30382a2d2a40ac1992352368b883097553', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { key: 'a99e1d83a4292c1f7d978529526f49622ab8a18e', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
             var _a;
             return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : h("div", { class: "avatar", innerHTML: placeholderIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-        })))), h("div", { key: '7a7d4b6df5eab37ede0b87f9d10ba8b8e4e8254f', class: "row" }, h("label", { key: '2058494eeac07248115323afe529bcaf681afed1', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: 'd1c41d7b356190b4705e7d255103534bd1a47cd2', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '5f9668b15bfb2e1e06cc03e2f1ea051b893307f6', class: "row" }, h("label", { key: '54b40e4aa240e2c6fb2364fbe59707d25dbfdb65', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'dc20e317c4dbeae41bc9454685a0bf97f57db2bb', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (h("div", { key: '85fb931022f96a0916c162e335a1ea91a11a9590', class: "row" }, h("label", { key: '45c30e86e0038b8159c417bb59fb88885e309853', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'edd7b070c3fa83fe93e3305d70182a63b8a273b5', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '0cfb64faed1d1bfa9d712811ac7c05412b135a8c', class: "buttons" }, h("verdocs-toggle-button", { key: '6fe54edfc3e822f4863c8e2ad8109ea7cde8be94', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+        })))), h("div", { key: 'c1973698147b613df52fa2b8895fb6f7c6eda1e5', class: "row" }, h("label", { key: 'd9211e7aa931b9e270746be2e3a983e346d14f35', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '4e6e978b03cb2bb7f642ef9472ccb8914021561b', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '79fd52114dc907678d3f97fcf50502401c7c7cc6', class: "row" }, h("label", { key: '5f044851b4fd341162ac27308a53ef3ae9f87d9e', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '6b9e582317bf57617f3ef03771dc208d7a85d20a', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: 'ee0a3a7bb56ad26f9c6bfad38b1575999b6b1f1a', class: "row" }, h("div", { key: '7aaa78abd9f934b59862e94c6c657cbccc0ec587', class: "label-with-icon" }, h("label", { key: '3b5625726464e64f2a2089828f8efed86d3e6fac' }, "KBA:"), h("verdocs-help-icon", { key: 'e3ae8688cb0a3ee0f5673de35de911930b5c1264', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), h("verdocs-select-input", { key: '25f9fe8483ce98ba0984edbe40ea71432bfa0803', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+                { label: 'None', value: '' },
+                { label: 'PIN Code', value: 'pin' },
+                { label: 'Full Verification', value: 'kba' },
+            ] }), this.kbaMethod === 'pin' && (h("input", { key: 'c73d9196e00f0d8e2ef2372b4c7eec6521e1a8c4', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: '8501cd90265ade56a8491226b3fe4f6fd27cab96', class: "row" }, h("label", { key: 'ed86374d406062b31923a3b70dd8a65454b147e2', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'f8c01b1dc7ee18729db4578b490e4e6caeaba006', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '127c1bae45f6b5e01bb6ea7304c543550cb87074', class: "buttons" }, h("verdocs-toggle-button", { key: '7c1fc2e0955cd33d5e8b9778a104120685b9cafd', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+                this.showKba = e.detail.active;
+                if (!e.detail.active) {
+                    this.pinCode = '';
+                    this.kbaMethod = '';
+                }
+                this.showSuggestions = false;
+            } }), h("verdocs-toggle-button", { key: '60d536d5c030075158d2f237251cdc9045a7c7e6', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("verdocs-toggle-button", { key: '56941f96e455fa978d664cfecd6c015c0c133127', icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
+            } }), h("verdocs-toggle-button", { key: '6d634b2fc96412b136fa55074349f85ad2ae0a99', icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
                 this.delegator = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("div", { key: 'ec687a638006d9902d5041b57de14a0d6fbb4ff3', class: "flex-fill" }), h("verdocs-button", { key: 'e984e3783aa6483ab20873254dd96998e0d505e8', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '1b997aede29f9e8576c0739e089d879ba05ce123', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), h("div", { key: 'c798509d79008ba083e028ad4ca78170ac7659d3', class: "flex-fill" }), h("verdocs-button", { key: '4f0355a6ebae37fa80d451918e1572a9fe900861', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'ec6df05fb07868162f6d641e6b7a7d1dc80e5e5d', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
     }
 };
 VerdocsContactPicker.style = VerdocsContactPickerStyle0;
@@ -122,7 +141,7 @@ const VerdocsToggleButton = class {
         (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
     }
     render() {
-        return (h(Host, { key: '20e488d05d44870dcc7dd9ab4bf14b49d99b8d97', class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
+        return (h(Host, { key: '19b820fa8c54c87afebe8fbd24d70282eab6922c', class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
     }
 };
 VerdocsToggleButton.style = VerdocsToggleButtonStyle0;

package/dist/esm/verdocs-dialog_2.entry.js

@@ -17,7 +17,7 @@ const VerdocsDialog = class {
         }
     }
     render() {
-        return (h(Host, { key: 'a70ef89e55b032e0e35b32ca7bd73143579ed719' }, h("div", { key: '956e60df02c25de5bc30bf022bded3d4474254a3', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'f786312d515007e9e5b338eea7180d73127bf68c', class: "dialog" }, h("slot", { key: '6be94a4f4a45cf06eca5d6fdf5c1534a1993bddc', name: "title" }, h("div", { key: 'f398bb3152b46748e3e498ece109c127771e5257', class: "heading" }, "Please Confirm")), h("slot", { key: '9f3fe959c07e129394cd539080738e2636061634' }, h("div", { key: '6b85e230be87e43bd67a0cfc951400752a0efe06', class: "content" }))))));
+        return (h(Host, { key: '952c27946d1eb8552949ac29d9ffaa05222baaba' }, h("div", { key: '4721082da97c31ddb4e29b05922749b42ab38845', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '80e01d2ee87fd7ffbdd789068587d11ab4323644', class: "dialog" }, h("slot", { key: 'f55b17d75983192918a7c8b5b7df87ca22259b7b', name: "title" }, h("div", { key: '0ebb27bff2de5a06232e419cf9eeff67abddbb3a', class: "heading" }, "Please Confirm")), h("div", { key: 'c93aa214cf8f4c034611f1638dff493a9b2066e2', class: "content" }, h("slot", { key: '7473721bf10ed5dfe388e3d17aec8ee67a5e193f' }))))));
     }
 };
 VerdocsDialog.style = VerdocsDialogStyle0;
@@ -34,12 +34,10 @@ const VerdocsTable = class {
         this.data = [];
     }
     render() {
-        return (h(Host, { key: 'd048ed4b7942038c96da6873520ecaa2a83014f0', class: "table-wrapper" }, h("table", { key: '4328cdcb8da0670fff20f175c9a12deba009e85d', class: "table" }, h("thead", { key: 'c94cbef7c8b3e05d9ee71c812525f1599529bcd1' }, h("tr", { key: 'd27169ab0901fef379fd2001953c944915d9cd5e', class: "row header-row" }, this.columns.map((col, i) => {
+        return (h(Host, { key: 'efe778730c2c95e24dffa2043e1b16e93a964612', class: "table-wrapper" }, h("table", { key: '18b29a87f943123886ce6191e8d2cfc4f2c76b85', class: "table" }, h("thead", { key: '5152847a22a948d8fa0abd8b4ecc5ecdd7014f50' }, h("tr", { key: 'db88562938a289ea701291926b6d221c62fcd78c', class: "row header-row" }, this.columns.map((col, i) => {
             return (h("th", { class: `col header-col col-${i} col-${col.id}`, onClick: () => { var _a; return (_a = this.colHeaderClick) === null || _a === void 0 ? void 0 : _a.emit({ col }); }, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id }));
-        }))), h("tbody", { key: '5ecf556cd6c25d1f47220c0a22793d0a6ba8ff3e' }, this.data.map(row => (h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
-            var _a;
-            return h("td", { class: `col data-col col-${i} col-${col.id}` }, ((_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, row)) || row[col.id]);
-            // return <td class={`col data-col col-${i} col-${col.id}`} innerHTML={col.renderCell?.(col, row) || row[col.id]} />;
+        }))), h("tbody", { key: 'f8fd817f153e1e1067bebed5ca5b3ee40590e1eb' }, this.data.map(row => (h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
+            return col.renderCell ? (h("td", { class: `col data-col col-${i} col-${col.id}`, innerHTML: col.renderCell(col, row) })) : (h("td", { class: `col data-col col-${i} col-${col.id}` }, row[col.id]));
         }))))))));
     }
 };

package/dist/esm/verdocs-dropdown.entry.js

@@ -87,7 +87,7 @@ const VerdocsDropdown = class {
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (h(Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (h(Host, { key: '747b2358b38f0f0290936973c4aaf2ec08a1a846' }, h("button", { key: '733cdd06681a5324c4598d2a11e93b78e7ade53b', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

package/dist/esm/verdocs-envelope-document-page.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, getEnvelopeDocumentPageDisplayUri } from '@verdocs/js-sdk';
-import { t as throttle } from './utils-61c1093b.js';
+import { t as throttle } from './utils-d1c95309.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';
 
@@ -77,7 +77,7 @@ const VerdocsEnvelopeDocumentPage = class {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: 'a8a29647c914fafe6361029943ae43a5819fdbcb', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+        return (h(Host, { key: '1626cbea713462254f8d518479181a39156fd599', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                 // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                 // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                 // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values

package/dist/esm/verdocs-envelope-recipient-link_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, getInPersonLink, getRecipientsWithActions, recipientCanAct } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore } from './EnvelopeStore-fefba6fd.js';
+import { g as getEnvelopeStore } from './EnvelopeStore-9df042b5.js';
 import { V as VerdocsToast } from './Toast-b71de686.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './index-296aabaf.js';

package/dist/esm/verdocs-envelope-sidebar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, resendInvitation, cancelEnvelope, userIsEnvelopeOwner } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore } from './EnvelopeStore-fefba6fd.js';
+import { g as getEnvelopeStore } from './EnvelopeStore-9df042b5.js';
 import { F as FORMAT_TIMESTAMP } from './Types-e4a6eba5.js';
 import { V as VerdocsToast } from './Toast-b71de686.js';
 import { S as SDKError } from './errors-887f1e88.js';