@verdocs/web-sdk 4.0.7 → 4.0.9

package/dist/cjs/verdocs-pagination_2.cjs.entry.js

@@ -45,7 +45,7 @@ const VerdocsQuickFilter$1 = class {
         const firstPage = Math.max(0, this.selectedPage - 2);
         const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
         const pagesToDisplay = jsSdk.integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
-        return (index.h(index.Host, { key: '0f4037058b7ebbca6fc1a95515ffa0043bc746a4' }, this.selectedPage > 0 && index.h(PageButton, { key: '2ce40cf59e162cbfc490bba4b8468e069c247e68', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && index.h("div", { key: '1078fe0fe059c674d240bd33c59de89d17437190', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (index.h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && index.h("div", { key: '284de5eab7be28ca2a5d3f2fead4d0d3be39801b', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && index.h(PageButton, { key: '3e88ac32f9f54a12d468f711c54c767857638fbd', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+        return (index.h(index.Host, { key: '35e9f8dee414ae4addb4a0615d41ac2f877d6185' }, this.selectedPage > 0 && index.h(PageButton, { key: 'e3ccf5d514ed45c2e279b6ace160fa5865132f7d', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && index.h("div", { key: '74d1aaa681f9b8f3baafc935758d6dcc723fcdac', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (index.h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && index.h("div", { key: 'cb5d8461f4a33adffcb2a6df87f6ffcf66d08737', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && index.h(PageButton, { key: 'c433baeead865058d66f4aa127a6ce1fcc28f3bc', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/verdocs-preview_10.cjs.entry.js

@@ -229,12 +229,12 @@ const VerdocsSend = class {
         const roleNames = TemplateRoleStore.getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => jsSdk.isValidEmail(recipient.email) || jsSdk.isValidPhone(recipient.phone));
         const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-        return (index.h(index.Host, { key: 'd0bd3f9d7ef226896f095059203280e1c1e71265', class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { key: '1d4fdeda91a23a81bb1c72a4200de76e36ba74c8', class: "recipients" }, index.h("div", { key: '9bb72122ba245dd95c3f2ffb0c1768764c2f2da7', class: "left-line" }), index.h("div", { key: 'c2056047a4bf20612fb83693fcf279a1354c98e0', class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { key: '0220edca79c791bdd561d0ff92cfad3236dd7800', class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+        return (index.h(index.Host, { key: 'ecdc1830949a5a35b092167b201c6feb8284e221', class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { key: '2d8ebba91a5cff228135465c0956848fcc8873b5', class: "recipients" }, index.h("div", { key: '1c72951bfc1e11a1d95c04e005b3fcd8108c39f5', class: "left-line" }), index.h("div", { key: '82834a006584cde2b8020f7f233dfff685e647f2', class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { key: '930ca1cc5b3f93f11f0a38703396538ee90dba5b', class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
             var _a, _b, _c, _d, _e, _f;
             const unknown = !role.email;
             const elId = `verdocs-send-recipient-${role.name}`;
             return unknown ? (index.h("div", { class: "recipient", style: { backgroundColor: jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (index.h("div", { class: "recipient", style: { borderColor: jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
-        })))), index.h("div", { key: '16fba92b62896c3368d54743c9ae5c79b7558f16', class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { key: '0cae926609fc5c2a10387bee716d49c98a8ebcf6', class: "complete" }, "Signing Complete"))), index.h("div", { key: 'f8457f0c451cc70a096e46447395186aca90169f', class: "buttons" }, index.h("verdocs-button", { key: '2be6f8c3cfb4c2ec8c010c4cba79855f20e5461d', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { key: 'b34393a6e3197acd0143161c71a43420f45302be', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", { key: '8e26caa183719e765c771921d365e39ec4916be4' }))));
+        })))), index.h("div", { key: '241118ea059aadb8a6030b5ee5bd4383e88af212', class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { key: '05ba689ac40aaf1543b921b490f8fe4550bad4df', class: "complete" }, "Signing Complete"))), index.h("div", { key: '39c73b0a3310d85dfbd29f2d2fda347d37091e90', class: "buttons" }, index.h("verdocs-button", { key: 'c3d1196a34f1cd4ab654aa07b707372054f26202', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { key: 'd2e16d7a4d97c8888df3e7257296dee6f8db3234', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", { key: 'd8c0a234261d1b77d6343dd7e426c28475dceadf' }))));
     }
 };
 VerdocsSend.style = VerdocsSendStyle0;

package/dist/cjs/verdocs-quick-functions_2.cjs.entry.js

@@ -24,7 +24,7 @@ const VerdocsQuickFunctions = class {
         this.createDocument.emit();
     }
     render() {
-        return (index.h("div", { key: 'eb5dc623120c7c528a9eb81f3dd4a2cdabdb7238', class: "container" }, index.h("p", { key: '09ab8ebada6eee21819e9152a76199bc86043a91', class: "title" }, "Quick Create"), index.h("button", { key: '9d1d124c64f0b6b7d4adc95a4c637907ad40bdfd', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: 'e7f2bf2070c45e3266be984c66115615f6578e27', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (index.h("div", { key: 'e7d2ca753e83c18c1ca85aedcbe277db1488ab63', class: "container" }, index.h("p", { key: 'b5e1a9ff78f3fb76eacb96c8168f094f41f8d877', class: "title" }, "Quick Create"), index.h("button", { key: 'ac967b777b02f6d6155798ddd015de9eeafadd6f', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: 'e36d5ac7e47e8e0d943b3722820fc994e0cad625', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
     }
 };
 VerdocsQuickFunctions.style = VerdocsQuickFunctionsStyle0;

package/dist/cjs/verdocs-radio-button_3.cjs.entry.js

@@ -23,7 +23,7 @@ const VerdocsRadioButton = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '9eee43dc3c08fdd5c3dbde1bb167dfa4d57fe4fa', class: { disabled: this.disabled } }, index.h("input", { key: '07a13e1ea2e2fc2aa78f2b830908fa6f96e4963d', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { key: '303f4ed1d9f45123a563c6e12e8eafa03e876ef6', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+        return (index.h(index.Host, { key: '08503221049dbcdb5ad6d8804576bd302437a784', class: { disabled: this.disabled } }, index.h("input", { key: '649115f2c5d916fbec807ab0566ec3352abe6afd', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { key: '597495b414c518d808f241cea9c3c66b0fabdf63', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
     }
 };
 VerdocsRadioButton.style = VerdocsRadioButtonStyle0;
@@ -146,31 +146,31 @@ const VerdocsTemplateRoleProperties = class {
     }
     render() {
         const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-        return (index.h(index.Host, { key: 'f26ffe2f3c4cf162dc113e38a57347cf6c426074' }, index.h("div", { key: 'd9c5104918e6cf08b28d70b6278d7493a40d36e5', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: 'b1001937ae574b088c17d2f866296cb10ae8f237', class: "dialog" }, index.h("form", { key: 'd46822f635025195120735636d68a4c0424370f0', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: '6d115e047e1fa310397d52f7873b68301f84ba1f', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        return (index.h(index.Host, { key: '710e7f0ab8b1ecad6fa29a2872cfa8cd724deabd' }, index.h("div", { key: 'cce8cee42d046c80504e4ae6905cd290334612e6', class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { key: '9d43dd9253210f0682f9cf59835702e3ccde5b4f', class: "dialog" }, index.h("form", { key: 'b532cbc42c82301bbb528b8a3c5112ccad7ae0e4', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { key: '084af944f9d6c9f3e6fbc562caae052523c755f0', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
                 ? 'This role has fields assigned and can no longer be renamed.'
                 : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {
                 this.name = e.target.value;
                 this.dirty = true;
-            } }), index.h("div", { key: '8a775c7e42acd009e25859726f48e777203304a3', class: "row" }, index.h("div", { key: '284d78cd23689e9c8683cf1f8fe55252ae1070cc', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: 'f996e3e885cd40a3aeff9469d2051fd09dd43274', value: this.type, options: [
+            } }), index.h("div", { key: '2dabe3a2431972036407ec97432809b58ca8f250', class: "row" }, index.h("div", { key: 'fe50813b64830cd68e0c24621aaf72b926aac517', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: '24ba6e3ae5f4fe7c187e7a11e12baaba4caaa094', value: this.type, options: [
                 { label: 'Signer', value: 'signer' },
                 { label: 'CC', value: 'cc' },
                 { label: 'Approver', value: 'approver' },
             ], onInput: (e) => {
                 this.type = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-help-icon", { key: 'a320b1084f1a2333638c0e8b17d82efeb0a7bf1a', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), index.h("verdocs-text-input", { key: 'e554caea134e5955f0577397b902c8e6083520bf', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
+            } }), index.h("verdocs-help-icon", { key: '271c9d72f5b7b7ecb683cd4b0ea0dbfec26d385b', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), index.h("verdocs-text-input", { key: 'cccad696894aeb79f93803c8cc50fa9552a29860', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
                 this.full_name = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: '21aae473dc54ed8cb94adcc1e72fdedf3a3f91d9', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
+            } }), index.h("verdocs-text-input", { key: '5a374e483b87942567a63c39fe9fdef13d460c59', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
                 this.email = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: 'd5ebf4575a092d3f70570d1a7c419aa90c75c64b', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
+            } }), index.h("verdocs-text-input", { key: '8e9bf75190115c2b856a5a109a82e4fade3d99a7', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
                 this.phone = e.target.value;
                 this.dirty = true;
-            } }), index.h("div", { key: 'f7aca6f48663383ee649c7e3f11488c6a54f0420', class: "row" }, index.h("div", { key: 'f5304cffb00b6cf7edc92c9f2f9cb4013a8f16e8', class: "input-label" }, "May Delegate:"), index.h("div", { key: '78f6e51ccdfb7cccf4ad4d7c173eb29495ad93a9', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '319258417639cd160e0ad63de3feb413f8d18a9f', checked: this.delegator, onInput: (e) => {
+            } }), index.h("div", { key: '9fd9cb1a91e78154bf1df75cec3b357a464955c5', class: "row" }, index.h("div", { key: '480168f43800400d9572f6018a0d1d60cc56a588', class: "input-label" }, "May Delegate:"), index.h("div", { key: 'e65486b714f0e8917572494c57f1ea316ef73038', class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { key: '3c76bfc3d233e09be06e7bf252fd6997b30fc38b', checked: this.delegator, onInput: (e) => {
                 this.delegator = e.target.checked;
                 this.dirty = true;
-            } })), index.h("verdocs-help-icon", { key: 'e8614cdde73aac4c52fef105562058a2e34773ee', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: '66302c80e7ce3cfb80d71ca9eb798832bbee64cd', class: "buttons" }, index.h("button", { key: '4198669a9355ba0b5065944c4dd28648ba4fd7d2', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: 'f7eccd789c90c1e3e570b54d0a8a3b947a5c5cf1', style: { flex: '1' } }), index.h("verdocs-button", { key: '0ad00a425bd9fc3ef21405c73b0159fc5a8dd13d', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '8b11ea5d3f0797775909cb8590aec5a4518637ce', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+            } })), index.h("verdocs-help-icon", { key: '99076f70ccdf5a961a7078093e2f3f2ca73b56fb', text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { key: '86f63ddbd965d2709269cfeb1f105c69424d3a5c', class: "buttons" }, index.h("button", { key: 'ddde079896635a69dcd10bb82008c1986ed52383', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: 'f4d23743dce9acb5f16c519b569764bb17253944', style: { flex: '1' } }), index.h("verdocs-button", { key: 'fe271dda2a5e9d6a8f0c4ba4199af5ea8f81077d', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '38b2986e9e3b784215fcafdf486631f7ebf1361b', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
     }
 };
 VerdocsTemplateRoleProperties.style = VerdocsTemplateRolePropertiesStyle0;
@@ -237,7 +237,7 @@ const VerdocsTemplateSender = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'f68de757047cf08e13ca4b5f33e28c0af48fc216' }, index.h("div", { key: '6d1d7f7fc65b8ec2112dc7c33750cfce5d4f3e8c', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '4d89b066209259145a82549e572b558fc11cf884', class: "dialog" }, index.h("div", { key: 'fe42cd60ee5ed150318152a21db7bd0bfd41bb6f', class: "options" }, index.h("div", { key: '5e6193483c37781365aabccef51a67ff56ff937e', class: "option" }, index.h("verdocs-radio-button", { key: 'ea3ece13bab53d052186194b9708c7a072335103', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: '785b66f5cc26579d6caafc85924c5ad7e3966d40', class: "description" }, index.h("div", { key: 'd82d392c83f757ff7f23d5e78bfd68ab97eb0f52', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: '34f2139c6e1f4cf01bb497066fea7000837c3ee9', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: '1b20cb65e1ed7bdf317e6af82b5b445f988e98c8', class: "option" }, index.h("verdocs-radio-button", { key: '236a72f8c58ab2a2ad52824c698b8e0367881c3c', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: '5e23b141d9d9c126ac2c82ab30bcb279b73d4793', class: "description" }, index.h("div", { key: 'f9b6deeff27abb6ae722cc8b70aa662c400108b7', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: '03982e3624ba4e858fd478e8dc5c8ee0a1b98f3f', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: 'db8d9acd7b3a06a6f09a5fb03ca8403dc82db00c', class: "option" }, index.h("verdocs-radio-button", { key: 'a12f063f0ff6e06eb5aaff35b815621e5b06d8b3', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: 'acfba148b6c50fac0a3d72a6f46b3a5f144d3986', class: "description" }, index.h("div", { key: '3120e3ed05176dfc34ce482d359274755dcb55dc', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: '0e78f7bc767c863d53ed113c52584252f893ecc4', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: 'ac2f56ad77d0d4aeef9d311e7b44a5c9d19a74c7', class: "option" }, index.h("verdocs-radio-button", { key: '433e69e8fb00ee8676ec46657ad5c19df76ddd6c', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), index.h("div", { key: 'ff50c7fee92e6cce3e488b4a4df2274ada44b11a', class: "description" }, index.h("div", { key: 'de3fd4b8f985e7f348a3743fb7431d4f9ad66598', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: '257a87eb54dbfceb8edbeffca997fe787916ddc8', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), index.h("div", { key: 'f9223854c2616a85d057b7d7208e82ba85413556', class: "option" }, index.h("verdocs-radio-button", { key: 'c74d08475eb3601c21e75916366908c15c652ba8', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: '9af51dd805406c23c9fc081d284d661e16f69f0a', class: "description" }, index.h("div", { key: '16b852696b984473a5dbfc09345dffbc6f3e0a40', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: '104c0ec597a028b30dcc0d6e00a0bcac0433b0c9', text: "Only I can use this template." })))), index.h("div", { key: 'ce8b9f36df6c8beab9305dec9d3acc64f5369d07', class: "buttons" }, index.h("verdocs-button", { key: '722df3e64f41b5c8aee45d66eaa13b33711bba5c', label: "Close", onClick: () => this.handleClose() }))))));
+        return (index.h(index.Host, { key: 'b8ca2ff8bdae1256801c67f7be188f6b3e4c5c33' }, index.h("div", { key: '565b0287142ce32fd1d11b7e344b35b8151b9e93', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '2ece454c0aba99deb418e1ac2035e237a2296a6c', class: "dialog" }, index.h("div", { key: 'cbac2ba10ad6cd63e714019e4311627e7972ae52', class: "options" }, index.h("div", { key: '1ab94e1e5f30089cabb6abf23ee1294663cfa878', class: "option" }, index.h("verdocs-radio-button", { key: 'ae1689ae1a34ff1f9e1ae99917e659c27e2b6731', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), index.h("div", { key: '78741f9340debb402dfcca11bf33a19660f7c541', class: "description" }, index.h("div", { key: 'ddee4eaf150cf0989849a2799896a2fd7c401411', class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { key: 'f51b1ba236eb08ebaae5a6171b9d3f8815dfb7c5', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { key: '37095164cf4cfa5030b1d2da04b6add9a572c914', class: "option" }, index.h("verdocs-radio-button", { key: '8e8c8681e992cf00caa314c493afcd5bdb7a0fbe', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), index.h("div", { key: '5a94fd99ef10648c5c1f68a91f80c31d1e8f5078', class: "description" }, index.h("div", { key: '9a64f779ebe53499683f5af9ec7bc0218fe66499', class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { key: '64edd79a609173c7399dbc2cce06269f0f7adc15', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { key: 'b287986b5282e92153504a328a9273b0fcb81902', class: "option" }, index.h("verdocs-radio-button", { key: '909e26ec66bf5d27014f2ef41c533662f5e2033e', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), index.h("div", { key: '3a42018b36b144feefa5a662e23f852dcd230889', class: "description" }, index.h("div", { key: '071573ff99a6019b9d9ba164c7d6d3123b209510', class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { key: 'ecb0c3cd3f39c92954dd20c94a12c38ce35aa8cb', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { key: '2515c8c359379c70b7be04b2c50a139b760d777c', class: "option" }, index.h("verdocs-radio-button", { key: 'd5edd7267eb494c73cee3168de5d841c969a22aa', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), index.h("div", { key: '31cbe88f2cc23b74534bb2d51f280a3112827722', class: "description" }, index.h("div", { key: '11160a0c962837e4c4342f46e111fe8ada8ca4d3', class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { key: 'd23472c9393598908dab4ae2a4cba983bafc89e1', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), index.h("div", { key: '128da3cd0259b4d72bd6bca910b932898d9f5f38', class: "option" }, index.h("verdocs-radio-button", { key: '0a65d2f15e37330526bbf384868b4e65a3b7ce5b', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), index.h("div", { key: '6182e6fd82ea55b8e59e175e6413f324657405b5', class: "description" }, index.h("div", { key: '919c6b40c4f171b491b8001c30acca73c6308a86', class: "name" }, "Me"), index.h("verdocs-help-icon", { key: '9aaaa7ad26ec56b5667c1c1ea31ce19f2742c81e', text: "Only I can use this template." })))), index.h("div", { key: '6b7bdc820887b652552d4ad9f08ac5c3f83fc71c', class: "buttons" }, index.h("verdocs-button", { key: 'bcaf3bc67e9de9c62cda7fb6cc1c5ecbfd168d9e', label: "Close", onClick: () => this.handleClose() }))))));
     }
 };
 VerdocsTemplateSender.style = VerdocsTemplateSenderStyle0;

package/dist/cjs/verdocs-search-tabs.cjs.entry.js

@@ -13,7 +13,7 @@ const VerdocsSearchTabs = class {
         this.selected = 'all';
     }
     render() {
-        return index.h("div", { key: 'b4ac2045933155b547df5cde6e4dc72a0af06050' }, "\u00A0");
+        return index.h("div", { key: 'b5bf8a69699b2d55bd2c744dc2c96ec09e185351' }, "\u00A0");
     }
 };
 VerdocsSearchTabs.style = VerdocsSearchTabsStyle0;

package/dist/cjs/verdocs-search.cjs.entry.js

@@ -14,7 +14,7 @@ const VerdocsSearch = class {
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
     }
     render() {
-        return (index.h("div", { key: '4ebcbcca303725a1114792af29474ec365759850', class: "container" }, index.h("verdocs-search-box", { key: 'b1998f81d2e95d31f71bc1a59b0eb93b2be2347c', endpoint: this.endpoint }), index.h("div", { key: 'a604d97bd63254a5988d110e5e00c91d9bf98466', class: "boxes" }, index.h("verdocs-search-activity", { key: '8ff0e974bdb7d34b78c140b74c69623f5abf3519', type: "recent", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '308c66ef4be9f29d8efbe807fd02f1eaa73b3c59', type: "saved", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: 'f4c067b93ccfaf2ecfd6d40ecdfb194bc7d21c3e', type: "starred", endpoint: this.endpoint }), index.h("verdocs-quick-functions", { key: '589d9f73adad835d739abf4375bd25fdcbfeeb21', endpoint: this.endpoint }))));
+        return (index.h("div", { key: '1bdc73f6b69fdaf197b4d228c36ac28a4de147c8', class: "container" }, index.h("verdocs-search-box", { key: 'd5305d39714c09a83dca8d87282fe3bec40491f0', endpoint: this.endpoint }), index.h("div", { key: '6f333add2936ca54994f0ec4e33023fa2b196b07', class: "boxes" }, index.h("verdocs-search-activity", { key: '2c49e617f5bbb0337a3e48a18b2687478f512847', type: "recent", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '3ee0c69f75e839459c63f33bf24302e3cc277adf', type: "saved", endpoint: this.endpoint }), index.h("verdocs-search-activity", { key: '1f78fdc2d68b97a24a37ba544bd2d49d49d43b32', type: "starred", endpoint: this.endpoint }), index.h("verdocs-quick-functions", { key: '789f6170d2f7e0b17da045d4c2350c69a7e9588b', endpoint: this.endpoint }))));
     }
 };
 VerdocsSearch.style = VerdocsSearchStyle0;

package/dist/cjs/verdocs-spinner.cjs.entry.js

@@ -16,7 +16,7 @@ const VerdocsQuickFilter = class {
         this.mode = 'light';
     }
     render() {
-        return (index.h(index.Host, { key: 'f5a8b78035f45b04cd8a017f0052857d74e4d454', style: {
+        return (index.h(index.Host, { key: 'd8e7181efe02d923319257c59da36ae807fcf7a0', style: {
                 width: `${this.size}px`, //
                 height: `${this.size}px`,
                 flex: `0 0 ${this.size}px`,

package/dist/cjs/verdocs-status-indicator.cjs.entry.js

@@ -7185,11 +7185,11 @@ const VerdocsStatusIndicator = class {
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (index.h(index.Host, { key: '4f448a7efa8648f23fa6fca7c1684998c54a2869', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (index.h(index.Host, { key: 'aaaa7b0cc222b74a9fc8b1663ca3ddf9d4580cf6', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
                 this.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, index.h("span", { key: '8849c6dbf2be4339630768f064e76cb660919f15', class: "icon", innerHTML: icon }), index.h("span", { key: 'ae89d44c5b7bc18d1670957097c36ed044645a23', class: "content" }, statusMessage), index.h("div", { key: '65779af7d179cba0d6d685834f4da129472590c0', class: "detail-panel", ref: el => (this.detailPanel = el) }, index.h("div", { key: '9b564f492cdcaa5fdb4b622a0ea32be625f0cd57', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (index.h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, index.h("span", { key: '03baee21425fefa4ce17e3e1998fb60f32310bb0', class: "icon", innerHTML: icon }), index.h("span", { key: '19b98f1e2cb76a7488bd7400928930d33b1003d0', class: "content" }, statusMessage), index.h("div", { key: '870dd620390fa1f201ca1b509f0c3bcf513cfa8c', class: "detail-panel", ref: el => (this.detailPanel = el) }, index.h("div", { key: '7cbe6e3452da0997d2169f2d1024e3d68f891d96', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (index.h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
 };
 VerdocsStatusIndicator.style = VerdocsStatusIndicatorStyle0;

package/dist/cjs/verdocs-template-card.cjs.entry.js

@@ -18,7 +18,7 @@ const VerdocsTemplateCard = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '8c1e1c635b1baa655956acdb25c0dadf7aa7fb37' }, index.h("span", { key: '27f70562114c4b477a39d2c592ac970958308b6a', class: "name" }, this.template.name), index.h("span", { key: 'e7d9da9cef9ead160a65a4cee49f030d52b20eb3', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), index.h("hr", { key: 'ae53a4cb7e75c6b2af578e2518b601e742aecfb8' }), index.h("div", { key: 'f493a7d3641fe90d6bf35649664f76b5fc1ee3d3', class: "controls" }, index.h("div", { key: 'f0ef5225ff60e056166eede4ba69d4999c1a9887', class: "control" }, index.h("span", { key: '5f3f45383a81584741ee04b1fce6b4720bab9063', class: "icon", innerHTML: StarIcon }), index.h("span", { key: '9faf96a64292b6529e29186a4bd1e12d9ad3b42b', class: "value" }, this.template.star_counter)), index.h("div", { key: '2b605818b05ddf5ea9c3ac28f1bad3d0c8a3e3fb', class: "control secondary" }, index.h("span", { key: 'c12a8f975614144c72060cf9213a7e8081636602', class: "icon", innerHTML: PagesIcon }), index.h("span", { key: '53dd14ec4e8c0c57bbff3866901d10baa61abc31', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), index.h("div", { key: 'c2e72a02dcb918fe595f2fd7228728bd29b1c816', class: "control secondary" }, index.h("span", { key: '9ed65ee6703d3db204c7f9619884615d3595f9f2', class: "icon", innerHTML: EmailIcon }), index.h("span", { key: '805565cdc082e8d76e2dd2db98aeede1eee9810f', class: "value" }, this.template.counter)), index.h("span", { key: '8914f5b5d9d2395bd60f7fded9d58b4c48f85100', class: "additional-controls", innerHTML: ActionsIcon }))));
+        return (index.h(index.Host, { key: '3ef4b7a60f214bc1b4301f82c4d6c0c43cb31c1c' }, index.h("span", { key: '5da8ee7013a901cfd37bde9319f2efa68d08d6f6', class: "name" }, this.template.name), index.h("span", { key: '0e27a427f7575435bc09e98408cb8ebfd20f2221', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), index.h("hr", { key: '3471951b3a1aae2b6e753f7eaf14bb44b5ec9270' }), index.h("div", { key: 'eb4f5304de241f9e7ff0a558591d1a3caca8b29f', class: "controls" }, index.h("div", { key: '3d913d458116470de9abc5f88234bb4ed57e561e', class: "control" }, index.h("span", { key: '5dbfeb4e3c103b49ce9c6d54b5249af8b5b16086', class: "icon", innerHTML: StarIcon }), index.h("span", { key: 'ca84ade8a0d54ab96bdee35c63b03e34ab893257', class: "value" }, this.template.star_counter)), index.h("div", { key: '01385ff24ea0de2948b3ede9fbf1058f92ab5c7f', class: "control secondary" }, index.h("span", { key: '907331cb5970739199c2b319b18f17f9ce98bb93', class: "icon", innerHTML: PagesIcon }), index.h("span", { key: '9120a25679b0f9bf7a89a77b76f9c253d66df2c9', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), index.h("div", { key: '935459e3076e01cbbd2af34b2515e10722672799', class: "control secondary" }, index.h("span", { key: '1db1cc5176095a2d5646112a1d8aafc66b6e8772', class: "icon", innerHTML: EmailIcon }), index.h("span", { key: 'a66c84bfb81ac9ca2608a2dd35c28a707d3e7956', class: "value" }, this.template.counter)), index.h("span", { key: '0f9a72ba9ccc5c8c68321df12d0fdb489a25e4ac', class: "additional-controls", innerHTML: ActionsIcon }))));
     }
 };
 VerdocsTemplateCard.style = VerdocsTemplateCardStyle0;

package/dist/cjs/verdocs-template-star.cjs.entry.js

@@ -46,7 +46,7 @@ const VerdocsTemplateStar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '0bfc2a29037c8753d08852eb5b0d0e7ccae821fc' }, index.h("div", { key: '16441206c390f010d43fddf52df556f503f2309b', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), index.h("div", { key: '0b7ed0bba53a2e243c47195efcb09934d056d479', class: "count" }, this.template.star_counter || '--')));
+        return (index.h(index.Host, { key: 'a3b6ca54b4549954355f9061b871489243432da7' }, index.h("div", { key: 'abcfec7a6fb4d928b3bc7080cbe49eb299cb56f9', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), index.h("div", { key: 'a36087cb85065e3cf888ec8c8ef6fa88f4b3a2e9', class: "count" }, this.template.star_counter || '--')));
     }
 };
 VerdocsTemplateStar.style = VerdocsTemplateStarStyle0;

package/dist/cjs/verdocs-template-tags.cjs.entry.js

@@ -14,7 +14,7 @@ const VerdocsTemplateTags = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '7926f67d015abdbf2fd62f970974757df81a846b' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (index.h("span", null, tag)))));
+        return (index.h(index.Host, { key: 'b98c9a6fdcf66d4a7f779a7022f6b16cb7eef987' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (index.h("span", null, tag)))));
     }
 };
 VerdocsTemplateTags.style = VerdocsTemplateTagsStyle0;

package/dist/cjs/verdocs-toolbar-icon.cjs.entry.js

@@ -44,7 +44,7 @@ const VerdocsToolbarIcon = class {
     //   this.press?.emit();
     // }
     render() {
-        return (index.h(index.Host, { key: 'c12c9e2593bf281d5c0ce60ebffebf974a4a1afb', class: {} }, index.h("div", { key: '7c03bd3e40eed4fa9966afe926cdc4c490d5a6d7', "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) }), index.h("div", { key: 'd757834d1be057de971a7bcbb47158c9c2182907', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { key: '0a9e2615fa20a0625b929173dd2705be5165c39a', "data-popper-arrow": "true", class: "arrow" }))));
+        return (index.h(index.Host, { key: 'f9c2c8bd293559e5e504b69cbc445ca813f134a2', class: {} }, index.h("div", { key: 'e5d497d4859e8bd61364f56f8c452c61ece75a76', "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) }), index.h("div", { key: 'ebb1c0fa2cd8b58eba9d5057fc965ead53c23059', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { key: 'df0d03fbeeeb3016dde67f6d8bf8f75c5a97105c', "data-popper-arrow": "true", class: "arrow" }))));
     }
 };
 VerdocsToolbarIcon.style = VerdocsToolbarIconStyle0;

package/dist/collection/components/controls/verdocs-button/verdocs-button.js

@@ -1,4 +1,11 @@
 import { h } from "@stencil/core";
+/**
+ * A simple button
+ *
+ * ```jsx
+ * <verdocs-button label="Click Me" />
+ * ```
+ */
 export class VerdocsButton {
     constructor() {
         this.label = undefined;
@@ -10,7 +17,7 @@ export class VerdocsButton {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '813ea229dd512708d1b1c0fe87cf7462cb2276b7', 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: 'd1ca3189f5513bbe13eeda50aa0dc27a03f67480', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        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));
     }
     static get is() { return "verdocs-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js

@@ -1,5 +1,9 @@
 import { createPopper } from "@popperjs/core";
 import { h, Host } from "@stencil/core";
+/**
+ * Display an icon button that triggers a drop-down panel that can display
+ * arbitrary child content, such as metadata, forms, or other controls.
+ */
 export class VerdocsButtonPanel {
     constructor() {
         // Not marked as @State because it's not the thing that controls our rendering
@@ -61,10 +65,10 @@ export class VerdocsButtonPanel {
         }
     }
     render() {
-        return (h(Host, { key: '875a734696925dd22625880b694e32c4845e1254' }, h("div", { key: 'cc83aef76b34b3e9031160451f9643168d41cf3b', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (h(Host, { key: 'cbf8d72d05c0a1461d0fb99e78879c42bd737336' }, h("div", { key: '87dec92b073c1dee35b40f08db6752e663b6249e', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), h("div", { key: '136375bb517b9d86327c6fa63b115f3f496df7a4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '065c60cf39be8a608fbc5e2199b09cb55d8a551b', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '85af4ff2a549a5d062fff08bf17d1c6c24c439e5' }))));
+            }, 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' }))));
     }
     static get is() { return "verdocs-button-panel"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js

@@ -18,6 +18,22 @@ function debounce(func, wait, immediate) {
             func.apply(context, args);
     };
 }
+/**
+ * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
+ * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.
+ *
+ * ```html
+ * <verdocs-dropdown
+ *   options={[
+ *     {label: 'Option 1', disabled: true},
+ *     {label: 'Option 2', id: '2'}
+ *     {label: ''}
+ *     {label: 'Option 3', id: '2'}
+ *    ]}
+ *   label="OK" onClick={() => (console.log('OK clicked'))}
+ * />
+ * ```
+ */
 export class VerdocsDropdown {
     constructor() {
         this.options = [];
@@ -82,7 +98,7 @@ export class VerdocsDropdown {
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (h(Host, { key: '068386cdca529f310e7914d475739ca9a574d02d' }, h("button", { key: '557fe893e3123fdff6251992c14a3a803451fd30', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (h(Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

package/dist/collection/components/controls/verdocs-file-chooser/verdocs-file-chooser.js

@@ -1,6 +1,10 @@
 import { VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host } from "@stencil/core";
 import { unicodeNBSP } from "../../../utils/Icons";
+/**
+ * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should
+ * provide the actual upload functionality.
+ */
 export class VerdocsFileChooser {
     constructor() {
         this.endpoint = VerdocsEndpoint.getDefault();
@@ -21,7 +25,7 @@ export class VerdocsFileChooser {
     }
     render() {
         const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
-        return (h(Host, { key: '870f83d51356099942aeb7f50680bff38b946e74' }, h("input", { key: 'a4177207b2d87dd1d7e26093b93e36858a296f65', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '57e6c23406d1a12bc7b426fe76469c83925692ed', class: "upload-box" }, h("div", { key: '6b05c0bc019af781b632b91761e96b48a7e99623', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'b1ab95cb7d5a19c2d5c3e3a48c073a954bbed454', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'bec299eef4e98464c0cd76180c8b2af875ee6243', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
+        return (h(Host, { key: 'f8febf3e2ed17a5997e9e97aad97a83ecd5a0bb2' }, h("input", { key: 'b151b6e4a19521ecb95b40a7b414c6ffd3e7c74b', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '9aa5d9b06f54f4479afb9276702632c695d24d0f', class: "upload-box" }, h("div", { key: '769adcb7a66ae0357e581909978fc18e5cca75ab', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'd50342ec030cf44a608b7e13e480015c63822ea7', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'd6a883649258392cb922a4b0a4901e526017bf5f', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
     }
     static get is() { return "verdocs-file-chooser"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.css

@@ -52,9 +52,24 @@ verdocs-organization-card .popup {
   flex-wrap: nowrap;
   font-family: sans-serif;
 }
+verdocs-organization-card .popup-header-with-logo {
+  display: flex;
+  flex: 0;
+  gap: 20px;
+  flex-direction: column;
+  margin: 0 0 20px 0;
+  font-size: 21px;
+  line-height: 16px;
+  color: #4c56cb;
+}
+verdocs-organization-card .popup-header-with-logo img {
+  max-width: 300px;
+  max-height: 50px;
+}
 verdocs-organization-card .popup-header {
   display: flex;
   flex: 0;
+  gap: 20px;
   flex-direction: row;
   align-items: flex-end;
   margin: 0 0 20px 0;
@@ -62,9 +77,6 @@ verdocs-organization-card .popup-header {
   line-height: 16px;
   color: #4c56cb;
 }
-verdocs-organization-card .popup-header .status {
-  margin-right: 20px;
-}
 verdocs-organization-card .popup-body {
   display: flex;
   flex-direction: column;

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.js

@@ -1,5 +1,7 @@
 import { format } from "date-fns";
 import { h, Host } from "@stencil/core";
+// TODO: See what was done in Storybook. Move all SVG icons to a common file that both projects can share
+//  and reduce duplication between components for re-used icons. Also bring icons into Figma for reuse there.
 const UserIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><path d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"/></g></svg>';
 const BusinessIcon = '<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';
 /**
@@ -10,7 +12,10 @@ export class VerdocsOrganizationCard {
         this.organization = undefined;
     }
     render() {
-        return (h(Host, { key: 'c59bd95b53a78f455c5ebab34adce010c002681c' }, h("span", { key: '0bbc0dcb3b7183dfecd7825e756201e383a8b025', class: "icon", innerHTML: this.organization.is_business ? BusinessIcon : UserIcon }), h("span", { key: '4e4c3ce8ccdacabd42ceeda4d39b207907825011', class: "content" }, this.organization.name), h("div", { key: '139eea9cab95894539d075437b209a041700c08f', class: "popup" }, h("div", { key: 'fb5afefbc22b7e55dada752f42ef77e4c0d8df06', class: "popup-header" }, h("span", { key: '20cfeb72c620fbfec512560882d15ee94155f758', class: "status" }, h("span", { key: '40d786c63de515713953ad01487c900180c31f2b', class: "icon", innerHTML: this.organization.is_business ? BusinessIcon : UserIcon })), h("span", { key: '72d976fa876e586f6eb2c2904fe645d58b4b2d15', class: "title" }, this.organization.name)), h("div", { key: '28e8a339af3468edf93c1930daf6ec17bd067271', class: "popup-body" }, h("div", { key: 'a0539dd63e801dcfe00c237c3c4fe51d2631673e', class: "field" }, h("strong", { key: '005821da859bc074bbd6c3d620fa6ea042198a61' }, "Joined"), format(new Date(this.organization.created_at || undefined), 'LLL d, Y')), this.organization.url && (h("div", { key: '4193b19c08d82ef397d67dd05c4e4132163a059c', class: "field" }, h("strong", { key: '477b78b127a6c168528b56a22d9fca0de91d0e10' }, "Website"), h("a", { key: '30009565a499acbf501668d2b6e09287cebd688f', href: this.organization.url, target: "_blank", rel: "nofollow" }, this.organization.url)))))));
+        var _a, _b, _c, _d, _e, _f, _g;
+        console.log('Rendering org card', this.organization.thumbnail_url, this.organization);
+        const fallbackIcon = ((_a = this.organization) === null || _a === void 0 ? void 0 : _a.is_business) ? BusinessIcon : UserIcon;
+        return (h(Host, { key: 'f76a55b62fb94a6d0214f535faac0dd1bc7a3d2c' }, this.organization.thumbnail_url ? h("img", { class: "icon", src: this.organization.thumbnail_url, alt: "Logo" }) : h("span", { class: "icon", innerHTML: fallbackIcon }), h("span", { key: '081b7de4929a689351b9097a5492854597a6a2e0', class: "content" }, (_b = this.organization) === null || _b === void 0 ? void 0 : _b.name), h("div", { key: '3d4f6d20995a9c192bd0022edf95cc89023457cd', class: "popup" }, this.organization.full_logo_url ? (h("div", { class: "popup-header-with-logo" }, h("img", { src: this.organization.full_logo_url, alt: "Logo" }), h("div", { class: "title" }, (_c = this.organization) === null || _c === void 0 ? void 0 : _c.name))) : (h("div", { class: "popup-header" }, h("span", { class: "status" }, h("span", { class: "icon", innerHTML: fallbackIcon })), h("span", { class: "title" }, (_d = this.organization) === null || _d === void 0 ? void 0 : _d.name))), h("div", { key: 'a17465bf3a71fc347699e749469209c43a643201', class: "popup-body" }, h("div", { key: '259540d41c8d257166a51139fdc29226ff3512ed', class: "field" }, h("strong", { key: 'c8d1a5abf7b48c5273e1f2d99ddffba71c528fb5' }, "Joined"), format(new Date(((_e = this.organization) === null || _e === void 0 ? void 0 : _e.created_at) || undefined), 'LLL d, Y')), this.organization.url && (h("div", { key: 'fe16d86018dc1f186e777afeb77dc43c2f2b1c73', class: "field" }, h("strong", { key: '1d3af10be4c1a3382d2425e5c38ab25c48d47872' }, "Website"), h("a", { key: 'cdd718f3d639015ce644b10a1c73f69c938e1426', href: (_f = this.organization) === null || _f === void 0 ? void 0 : _f.url, target: "_blank", rel: "nofollow" }, (_g = this.organization) === null || _g === void 0 ? void 0 : _g.url)))))));
     }
     static get is() { return "verdocs-organization-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-pagination/verdocs-pagination.js

@@ -18,7 +18,7 @@ const PageButton = ({ page, selected, onClick }) => {
     return h("div", { class: `page-button ${page === selected ? 'selected' : ''}`, onClick: () => onClick(page), innerHTML: label });
 };
 /**
- * Display a drop-down menu of quick filter options.
+ * Display a simple pagination control with individual buttons to move through the data set.
  */
 export class VerdocsQuickFilter {
     constructor() {
@@ -35,7 +35,7 @@ export class VerdocsQuickFilter {
         const firstPage = Math.max(0, this.selectedPage - 2);
         const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
         const pagesToDisplay = integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
-        return (h(Host, { key: '0f4037058b7ebbca6fc1a95515ffa0043bc746a4' }, this.selectedPage > 0 && h(PageButton, { key: '2ce40cf59e162cbfc490bba4b8468e069c247e68', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { key: '1078fe0fe059c674d240bd33c59de89d17437190', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { key: '284de5eab7be28ca2a5d3f2fead4d0d3be39801b', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { key: '3e88ac32f9f54a12d468f711c54c767857638fbd', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+        return (h(Host, { key: '35e9f8dee414ae4addb4a0615d41ac2f877d6185' }, this.selectedPage > 0 && h(PageButton, { key: 'e3ccf5d514ed45c2e279b6ace160fa5865132f7d', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { key: '74d1aaa681f9b8f3baafc935758d6dcc723fcdac', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { key: 'cb5d8461f4a33adffcb2a6df87f6ffcf66d08737', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { key: 'c433baeead865058d66f4aa127a6ce1fcc28f3bc', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
     }
     static get is() { return "verdocs-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-portal/verdocs-portal.js

@@ -69,7 +69,7 @@ export class VerdocsPortal {
         this.moved ? this.portal.remove() : (this.moved = true);
     }
     render() {
-        return (h(Host, { key: '80b497808d7c72fdb5786712abdd50d98f0ab160', ref: el => (this.element = el) }, h("slot", { key: 'd52fd1a7acd0d7f301ca2c9ba81b406a0107c3a0' })));
+        return (h(Host, { key: 'bca4c2bfa7c2f16dcfd4046e66cf8011207c4902', ref: el => (this.element = el) }, h("slot", { key: '8e451491ccd52c55d08621198d916dc991487bfc' })));
     }
     static get is() { return "verdocs-portal"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-progress-bar/verdocs-progress-bar.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 /**
- * Displays a summary of a template
+ * A simple progress bar.
  */
 export class VerdocsProgressBar {
     constructor() {
@@ -10,7 +10,8 @@ export class VerdocsProgressBar {
     }
     render() {
         const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);
-        return (h(Host, { key: '3c48e5a6c30688c72bbeaa00b3d0fdf8cba1c765' }, h("div", { key: 'f64ac74d3ca62bac1aa859e2d6abd3d94c8efd48', class: "labels" }, this.label && h("div", { key: '018cd8a64169ca83e6702eab88d187ad2a0cb50e', class: "label" }, this.label), this.showPercent && h("div", { key: '550104a8505d437df7248adb11fd97aaa9e72ef9', class: "label" }, this.percent, "%")), h("div", { key: '11cc23dad95af23bbf84022312dc760b15fe4b70', class: "bar" }, h("div", { key: '168c45390049adeb97996699aab0708c19ccb4f7', class: "slider", style: { width: `${widthPercent}%` } }))));
+        console.log('Rendering progress bar', { widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent });
+        return (h(Host, { key: '44ff05aec2048b9ed24847dc0b410f379f94bbc6' }, h("div", { key: '8706b9d902db9b9731a1d92744fa5cd071bdfca9', class: "labels" }, this.label && h("div", { key: 'b56b39c39a16f0316de5b3d15d4e0c130ab9d232', class: "label" }, this.label), this.showPercent && h("div", { key: '99ec3b060256124b4f49325c16ab3cd5ec6d0640', class: "label" }, this.percent, "%")), h("div", { key: '4cbd4ac85304f77d148ebecd339e9eb87d8e12b5', class: "bar" }, h("div", { key: '472a105258357d4ab398b69f4d75c39b089ade96', class: "slider", style: { width: `${widthPercent}%` } }))));
     }
     static get is() { return "verdocs-progress-bar"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-radio-button/verdocs-radio-button.js

@@ -25,7 +25,7 @@ export class VerdocsRadioButton {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '9eee43dc3c08fdd5c3dbde1bb167dfa4d57fe4fa', class: { disabled: this.disabled } }, h("input", { key: '07a13e1ea2e2fc2aa78f2b830908fa6f96e4963d', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), h("label", { key: '303f4ed1d9f45123a563c6e12e8eafa03e876ef6', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+        return (h(Host, { key: '08503221049dbcdb5ad6d8804576bd302437a784', class: { disabled: this.disabled } }, h("input", { key: '649115f2c5d916fbec807ab0566ec3352abe6afd', type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), h("label", { key: '597495b414c518d808f241cea9c3c66b0fabdf63', htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
     }
     static get is() { return "verdocs-radio-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.js

@@ -12,7 +12,7 @@ export class VerdocsSelectInput {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'a353e008560aed3f922fc52d5c091d88cbe099a3', class: "input-field" }, h("label", { key: '90a9b8244853fa2083f0d7fb1672ed204ed22a4c' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { key: 'a68e1ea7b9f9b6f375b2d6c1df859708acc79bea', 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: '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)))))));
     }
     static get is() { return "verdocs-select-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-spinner/verdocs-spinner.js

@@ -10,7 +10,7 @@ export class VerdocsQuickFilter {
         this.mode = 'light';
     }
     render() {
-        return (h(Host, { key: 'f5a8b78035f45b04cd8a017f0052857d74e4d454', style: {
+        return (h(Host, { key: 'd8e7181efe02d923319257c59da36ae807fcf7a0', style: {
                 width: `${this.size}px`, //
                 height: `${this.size}px`,
                 flex: `0 0 ${this.size}px`,

package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.js

@@ -28,7 +28,7 @@ export class VerdocsTextInput {
             .catch(e => console.log('Error copying to clipboard', e));
     }
     render() {
-        return (h(Host, { key: 'e71c4ce13dfab7ae8c7ca4b7eb64569cb817d8ce', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '4a2a6be345baebfc23ce46fd765e051e2aca39de' }, this.label && (h("div", { key: '2a30635cbee56e7d3024e639366ed2d6618fa526', class: "input-label" }, this.label + ':', this.required && h("span", { key: '08a6295cdaf9b96d9b56391395635ddeb4e80a8e', class: "required" }, "*"))), h("div", { key: 'b2a5385fa49b86aef69f2d52a02267d48140fd58', class: "input-container" }, h("input", { key: '5b307bf77e7175c65c04e2d7a76e7da8dfc15d7c', 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: '566da7c21ce7fe8f41b08b3b69c8b7435c5aab82', innerHTML: ClearIcon, class: "clear", onClick: () => {
+        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: () => {
                 // We need to allow the onInput event to fire first in case
                 // the user was focused on this field before clicking clear.
                 setTimeout(() => {
@@ -42,7 +42,7 @@ export class VerdocsTextInput {
                         (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
                     }, 50);
                 }, 50);
-            } })), !this.clearable && this.copyable && this.value && h("span", { key: '02b7f45e12e9cf5810d1acd3b4f33062bd558517', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: '3ddca8b8197c0ba01f6725e57b617f73fd3f0739', text: this.helpText }))));
+            } })), !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 }))));
     }
     static get is() { return "verdocs-text-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-toggle-button/verdocs-toggle-button.js

@@ -21,7 +21,7 @@ export class VerdocsToggleButton {
         (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
     }
     render() {
-        return (h(Host, { key: 'f953a03258c2b74858b247a3d206028bf0285f1f', 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: '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))));
     }
     static get is() { return "verdocs-toggle-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.js

@@ -39,7 +39,7 @@ export class VerdocsToolbarIcon {
     //   this.press?.emit();
     // }
     render() {
-        return (h(Host, { key: 'c12c9e2593bf281d5c0ce60ebffebf974a4a1afb', class: {} }, h("div", { key: '7c03bd3e40eed4fa9966afe926cdc4c490d5a6d7', "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: 'd757834d1be057de971a7bcbb47158c9c2182907', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: '0a9e2615fa20a0625b929173dd2705be5165c39a', "data-popper-arrow": "true", class: "arrow" }))));
+        return (h(Host, { key: 'f9c2c8bd293559e5e504b69cbc445ca813f134a2', class: {} }, h("div", { key: 'e5d497d4859e8bd61364f56f8c452c61ece75a76', "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: 'ebb1c0fa2cd8b58eba9d5057fc965ead53c23059', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: 'df0d03fbeeeb3016dde67f6d8bf8f75c5a97105c', "data-popper-arrow": "true", class: "arrow" }))));
     }
     static get is() { return "verdocs-toolbar-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/dialogs/verdocs-dialog/verdocs-dialog.js

@@ -12,7 +12,7 @@ export class VerdocsDialog {
         }
     }
     render() {
-        return (h(Host, { key: '62e6836ec77a8cb2439248680f46bac274f8717c' }, h("div", { key: 'b9a7b1dd23a4f87ced0695fa87fdfef2a5ce51c9', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'c1702275d5bae4c5008ee75c00edc7f79eaca27e', class: "dialog" }, h("slot", { key: '2ffc0f8aacd561b5762fee8d762154e5d7820149', name: "title" }, h("div", { key: 'd0263fc7c6198c3508f8c874946e4ac1e895ce1b', class: "heading" }, "Please Confirm")), h("slot", { key: '68787dfb4db8dfb8308c81066e5126ead44978ed' }, h("div", { key: 'c6057bd9eac67d97010f57e0ed1975a9a3d57eb4', class: "content" }))))));
+        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" }))))));
     }
     static get is() { return "verdocs-dialog"; }
     static get originalStyleUrls() {

package/dist/collection/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.js

@@ -214,7 +214,7 @@ export class VerdocsInitialDialog {
     }
      */
     render() {
-        return (h(Host, { key: 'a21acdc291c38efea55dd6f297d52f640a56b7bb', onClick: e => this.handleCancel(e) }, h("div", { key: '8ac9314beac2dc79af8f4b71b7a53690b717b52f', class: "dialog" }, h("div", { key: 'efa282f91d04526ff82b2c308dacaaf0846bb8c1', class: "heading" }, "Create Your Initial"), h("div", { key: '70554ca24e3dfeae6e06cdbcd2afb568dbe1fce6', class: "content" }, h("verdocs-text-input", { key: 'e3b38e01a8cf87d75f92e926eb5a025fdd0ae6bc', placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), h("div", { key: 'cf0186b60969fdec0d068acd908afbe871f5b5b7', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: '0d47b218f13accf5aee5f2f4d3206494fe2d94b7', class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { key: '3a54f59437ec6d8fe305f70cf7314f1834f398a2', class: "buttons" }, h("verdocs-button", { key: '6b58d4fd0c8213cb52727f121f1033273ca39bb0', label: "CANCEL", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'd25f92962380b5a1cb7cd5e9d9a73f46f6071fbd', label: "Adopt & Sign", onClick: e => this.handleAdopt(e) }))))));
+        return (h(Host, { key: 'b6937b4cfa5d4c5cfb87b5b5dbfa880cf0410339', onClick: e => this.handleCancel(e) }, h("div", { key: 'd34f04c350e8fdff490e7f73fdbfdada3f1354e6', class: "dialog" }, h("div", { key: 'a2f4c19266143d58c8224895fcfc3bc379213b9c', class: "heading" }, "Create Your Initial"), h("div", { key: '2db3faa17b7150b825fae79cd1ab2636dada42ed', class: "content" }, h("verdocs-text-input", { key: 'c7bfc63b5e2e89cb2f74dc5993ab9c76e686b07b', placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), h("div", { key: '95538b2cd439ac0edc0b1c3b9823122e07843217', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: 'f80a15e7da33abd5b8b8e9162a5c137fd8ed2abc', class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { key: 'bad375640b4fa14c7acd58de220918c982e64b02', class: "buttons" }, h("verdocs-button", { key: '29ae7e2794ca9cbada0e9622868621db1fa6e98c', label: "CANCEL", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '0ea69569edc92a8c70eea3c837c9f41baa6c8c13', label: "Adopt & Sign", onClick: e => this.handleAdopt(e) }))))));
     }
     static get is() { return "verdocs-initial-dialog"; }
     static get originalStyleUrls() {