@verdocs/web-sdk 4.2.43 → 4.2.48

package/dist/cjs/verdocs-button-panel_2.cjs.entry.js

@@ -70,10 +70,10 @@ const VerdocsButtonPanel = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '997291ad3f463fff0932490fdab478345757b2e4' }, index.h("div", { key: '02c1929038bcf9f9d3b433b95f9badcfbc3d6a48', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (index.h(index.Host, { key: 'c77ea175bddafb381b9c2d59820bf5656d271ba6' }, index.h("div", { key: 'dd26de0092bec750606f81b3e41ded3169bce9ee', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), index.h("div", { key: '6c89badb41660bbe7b826b0f2758c8a6f7525b78', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, index.h("div", { key: '069ae9f31df8fdb08d4cdf37526f22494a4108f8', "data-popper-arrow": "true", class: "arrow" }), index.h("slot", { key: 'fc5af74e822ca9e0c4c2620585c66e1dcda8f237' }))));
+            }, ref: el => (this.iconEl = el) }), index.h("div", { key: '6708d3cb957b99e854747e74044040bbf8cbe418', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, index.h("div", { key: '9e4b2f228527b4474a6869ef436c3c6cb59d0ad7', "data-popper-arrow": "true", class: "arrow" }), index.h("slot", { key: 'ca4dc0f4d9cbee017c45dc084b772c0d303547f8' }))));
     }
 };
 VerdocsButtonPanel.style = VerdocsButtonPanelStyle0;
@@ -93,7 +93,7 @@ const VerdocsTabs = class {
         (_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
     }
     render() {
-        return (index.h(index.Host, { key: '40357821a495d7b0c94b205ed90e5fd83b4a5146' }, this.tabs.map((tab, index$1) => (index.h("div", { class: `tab ${index$1 === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index$1) }, tab.label))), index.h("div", { key: 'dd9e2a621082bd61f62b161830c6fd1138f0e8c1', class: "flex flex-1" }), index.h("slot", { key: '4e64f7e7221fd9d5613f83db4067f71f2c4c1f12' }, index.h("div", { key: '4926afa57bb87a838b66807837f3b71c436a4586' }))));
+        return (index.h(index.Host, { key: '2fedcaa89e194d52552c9c1295451889f15873bd' }, this.tabs.map((tab, index$1) => (index.h("div", { class: `tab ${index$1 === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index$1) }, tab.label))), index.h("div", { key: 'd1020c064e91e7b2f08f096266de33533055afc4', class: "flex flex-1" }), index.h("slot", { key: '454f2a0fab01099f8ec6bdf73d4eaacd3471bc69' }, index.h("div", { key: 'b7a6f1c170591c2664e88b611cb9162f800d01c4' }))));
     }
 };
 VerdocsTabs.style = VerdocsTabsStyle0;

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

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d2999878.js');
+const popper = require('./popper-31badbf8.js');
+const Toast = require('./Toast-d84d7bd3.js');
+
+const verdocsButtonCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-button button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button:disabled{cursor:inherit;pointer-events:none}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .button-label{padding:0 12px}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .button-label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .button-label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .button-label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .button-label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
+const VerdocsButtonStyle0 = verdocsButtonCss;
+
+const VerdocsButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = undefined;
+        this.startIcon = null;
+        this.endIcon = null;
+        this.size = 'normal';
+        this.type = 'button';
+        this.variant = 'standard';
+        this.disabled = false;
+    }
+    render() {
+        return (index.h("button", { key: '1b0a149ab51af95445b47bb17207bc3b44516be3', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? index.h("span", { class: "icon start", innerHTML: this.startIcon }) : null, index.h("span", { key: '4a868a010e47d300cc9b7dd31c7665f58c3f1986', class: "button-label" }, this.label), this.endIcon ? index.h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+    }
+};
+VerdocsButton.style = VerdocsButtonStyle0;
+
+const verdocsHelpIconCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:500;position:absolute;padding:5px 10px;font-size:12px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
+const VerdocsHelpIconStyle0 = verdocsHelpIconCss;
+
+const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+const VerdocsHelpIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.text = '';
+        this.icon = helpIcon;
+        this.containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    componentDidLoad() {
+        this.popperInstance = popper.createPopper(this.iconEl, this.tooltipEl, {
+        // placement: 'top-end',
+        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+        });
+    }
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+    show() {
+        var _a, _b;
+        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    }
+    hide() {
+        var _a;
+        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a3461401c9c39efe1d3d4a33797c9fdb4c243cd4', class: {} }, index.h("div", { key: 'bab136ac563622e50b68a624b0beca62b1ee43f8', "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: 'e23f6cb0bf8dfecd28ed92790eff519ea83707f3', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, index.h("span", { key: '2c61ce450603afa8fa608c98003e0c97b5486df5', innerHTML: this.text }), index.h("div", { key: 'b57ad281d928ba3b4b2ea807bd6744f88f1519c3', "data-popper-arrow": "true", class: "arrow" }))));
+    }
+};
+VerdocsHelpIcon.style = VerdocsHelpIconStyle0;
+
+const verdocsTextInputCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input .toggle-pw{top:5px;right:7px;width:18px;height:18px;stroke:#cccccc;position:absolute}verdocs-text-input .toggle-pw:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";
+const VerdocsTextInputStyle0 = verdocsTextInputCss;
+
+const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
+const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>`;
+const EyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`;
+const EyeSlashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>`;
+const VerdocsTextInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.value = '';
+        this.label = '';
+        this.placeholder = '';
+        this.autocomplete = '';
+        this.helpText = '';
+        this.clearable = false;
+        this.copyable = false;
+        this.type = 'text';
+        this.disabled = false;
+        this.required = false;
+        this.showingPw = false;
+    }
+    copyToClipboard() {
+        this.inputEl.select();
+        navigator.clipboard
+            .writeText(this.value)
+            .then(() => Toast.VerdocsToast('Copied!'))
+            .catch(e => console.log('Error copying to clipboard', e));
+    }
+    render() {
+        return (index.h(index.Host, { key: '60bd27aafb8597a65b2cc433a560ae1bd2b404ad', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, index.h("label", { key: 'd35b3912a2fd3d27ba1f1a454bbd0cf02710d7c2' }, this.label && (index.h("div", { key: '24b9dbbc47a32d2db4b1cb1a0fbfcec6e10698f6', class: "input-label" }, this.label + ':', this.required && index.h("span", { key: '1c2ef6df80053e6eaf9c6f6b23391b329ace0b60', class: "required" }, "*"))), index.h("div", { key: '563ac56ff97fad6be30eefaacc0e654e11763db6', class: "input-container" }, index.h("input", { key: '50d21decaff04b0bb823f33ab71eacdcc0ef1906', type: this.type === 'password' && this.showingPw ? 'text' : 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 && (index.h("span", { key: '0d0e907d677492b54ff244f2f36389d474b13cda', 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(() => {
+                    var _a;
+                    this.value = '';
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
+                    // We need to allow the value to "settle"
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('focusout'));
+                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
+                    }, 50);
+                }, 50);
+            } })), this.type === 'password' && (index.h("span", { key: '68df05b7d43320a87f4ede3115b20cf19b409f9e', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
+                this.showingPw = !this.showingPw;
+            } })), !this.clearable && this.copyable && this.value && index.h("span", { key: 'f41ecf64b8fce70f74c6f938955b839a32252259', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && index.h("verdocs-help-icon", { key: 'f8d399ed6c21bcc27e04330f6437f160e733218a', text: this.helpText }))));
+    }
+    get hostEl() { return index.getElement(this); }
+};
+VerdocsTextInput.style = VerdocsTextInputStyle0;
+
+exports.verdocs_button = VerdocsButton;
+exports.verdocs_help_icon = VerdocsHelpIcon;
+exports.verdocs_text_input = VerdocsTextInput;

package/dist/cjs/{verdocs-checkbox_5.cjs.entry.js → verdocs-checkbox_4.cjs.entry.js}

@@ -5,10 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
 const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
-const TemplateRoleStore = require('./TemplateRoleStore-9fc8458d.js');
-const TemplateStore = require('./TemplateStore-75326f80.js');
+const TemplateRoleStore = require('./TemplateRoleStore-3f9e9f9e.js');
+const TemplateStore = require('./TemplateStore-761197ec.js');
 const errors = require('./errors-017fb835.js');
-const Toast = require('./Toast-d84d7bd3.js');
 require('./index-233cb8df.js');
 require('./index-2a189d85.js');
 
@@ -26,7 +25,7 @@ const VerdocsCheckbox = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '02a992ff0c9365a18637ccd7b0acc34a16c95b0e', class: { disabled: this.disabled, [this.theme]: true } }, index.h("label", { key: '897f8d9d3f3365087a00ab0bb12b741c944a66a3' }, index.h("input", { key: '1e82031b5febc2cea4920e2c374a5f3cbff07889', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), index.h("span", { key: 'a5b8a8518301ce6866228d7a66029abdc802e092' }, this.label))));
+        return (index.h(index.Host, { key: '134ddfacbf313ed3d8aaaae104e7ceefaf8f260f', class: { disabled: this.disabled, [this.theme]: true } }, index.h("label", { key: 'f4c5ad61ffc32acf46e42a22c9cfdb27b44d21c9' }, index.h("input", { key: 'edc72dbc12bb2f93daa6bf90fe8baddeee003a0f', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), index.h("span", { key: '0d3a00d372dc0a0b2de109c1ee8c484153b789a7' }, this.label))));
     }
 };
 VerdocsCheckbox.style = VerdocsCheckboxStyle0;
@@ -40,7 +39,7 @@ const VerdocsComponentError = class {
         this.message = '';
     }
     render() {
-        return (index.h(index.Host, { key: '572b854146e540ecb3fecdab0abe7a89bdc5f6e5' }, index.h("div", { key: 'b531eabc052b083f9a99b20d57df4dc0992a1ef0', class: "inner" }, this.message)));
+        return (index.h(index.Host, { key: '5fd53e1053d599dc955c727344dfbc48ddf13622' }, index.h("div", { key: 'bd877d18be032147ed72b999896f0cec3b021c95', class: "inner" }, this.message)));
     }
 };
 VerdocsComponentError.style = VerdocsComponentErrorStyle0;
@@ -57,12 +56,12 @@ const VerdocsSelectInput = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '49b233e1dcda5c8ffd51453654fa88bdec73bd82', class: "input-field" }, index.h("label", { key: '53ec0b8c1823a9e992c04e554bb33752ed676ad3' }, this.label ? index.h("div", { class: "input-label" }, this.label + ':') : index.h("div", null), index.h("select", { key: 'e7e0ef4dc4ab8aae9cc81d39010cfa335d37b291', class: "input-element", disabled: this.disabled }, this.options.map(option => (index.h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
+        return (index.h(index.Host, { key: '4f49d2d10cf951c150b168563bcdb1d69e2385f2', class: "input-field" }, index.h("label", { key: 'a7329800f45797aac347e20231cc790e7ed4a91f' }, this.label ? index.h("div", { class: "input-label" }, this.label + ':') : index.h("div", null), index.h("select", { key: '1f66b8907f5ba4c9ecece9444ee4afc1be6a4459', class: "input-element", disabled: this.disabled }, this.options.map(option => (index.h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
     }
 };
 VerdocsSelectInput.style = VerdocsSelectInputStyle0;
 
-const verdocsTemplateFieldPropertiesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275)}@media all and (max-width: 600px){verdocs-template-field-properties{padding:10px;-webkit-transform:scale(0.8);transform:scale(0.8)}}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:rgb(165, 0, 33)}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
+const verdocsTemplateFieldPropertiesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275)}@media all and (max-width: 600px){verdocs-template-field-properties{padding:10px;-webkit-transform:scale(0.8);transform:scale(0.8)}}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .options-header{gap:10px;margin:0 0 5px 0;display:-ms-flexbox;display:flex;color:#ffffff;font-size:14px;padding:5px 8px;font-weight:700;text-align:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;background-color:#333333}verdocs-template-field-properties .options-header-label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;font-weight:700;font-size:14px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:rgb(165, 0, 33)}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 1px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
 const VerdocsTemplateFieldPropertiesStyle0 = verdocsTemplateFieldPropertiesCss;
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
@@ -88,12 +87,12 @@ const VerdocsTemplateFieldProperties = class {
         this.type = 'textbox';
         this.name = '';
         this.required = false;
+        this.multiline = false;
         this.roleName = '';
         this.group = '';
         this.fieldType = '';
         this.options = [];
         this.placeholder = '';
-        this.multiline = false;
         this.defaultValue = '';
         this.showingHelp = false;
     }
@@ -135,16 +134,17 @@ const VerdocsTemplateFieldProperties = class {
         this.type = field.type;
         this.name = field.name;
         this.label = field.label;
-        this.group = field.name;
+        this.group = field.group;
         this.roleName = field.role_name;
         this.required = field.required;
         this.fieldType = field.type;
-        this.options = field.options;
+        this.options = field.options || [];
         this.placeholder = field.placeholder || '';
         this.defaultValue = field.default || '';
         this.multiline = field.multiline || false;
         this.dirty = false;
         this.loading = false;
+        this.cleanupOptions();
     }
     handleCancel(e) {
         var _a, _b;
@@ -166,13 +166,19 @@ const VerdocsTemplateFieldProperties = class {
             default: this.defaultValue,
             options: this.options,
         };
+        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
+        if (!newProperties.multiline && field.multiline) {
+            console.log('Switching off multiline');
+            newProperties.width = jsSdk.DEFAULT_FIELD_WIDTHS.textbox;
+            newProperties.height = jsSdk.DEFAULT_FIELD_HEIGHTS.textbox;
+        }
         console.log('[FIELD PROPERTIES] Will update', this.fieldName, newProperties);
         jsSdk.updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
             .then(updated => {
             var _a, _b, _c;
             TemplateFieldStore.updateStoreField(this.fieldStore, this.fieldName, updated);
             this.resetForm();
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, field: updated });
             (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
             (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
         })
@@ -193,6 +199,12 @@ const VerdocsTemplateFieldProperties = class {
             console.log('[FIELD PROPERTIES] Deletion error', e);
         });
     }
+    cleanupOptions() {
+        this.options = [...this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.value || '').trim() !== '')];
+        if (!this.options.find(opt => !opt.id && !opt.value)) {
+            this.options = [...this.options, { id: '', value: '' }];
+        }
+    }
     render() {
         var _a;
         // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
@@ -222,6 +234,12 @@ const VerdocsTemplateFieldProperties = class {
             } })), ['textbox', 'textarea'].includes(this.type) && (index.h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, index.h("verdocs-text-input", { id: "verdocs-field-value", label: "Default Value", value: this.defaultValue, autocomplete: "off", placeholder: "Pre-filled value...", onInput: (e) => {
                 this.defaultValue = e.target.value;
                 this.dirty = true;
+            } }))), this.type === 'radio' && (index.h("div", { class: "row" }, index.h("verdocs-text-input", { id: "verdocs-field-label", label: "Group", value: this.group, autocomplete: "off", helpText: "Enable exclusive selections. Only one option within the same group may be selected at a time.", placeholder: "Group...", onInput: (e) => {
+                this.group = (e.target.value || '')
+                    .trim()
+                    .toLowerCase()
+                    .replace(/[^a-z0-9]/g, '');
+                this.dirty = true;
             } }))), ['textbox', 'textarea'].includes(this.type) && (index.h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, index.h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
             // helpText="Placeholder to display if the field is empty."
             placeholder: "Placeholder...", onInput: (e) => {
@@ -230,88 +248,28 @@ const VerdocsTemplateFieldProperties = class {
             } }))), index.h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, index.h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), index.h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
                 this.required = e.target.checked;
                 this.dirty = true;
-            } })), ['dropdown'].includes(this.type) && (index.h("div", { class: "options" }, index.h("div", { class: "row", style: {
-                marginTop: '15px',
-                marginBottom: '15px',
-                textAlign: 'center',
-                fontWeight: '700',
-                fontSize: '14px',
-                justifyContent: 'center',
-                backgroundColor: '#333333',
-                padding: '5px 8px',
-                color: '#ffffff',
-            } }, "Options"), index.h("div", { class: "row-header" }, index.h("h6", null, "ID"), index.h("h6", null, "Label"), index.h("div", { style: { width: '34px' } })), this.options.map((option, index$1) => (index.h("div", { class: "row option-row", key: index$1 }, index.h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
+            } })), this.type === 'textbox' && (index.h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, index.h("label", { htmlFor: "verdocs-is-multline", class: "input-label" }, "Multi-Line"), index.h("verdocs-checkbox", { id: "verdocs-is-multiline", name: "is-multiline", checked: this.multiline, value: "on", onInput: (e) => {
+                this.multiline = e.target.checked;
+                this.dirty = true;
+            } }))), this.type === 'dropdown' && (index.h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, index.h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Options"))), this.type === 'dropdown' && (index.h("div", { class: "options" }, index.h("div", { class: "options-header" }, index.h("div", { class: "options-header-label" }, "ID"), index.h("dev", { class: "options-header-label" }, "Label")), this.options.map((option, index$1) => (index.h("div", { class: "row option-row", key: index$1 }, index.h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
                 this.options[index$1].id = e.target.value;
                 this.dirty = true;
+                this.cleanupOptions();
             } }), index.h("verdocs-text-input", { id: `verdocs-option-value-${option.id}`, value: option.value, placeholder: "Display value", onInput: (e) => {
                 this.options[index$1].value = e.target.value;
                 this.dirty = true;
+                this.cleanupOptions();
             } }), index.h("button", { innerHTML: TrashIcon, class: "remove-button", onClick: () => {
                 this.options = this.options.filter(opt => opt.id !== option.id);
                 this.dirty = true;
-            } })))), index.h("div", { class: "row-header" }, index.h("button", { class: "add-option-button", onClick: () => {
-                this.options = [...this.options, { id: `option-${this.options.length + 1}`, value: `Option ${this.options.length + 1}` }];
-                this.dirty = true;
-            } }, "Add Option")))), index.h("div", { class: "buttons" }, index.h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { style: { flex: '1' } }), index.h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
+                this.cleanupOptions();
+            } })))))), index.h("div", { class: "buttons" }, index.h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { style: { flex: '1' } }), index.h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
     }
     get el() { return index.getElement(this); }
 };
 VerdocsTemplateFieldProperties.style = VerdocsTemplateFieldPropertiesStyle0;
 
-const verdocsTextInputCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input .toggle-pw{top:5px;right:7px;width:18px;height:18px;stroke:#cccccc;position:absolute}verdocs-text-input .toggle-pw:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";
-const VerdocsTextInputStyle0 = verdocsTextInputCss;
-
-const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
-const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>`;
-const EyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`;
-const EyeSlashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>`;
-const VerdocsTextInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.value = '';
-        this.label = '';
-        this.placeholder = '';
-        this.autocomplete = '';
-        this.helpText = '';
-        this.clearable = false;
-        this.copyable = false;
-        this.type = 'text';
-        this.disabled = false;
-        this.required = false;
-        this.showingPw = false;
-    }
-    copyToClipboard() {
-        this.inputEl.select();
-        navigator.clipboard
-            .writeText(this.value)
-            .then(() => Toast.VerdocsToast('Copied!'))
-            .catch(e => console.log('Error copying to clipboard', e));
-    }
-    render() {
-        return (index.h(index.Host, { key: '39ca7e3389e89d00c1b15adcbc949f3b260ea257', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, index.h("label", { key: '1d6d01c8cb3b3ac3794b6dc26c96929685989089' }, this.label && (index.h("div", { key: '95a771234d7cdc4484c999144b655b6eacbe27d1', class: "input-label" }, this.label + ':', this.required && index.h("span", { key: 'a41ddd971cd71b61eeb37464083f29a55bf8a030', class: "required" }, "*"))), index.h("div", { key: '4ccb0473d02f0aee9a0bc94c4a59293eef1e3eef', class: "input-container" }, index.h("input", { key: '614f5193c19137c5f06ccc5173299fc3db3d99ff', type: this.type === 'password' && this.showingPw ? 'text' : 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 && (index.h("span", { key: '1d750d5890434d4a6dfb1faca659d442025ad515', 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(() => {
-                    var _a;
-                    this.value = '';
-                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
-                    // We need to allow the value to "settle"
-                    setTimeout(() => {
-                        var _a, _b;
-                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('focusout'));
-                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
-                    }, 50);
-                }, 50);
-            } })), this.type === 'password' && (index.h("span", { key: 'c9c856949e5cd6675c2f723fe0434527044db36f', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
-                this.showingPw = !this.showingPw;
-            } })), !this.clearable && this.copyable && this.value && index.h("span", { key: 'b95ccfa39c6d2f8ec110aa282a5ec902e015de94', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && index.h("verdocs-help-icon", { key: 'd8b934d8038cd6f0eeb39bff7092314aed2d0029', text: this.helpText }))));
-    }
-    get hostEl() { return index.getElement(this); }
-};
-VerdocsTextInput.style = VerdocsTextInputStyle0;
-
 exports.verdocs_checkbox = VerdocsCheckbox;
 exports.verdocs_component_error = VerdocsComponentError;
 exports.verdocs_select_input = VerdocsSelectInput;
 exports.verdocs_template_field_properties = VerdocsTemplateFieldProperties;
-exports.verdocs_text_input = VerdocsTextInput;

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

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const utils = require('./utils-bd4accd8.js');
+const utils = require('./utils-813f2cbf.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-db1bd1d8.js');
 require('./index-5f130ec0.js');
 
@@ -26,6 +27,8 @@ const VerdocsContactPicker = class {
         this.templateRole = null;
         this.contactSuggestions = [];
         this.name = undefined;
+        this.first_name = undefined;
+        this.last_name = undefined;
         this.email = undefined;
         this.phone = undefined;
         this.message = undefined;
@@ -36,12 +39,19 @@ const VerdocsContactPicker = class {
         this.kbaMethod = '';
         this.pinCode = '';
         this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
+        this.firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;
+        this.lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;
         this.emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;
         this.phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;
     }
     componentWillLoad() {
         if (this.templateRole) {
+            const nameComponents = (this.templateRole.full_name || '').split(' ');
+            const firstName = nameComponents.shift() || '';
+            const lastName = nameComponents.join(' ');
             this.name = this.templateRole.full_name || '';
+            this.first_name = firstName;
+            this.last_name = lastName;
             this.email = this.templateRole.email || '';
             this.phone = this.templateRole.phone || '';
             this.delegator = this.templateRole.delegator || false;
@@ -79,6 +89,8 @@ const VerdocsContactPicker = class {
         this.showSuggestions = false;
         (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
             full_name: this.name,
+            first_name: this.first_name,
+            last_name: this.last_name,
             email: this.email,
             phone: this.phone,
             message: this.message,
@@ -88,6 +100,8 @@ const VerdocsContactPicker = class {
     handleSelectSuggestion(e, suggestion) {
         e.stopPropagation();
         this.name = suggestion.name;
+        this.first_name = suggestion.first_name;
+        this.last_name = suggestion.last_name;
         this.email = suggestion.email;
         this.phone = suggestion.phone;
         this.showSuggestions = false;
@@ -95,26 +109,24 @@ const VerdocsContactPicker = class {
     // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
     // and show a duplicate autocomplete picker on top of our own.
     render() {
-        return (index.h("form", { key: 'd5f351153f58ec275d6bc7225db6aee53a5c54e6', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: '960ec06a72d7b14c6ad4609ccba90639b746e93e', class: "row" }, index.h("label", { key: '0ab66bf6689aa26132718cf673d7275708945ae4', htmlFor: this.nameFieldId }, "Name:"), index.h("input", { key: '25e2406d5b1ad78ada9c999fdefd3c16bccb60eb', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
-            // onBlur={() => (this.showSuggestions = false)}
-            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (index.h("div", { key: 'ec9dfb86c52a462005b00d857f2f945b6a5861a8', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+        return (index.h("form", { key: 'd4a74d3f95d9c13bf7b4afdc0391aafdc504b053', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: '329611e08994741cc94d01d62ab563ad182243ba', class: "row" }, index.h("label", { key: 'fd235b92d011939bbc20cf4efbe6428d953c454d', htmlFor: this.nameFieldId }, "Name:"), index.h("div", { key: 'e3531ddf8308a1be0a3fd43205fde1e99bca5dbc', style: { display: 'flex', flexDirection: 'row', gap: '8px;' } }, index.h("input", { key: 'b8bf71e3f6ce8e5aad6ee9cb03d1119935206f0c', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleNameChange(e) }), index.h("input", { key: '9d53c8d43ed0ca4d3f17d39b6d90bece9afd68a7', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleNameChange(e) })), this.showSuggestions && (index.h("div", { key: 'f53fc8a9ec12e31401afc4d22c98269ba96d0048', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
             var _a;
             return (index.h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? index.h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : index.h("div", { class: "avatar", innerHTML: placeholderIcon }), index.h("div", { class: "details" }, index.h("div", { class: "name" }, suggestion.name), suggestion.email && index.h("div", { class: "destination" }, suggestion.email), suggestion.phone && index.h("div", { class: "destination" }, suggestion.phone))));
-        })))), index.h("div", { key: 'e8f2ee3647ffc37a31cb4f1d8a043183ce608268', class: "row" }, index.h("label", { key: '99840da172556066187691124358fd64c19c466d', htmlFor: this.emailFieldId }, "Email:"), index.h("input", { key: 'bba477caa2c14def36cf90f66bc164d58ccae999', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), index.h("div", { key: 'a3e045ec2fe78e1662c389c2fdb742165e67cbfd', class: "row" }, index.h("label", { key: '19257fb97c8b0163c7d3882130bb298388c57901', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: 'ae3bbc51bed7039b716153675e3036abdf161382', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (index.h("div", { key: 'b05e51e9e9f1abb359113bea8cbc1c61c2979dbc', class: "row" }, index.h("div", { key: 'a905229b77e8b7941586834d4f942530d0b3d254', class: "label-with-icon" }, index.h("label", { key: 'b438b090c40ef5cd4c6550cd3cd57c676ab49061' }, "KBA:"), index.h("verdocs-help-icon", { key: '72fd391e008444b1f55c99833cc6f6e13670f199', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), index.h("verdocs-select-input", { key: '8af56bf9b367faaec0777d4f0d555f9a0f1f4145', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+        })))), index.h("div", { key: '29211a4aeccb45c1f6ce4581ce89eef56fd0efa0', class: "row" }, index.h("label", { key: '32fb4eaa0599ea08364af828e93dd182ee36b42b', htmlFor: this.emailFieldId }, "Email:"), index.h("input", { key: '9a75b49d558dab786d4cec8e74e1d4970da63467', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), index.h("div", { key: 'd5e07b3b8b24283acb158a8b44a981b1281c0964', class: "row" }, index.h("label", { key: '0d76a478038a18d4b16f73c14fe8ec53a014ca37', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: '7c957fa5584d100e08bcb4ef808ec21ef507df32', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (index.h("div", { key: '3d48f1e8c4941700ecbc07a57fa3a8e22e866c26', class: "row" }, index.h("div", { key: '94f76f6449c8939dbd989507d03f8c7323b0487d', class: "label-with-icon" }, index.h("label", { key: '516dd082ac4cd08e881bffc1ab22d14ed3cc4c52' }, "KBA:"), index.h("verdocs-help-icon", { key: 'e12ca24140bbcfb1645c14c2bfcf3e7326d3033a', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), index.h("verdocs-select-input", { key: 'eadc53ce819c1ff21a9a3c51e4771a8dd7076eee', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
                 { label: 'None', value: '' },
                 { label: 'PIN Code', value: 'pin' },
                 { label: 'Full Verification', value: 'kba' },
-            ] }), this.kbaMethod === 'pin' && (index.h("input", { key: '504c018a9c8ad9087ddd6b253b794c493bb16686', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (index.h("div", { key: '0506d342d5fcbdc812498ffbf19bcd9bd2d1abca', class: "row" }, index.h("label", { key: 'e62684bc9178188fed71eb77954b186511a0c29d', htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("input", { key: 'b9638d6435b7d0dc8815f20e42c2b5498ab308a0', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), index.h("div", { key: 'efc4e30feb9b3c58cc39e85725a6b780d424ca6e', class: "buttons" }, index.h("verdocs-toggle-button", { key: '6146346933119b33a1cd494e21e0d1a0195378cc', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+            ] }), this.kbaMethod === 'pin' && (index.h("input", { key: 'db7162ba5935448fdf6b335b57c2ac91283563b6', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (index.h("div", { key: '2ff18d49d7bd4181ba6fbf1ecacb64ba458b66d2', class: "row" }, index.h("label", { key: '2c22e7f0c17c5e86e4c920399ba3d4b0500a495e', htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("input", { key: 'ff3a0a753f1cb6418e02cb0f4abffbe540fd4213', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), index.h("div", { key: 'cec56a872a810a5cedc49e57f3afe1ecf3c3ade6', class: "buttons" }, index.h("verdocs-toggle-button", { key: '6f9e177a3e8d077144b5d4382a18a95b44616d12', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
                 this.showKba = e.detail.active;
                 if (!e.detail.active) {
                     this.pinCode = '';
                     this.kbaMethod = '';
                 }
                 this.showSuggestions = false;
-            } }), index.h("verdocs-toggle-button", { key: 'ba3139369cb582ec7ca246f4ad08a58998eca1eb', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+            } }), index.h("verdocs-toggle-button", { key: '8d7468bdc795eff356f4636bff62b9536c0a2d59', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), index.h("div", { key: '52ab10bc5857dc55244d064c20a2d59eb67bca82', class: "flex-fill" }), index.h("verdocs-button", { key: '4eedb7f847d8004567c24f25c7efa2ae9d6da61b', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '4b4b461f150eaf575e4b22760388ecea92f7da54', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), index.h("div", { key: 'a902c45f33e944655d42f758b67c082fa57c93ca', class: "flex-fill" }), index.h("verdocs-button", { key: 'b24bce7779c3049c5f578cc55b2dec550258c57a', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '6445645ad05e49aa28c149bed65ee95ce6889e2a', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
     }
 };
 VerdocsContactPicker.style = VerdocsContactPickerStyle0;
@@ -143,7 +155,7 @@ const VerdocsToggleButton = class {
         (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
     }
     render() {
-        return (index.h(index.Host, { key: '19b820fa8c54c87afebe8fbd24d70282eab6922c', class: `size-${this.size}` }, this.icon ? (index.h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (index.h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
+        return (index.h(index.Host, { key: '172f6a0d3eec15a7b97ed055125defe6d7e69fcb', class: `size-${this.size}` }, this.icon ? (index.h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (index.h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
     }
 };
 VerdocsToggleButton.style = VerdocsToggleButtonStyle0;

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

@@ -21,7 +21,7 @@ const VerdocsDialog = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '952c27946d1eb8552949ac29d9ffaa05222baaba' }, index.h("div", { key: '4721082da97c31ddb4e29b05922749b42ab38845', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '80e01d2ee87fd7ffbdd789068587d11ab4323644', class: "dialog" }, index.h("slot", { key: 'f55b17d75983192918a7c8b5b7df87ca22259b7b', name: "title" }, index.h("div", { key: '0ebb27bff2de5a06232e419cf9eeff67abddbb3a', class: "heading" }, "Please Confirm")), index.h("div", { key: 'c93aa214cf8f4c034611f1638dff493a9b2066e2', class: "content" }, index.h("slot", { key: '7473721bf10ed5dfe388e3d17aec8ee67a5e193f' }))))));
+        return (index.h(index.Host, { key: '6248990033ba71022795432afa8679841450431e' }, index.h("div", { key: 'bdea70156c5d1776977bf7947e326ed118367f82', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '5c8cec9a24b0a892aeb2325a87a6d238ad211992', class: "dialog" }, index.h("slot", { key: '001678f28acc1ca78772dfa2d2f9cb56c6e1074d', name: "title" }, index.h("div", { key: 'b5c86535f40180659a6e21b31193c6d0cdd0c706', class: "heading" }, "Please Confirm")), index.h("div", { key: 'e6c8eddfe1c541d34ac2380f78564bc80b736564', class: "content" }, index.h("slot", { key: '6d22d23df835be6339b7629a21fe3a3a802eb9b9' }))))));
     }
 };
 VerdocsDialog.style = VerdocsDialogStyle0;

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

@@ -91,7 +91,7 @@ const VerdocsDropdown = class {
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (index.h(index.Host, { key: '3a0ecbe96fffea8c916de9a657afd891dc95fa01' }, index.h("button", { key: 'bf194fdde69ec6a4e9edfa897eefe57daaa847d2', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (index.h(index.Host, { key: '006ffc94bd4cdc84424e001b2ff146f44fa268be' }, index.h("button", { key: '77c15671bb969bd79ed476d647642fdc70909f5f', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

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

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const utils = require('./utils-bd4accd8.js');
+const utils = require('./utils-813f2cbf.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-db1bd1d8.js');
 require('./index-5f130ec0.js');
 
@@ -81,7 +82,7 @@ const VerdocsEnvelopeDocumentPage = class {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (index.h(index.Host, { key: '1626cbea713462254f8d518479181a39156fd599', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (index.h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+        return (index.h(index.Host, { key: 'f4ffa325b8eb3f8047dbe704cfc89aeeee1aad26', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (index.h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                 // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                 // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                 // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const EnvelopeStore = require('./EnvelopeStore-6c5995f1.js');
+const EnvelopeStore = require('./EnvelopeStore-65c587fd.js');
 const Toast = require('./Toast-d84d7bd3.js');
 const errors = require('./errors-017fb835.js');
 require('./index-233cb8df.js');