@verdocs/web-sdk 1.4.2 → 1.5.0

package/dist/components/verdocs-auth.js

@@ -1,19 +1,37 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loadSession, a as authenticateUser, s as setSession } from './Auth.js';
-import { V as VerdocsEndpoint, g as getEndpoint, s as setActiveEndpoint } from './Token.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { d as defineCustomElement$4 } from './verdocs-button2.js';
 import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsAuthCss = "verdocs-auth{font-family:\"Barlow\", sans-serif;background-color:#4c56cb;padding:40px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-auth .login-form,verdocs-auth .signup-form{background:#f5f5fa;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;padding:20px;width:300px;max-width:100%}verdocs-auth .logo{margin:20px 0 30px;width:128px;max-width:100%}verdocs-auth h3{text-align:center;font-weight:400;font-size:16px;line-height:1.75;margin:0}verdocs-auth h4{text-align:center;font-weight:400;font-size:14px;line-height:1.43;margin:0}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}";
+/**
+ * Authenticate to Verdocs via user/password authentication
+ *
+ * ```typescript
+ * import {Auth} from '@verdocs/js-sdk/Auth';
+ * import {Transport} from '@verdocs/js-sdk/HTTP';
+ *
+ * const {accessToken} = await Auth.authenticateUser({ username: 'test@test.com', password: 'PASSWORD' });
+ * Transport.setAuthToken(accessToken);
+ * ```
+ */
+var authenticateUser = function (endpoint, params) {
+    return endpoint.api //
+        .post('/authentication/login', params)
+        .then(function (r) { return r.data; });
+};
+
+const verdocsAuthCss = "verdocs-auth{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-auth .login-form,verdocs-auth .signup-form{background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;padding:20px;width:300px;max-width:100%}verdocs-auth .logo{margin:20px 0 30px;width:128px;max-width:100%}verdocs-auth h3{text-align:center;font-weight:400;font-size:16px;line-height:1.75;margin:0}verdocs-auth h4{text-align:center;font-weight:400;font-size:14px;line-height:1.43;margin:0}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}";
 
-const BASE_URL = 'https://stage-api.verdocs.com/';
-const SOURCE = 'verdocs-stage';
 const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.authenticated = createEvent(this, "authenticated", 7);
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display
      * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may
@@ -40,18 +58,12 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.activeSession = null;
     this.loginError = null;
   }
-  componentWillLoad() {
-    const staging = new VerdocsEndpoint().setBaseURL(BASE_URL);
-    setActiveEndpoint(staging);
-    console.log('Set active endpoint', getEndpoint());
-  }
   componentDidLoad() {
-    const session = loadSession(SOURCE);
-    console.log('loaded session', session, SOURCE);
-    if (session !== null) {
+    this.endpoint.loadSession();
+    if (this.endpoint.session !== null) {
       this.isAuthenticated = true;
-      this.activeSession = session;
-      this.authenticated.emit({ authenticated: true, session });
+      this.activeSession = this.endpoint.session;
+      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
     }
     else {
       this.authenticated.emit({ authenticated: false, session: null });
@@ -63,19 +75,17 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   // }
   handleLogin() {
     this.loggingIn = true;
-    authenticateUser({ username: this.username, password: this.password })
+    authenticateUser(this.endpoint, { username: this.username, password: this.password })
       .then(r => {
       this.loggingIn = false;
-      console.log('Login result', r.accessToken);
-      const session = setSession(SOURCE, r.accessToken, true);
-      this.activeSession = session;
+      this.endpoint.setToken(r.accessToken);
+      this.activeSession = this.endpoint.session;
       this.isAuthenticated = true;
-      console.log('set session', session);
-      this.authenticated.emit({ authenticated: true, session });
+      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
     })
       .catch(e => {
       var _a;
-      console.log('Login error', e.response, JSON.stringify(e));
+      console.log('[VERDOCS] Login error', e.response, JSON.stringify(e));
       this.loggingIn = false;
       this.activeSession = null;
       this.authenticated.emit({ authenticated: false, session: null });
@@ -85,7 +95,7 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   handleLogout() {
-    // endSession(SOURCE);
+    this.endpoint.clearSession();
     this.isAuthenticated = false;
     this.authenticated.emit({ authenticated: false, session: null });
   }
@@ -109,6 +119,7 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   static get style() { return verdocsAuthCss; }
 }, [0, "verdocs-auth", {
+    "endpoint": [16],
     "visible": [4],
     "logo": [1],
     "debug": [4],

package/dist/components/verdocs-button2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const verdocsButtonCss = "verdocs-button button{font-family:\"Barlow\", 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 .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .label{padding:0 12px}verdocs-button button:disabled{cursor:none}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 .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 .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 .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 .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;cursor:none}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;cursor:none;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
+const verdocsButtonCss = "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 .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .label{padding:0 12px}verdocs-button button:disabled{cursor:none}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 .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 .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 .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 .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;cursor:none}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;cursor:none;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
 
 const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -37,7 +37,6 @@ const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.press.emit();
   }
   render() {
-    console.log('Rendering button', this.startIcon);
     return (h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e), class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { class: "label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
   }
   static get style() { return verdocsButtonCss; }

package/dist/components/verdocs-field-attachment2.js

@@ -7,7 +7,7 @@ const Paperclip = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill=
 </svg>
 `;
 
-const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Barlow\", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment span{width:20px;cursor:pointer}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment span{width:20px;cursor:pointer}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldAttachment = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-field-checkbox2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Barlow\", sans-serif;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";display:block;vertical-align:bottom;width:14px;height:14px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.2);-ms-flex-negative:0;flex-shrink:0}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:var(--verdocs-primary-color)}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:var(--verdocs-primary-color);border-color:var(--verdocs-primary-color)}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid var(--verdocs-required-color)}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";display:block;vertical-align:bottom;width:14px;height:14px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.2);-ms-flex-negative:0;flex-shrink:0}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:var(--verdocs-primary-color)}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:var(--verdocs-primary-color);border-color:var(--verdocs-primary-color)}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid var(--verdocs-required-color)}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-field-date2.js

@@ -2683,7 +2683,7 @@ class Datepicker {
   }
 }
 
-const verdocsFieldDateCss = ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{position:absolute;top:0;left:0;z-index:20;padding-top:4px}.datepicker-dropdown.datepicker-orient-top{padding-top:0;padding-bottom:4px}.datepicker-picker{display:inline-block;border-radius:4px;background-color:white}.datepicker-dropdown .datepicker-picker{-webkit-box-shadow:0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);box-shadow:0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1)}.datepicker-picker span{display:block;-ms-flex:1;flex:1;border:0;border-radius:4px;cursor:default;text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{-webkit-box-shadow:inset 0 1px 1px rgba(10, 10, 10, 0.1);box-shadow:inset 0 1px 1px rgba(10, 10, 10, 0.1);background-color:whitesmoke}.datepicker-grid,.datepicker-view .days-of-week,.datepicker-view,.datepicker-controls{display:-ms-flexbox;display:flex}.datepicker-grid{-ms-flex-wrap:wrap;flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{-ms-flex-preferred-size:14.2857142857%;flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{-ms-flex-preferred-size:25%;flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{-webkit-box-shadow:inset 0 -1px 1px rgba(10, 10, 10, 0.1);box-shadow:inset 0 -1px 1px rgba(10, 10, 10, 0.1);background-color:whitesmoke;padding:0.375rem 0.75rem;text-align:center;font-weight:700}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;border:1px solid #dbdbdb;border-radius:4px;-webkit-box-shadow:none;box-shadow:none;background-color:white;cursor:pointer;padding:calc(0.375em - 1px) 0.75em;height:2.25em;vertical-align:top;text-align:center;line-height:1.5;white-space:nowrap;color:#363636;font-size:1rem}.datepicker-controls .button:focus,.datepicker-controls .button:active{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){-webkit-box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25);box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25)}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:bold}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){-webkit-box-shadow:0 0 0 0.125em rgba(255, 255, 255, 0.25);box-shadow:0 0 0 0.125em rgba(255, 255, 255, 0.25)}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{-webkit-box-shadow:none;box-shadow:none}.datepicker-footer .datepicker-controls .button{margin:calc(0.375rem - 1px) 0.375rem;border-radius:2px;width:100%;font-size:0.75rem}.datepicker-controls .view-switch{-ms-flex:auto;flex:auto}.datepicker-controls .prev-btn,.datepicker-controls .next-btn{padding-right:0.375rem;padding-left:0.375rem;width:2.25rem}.datepicker-controls .prev-btn.disabled,.datepicker-controls .next-btn.disabled{visibility:hidden}.datepicker-view .dow{height:1.5rem;line-height:1.5rem;font-size:0.875rem;font-weight:700}.datepicker-view .week{width:2.25rem;color:#b5b5b5;font-size:0.75rem}@media (max-width: 22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width: 22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.prev:not(.disabled),.datepicker-cell.next:not(.disabled){color:#7a7a7a}.datepicker-cell.prev.selected,.datepicker-cell.next.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){border-radius:0;background-color:whitesmoke}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eeeeee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{border-radius:0;background-color:#dbdbdb}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:focus,.datepicker-input.in-edit:active{-webkit-box-shadow:0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);box-shadow:0 0 0.25em 0.25em rgba(35, 102, 209, 0.2)}verdocs-field-date{font-family:\"Barlow\", sans-serif;width:64px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-date input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid #ccc;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-date input.hide{display:none}verdocs-field-date.required input{border:1px solid var(--verdocs-required-color)}verdocs-field-date.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldDateCss = ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{position:absolute;top:0;left:0;z-index:20;padding-top:4px}.datepicker-dropdown.datepicker-orient-top{padding-top:0;padding-bottom:4px}.datepicker-picker{display:inline-block;border-radius:4px;background-color:white}.datepicker-dropdown .datepicker-picker{-webkit-box-shadow:0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);box-shadow:0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1)}.datepicker-picker span{display:block;-ms-flex:1;flex:1;border:0;border-radius:4px;cursor:default;text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{-webkit-box-shadow:inset 0 1px 1px rgba(10, 10, 10, 0.1);box-shadow:inset 0 1px 1px rgba(10, 10, 10, 0.1);background-color:whitesmoke}.datepicker-grid,.datepicker-view .days-of-week,.datepicker-view,.datepicker-controls{display:-ms-flexbox;display:flex}.datepicker-grid{-ms-flex-wrap:wrap;flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{-ms-flex-preferred-size:14.2857142857%;flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{-ms-flex-preferred-size:25%;flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{-webkit-box-shadow:inset 0 -1px 1px rgba(10, 10, 10, 0.1);box-shadow:inset 0 -1px 1px rgba(10, 10, 10, 0.1);background-color:whitesmoke;padding:0.375rem 0.75rem;text-align:center;font-weight:700}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;border:1px solid #dbdbdb;border-radius:4px;-webkit-box-shadow:none;box-shadow:none;background-color:white;cursor:pointer;padding:calc(0.375em - 1px) 0.75em;height:2.25em;vertical-align:top;text-align:center;line-height:1.5;white-space:nowrap;color:#363636;font-size:1rem}.datepicker-controls .button:focus,.datepicker-controls .button:active{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){-webkit-box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25);box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25)}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:bold}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){-webkit-box-shadow:0 0 0 0.125em rgba(255, 255, 255, 0.25);box-shadow:0 0 0 0.125em rgba(255, 255, 255, 0.25)}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{-webkit-box-shadow:none;box-shadow:none}.datepicker-footer .datepicker-controls .button{margin:calc(0.375rem - 1px) 0.375rem;border-radius:2px;width:100%;font-size:0.75rem}.datepicker-controls .view-switch{-ms-flex:auto;flex:auto}.datepicker-controls .prev-btn,.datepicker-controls .next-btn{padding-right:0.375rem;padding-left:0.375rem;width:2.25rem}.datepicker-controls .prev-btn.disabled,.datepicker-controls .next-btn.disabled{visibility:hidden}.datepicker-view .dow{height:1.5rem;line-height:1.5rem;font-size:0.875rem;font-weight:700}.datepicker-view .week{width:2.25rem;color:#b5b5b5;font-size:0.75rem}@media (max-width: 22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width: 22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.prev:not(.disabled),.datepicker-cell.next:not(.disabled){color:#7a7a7a}.datepicker-cell.prev.selected,.datepicker-cell.next.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){border-radius:0;background-color:whitesmoke}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eeeeee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{border-radius:0;background-color:#dbdbdb}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:focus,.datepicker-input.in-edit:active{-webkit-box-shadow:0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);box-shadow:0 0 0.25em 0.25em rgba(35, 102, 209, 0.2)}verdocs-field-date{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:64px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-date input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid #ccc;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-date input.hide{display:none}verdocs-field-date.required input{border:1px solid var(--verdocs-required-color)}verdocs-field-date.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldDate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {

package/dist/components/verdocs-field-dropdown2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Barlow\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid var(--verdocs-required-color)}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid var(--verdocs-required-color)}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-field-initial2.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-initial-dialog2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
-const verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Barlow\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid var(--verdocs-required-color)}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid var(--verdocs-required-color)}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-field-payment2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Barlow\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldPayment = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-field-radio-button2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Barlow\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:\"\";background:#f4f4f4;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.2);display:inline-block;width:13px;height:13px;position:relative;top:2px;margin-right:2px;vertical-align:top;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f4f4f4;box-shadow:inset 0 0 0 2px #f4f4f4}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f4f4f4;box-shadow:inset 0 0 0 4px #f4f4f4;border-color:#b4b4b4;background:#b4b4b4}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid var(--verdocs-required-color)}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:\"\";background:#f4f4f4;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.2);display:inline-block;width:13px;height:13px;position:relative;top:2px;margin-right:2px;vertical-align:top;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f4f4f4;box-shadow:inset 0 0 0 2px #f4f4f4}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f4f4f4;box-shadow:inset 0 0 0 4px #f4f4f4;border-color:#b4b4b4;background:#b4b4b4}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid var(--verdocs-required-color)}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldRadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-field-signature2.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-signature-dialog2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
-const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Barlow\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid var(--verdocs-required-color)}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid var(--verdocs-required-color)}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-field-textarea2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Barlow\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid var(--verdocs-required-color)}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid var(--verdocs-required-color)}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-field-textbox2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Barlow\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textbox input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid var(--verdocs-required-color)}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textbox input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid var(--verdocs-required-color)}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
 const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -7,7 +7,7 @@ const Question = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xm
 </svg>
 `;
 
-const verdocsKbaDialogCss = "verdocs-kba-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-kba-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-kba-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-kba-dialog .dialog{width:440px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#fff;padding:16px;-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)}verdocs-kba-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-kba-dialog .step{margin-left:6px;color:#666}verdocs-kba-dialog .help-box{background-color:#707ae5;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:14px 0;padding:14px;-ms-flex-align:center;align-items:center;color:white}verdocs-kba-dialog .help-details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:15px;font-size:14px}verdocs-kba-dialog .help-icon{width:40px;height:40px}verdocs-kba-dialog .help-title{font-weight:600;margin-bottom:4px}verdocs-kba-dialog .help-text{font-weight:400}verdocs-kba-dialog .choices{display:grid;gap:15px;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));margin:0 0 15px 0}verdocs-kba-dialog .choice{border:#707ae5;border-radius:5px;display:-ms-flexbox;display:flex;height:60px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;color:#5c6575;cursor:pointer}verdocs-kba-dialog .choice.selected{background-color:#707ae5;color:#ffffff}verdocs-kba-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-kba-dialog .buttons verdocs-button{margin-left:16px}";
+const verdocsKbaDialogCss = "verdocs-kba-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-kba-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-kba-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-kba-dialog .dialog{width:440px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#fff;padding:16px;-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)}verdocs-kba-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-kba-dialog .step{margin-left:6px;color:#666}verdocs-kba-dialog .help-box{background-color:#707ae5;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:14px 0;padding:14px;-ms-flex-align:center;align-items:center;color:white}verdocs-kba-dialog .help-details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:15px;font-size:14px}verdocs-kba-dialog .help-icon{width:40px;height:40px}verdocs-kba-dialog .help-title{font-weight:600;margin-bottom:4px}verdocs-kba-dialog .help-text{font-weight:400}verdocs-kba-dialog .choices{display:grid;gap:15px;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));margin:0 0 15px 0}verdocs-kba-dialog .choice{border:1px solid #707ae5;border-radius:5px;display:-ms-flexbox;display:flex;height:60px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;color:#5c6575;cursor:pointer}verdocs-kba-dialog .choice.selected{background-color:#707ae5;color:#ffffff}verdocs-kba-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-kba-dialog .buttons verdocs-button{margin-left:16px}";
 
 const VerdocsKbaDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-ok-dialog2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
 
-const verdocsOkDialogCss = "verdocs-ok-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-ok-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-ok-dialog .dialog{max-width:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;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)}verdocs-ok-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;-ms-flex-direction:row;flex-direction:row;background:#444444;padding:8px 16px;color:#ffffff}verdocs-ok-dialog .content{font-size:14px;background:#ffffff;padding:20px}verdocs-ok-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-ok-dialog .buttons verdocs-button{margin-left:16px}";
+const verdocsOkDialogCss = "verdocs-ok-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-ok-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-ok-dialog .dialog{max-width:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;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)}verdocs-ok-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;-ms-flex-direction:row;flex-direction:row;background:#444444;padding:8px 16px;color:#ffffff}verdocs-ok-dialog .content{font-size:16px;background:#ffffff;padding:20px}verdocs-ok-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-ok-dialog .buttons verdocs-button{margin-left:16px}";
 
 const VerdocsOkDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 
 const TemplateIcon = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><g><path d="M19,5v14H5V5H19 M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3z"/></g><path d="M14,17H7v-2h7V17z M17,13H7v-2h10V13z M17,9H7V7h10V9z"/></g></svg>`;
 
 const DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>`;
 
-const verdocsQuickFunctionsCss = "verdocs-quick-functions{font-family:\"Barlow\", sans-serif}verdocs-quick-functions .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:var(--verdocs-background-dark);text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}verdocs-quick-functions .title{font-size:22px;font-weight:700;line-height:30px;margin:1em 0 40px 0}verdocs-quick-functions button{width:140px;height:40px;border:none;display:-ms-flexbox;display:flex;color:#ffffff;cursor:pointer;font-size:14px;font-weight:700;line-height:25px;-ms-flex-align:center;align-items:center;margin-bottom:20px;border-radius:5px;text-transform:uppercase;-ms-flex-pack:space-evenly;justify-content:space-evenly;background-color:#50be50}verdocs-quick-functions button svg{fill:#ffffff}";
+const verdocsQuickFunctionsCss = "verdocs-quick-functions{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-quick-functions .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:var(--verdocs-background-dark);text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}verdocs-quick-functions .title{font-size:22px;font-weight:700;line-height:30px;margin:1em 0 40px 0}verdocs-quick-functions button{width:140px;height:40px;border:none;display:-ms-flexbox;display:flex;color:#ffffff;cursor:pointer;font-size:14px;font-weight:700;line-height:25px;-ms-flex-align:center;align-items:center;margin-bottom:20px;border-radius:5px;text-transform:uppercase;-ms-flex-pack:space-evenly;justify-content:space-evenly;background-color:#50be50}verdocs-quick-functions button svg{fill:#ffffff}";
 
 const VerdocsQuickFunctions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,6 +13,10 @@ const VerdocsQuickFunctions$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.__registerHost();
     this.createTemplate = createEvent(this, "createTemplate", 7);
     this.createDocument = createEvent(this, "createDocument", 7);
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
   }
   handleCreateTemplate() {
     this.createTemplate.emit();
@@ -23,7 +28,9 @@ const VerdocsQuickFunctions$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     return (h("div", { class: "container" }, h("p", { class: "title" }, "Quick Create"), h("button", { onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
   }
   static get style() { return verdocsQuickFunctionsCss; }
-}, [0, "verdocs-quick-functions"]);
+}, [0, "verdocs-quick-functions", {
+    "endpoint": [16]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/verdocs-search-activity2.js

@@ -1,6 +1,29 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loadSession } from './Auth.js';
-import { g as getEndpoint } from './Token.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+
+/**
+ * A Template defines how a Verdocs signing flow will be performed, including attachments, signing fields, and
+ * recipients.
+ *
+ * @module
+ */
+/**
+ * Get all templates accessible by the caller, with optional filters.
+ *
+ * ```typescript
+ * import {Templates} from '@verdocs/js-sdk/Templates';
+ *
+ * await Templates.getTemplates();
+ * await Templates.getTemplates({ is_starred: true });
+ * await Templates.getTemplates({ is_creator: true });
+ * await Templates.getTemplates({ is_organization: true });
+ * ```
+ */
+var getTemplates = function (endpoint, params) {
+    return endpoint.api //
+        .get('/templates/', { params: params })
+        .then(function (r) { return r.data; });
+};
 
 /**
  * Verdocs provides a range of search functions to help find and retrieve content. This module provides generic functions intended
@@ -55,48 +78,27 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
  * const {recent, saved} = await Content.getSearchHistory();
  * ```
  */
-var getSearchHistory = function () { return __awaiter(void 0, void 0, void 0, function () {
+var getSearchHistory = function (endpoint) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
-        return [2 /*return*/, getEndpoint()
-                .api.get('/search/history')
+        return [2 /*return*/, endpoint.api //
+                .get('/search/history')
                 .then(function (r) { return r.data; })];
     });
 }); };
 
-/**
- * A Template defines how a Verdocs signing flow will be performed, including attachments, signing fields, and
- * recipients.
- *
- * @module
- */
-/**
- * Get all templates accessible by the caller, with optional filters.
- *
- * ```typescript
- * import {Templates} from '@verdocs/js-sdk/Templates';
- *
- * await Templates.getTemplates();
- * await Templates.getTemplates({ is_starred: true });
- * await Templates.getTemplates({ is_creator: true });
- * await Templates.getTemplates({ is_organization: true });
- * ```
- */
-var getTemplates = function (params) {
-    return getEndpoint()
-        .api.get('/templates/', { params: params })
-        .then(function (r) { return r.data; });
-};
-
 const DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>`;
 
-const verdocsSearchActivityCss = "verdocs-search-activity{font-family:\"Barlow\", sans-serif}verdocs-search-activity .container{display:-ms-flexbox;display:flex;width:240px;color:#ffffff;-ms-flex-direction:column;flex-direction:column;text-transform:uppercase;padding:10px 10px 20px 10px;background-color:var(--verdocs-background-dark)}verdocs-search-activity .title{font-size:22px;font-weight:700;line-height:30px}verdocs-search-activity .items{display:-ms-flexbox;display:flex;margin-top:20px;-ms-flex-direction:column;flex-direction:column}verdocs-search-activity .item{border:none;display:-ms-flexbox;display:flex;text-align:left;margin-bottom:20px;-ms-flex-direction:row;flex-direction:row;background:transparent}verdocs-search-activity .item:hover{cursor:pointer}verdocs-search-activity .icon{-ms-flex:0 0 22px;flex:0 0 22px;margin-right:14px}verdocs-search-activity .icon svg{fill:#707ae5;width:22px;height:22px}verdocs-search-activity .details{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:column;flex-direction:column}verdocs-search-activity .item-title{font-size:16px;font-weight:400;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-search-activity .info{font-size:14px;font-weight:500;line-height:23px;color:#aeb4bf}verdocs-search-activity .empty{text-transform:none;line-height:22px;color:#ccc}";
+const verdocsSearchActivityCss = "verdocs-search-activity{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-search-activity .container{display:-ms-flexbox;display:flex;width:240px;color:#ffffff;-ms-flex-direction:column;flex-direction:column;text-transform:uppercase;padding:10px 10px 20px 10px;background-color:var(--verdocs-background-dark)}verdocs-search-activity .title{font-size:22px;font-weight:700;line-height:30px}verdocs-search-activity .items{display:-ms-flexbox;display:flex;margin-top:20px;-ms-flex-direction:column;flex-direction:column}verdocs-search-activity .item{border:none;display:-ms-flexbox;display:flex;text-align:left;margin-bottom:20px;-ms-flex-direction:row;flex-direction:row;background:transparent}verdocs-search-activity .item:hover{cursor:pointer}verdocs-search-activity .icon{-ms-flex:0 0 22px;flex:0 0 22px;margin-right:14px}verdocs-search-activity .icon svg{fill:#707ae5;width:22px;height:22px}verdocs-search-activity .details{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:column;flex-direction:column}verdocs-search-activity .item-title{font-size:16px;font-weight:400;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-search-activity .info{font-size:14px;font-weight:500;line-height:23px;color:#aeb4bf}verdocs-search-activity .empty{text-transform:none;line-height:22px;color:#ccc}";
 
-const SOURCE = 'verdocs-stage';
 const VerdocsSearchActivity = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.entrySelected = createEvent(this, "entrySelected", 7);
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     this.type = 'recent';
     this.emptyMessage = 'You do not have any starred searches.';
     this.authFailure = false;
@@ -106,7 +108,7 @@ const VerdocsSearchActivity = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.starred = [];
   }
   componentWillLoad() {
-    loadSession(SOURCE);
+    this.endpoint.loadSession();
     const errorHandler = e => {
       var _a;
       console.warn('[Verdocs/search-activity] Error getting search data', e);
@@ -118,21 +120,21 @@ const VerdocsSearchActivity = /*@__PURE__*/ proxyCustomElement(class extends HTM
       case 'recent':
         this.title = 'Recent Searches';
         this.emptyMessage = 'You do not have any recent searches.';
-        getSearchHistory()
+        getSearchHistory(this.endpoint)
           .then(r => (this.recent = r.recent))
           .catch(errorHandler);
         break;
       case 'saved':
         this.title = 'Saved Searches';
         this.emptyMessage = 'You do not have any saved searches.';
-        getSearchHistory()
+        getSearchHistory(this.endpoint)
           .then(r => (this.saved = r.saved))
           .catch(errorHandler);
         break;
       case 'starred':
         this.title = 'My Starred items';
         this.emptyMessage = 'You do not have any starred templates.';
-        getTemplates({ is_starred: true })
+        getTemplates(this.endpoint, { is_starred: true })
           .then(r => (this.starred = r))
           .catch(errorHandler);
         break;
@@ -166,6 +168,7 @@ const VerdocsSearchActivity = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   static get style() { return verdocsSearchActivityCss; }
 }, [0, "verdocs-search-activity", {
+    "endpoint": [16],
     "type": [1],
     "options": [8],
     "emptyMessage": [32],

package/dist/components/verdocs-search-box2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 
 const SearchIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M23.4809 20.7176L17.9111 15.2536C19.0961 13.6368 19.727 11.6926 19.7128 9.70131C19.7201 7.53345 18.9846 5.42606 17.6244 3.71753C16.2642 2.009 14.3581 0.798456 12.2123 0.280282C10.0665 -0.237892 7.80552 -0.0336342 5.79227 0.86026C3.77902 1.75415 2.13038 3.28582 1.1111 5.20931C0.0918114 7.1328 -0.238985 9.33652 0.171813 11.4666C0.582612 13.5967 1.71117 15.5296 3.37628 16.9548C5.0414 18.3801 7.14646 19.2151 9.35344 19.3257C11.5604 19.4364 13.7413 18.8162 15.5458 17.5649L21.1372 23.05L21.1563 23.0663C21.4841 23.3487 21.9039 23.507 22.3401 23.5128C22.7823 23.5125 23.2063 23.3402 23.5191 23.0337V23.0337C23.6749 22.8812 23.7979 22.6995 23.8804 22.4993C23.963 22.2991 24.0036 22.0847 23.9997 21.8688C23.9959 21.6529 23.9477 21.44 23.858 21.2428C23.7683 21.0456 23.639 20.8682 23.4778 20.7212L23.4809 20.7176ZM14.5167 14.1975C13.4564 15.2349 12.0623 15.8797 10.5719 16.022C9.08145 16.1644 7.58681 15.7955 6.34249 14.9781C5.09816 14.1608 4.18109 12.9456 3.74751 11.5395C3.31393 10.1334 3.39064 8.6233 3.96455 7.26643C4.53846 5.90955 5.57409 4.7898 6.89507 4.09787C8.21606 3.40594 9.74071 3.18461 11.2093 3.4716C12.678 3.75858 13.9998 4.53612 14.9497 5.6718C15.8996 6.80748 16.4188 8.23105 16.4189 9.7001C16.4196 10.5357 16.2519 11.3632 15.9254 12.135C15.599 12.9069 15.1202 13.6078 14.5167 14.1975V14.1975Z" fill="white"/>
@@ -10,7 +11,7 @@ const CloseIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" x
 </svg>
 `;
 
-const verdocsSearchBoxCss = "verdocs-search-box{font-family:\"Barlow\", sans-serif}verdocs-search-box form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:45px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0 0;border-radius:5px;-ms-flex-align:center;align-items:center;background-color:#fff;padding:0 8px;border-width:1px;border-style:solid;border-color:var(--verdocs-container-border-color)}verdocs-search-box form input{-webkit-box-sizing:border-box;box-sizing:border-box;height:43px;width:100%;font-size:18px;border:none}verdocs-search-box form input:focus{outline:none}verdocs-search-box form button.search{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:none;width:100px;height:28px;font-weight:700;font-size:10px;letter-spacing:1px;background-color:#50be80;text-transform:uppercase;color:#fff}verdocs-search-box form .type{background-color:#707ae5;height:30px;display:-ms-inline-flexbox;display:inline-flex;padding:1px 0 2px 10px;font-size:13px;line-height:16px;border-radius:4px;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#fff;margin-right:10px}verdocs-search-box form .type button{border:none;color:#fff;margin:5px 0 0 8px;background:transparent}verdocs-search-box form svg{width:12px;height:12px;margin-right:6px}verdocs-search-box ::-webkit-input-placeholder{color:#aeb4bf}verdocs-search-box ::-moz-placeholder{color:#aeb4bf}verdocs-search-box :-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::placeholder{color:#aeb4bf}";
+const verdocsSearchBoxCss = "verdocs-search-box{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-search-box form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:45px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0 0;border-radius:5px;-ms-flex-align:center;align-items:center;background-color:#fff;padding:0 8px;border-width:1px;border-style:solid;border-color:var(--verdocs-container-border-color)}verdocs-search-box form input{-webkit-box-sizing:border-box;box-sizing:border-box;height:43px;width:100%;font-size:18px;border:none}verdocs-search-box form input:focus{outline:none}verdocs-search-box form button.search{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:none;width:100px;height:28px;font-weight:700;font-size:10px;letter-spacing:1px;background-color:#50be80;text-transform:uppercase;color:#fff}verdocs-search-box form .type{background-color:#707ae5;height:30px;display:-ms-inline-flexbox;display:inline-flex;padding:1px 0 2px 10px;font-size:13px;line-height:16px;border-radius:4px;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#fff;margin-right:10px}verdocs-search-box form .type button{border:none;color:#fff;margin:5px 0 0 8px;background:transparent}verdocs-search-box form svg{width:12px;height:12px;margin-right:6px}verdocs-search-box ::-webkit-input-placeholder{color:#aeb4bf}verdocs-search-box ::-moz-placeholder{color:#aeb4bf}verdocs-search-box :-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::placeholder{color:#aeb4bf}";
 
 const VerdocsSearchBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,6 +20,10 @@ const VerdocsSearchBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.searchClicked = createEvent(this, "searchClicked", 7);
     this.typeChanged = createEvent(this, "typeChanged", 7);
     this.queryChanged = createEvent(this, "queryChanged", 7);
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * The placeholder to display in the input field.
      */
@@ -53,6 +58,7 @@ const VerdocsSearchBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   static get style() { return verdocsSearchBoxCss; }
 }, [0, "verdocs-search-box", {
+    "endpoint": [16],
     "placeholder": [1],
     "type": [1],
     "query": [1]

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const verdocsSearchTabsCss = "verdocs-search-tabs{font-family:\"Barlow\", sans-serif;display:block}";
+const verdocsSearchTabsCss = "verdocs-search-tabs{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:block}";
 
 const VerdocsSearchTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-search.js

@@ -1,19 +1,26 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { d as defineCustomElement$3 } from './verdocs-search-activity2.js';
 import { d as defineCustomElement$2 } from './verdocs-search-box2.js';
 
-const verdocsSearchCss = "verdocs-search{font-family:\"Barlow\", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";
+const verdocsSearchCss = "verdocs-search{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";
 
 const VerdocsSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    /**
+     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+     */
+    this.endpoint = VerdocsEndpoint.getDefault();
   }
   render() {
-    return (h("div", { class: "container" }, h("verdocs-search-box", null), h("div", { class: "boxes" }, h("verdocs-search-activity", { type: "recent" }), h("verdocs-search-activity", { type: "saved" }), h("verdocs-search-activity", { type: "starred" }), h("search-quick-functions", null))));
+    return (h("div", { class: "container" }, h("verdocs-search-box", { endpoint: this.endpoint }), h("div", { class: "boxes" }, h("verdocs-search-activity", { type: "recent", endpoint: this.endpoint }), h("verdocs-search-activity", { type: "saved", endpoint: this.endpoint }), h("verdocs-search-activity", { type: "starred", endpoint: this.endpoint }), h("search-quick-functions", { endpoint: this.endpoint }))));
   }
   static get style() { return verdocsSearchCss; }
-}, [0, "verdocs-search"]);
+}, [0, "verdocs-search", {
+    "endpoint": [16]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;