@verdocs/web-sdk 1.1.0 → 1.4.2

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

@@ -2,11 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6fc067b7.js');
-const Transport = require('./Transport-68c8b1f4.js');
-const bufferEs6 = require('./buffer-es6-ce0cdd81.js');
-const Token = require('./Token-65a1dc17.js');
-require('./index-4bf5cc66.js');
+const index = require('./index-589f3be8.js');
+const Token = require('./Token-1ec62bd3.js');
+const bufferEs6 = require('./buffer-es6-bc8199b1.js');
 
 /**
  * Given a `rgba(r,g,b,a)` string value, returns the hex equivalent, dropping the alpha channel.
@@ -94,12 +92,21 @@ var __generator$1 = (undefined && undefined.__generator) || function (thisArg, b
 };
 var updateRecipientStatus = function (documentId, roleName, action, params) { return __awaiter$1(void 0, void 0, void 0, function () {
     return __generator$1(this, function (_a) {
-        return [2 /*return*/, Transport.getEndpoint()
+        return [2 /*return*/, Token.getEndpoint()
                 .api.put("/documents/".concat(documentId, "/recipients/").concat(roleName), __assign({ role_name: roleName, action: action }, (params || {})))
                 .then(function (r) { return r.data; })];
     });
 }); };
 
+var e164Regex = new RegExp(/\+[1-9]\d{6,14}/g);
+function simpleE164Validator(code) {
+    return (code !== null && code.length < 16 && code.length > 6 && e164Regex.test(code)) || code === '' || code === null;
+}
+
+var EmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+var isValidEmail = function (value) { return EmailRegEx.test(value); };
+var isValidPhone = function (value) { return simpleE164Validator(value); };
+
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -141,28 +148,28 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
  */
 var getSigningSession = function (params) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
-        return [2 /*return*/, Transport.getEndpoint()
+        return [2 /*return*/, Token.getEndpoint()
                 .api.get("/documents/".concat(params.documentId, "/recipients/").concat(encodeURIComponent(params.roleId), "/invitation/").concat(params.inviteCode))
                 .then(function (r) {
                 var _a, _b;
                 // Avoiding a jsonwebtoken dependency here - we don't actually need the whole library
                 var signerToken = ((_a = r.headers) === null || _a === void 0 ? void 0 : _a.signer_token) || '';
                 var session = Token.decodeAccessTokenBody(signerToken);
-                Transport.getEndpoint().setAuthorization((_b = r.headers) === null || _b === void 0 ? void 0 : _b.signer_token);
+                Token.getEndpoint().setAuthorization((_b = r.headers) === null || _b === void 0 ? void 0 : _b.signer_token);
                 return { recipient: r.data, session: session, signerToken: signerToken };
             })];
     });
 }); };
 var getDocument = function (documentId) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
-        return [2 /*return*/, Transport.getEndpoint()
+        return [2 /*return*/, Token.getEndpoint()
                 .api.get("/documents/".concat(documentId))
                 .then(function (r) { return r.data; })];
     });
 }); };
 var getDocumentFile = function (documentId, envelopeDocumentId) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
-        return [2 /*return*/, Transport.getEndpoint()
+        return [2 /*return*/, Token.getEndpoint()
                 .api.get("/documents/".concat(documentId, "/envelope_documents/").concat(envelopeDocumentId, "?file=true"), {
                 responseType: 'arraybuffer',
             })
@@ -171,25 +178,16 @@ var getDocumentFile = function (documentId, envelopeDocumentId) { return __await
 }); };
 var updateDocumentField = function (documentId, fieldName, value) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
-        return [2 /*return*/, Transport.getEndpoint()
+        return [2 /*return*/, Token.getEndpoint()
                 .api.put("/documents/".concat(documentId, "/fields/").concat(fieldName), value)
                 .then(function (r) { return r.data; })];
     });
 }); };
 
-var e164Regex = new RegExp(/\+[1-9]\d{6,14}/g);
-function simpleE164Validator(code) {
-    return (code !== null && code.length < 16 && code.length > 6 && e164Regex.test(code)) || code === '' || code === null;
-}
-
-var EmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-var isValidEmail = function (value) { return EmailRegEx.test(value); };
-var isValidPhone = function (value) { return simpleE164Validator(value); };
-
-const verdocsSignCss = "verdocs-sign{font-family:sans-serif;font-family:var(--verdocs-font);position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:600px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}verdocs-sign.storybook{max-height:600px}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0 0 115px;flex:0 0 115px;z-index:1000;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);-webkit-transition:all 0.25s;transition:all 0.25s}verdocs-sign .intro{background-color:#ffffff;width:100%;margin:0 auto;padding:20px;max-width:1028px;color:rgba(0, 0, 0, 0.87)}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 20px;max-width:1028px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;padding:4px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;position:relative;overflow-y:scroll}verdocs-sign .agree-checkbox{-ms-flex:0 0 20px;flex:0 0 20px;width:20px;height:20px;border-radius:3px;background:#ffffff;position:relative;margin:0 10px 0 30px}verdocs-sign .agree-checkbox label{left:2px;top:2px;width:16px;height:16px;cursor:pointer;position:absolute;background:#33354c;-webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8)}verdocs-sign .agree-checkbox label:after{top:2px;left:3px;width:8px;opacity:0;height:5px;content:\"\";position:absolute;background:transparent;filter:alpha(opacity=0);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:2px solid #fcfff4;border-top:none;border-right:none}verdocs-sign .agree-checkbox label:hover::after{filter:alpha(opacity=30);opacity:0.3}verdocs-sign .agree-checkbox input[type=checkbox]:checked+label:after{filter:alpha(opacity=100);opacity:1}verdocs-sign.agreed .intro{display:none}verdocs-sign.agreed .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign.agreed .agree-checkbox{background:#ccc}verdocs-sign.agreed .agree-checkbox label{cursor:default}verdocs-sign .page-controls{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:500}";
+const verdocsSignCss = "verdocs-sign{font-family:\"Barlow\", sans-serif;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:600px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}verdocs-sign.storybook{max-height:600px}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0 0 115px;flex:0 0 115px;z-index:1000;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);-webkit-transition:all 0.25s;transition:all 0.25s}verdocs-sign .intro{background-color:#ffffff;width:100%;margin:0 auto;padding:20px;max-width:1028px;color:rgba(0, 0, 0, 0.87)}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 20px;max-width:1028px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;padding:4px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;position:relative;overflow-y:scroll}verdocs-sign .agree-checkbox{-ms-flex:0 0 20px;flex:0 0 20px;display:-ms-flexbox;display:flex;width:20px;height:20px;border-radius:3px;background:#ffffff;position:relative;margin:0 10px 0 30px}verdocs-sign .agree-checkbox label{left:2px;top:2px;width:16px;height:16px;cursor:pointer;position:absolute;background:#33354c;-webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8)}verdocs-sign .agree-checkbox label:after{top:2px;left:3px;width:8px;opacity:0;height:5px;content:\"\";position:absolute;background:transparent;filter:alpha(opacity=0);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:2px solid #fcfff4;border-top:none;border-right:none}verdocs-sign .agree-checkbox label:hover::after{filter:alpha(opacity=30);opacity:0.3}verdocs-sign .agree-checkbox input[type=checkbox]:checked+label:after{filter:alpha(opacity=100);opacity:1}verdocs-sign.agreed .intro{display:none}verdocs-sign.agreed .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign.agreed .agree-checkbox{background:#ccc}verdocs-sign.agreed .agree-checkbox label{cursor:default}verdocs-sign .page-controls{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:500}";
 
 const BASE_URL = 'https://stage-api.verdocs.com';
-let VerdocsSign = class {
+const VerdocsSign = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
@@ -219,8 +217,8 @@ let VerdocsSign = class {
     this.focusedField = '';
   }
   componentWillLoad() {
-    const endpoint = new Transport.VerdocsEndpoint({ baseURL: BASE_URL });
-    Transport.setActiveEndpoint(endpoint);
+    const endpoint = new Token.VerdocsEndpoint().setBaseURL(BASE_URL);
+    Token.setActiveEndpoint(endpoint);
   }
   async componentDidLoad() {
     try {
@@ -234,7 +232,7 @@ let VerdocsSign = class {
       console.log('[SIGN] Recipient', recipient);
       this.recipient = recipient;
       this.signerToken = signerToken;
-      Transport.getEndpoint().setSigningAuthorization(signerToken);
+      Token.getEndpoint().setSigningAuthorization(signerToken);
       if (this.recipient.agreed) {
         this.nextButtonLabel = 'Next';
       }
@@ -242,9 +240,6 @@ let VerdocsSign = class {
       this.document = document;
       console.log('[SIGN] Document', document);
       this.pdfUrl = `${BASE_URL}/documents/${this.documentid}/envelope_documents/${document.envelope_document_id}?file=true`;
-      // https://stage.verdocs.com/view/sign/f484a296-4f4c-4783-9adf-a3302915a503/roleName/Recipient%202/invitation/ea2328b1181b26118f5c676119232df6
-      // https://stage-api.verdocs.com/documents/f484a296-4f4c-4783-9adf-a3302915a503/envelope_documents/e7968994-b859-40ad-8577-c7b3a1fe76bd?file=true
-      // https://stage-api.verdocs.com/envelopes/f484a296-4f4c-4783-9adf-a3302915a503/envelope_documents/e7968994-b859-40ad-8577-c7b3a1fe76bd?file=true
       this.recipientIndex = this.document.recipients.findIndex(recipient => recipient.role_name == this.roleid);
       if (this.recipientIndex > -1) {
         console.log('Found recipient', this.document.recipients[this.recipientIndex]);
@@ -485,7 +480,7 @@ let VerdocsSign = class {
       { id: 'print', label: 'Print Without Signing' },
       { id: 'download', label: 'Download' },
     ];
-    return (index.h(index.Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, index.h("div", { class: "header" }, index.h("div", { class: "intro" }, "Please review and act on these documents."), index.h("div", { class: "toolbar" }, index.h("div", { class: "tools" }, index.h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (index.h("div", { style: { flex: '1', flexDirection: 'row' } }, index.h("div", { class: "agree-checkbox" }, index.h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }), index.h("label", { htmlFor: "agree-checkbox-element" })), "I agree to use electronic records and signatures.")) : (index.h("div", { style: { flex: '1' } })), index.h("verdocs-button", { label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))), !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? index.h("div", { class: "cover" }) : index.h("div", { style: { display: 'none' } }), index.h("div", { class: "document" }, this.pdfUrl ? index.h("verdocs-view", { source: this.pdfUrl, token: this.signerToken, onDocumentRendered: e => this.handleDocumentRendered(e) }) : index.h("verdocs-loader", null), (((_e = this.pdfPageInfo) === null || _e === void 0 ? void 0 : _e.pages) || []).map(page => {
+    return (index.h(index.Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, index.h("div", { class: "header" }, index.h("div", { class: "intro" }, "Please review and act on these documents."), index.h("div", { class: "toolbar" }, index.h("div", { class: "tools" }, index.h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (index.h("div", { style: { flex: '1', flexDirection: 'row', display: 'flex', alignItems: 'center' } }, index.h("div", { class: "agree-checkbox" }, index.h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }), index.h("label", { htmlFor: "agree-checkbox-element" })), "I agree to use electronic records and signatures.")) : (index.h("div", { style: { flex: '1' } })), index.h("verdocs-button", { label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))), !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? index.h("div", { class: "cover" }) : index.h("div", { style: { display: 'none' } }), index.h("div", { class: "document" }, this.pdfUrl ? index.h("verdocs-view", { source: this.pdfUrl, token: this.signerToken, onDocumentRendered: e => this.handleDocumentRendered(e) }) : index.h("verdocs-loader", null), (((_e = this.pdfPageInfo) === null || _e === void 0 ? void 0 : _e.pages) || []).map(page => {
       var _a;
       return (index.h("div", { class: "page-controls", style: { height: `${page.height}px`, width: `${page.width}px`, top: `${page.canvasTop}px`, margin: '0 auto' } }, ((_a = this.pdfPageInfo) === null || _a === void 0 ? void 0 : _a.numRendered) > 0 ? (this.fields.filter(field => field.page === page.pageNumber).map((field, index) => this.renderField(field, index))) : (index.h("div", { style: { display: 'none' } }, "Waiting for PDF to render..."))));
     }))));

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6fc067b7.js');
+const index = require('./index-589f3be8.js');
 
-const verdocsSignatureDialogCss = "verdocs-signature-dialog{font-family:sans-serif;font-family:var(--verdocs-font);-webkit-box-sizing:border-box;box-sizing:border-box;display:none}verdocs-signature-dialog.open{display:block}verdocs-signature-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #ccc}verdocs-signature-dialog .tabs .tab:hover{color:var(--verdocs-primary-color)}";
+const verdocsSignatureDialogCss = "verdocs-signature-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;display:none}verdocs-signature-dialog.open{display:block}verdocs-signature-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f5f5fa}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}";
 
-let VerdocsSignatureDialog = class {
+const VerdocsSignatureDialog = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.adopt = index.createEvent(this, "adopt", 7);
@@ -231,7 +231,7 @@ let VerdocsSignatureDialog = class {
   }
    */
   render() {
-    return (index.h(index.Host, { class: { open: this.open } }, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Create Your Signature"), index.h("div", { class: "content" }, index.h("verdocs-text-input", { placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onFieldInput: e => this.handleNameChange(e) }), index.h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), index.h("div", { class: "tabs" }, index.h("div", { class: { tab: true, active: this.mode === 'type' }, onClick: () => (this.mode = 'type') }, "Type"), index.h("div", { class: { tab: true, active: this.mode === 'draw' }, onClick: () => (this.mode = 'draw') }, "Draw")), this.fontLoaded ? index.h("canvas", { ref: el => (this.canvasElement = el) }) : index.h("div", { style: { display: 'none' } }), index.h("div", { class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "CANCEL", variant: "outline", onPress: () => this.handleCancel() }), index.h("verdocs-button", { label: "Adopt & Sign", onPress: () => this.handleAdopt() })))))));
+    return (index.h(index.Host, { class: { open: this.open } }, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Create Your Signature"), index.h("div", { class: "content" }, index.h("verdocs-text-input", { placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onFieldInput: e => this.handleNameChange(e) }), index.h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), index.h("div", { class: "tabs" }, index.h("div", { class: { tab: true, active: this.mode === 'type' }, onClick: () => (this.mode = 'type') }, "Type"), index.h("div", { class: { tab: true, active: this.mode === 'draw' }, onClick: () => (this.mode = 'draw') }, "Draw")), this.fontLoaded ? index.h("canvas", { ref: el => (this.canvasElement = el) }) : index.h("div", { style: { display: 'none' } }), index.h("div", { class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "CANCEL", size: "normal", variant: "outline", onPress: () => this.handleCancel() }), index.h("verdocs-button", { label: "Adopt & Sign", size: "normal", onPress: () => this.handleAdopt() })))))));
   }
 };
 VerdocsSignatureDialog.style = verdocsSignatureDialogCss;