@verdocs/web-sdk 4.0.8 → 4.1.2

package/dist/collection/components/controls/verdocs-quick-filter/verdocs-quick-filter.js

@@ -5,6 +5,10 @@ import { renderedTextWidth } from "../../../utils/utils";
 const DropdownArrow = `<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>`;
 /**
  * Display a drop-down menu of quick filter options.
+ *
+ * ```ts
+ * <verdocs-quick-filter options={[...options]} value={1} label="Filter" placeholder="All" />
+ * ```
  */
 export class VerdocsQuickFilter {
     constructor() {
@@ -82,7 +86,7 @@ export class VerdocsQuickFilter {
         const longestLabelWidth = renderedTextWidth((longestOption === null || longestOption === void 0 ? void 0 : longestOption.label) || 'FILLER', '14px Inter, Barlow, sans-serif');
         const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');
         const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;
-        return (h(Host, { key: '1f334530a8ad36661234df13dfcded2b0578f6a0', class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, h("div", { key: 'ca820c376c072a6de23e9bddf2255fd18d1423c6', class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, h("div", { key: '6b64609796a46da25d7fdcd4b0f667b010feaf5c', class: "title", ref: el => (this.dropdownButton = el) }, h("span", { key: 'da9dd1d6b822e26e478edef34127324a24c4fa46', class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), h("div", { key: 'c3e735e29d3a53780c94689502044af65df358da', style: { flex: '1' } }), h("div", { key: '7ea36915d9db4c97520486db47cb60f6b08ba868', class: "separator" }), h("div", { key: '32b41b27f18e34ab13c80af1562489df9c75edcc', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), h("div", { key: 'f9c2a98829e67f30cd2234ce5532684f4ca45ce1', class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
+        return (h(Host, { key: 'ccc8423ebae51aa9c9523ae8ddb547b5ff33e85c', class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, h("div", { key: '51edc34e8ff8916c206413a2a0006733df65a6ee', class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, h("div", { key: 'a58d23d6fb24512f2857b3f7b96fb1f29e3bb4da', class: "title", ref: el => (this.dropdownButton = el) }, h("span", { key: 'ec2639bb2800f5d1df9c024c7b35db9e178a1514', class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), h("div", { key: '11f5ed99195b02d467f7dcb38fe69a85ff6c166b', style: { flex: '1' } }), h("div", { key: 'b58e34715555bc873f0850c01f70a37593462cd1', class: "separator" }), h("div", { key: 'bc7618f508a8a5b9e4c27c7fa4a0203e96e12e3c', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), h("div", { key: '27aa83763ec9cd0ce52d221254acfb7d00a4cda3', class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
     }
     static get is() { return "verdocs-quick-filter"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`
  * handler. Sample usage:
  *
- * ```html
+ * ```ts
  * <verdocs-radio-button
  *    value="val1"
  *    name="someProperty"
@@ -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: '75bec4ec1ed0b9f7683a6b3c43c987c5f8c01539', class: { disabled: this.disabled } }, h("input", { key: '7493bdafdaef15d48696a51c4d1e9a7c162bdf8f', 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: 'c0d1aa6861cb76ec86f5995a047e9d923e9a951e', 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

@@ -2,7 +2,11 @@ import { Host, h } from "@stencil/core";
 /**
  * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
  * visual styles of the other components. Note that events "bubble" from the input field to the container,
- * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+ * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+ *
+ * ```ts
+ * <verdocs-select-input label="Select:" label="Select" options={[...options]} @input={() => {}} />
+ * ```
  */
 export class VerdocsSelectInput {
     constructor() {
@@ -12,7 +16,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: '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)))))));
     }
     static get is() { return "verdocs-select-input"; }
     static get originalStyleUrls() {

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

@@ -3,6 +3,10 @@ const LIGHT_STYLE = { border: '3px solid rgba(255, 255, 255, 0.3)', borderTopCol
 const DARK_STYLE = { border: '3px solid rgba(0, 0, 0, 0.3)', borderTopColor: '#333' };
 /**
  * Display a small loading spinner.
+ *
+ * ```ts
+ * <verdocs-spinner />
+ * ```
  */
 export class VerdocsQuickFilter {
     constructor() {
@@ -10,7 +14,7 @@ export class VerdocsQuickFilter {
         this.mode = 'light';
     }
     render() {
-        return (h(Host, { key: 'f5a8b78035f45b04cd8a017f0052857d74e4d454', style: {
+        return (h(Host, { key: '72538e137a5d5063f0056aab93709a1b2ee4a4c1', style: {
                 width: `${this.size}px`, //
                 height: `${this.size}px`,
                 flex: `0 0 ${this.size}px`,

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

@@ -2,6 +2,10 @@ import { Host, h } from "@stencil/core";
 /**
  * Display a simple table of data. Columns and data cells may have custom renderers defined to
  * support creating interactive table layouts.
+ *
+ * ```ts
+ * <verdocs-table columns={[...columns]} data={[...data]} />
+ * ```
  */
 export class VerdocsTable {
     constructor() {
@@ -9,12 +13,10 @@ export class VerdocsTable {
         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]));
         }))))))));
     }
     static get is() { return "verdocs-table"; }

package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.css

@@ -38,6 +38,6 @@ verdocs-tabs .tab.active {
   border-bottom: 4px solid #654dcb;
 }
 verdocs-tabs .tab.disabled {
-  color: #666666;
+  color: #aaaaaa;
   cursor: default;
 }

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

@@ -2,6 +2,10 @@ import { Host, h } from "@stencil/core";
 /**
  * Display a simple row of selectable tabs. This is a controlled element.
  * The parent must adjust selectedTab as selection events are fired.
+ *
+ * ```ts
+ * <verdocs-tabs tabs={[...tabs]} />
+ * ```
  */
 export class VerdocsTabs {
     constructor() {
@@ -13,7 +17,7 @@ export class VerdocsTabs {
         (_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
     }
     render() {
-        return (h(Host, { key: '9ec11ccd4c66cea85db7bd16bade6f7919aa3a9b' }, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { key: '1d2591798e0d995eb3f7b8da7f0fb107f171c5b9', class: "flex flex-1" }), h("slot", { key: '236c55b5248128b60b3d023d78d5e6c91ce94c35' }, h("div", { key: '62105d98b32d6cdde640cd6ccb99872d31b0c067' }))));
+        return (h(Host, { key: '0cb3a6e9ab650081ca8185d3803575db2fd6f420' }, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { key: 'a6608f5f0590b549849870b597e79679a2fc7641', class: "flex flex-1" }), h("slot", { key: '3b7c759679a8d1ac23e31b9b7dd6007f5be9a26a' }, h("div", { key: '4f6f65746404e6e86cead45704842b70aaca08c4' }))));
     }
     static get is() { return "verdocs-tabs"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,11 @@ const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><p
 /**
  * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
  * visual styles of the other components. Note that events "bubble" from the input field to the container,
- * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+ * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+ *
+ * ```ts
+ * <verdocs-text-input type="text" label="Name" placeholder="Enter your name..." value="" />
+ * ```
  */
 export class VerdocsTextInput {
     constructor() {
@@ -28,7 +32,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: '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(() => {
@@ -42,7 +46,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: 'e05ce0fb15f2ed2358edcbdfe1c5de77238311a8', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: 'b9d0e50d517e04e37636dd4d85e6e4409266b1e2', text: this.helpText }))));
     }
     static get is() { return "verdocs-text-input"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,10 @@
 import { h } from "@stencil/core";
 /**
- * Displays a label and a set of buttons, also allowing a default selection of a button
+ * Displays a label and a set of buttons, also allowing a default selection of a button.
+ *
+ * ```ts
+ * <verdocs-toggle options={[...options]} theme="light"></verdocs-toggle>
+ * ```
  */
 export class VerdocsToggle {
     constructor() {
@@ -13,7 +17,7 @@ export class VerdocsToggle {
         this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
     }
     render() {
-        return (h("div", { key: 'bc1116c5d0c8b9a5096ace164a02c420751cc2ec', class: "container" }, h("span", { key: 'e0346b9aabd5e4fbb29c6f5cc897795870f0643e', class: "label" }, `${this.options.label}:`), h("div", { key: 'd91de7ce4ad8808f4faaa18b2865c0c4c21f7287', class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
+        return (h("div", { key: '2cffe22d376dc972de87f698e5213c789879978a', class: "container" }, h("span", { key: '9a6ad16cc9814f397284e359d29aa5eac0996517', class: "label" }, `${this.options.label}:`), h("div", { key: '7869d49e9b0c7bf528d0d564baa081834cead545', class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
                 console.log('clicked', index);
                 this.selectedOption = index;
             } }))))));

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

@@ -1,6 +1,10 @@
 import { h, Host } from "@stencil/core";
 /**
  * Displays a single button that can be toggled on or off by clicking it.
+ *
+ * ```ts
+ * <verdocs-toggle-button icon={MessageIcon} size="normal" active={true} />
+ * ```
  */
 export class VerdocsToggleButton {
     constructor() {
@@ -21,7 +25,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: '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))));
     }
     static get is() { return "verdocs-toggle-button"; }
     static get originalStyleUrls() {

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

@@ -3,6 +3,10 @@ import { h, Host } from "@stencil/core";
 // import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';
 /**
  * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+ *
+ * ```ts
+ * <verdocs-toolbar-icon text="Sample tooltip text" icon={CalendarIcon} />
+ * ```
  */
 export class VerdocsToolbarIcon {
     constructor() {
@@ -39,7 +43,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: '81bef5d6b23987730bbeafe741a7fbc52c2d854c', class: {} }, h("div", { key: '87a7fab6e8cb787079f37332bdf8fb188f52157a', "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: 'f6593f4c1d6b435a80b0a09d6356c383ec78a5c7', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: 'b13a8c43aa098db8ee6f2e05a53c02f0f3de9358', "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: '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' }))))));
     }
     static get is() { return "verdocs-dialog"; }
     static get originalStyleUrls() {

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

@@ -12,12 +12,11 @@ export class VerdocsInitialDialog {
     }
     componentWillLoad() {
         this.enteredInitials = this.initials.toUpperCase();
-        // TODO
-        // const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');
-        // ds.load().then(font => {
-        //   document.fonts.add(font);
-        //   this.fontLoaded = true;
-        // });
+        const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');
+        ds.load().then(font => {
+            document.fonts.add(font);
+            this.fontLoaded = true;
+        });
     }
     componentDidLoad() {
         this.redrawSignature();
@@ -26,10 +25,13 @@ export class VerdocsInitialDialog {
         this.redrawSignature();
     }
     redrawSignature() {
+        console.log('redrawing sig');
         if (!this.canvasElement) {
+            console.log('no canvas');
             return;
         }
         const canvasWidth = this.canvasElement.width;
+        console.log('cw', canvasWidth);
         const context = this.canvasElement.getContext('2d');
         context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
         let fontSize = 100;
@@ -214,7 +216,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: '9006cdf73a61c1d98c81bdebbdf18f4b556ddeb9', onClick: e => this.handleCancel(e) }, h("div", { key: 'cbd4bb1d98fd49e3874ddbd747c7cee69cb5c39e', class: "dialog" }, h("div", { key: 'c751dcfa414370fd1eb9adc8eb8e9b22af8383ae', class: "heading" }, "Create Your Initial"), h("div", { key: '3bf621f90c954b626c90925b50b65a08b2a5bf37', class: "content" }, h("verdocs-text-input", { key: 'f66fa605b16228d389231908825483594e3872bf', placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), h("div", { key: '42b8206f41b9acf5220d3b132fc1ab8f038a1522', 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: '64c1da383cc7f6fc6d34af5bcced3caa623eae02', 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: '0c8621ee304a5819607612ceeae0276a8a3f84dd', class: "buttons" }, h("verdocs-button", { key: '84b4ea8e03a58be3719d6e5c54227db2538a1753', label: "CANCEL", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '64a5480d9b29fbb1d17c5735259f486693dc6cea', label: "Adopt & Sign", onClick: e => this.handleAdopt(e) }))))));
     }
     static get is() { return "verdocs-initial-dialog"; }
     static get originalStyleUrls() {

package/dist/collection/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.css

@@ -74,6 +74,17 @@ verdocs-kba-dialog .help-title {
 verdocs-kba-dialog .help-text {
   font-weight: 400;
 }
+verdocs-kba-dialog .input {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  margin: 16px 0 32px;
+}
+verdocs-kba-dialog .input label {
+  line-height: 10px;
+  font-weight: 500;
+}
 verdocs-kba-dialog .choices {
   display: grid;
   gap: 15px;

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

@@ -1,16 +1,14 @@
 import { h, Fragment, Host } from "@stencil/core";
 const QuestionIcon = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0C8.95313 0 0 8.95313 0 20C0 31.0469 8.95313 40 20 40C31.0469 40 40 31.0469 40 20C40 8.95313 31.0469 0 20 0ZM20 36.25C11.0391 36.25 3.75 28.9602 3.75 20C3.75 11.0398 11.0391 3.75 20 3.75C28.9609 3.75 36.25 11.0398 36.25 20C36.25 28.9602 28.9609 36.25 20 36.25Z" fill="white"/><path d="M20 26.25C18.5938 26.25 17.5 27.3438 17.5 28.75C17.5 30.1562 18.5234 31.25 20 31.25C21.3359 31.25 22.5 30.1562 22.5 28.75C22.5 27.3438 21.3359 26.25 20 26.25ZM22.5859 10H18.5938C15.5469 10 13.125 12.4219 13.125 15.4688C13.125 16.4844 13.9844 17.3438 15 17.3438C16.0156 17.3438 16.875 16.4844 16.875 15.4688C16.875 14.5312 17.5859 13.75 18.5234 13.75H22.5156C23.5234 13.75 24.375 14.5312 24.375 15.4688C24.375 16.0938 24.0625 16.5703 23.5156 16.8828L19.0625 19.6094C18.4375 20 18.125 20.625 18.125 21.25V22.5C18.125 23.5156 18.9844 24.375 20 24.375C21.0156 24.375 21.875 23.5156 21.875 22.5V22.3438L25.3984 20.1562C27.0391 19.1406 28.0547 17.3438 28.0547 15.4688C28.125 12.4219 25.7031 10 22.5859 10Z" fill="#E7E7E7"/></svg>`;
 /**
- * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
- * box with a message and optional header/title. An OK button is shown that will dismiss the message.
- * It can also be dismissed by clicking the background overlay.
+ * Prompt the user to confirm their identity with a series of questions.
  */
 export class VerdocsKbaDialog {
     constructor() {
         this.step = 1;
         this.steps = 3;
-        this.helptitle = 'One Time Code';
-        this.helptext = 'Please check your text messages for a security code, and enter the code below.';
+        this.helptitle = 'Previous Addresses';
+        this.helptext = 'Please select the address below that you have most recently lived at.';
         this.mode = 'choice';
         this.label = 'PIN';
         this.placeholder = 'Enter your PIN...';
@@ -31,9 +29,9 @@ export class VerdocsKbaDialog {
         this.next.emit(this.response);
     }
     render() {
-        return (h(Host, { key: '3be01aff89b8987970bb6c523e43f901d2e0bd87' }, h("div", { key: '57b6ada3fe97d2d80258dcc2f94293e7e3cb4d89', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'cbbad80ada81b7a6873cad85f7d275be94297db5', class: "dialog" }, h("div", { key: 'a284cad1779485f64a90448bfb380306a986610c', class: "heading" }, "Confirm Your Identity", this.steps > 1 ? (h("span", { class: "step" }, "(", this.step, "/", this.steps, ")")) : (h(Fragment, null))), h("div", { key: 'd4d68ddea63730732231d034af6051ecb7939af1', class: "help-box" }, h("div", { key: 'bb009bda8462902ac51f6dd52b25a75509c4e040', class: "help-icon", innerHTML: QuestionIcon }), h("div", { key: 'b16b31df0e2f9046ba8e708c9bbc487cf4e2b30d', class: "help-details" }, h("div", { key: 'd36e98a362ccc2b0d14ef977032b6f1de547cc6a', class: "help-title" }, this.helptitle), h("div", { key: '61721584ab329e9798f6967238e5f125d4e8a130', class: "help-text" }, this.helptext))), this.mode === 'choice' ? (h("div", { class: "choices" }, this.choices.map(choice => (h("div", { class: `choice ${choice === this.response ? 'selected' : ''}`, onClick: () => {
+        return (h(Host, { key: 'c82a5d8b5257732255861a67a51ed6a0b2675b77' }, h("div", { key: 'c102ab713567ed43cef7c344df8a0936274b6f6e', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'e932de4a3ca2402a965744ab02f9d6c3b8f86645', class: "dialog" }, h("div", { key: '569f5420ada83b65ecc93147aed387086f659b34', class: "heading" }, "Confirm Your Identity", this.steps > 1 ? (h("span", { class: "step" }, "(", this.step, "/", this.steps, ")")) : (h(Fragment, null))), h("div", { key: '2ffd440933f4e7c44a72eab3fdfd36f8e8a630c8', class: "help-box" }, h("div", { key: '79b7cba2e72d7fd7e576b1f965014e67759727e5', class: "help-icon", innerHTML: QuestionIcon }), h("div", { key: '5ccf156e49de25f88804641ab4b67536838f2876', class: "help-details" }, h("div", { key: '857feb344fd1ba7fdabda6c090e64b03ea1150bb', class: "help-title" }, this.helptitle), h("div", { key: 'b0f0bde18492545dcb767a6a73b70fbebb497ecb', class: "help-text" }, this.helptext))), this.mode === 'choice' ? (h("div", { class: "choices" }, this.choices.map(choice => (h("div", { class: `choice ${choice === this.response ? 'selected' : ''}`, onClick: () => {
                 this.response = choice;
-            } }, choice))))) : (h("div", { class: "input" }, h("label", { htmlFor: "verdocs-kba-input" }, this.label), h("input", { type: "text", id: "verdocs-kba-input", name: "verdocs-kba-input", placeholder: this.placeholder }))), h("div", { key: '4d2e39267256eb27bf6773599c2bfdd7a98c34a8', class: "buttons" }, h("verdocs-button", { key: '78d96e740883b84e169b500afb3ca21ed1a9432c', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'ac774fc79af48aaae73af81df82d5ea9c80123fd', label: "Done", onClick: () => this.handleDone(), disabled: !this.response }))))));
+            } }, choice))))) : (h("div", { class: "input" }, h("label", { htmlFor: "verdocs-kba-input" }, this.label), h("input", { type: "text", id: "verdocs-kba-input", name: "verdocs-kba-input", placeholder: this.placeholder }))), h("div", { key: 'b76320da31947aa982e3d93c766e395b4133d15f', class: "buttons" }, h("verdocs-button", { key: 'bc7c181fc05366341cc4c4e2e2f00749b5ac377e', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'dbd938075496f58916586ae1ab89290ab73d129a', label: "Done", onClick: () => this.handleDone(), disabled: !this.response }))))));
     }
     static get is() { return "verdocs-kba-dialog"; }
     static get originalStyleUrls() {
@@ -100,7 +98,7 @@ export class VerdocsKbaDialog {
                 },
                 "attribute": "helptitle",
                 "reflect": false,
-                "defaultValue": "'One Time Code'"
+                "defaultValue": "'Previous Addresses'"
             },
             "helptext": {
                 "type": "string",
@@ -118,7 +116,7 @@ export class VerdocsKbaDialog {
                 },
                 "attribute": "helptext",
                 "reflect": false,
-                "defaultValue": "'Please check your text messages for a security code, and enter the code below.'"
+                "defaultValue": "'Please select the address below that you have most recently lived at.'"
             },
             "mode": {
                 "type": "string",

package/dist/collection/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.css

@@ -29,7 +29,7 @@ verdocs-ok-dialog .background-overlay {
   background: rgba(0, 0, 0, 0.4980392157);
 }
 verdocs-ok-dialog .dialog {
-  max-width: 50%;
+  max-width: 60%;
   display: flex;
   flex-direction: column;
   border-radius: 4px;
@@ -53,6 +53,7 @@ verdocs-ok-dialog .content {
 verdocs-ok-dialog .buttons {
   display: flex;
   margin: 30px 0 0 0;
+  padding: 0 20px;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;

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

@@ -27,7 +27,7 @@ export class VerdocsOkDialog {
         }
     }
     render() {
-        return (h(Host, { key: '639fb911d524d6060c59941d0114464118e49b39', class: this.closed ? 'closed' : '' }, h("div", { key: '7af2c342b4435960994b6a7ceefee6ebb30d05b5', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'd5eafb0dcbb16a1f7e08a8ca015ecdcb1d612da5', class: "dialog" }, h("div", { key: '7175a3940da21d8f2fff3cc738f4be5383454aec', class: "heading" }, this.heading), h("div", { key: '39d6c7a6c42ede9f9580194a27c820c36cbc5c24', class: "content" }, h("div", { key: 'ed39edd2afa2502e6a579b7e6f91f18d8d7533ef', class: "message", innerHTML: this.message }), h("div", { key: '624edd4b0ff823bddc3b97a4c686e27e24d7e240', class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { key: '394a0a8954427cc419f4c18dd4d64e1ada4aeacd', label: this.buttonLabel, onClick: () => this.handleOk() })))))));
+        return (h(Host, { key: 'c1505d930741a4a0e1eb9a9832de8e55d09b207c', class: this.closed ? 'closed' : '' }, h("div", { key: 'f4c1ce92701f56a3b839bc49a0beb38665a65556', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '0fe99745209ca40287512f114122d1a0f0c4e597', class: "dialog" }, h("div", { key: '93deffa53c92913b65109f3c9826e61561f91c68', class: "heading" }, this.heading), h("div", { key: 'b0a64c6f2072655ce439d5008ecfe55651d48d8f', class: "content" }, h("div", { key: '3f89fd4b54dfa1c8437c2aa7dd21310827516004', class: "message", innerHTML: this.message }), h("div", { key: 'a86843d9915f72bcc00810c87f3311c77cf3b566', class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { key: 'd160170c8a58dde135ba4c5ae4dac35ac79c24a1', label: this.buttonLabel, onClick: () => this.handleOk() })))))));
     }
     static get is() { return "verdocs-ok-dialog"; }
     static get originalStyleUrls() {

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

@@ -12,12 +12,11 @@ export class VerdocsSignatureDialog {
     }
     componentWillLoad() {
         this.enteredName = this.name;
-        // TODO
-        // const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');
-        // ds.load().then(font => {
-        //   document.fonts.add(font);
-        //   this.fontLoaded = true;
-        // });
+        const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');
+        ds.load().then(font => {
+            document.fonts.add(font);
+            this.fontLoaded = true;
+        });
     }
     componentDidLoad() {
         this.redrawSignature();
@@ -214,7 +213,7 @@ export class VerdocsSignatureDialog {
     }
      */
     render() {
-        return (h(Host, { key: 'fcb13a8c842458da1e1d357d19bbb9b55074d1e9', onClick: e => this.handleCancel(e) }, h("div", { key: '277162d473d0eb91c09cc7edb41b0ec7ff777620', class: "dialog" }, h("div", { key: 'e0c067842ccbe269f69b466aaa6eb8c371044b3a', class: "heading" }, "Create Your Signature"), h("div", { key: 'c56cadd1096c74209200b370814ac7f3866c0fde', class: "content" }, h("verdocs-text-input", { key: '8b159acdfa214181d66cc6b0a0b28f3e1f5c4595', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '2576df6f2f30c1ebd8c2b1727006156386c8a387', 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: 'f321aff6afb7ffac373693e934431cba9ae25aaa', 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: 'cca9cd2ba4514edd99fd82dfa7c61875246d7355', class: "buttons" }, h("verdocs-button", { key: '99412bf5275d7369bef49025e9ff0563fc2692c8', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '75f5ddf100fef479941790b64c807f02ef7aa895', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
+        return (h(Host, { key: '88ef514634fef3e3773f13efeeb2b22cbaf9ff0a', onClick: e => this.handleCancel(e) }, h("div", { key: '31369669f68670330cb2f54ec9be44ff6100ac83', class: "dialog" }, h("div", { key: 'd161b9a0e0945cda909eabbd0404448a03e29198', class: "heading" }, "Create Your Signature"), h("div", { key: '9777dd4289072f0be511bb1ec828ed540011e6be', class: "content" }, h("verdocs-text-input", { key: 'afed3547dd47d4883ac84d83d4d05eca9a30d5a2', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '728f24c1a88a395f940df350169ed6ba628d2685', 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: 'abafa624e941b6f6e758fbd75ddd7e0044a377dc', 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: 'fbcc0705c21b7ed206222a9b7382a5562ee7f83d', class: "buttons" }, h("verdocs-button", { key: '5f921b4dfc7df16867071b117a9b055a8aeee8da', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'dbf88043b9deedb378181bf48d7a04428a32e653', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
     }
     static get is() { return "verdocs-signature-dialog"; }
     static get originalStyleUrls() {

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

@@ -69,7 +69,7 @@ export class VerdocsUploadDialog {
         this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
     }
     render() {
-        return (h(Host, { key: 'e530dd32a2bbd4d4108391bdeeaac3317a5af11f' }, h("div", { key: '9098bbbc2ece28225b303ac4b3260a8f6f56d677', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'f45e3884d3db800b3bce16d7d838154af3ca4f98', class: "dialog" }, h("div", { key: 'ec01206900a5040b124a21863f7e3aafa2f39826', class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: '9563699f3d6860d01f81b4241855dcf26300c1a3', class: "buttons" }, h("verdocs-button", { key: '58fa09358edb6864a611cdf60f36cd1bc89abe39', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'c2c0d9f77207c8b7f043017ef9dc0a5d0ddf9b6f', label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+        return (h(Host, { key: '00cddffd15d81c343c9f23ca79a26fd7b7c607ec' }, h("div", { key: '30308c5289e2bed777fb8d3bcbbfa4c5da71f967', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '667874e38d9b7c4be180e6097205c829e7bc497c', class: "dialog" }, h("div", { key: '25f97a72a7541feecf123a2c7a202024220c8a19', class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: 'a5fa38c5fdba79aef2f52b01a264ac9552190c78', class: "buttons" }, h("verdocs-button", { key: '07978b71c5a0293beca4eefebf3b7b280be914f8', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'c16e03120a392673aa656e7d6c6dfec599127f36', label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
     }
     static get is() { return "verdocs-upload-dialog"; }
     static get originalStyleUrls() {

package/dist/collection/components/elements/verdocs-quick-functions/verdocs-quick-functions.js

@@ -19,7 +19,7 @@ export class VerdocsQuickFunctions {
         this.createDocument.emit();
     }
     render() {
-        return (h("div", { key: 'eb5dc623120c7c528a9eb81f3dd4a2cdabdb7238', class: "container" }, h("p", { key: '09ab8ebada6eee21819e9152a76199bc86043a91', class: "title" }, "Quick Create"), h("button", { key: '9d1d124c64f0b6b7d4adc95a4c637907ad40bdfd', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: 'e7f2bf2070c45e3266be984c66115615f6578e27', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (h("div", { key: '8732c14ba59bc441cdc1b164832ef66b5c7842bb', class: "container" }, h("p", { key: 'f6909de1cfed09c6514bd0d6530a380ad62aff85', class: "title" }, "Quick Create"), h("button", { key: 'e95f2fc551ad5342a4ceef8995c11b5b56a0e12a', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: '6707f329d007c1027d159c5b928a124fb41b6f73', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
     }
     static get is() { return "verdocs-quick-functions"; }
     static get originalStyleUrls() {

package/dist/collection/components/elements/verdocs-search-box/verdocs-search-box.js

@@ -41,7 +41,7 @@ export class VerdocsSearchBox {
         }
     }
     render() {
-        return (h("form", { key: 'd134a33663d3e85c469534b154b211f9ab8c4a51', onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { key: 'c9993bcc9112ac432b780216fbf29adfceded0e5', class: "type" }, this.type, "s ", h("button", { key: 'b9a8ac4bd299fafe0cccee64e4b50d4cbbcef863', class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), h("input", { key: 'bcd7f9c630d41b0a1dc3eed8400c44c2a81ffc79', type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }), h("button", { key: '546ceb6ef7b4b47dcc82e6409052838c980c2889', onClick: e => this.handleSearch(e), class: "search" }, h("span", { key: '585037b13dee3865890a4a8ffe919a45bcbc9fbf', innerHTML: SearchIcon }), "Search")));
+        return (h("form", { key: 'bd9ecc80b3c557f27328777c4518ca86e0012f57', onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { key: 'e6db2d986dd0bef76717be89f4bbf0f4713cd49b', class: "type" }, this.type, "s ", h("button", { key: '859a75c3372ab7518497cdda018857c9305a0d19', class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), h("input", { key: 'd2b2716fb4d2e6c9fc7a9c6c2912319f04dcf275', type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }), h("button", { key: '575626601e59c2020f7ec18d7fa7a667870fda2b', onClick: e => this.handleSearch(e), class: "search" }, h("span", { key: '035b6b114e0327df6cb6940265337ce8f8ddfc83', innerHTML: SearchIcon }), "Search")));
     }
     static get is() { return "verdocs-search-box"; }
     static get originalStyleUrls() {

package/dist/collection/components/elements/verdocs-search-tabs/verdocs-search-tabs.js

@@ -4,7 +4,7 @@ export class VerdocsSearchTabs {
         this.selected = 'all';
     }
     render() {
-        return h("div", { key: 'b4ac2045933155b547df5cde6e4dc72a0af06050' }, "\u00A0");
+        return h("div", { key: '16e93641cee94ed98e3c8de50222fb41f5dbfb90' }, "\u00A0");
     }
     static get is() { return "verdocs-search-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js

@@ -1,4 +1,4 @@
-import { VerdocsEndpoint, createBusinessAccount, authenticateUser, decodeAccessTokenBody, resendVerification, resetPassword } from "@verdocs/js-sdk";
+import { VerdocsEndpoint, createAccount, authenticateUser, decodeAccessTokenBody, resendVerification, resetPassword } from "@verdocs/js-sdk";
 import { h } from "@stencil/core";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
@@ -44,32 +44,18 @@ const CompanySizes = [
     { value: '1000+', label: '1000+' },
 ];
 /**
- * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
- * occur during the process (especially successful completion). If the user is already authenticated with a valid
- * session, this component will hide itself and fire the success callback immediately. It is up to the host application
- * to render the next appropriate view for the application.
+ * Display an authentication dialog that allows the user to login or sign up. If the user is already authenticated
+ * with a valid session, this component will hide itself and fire the success callback immediately. It is up to the
+ * host application to render the next appropriate view for the application.
  *
- * To simplify some types of authentication flows, a visibility flag can force this component to never display. This
- * allows you to susbcribe to notifications from the
+ * To simplify UI development, a visibility flag can force this component to never display. This
+ * allows you to susbcribe to notifications from client apps without calling the lower-level JS SDK.
  *
  * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide
  * container to allow sufficient space for the required forms.
  *
- * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after
- * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or
- * cancels) authentication steps.
- *
- * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
- * embed. This Element will reuse the same session produced by logging in via that Embed.
- *
- * ```typescript
- * interface IAuthStatus {
- *   // If true, the user is authenticated with a valid session
- *   authenticated: boolean;
- *
- *   // Details for the user's session
- *   session: IActiveSession | null;
- * }
+ * ```ts
+ * <verdocs-auth onAuthenticated={e => console.log('Authentication state:', e.detail)} />
  * ```
  */
 export class VerdocsAuth {
@@ -139,7 +125,7 @@ export class VerdocsAuth {
     handleSignup() {
         this.submitting = true;
         this.accessTokenForVerification = null;
-        createBusinessAccount(this.endpoint, {
+        createAccount(this.endpoint, {
             email: this.username,
             password: this.password,
             firstName: this.first,
@@ -375,7 +361,7 @@ export class VerdocsAuth {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event fired when session authentication process has completed. Check the event contents for completion status."
+                    "text": "Event fired when session authentication process has completed. Check the event\ncontents for completion status. This event will always be called at least once,\nwhen the component is first rendered."
                 },
                 "complexType": {
                     "original": "IAuthStatus",