@verdocs/web-sdk 6.3.2 → 6.5.0-beta.2

package/dist/collection/components/dialogs/verdocs-signing-progress/verdocs-signing-progress.css

@@ -0,0 +1,134 @@
+@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-signing-progress {
+  position: fixed;
+  top: 64px;
+  left: 20px;
+  z-index: 900;
+  display: block;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
+}
+@media (max-width: 768px) {
+  verdocs-signing-progress {
+    display: none;
+  }
+}
+verdocs-signing-progress .card {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  width: 240px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+verdocs-signing-progress .header {
+  font-size: 14px;
+  color: #111827;
+}
+verdocs-signing-progress .header-completed {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+}
+verdocs-signing-progress .description {
+  font-size: 12px;
+  line-height: 16px;
+  color: #374151;
+}
+verdocs-signing-progress .field-label {
+  font-family: var(--verdocs-primary-font, var(--verdocs-primary-font, "Inter", "Barlow", sans-serif));
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+  color: var(--verdocs-body-color, #242424);
+}
+verdocs-signing-progress .field-completed {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+  color: var(--verdocs-body-color, #242424);
+}
+verdocs-signing-progress .field-completed .text {
+  position: relative;
+  top: -2px;
+}
+verdocs-signing-progress .separator {
+  height: 1px;
+  background-color: #e5e7eb;
+  width: 100%;
+}
+verdocs-signing-progress .btn {
+  width: 100%;
+  height: 32px;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+verdocs-signing-progress .btn:disabled {
+  background-color: #f0f0f0;
+  border: 1px solid #e0e0e0;
+  color: #bdbdbd;
+  cursor: not-allowed;
+  opacity: 1;
+}
+verdocs-signing-progress .btn.start, verdocs-signing-progress .btn.submit, verdocs-signing-progress .btn.next {
+  background-color: var(--verdocs-primary-color, #55bc81);
+  color: white;
+}
+verdocs-signing-progress .btn.start:hover:not(:disabled), verdocs-signing-progress .btn.submit:hover:not(:disabled), verdocs-signing-progress .btn.next:hover:not(:disabled) {
+  background-color: var(--verdocs-primary-color-hover, #2b995b);
+}
+verdocs-signing-progress .btn.start:disabled, verdocs-signing-progress .btn.submit:disabled, verdocs-signing-progress .btn.next:disabled {
+  background-color: #f0f0f0;
+  border: 1px solid #e0e0e0;
+  color: #bdbdbd;
+  cursor: not-allowed;
+  opacity: 1;
+}
+verdocs-signing-progress .btn.prev, verdocs-signing-progress .btn.previous {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+verdocs-signing-progress .btn.prev:hover:not(:disabled), verdocs-signing-progress .btn.previous:hover:not(:disabled) {
+  background-color: #e5e7eb;
+}
+verdocs-signing-progress .btn.prev:disabled, verdocs-signing-progress .btn.previous:disabled {
+  background-color: #f0f0f0;
+  border: 1px solid #e0e0e0;
+  color: #bdbdbd;
+  cursor: not-allowed;
+  opacity: 1;
+}
+verdocs-signing-progress .nav-buttons {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+}
+verdocs-signing-progress .nav-buttons .btn {
+  flex: 1;
+}

package/dist/collection/components/dialogs/verdocs-signing-progress/verdocs-signing-progress.js

@@ -0,0 +1,231 @@
+import { h } from "@stencil/core";
+export class VerdocsSigningProgress {
+    constructor() {
+        /**
+         * Current field index (1-based)
+         */
+        this.current = 0;
+        /**
+         * Total number of fields
+         */
+        this.total = 0;
+        /**
+         * Display mode
+         */
+        this.mode = 'start';
+        /**
+         * Label to display for the current field
+         */
+        this.fieldLabel = '';
+        /**
+         * Whether the current field has been completed (shows success message)
+         */
+        this.fieldCompleted = false;
+    }
+    renderSuccessIcon() {
+        return (h("svg", { width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM13.3584 7.64645C13.532 7.82001 13.5513 8.08944 13.4163 8.28431L13.3584 8.35355L9.35355 12.3584C9.17999 12.532 8.91056 12.5513 8.71569 12.4163L8.64645 12.3584L6.64645 10.3584C6.45118 10.1632 6.45118 9.84658 6.64645 9.65131C6.82001 9.47775 7.08944 9.45846 7.28431 9.59346L7.35355 9.65131L9 11.298L12.6513 7.64645C12.8466 7.45118 13.1632 7.45118 13.3584 7.64645Z", fill: "#107C10" })));
+    }
+    renderContent() {
+        if (this.mode === 'start') {
+            return h("div", { class: "field-label" }, this.fieldLabel);
+        }
+        if (this.fieldCompleted) {
+            return (h("div", { class: "field-completed" }, h("div", { class: "icon" }, this.renderSuccessIcon()), h("span", { class: "text" }, "Successfully signed!")));
+        }
+        return h("div", { class: "field-label" }, this.fieldLabel);
+    }
+    renderFooter() {
+        if (this.mode === 'start') {
+            return (h("button", { class: "btn start", onClick: () => this.started.emit() }, "Start"));
+        }
+        return (h("div", { class: "nav-buttons" }, h("button", { class: "btn previous", disabled: this.current <= 1, onClick: () => this.previous.emit() }, "Previous"), h("button", { class: "btn next", disabled: this.current >= this.total, onClick: () => this.next.emit() }, "Next")));
+    }
+    renderCompleted() {
+        return (h("div", { class: "card completed" }, h("div", { class: "header-completed" }, h("div", { class: "icon" }, this.renderSuccessIcon()), "Completed"), h("div", { class: "description" }, "You have entered all requested signatures. Select Submit to complete the signing process."), h("div", { class: "separator" }), h("button", { class: "btn submit", onClick: () => this.exit.emit() }, "Submit")));
+    }
+    render() {
+        if (this.mode === 'completed') {
+            return this.renderCompleted();
+        }
+        return (h("div", { class: "card" }, h("div", { class: "header" }, this.current, " of ", this.total, " fields"), h("div", { class: "body" }, this.renderContent()), h("div", { class: "separator" }), this.renderFooter()));
+    }
+    static get is() { return "verdocs-signing-progress"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-signing-progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-signing-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "current": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current field index (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current",
+                "defaultValue": "0"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of fields"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "0"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'signing' | 'completed'",
+                    "resolved": "\"completed\" | \"signing\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'start'"
+            },
+            "fieldLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label to display for the current field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "field-label",
+                "defaultValue": "''"
+            },
+            "fieldCompleted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the current field has been completed (shows success message)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "field-completed",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "started",
+                "name": "started",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user clicks Start"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "next",
+                "name": "next",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user clicks Next"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "previous",
+                "name": "previous",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user clicks Previous"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "exit",
+                "name": "exit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user clicks Submit"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=verdocs-signing-progress.js.map

package/dist/collection/components/dialogs/verdocs-signing-progress/verdocs-signing-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verdocs-signing-progress.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-signing-progress/verdocs-signing-progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, Event, EventEmitter} from '@stencil/core';\n\n@Component({\n  tag: 'verdocs-signing-progress',\n  styleUrl: 'verdocs-signing-progress.scss',\n})\nexport class VerdocsSigningProgress {\n  /**\n   * Current field index (1-based)\n   */\n  @Prop() current: number = 0;\n\n  /**\n   * Total number of fields\n   */\n  @Prop() total: number = 0;\n\n  /**\n   * Display mode\n   */\n  @Prop() mode: 'start' | 'signing' | 'completed' = 'start';\n\n  /**\n   * Label to display for the current field\n   */\n  @Prop() fieldLabel: string = '';\n\n  /**\n   * Whether the current field has been completed (shows success message)\n   */\n  @Prop() fieldCompleted: boolean = false;\n\n  /**\n   * Emitted when user clicks Start\n   */\n  @Event({composed: true}) started: EventEmitter;\n\n  /**\n   * Emitted when user clicks Next\n   */\n  @Event({composed: true}) next: EventEmitter;\n\n  /**\n   * Emitted when user clicks Previous\n   */\n  @Event({composed: true}) previous: EventEmitter;\n\n  /**\n   * Emitted when user clicks Submit\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  renderSuccessIcon() {\n    return (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM13.3584 7.64645C13.532 7.82001 13.5513 8.08944 13.4163 8.28431L13.3584 8.35355L9.35355 12.3584C9.17999 12.532 8.91056 12.5513 8.71569 12.4163L8.64645 12.3584L6.64645 10.3584C6.45118 10.1632 6.45118 9.84658 6.64645 9.65131C6.82001 9.47775 7.08944 9.45846 7.28431 9.59346L7.35355 9.65131L9 11.298L12.6513 7.64645C12.8466 7.45118 13.1632 7.45118 13.3584 7.64645Z\"\n          fill=\"#107C10\"\n        />\n      </svg>\n    );\n  }\n\n  renderContent() {\n    if (this.mode === 'start') {\n      return <div class=\"field-label\">{this.fieldLabel}</div>;\n    }\n\n    if (this.fieldCompleted) {\n      return (\n        <div class=\"field-completed\">\n          <div class=\"icon\">{this.renderSuccessIcon()}</div>\n          <span class=\"text\">Successfully signed!</span>\n        </div>\n      );\n    }\n\n    return <div class=\"field-label\">{this.fieldLabel}</div>;\n  }\n\n  renderFooter() {\n    if (this.mode === 'start') {\n      return (\n        <button class=\"btn start\" onClick={() => this.started.emit()}>\n          Start\n        </button>\n      );\n    }\n\n    return (\n      <div class=\"nav-buttons\">\n        <button class=\"btn previous\" disabled={this.current <= 1} onClick={() => this.previous.emit()}>\n          Previous\n        </button>\n        <button class=\"btn next\" disabled={this.current >= this.total} onClick={() => this.next.emit()}>\n          Next\n        </button>\n      </div>\n    );\n  }\n\n  renderCompleted() {\n    return (\n      <div class=\"card completed\">\n        <div class=\"header-completed\">\n          <div class=\"icon\">{this.renderSuccessIcon()}</div>\n          Completed\n        </div>\n        <div class=\"description\">You have entered all requested signatures. Select Submit to complete the signing process.</div>\n        <div class=\"separator\" />\n        <button class=\"btn submit\" onClick={() => this.exit.emit()}>\n          Submit\n        </button>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.mode === 'completed') {\n      return this.renderCompleted();\n    }\n\n    return (\n      <div class=\"card\">\n        <div class=\"header\">\n          {this.current} of {this.total} fields\n        </div>\n\n        <div class=\"body\">{this.renderContent()}</div>\n\n        <div class=\"separator\" />\n\n        {this.renderFooter()}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -80,7 +80,7 @@ export class VerdocsUploadDialog {
     render() {
         var _a;
         const existingFile = ((_a = this.existingFile) === null || _a === void 0 ? void 0 : _a.name) ? this.existingFile : null;
-        return (h(Host, { key: '58f5a01ce13a8c9d378fbecec65275dcbbaf1bfc' }, h("div", { key: '8ccf2c4a027f7e0ca4f080914d29e4a0a2e2de62', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'cd741d53302c1f39c2c8dba266e6fa965f988a3a', class: "upload-dialog-content" }, h("div", { key: '44d1f7c2195efa07418611d4257950ef544d7491', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '26a9512b12d0ee738b814d6351ca2b7d8517a56e' }, h("div", { key: '957c6a08de05c93f96b53e0133bda06856ee826c', class: "current-label" }, "Current Attachment"), h("div", { key: 'ddc61cfad0d5efc87fa40eff81f7a0d59a0d5408', class: "attachments", style: { marginTop: '0' } }, h("div", { key: 'e20c62948e2ed9f5812a383d8f3527e4b5a820f5', class: "attachment" }, h("div", { key: '5aa6ecee018cbeb7b90303d76978c3477729892d', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: 'dec541f7f0fdb37b9aa1ea24a892c69bef9c1a3e', class: "name" }, existingFile.name), h("div", { key: '24783350a525e61584f26364b282b806e051dde0', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: 'f6ba0c22deb4a17b43a506fdf80ede1aea2b9695', 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", { key: '2073c5813b6ea55ff64b732dcb53af859e76ecd4' }, "Drag and drop your files here"), h("p", { key: 'a2528e4cfacf746e46748824813fc88247534b05', class: "subscript" }, "Supported files: PDF, Word, JPG, PNG"), h("verdocs-button", { key: '312c650398db6a597b445e2f50a3b8eb9b82d394', label: !!existingFile ? 'Replace files' : 'Select files', onClick: () => this.handleSelectFile() }), h("input", { key: 'b6aae72ce05c357ec6efe0fa49066b3f995fb928', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, accept: ".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*", onChange: () => this.handleFileChange() }))), this.selectedFiles.length > 0 && (h("div", { key: 'ae4c5f0184f8e6d9b0a38f148b5a84135c10f5d1', class: "attachments" }, this.selectedFiles.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) })))))), !!this.errorMessage && h("div", { key: '5d38bae731bb112580d818fc68d6c7bf933787e4', class: "error" }, this.errorMessage), h("div", { key: '1d82c4a94af155ee1d2922a4a4d39395b6784475', class: "buttons" }, h("verdocs-button", { key: '8da177ad8790a3765616b0b8544f24c1163dae03', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '9927509ed70b644f784ca079e89c6e54763c11dc', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: 'e5b7e7e32a85ad3f273cffad9f2529280614dbf8', heading: "Delete Attachment?", message: "Are you sure you wish to delete this attachment? This action cannot be undone.", showCancel: true, onExit: e => {
+        return (h(Host, { key: 'b0ca14d225224dc98ff46c735847be4f8ff36155' }, h("div", { key: '13ad83fbd408d00cf1d3d1fba05362383d2f36b0', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '12f13a44a2ad5f1407d4d36abdb83ab751e02b2e', class: "upload-dialog-content" }, h("div", { key: '676e2e2092353ceda44485db36edbcb6767546fa', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '14943f2b22e74951436b699d89d33b4d8ca99a5c' }, h("div", { key: '5dadc3d739cd21e81bc5e996437e194619696dd4', class: "current-label" }, "Current Attachment"), h("div", { key: 'f6d4fb430de57ed9adccba460b9541e2ecdde0d9', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '3486b50484212f5eb0f2e35f05a4033ff2e1b0d9', class: "attachment" }, h("div", { key: 'd707be82662dc5a7d384b99400e2df272ec4fbbf', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '76e19b6731810e6752f71a1ff669e2295d71668c', class: "name" }, existingFile.name), h("div", { key: '8dc091a9a6e3e2be166053d5195d065f7cce9ce9', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: 'ccea1346643e7fe2080a182af8f31bc664078452', 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", { key: '14654e7541b12e697d10093c1937facc28245b7c' }, "Drag and drop your files here"), h("p", { key: '88d3d5ac4dc17c9069c1142ebec938862360173d', class: "subscript" }, "Supported files: PDF, Word, JPG, PNG"), h("verdocs-button", { key: 'c0d92b3e17290915cff67eb61473650c9db19760', label: !!existingFile ? 'Replace files' : 'Select files', onClick: () => this.handleSelectFile() }), h("input", { key: 'c60de9aad07084407784a7ae78ab135a90c49682', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, accept: ".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*", onChange: () => this.handleFileChange() }))), this.selectedFiles.length > 0 && (h("div", { key: '42735af0b120ff7b514e95dbddffe11797cb8944', class: "attachments" }, this.selectedFiles.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) })))))), !!this.errorMessage && h("div", { key: 'fb4827e70e10544a824a1de78b19995bf8e9363e', class: "error" }, this.errorMessage), h("div", { key: '35556df182bda0c72640359b6f99f4216fc65593', class: "buttons" }, h("verdocs-button", { key: 'd257d0348d01d5ef4650c28619e360af551240a4', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'a796fb19b3c5f13f04a276e0c6a3280ff4e4ae6d', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: 'b93d666429e9e3bf2c1e2040504afec9cbddff13', heading: "Delete Attachment?", message: "Are you sure you wish to delete this attachment? This action cannot be undone.", showCancel: true, onExit: e => {
                 // So we don't close the upload dialog
                 e.preventDefault();
                 e.stopPropagation();

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

@@ -10,7 +10,7 @@
   }
 }
 verdocs-quick-functions {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
 }
 verdocs-quick-functions .container {
   display: flex;

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

@@ -22,7 +22,7 @@ export class VerdocsQuickFunctions {
         this.createDocument.emit();
     }
     render() {
-        return (h("div", { key: 'cceac513d12266408ab02fbd9a6d9dc254aa88b2', class: "container" }, h("p", { key: 'a2a45f111d0293d4db75159423eeabc2ecd8ba79', class: "title" }, "Quick Create"), h("button", { key: '16628d44ef97c7878460f32fb59c92c03a739c3e', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: '6b48592f2a1a8bcfe4eded1dd3f095d9fc28728e', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (h("div", { key: '5c679565e3c2eb0f89045166b54331dbf72a5172', class: "container" }, h("p", { key: 'd5aae49d044f43c5f5ba6d85d632db935e4543a4', class: "title" }, "Quick Create"), h("button", { key: '38c66d9f31eec00c3252e23b4113d1cebbd96b3d', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: '26b268b93f82b95f8cd22f8a831b84e2c1bd9534', 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.css

@@ -10,7 +10,7 @@
   }
 }
 verdocs-search-box {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
 }
 verdocs-search-box form {
   display: flex;

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

@@ -10,6 +10,6 @@
   }
 }
 verdocs-search-tabs {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
   display: block;
 }

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: '136d5c27d89177682fbf540830db7a7afc9708bc' }, "\u00A0");
+        return h("div", { key: 'd508d23511bbb83497117e9c31c0cfbbc38052ce' }, "\u00A0");
     }
     static get is() { return "verdocs-search-tabs"; }
     static get originalStyleUrls() {

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

@@ -10,7 +10,7 @@
   }
 }
 verdocs-auth {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
   display: flex;
   align-items: center;
   flex-direction: column;

package/dist/collection/components/embeds/verdocs-build/verdocs-build.css

@@ -12,7 +12,7 @@
 verdocs-build {
   display: flex;
   flex-direction: column;
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
 }
 verdocs-build .content {
   flex: 1;

package/dist/collection/components/embeds/verdocs-preview/verdocs-preview.css

@@ -10,7 +10,7 @@
   }
 }
 verdocs-preview {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
   display: flex;
   padding: 15px;
   row-gap: 15px;

package/dist/collection/components/embeds/verdocs-send/verdocs-send.css

@@ -14,7 +14,7 @@ verdocs-send {
   position: relative;
   background: #ffffff;
   flex-direction: column;
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
 }
 verdocs-send.sendable {
   display: flex;

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.css

@@ -16,7 +16,11 @@ verdocs-sign {
   min-height: 600px;
   flex-direction: column;
   box-sizing: border-box;
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  background-color: #f5f5f5;
+  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
+}
+verdocs-sign verdocs-button > button.standard {
+  background: #2a63f6;
 }
 verdocs-sign div {
   display: block;
@@ -32,6 +36,7 @@ verdocs-sign > .document {
   align-self: center;
   display: flex;
   padding: 15px;
+  padding-right: 140px;
   row-gap: 15px;
   max-width: 1200px;
   min-height: 200px;