@verdocs/web-sdk 1.0.12 → 1.0.15

package/dist/custom-elements/index.js

@@ -1,4 +1,4 @@
-import { attachShadow, h, createEvent, Host, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
+import { h, createEvent, Host, attachShadow, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
 const CancelledIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>`;
@@ -9,13 +9,12 @@ const FinishedIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" view
 
 const PendingIcon = `<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="#ffffff"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.42,0-8-3.58-8-8 c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"/><circle cx="7" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="17" cy="12" r="1.5"/></g></g></svg>`;
 
-const documentStatusIndicatorCss = ".container{width:195px;height:72px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#33364b;font-family:sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;font-size:16px;color:#ffffff}.icon{margin-right:15px}svg{height:24px;width:24px}";
+const documentStatusIndicatorCss = "document-status-indicator{font-family:sans-serif;font-family:var(--verdocs-font)}document-status-indicator .container{width:195px;height:72px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#33364b;font-family:sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;font-size:16px;color:#ffffff}document-status-indicator .icon{margin-right:15px}document-status-indicator svg{height:24px;width:24px}";
 
 let DocumentStatusIndicator$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
   }
   render() {
     let icon;
@@ -1796,13 +1795,12 @@ var createPopper = /*#__PURE__*/popperGenerator({
 const SortDown = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>
 `;
 
-const dropdownMenuCss = ":host{display:block;position:relative}:host([tall]){height:160px}.arrow{width:32px;height:26px;background:#fff;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #ccc;-ms-flex-pack:center;justify-content:center}.arrow svg{fill:#50be80;-webkit-transition:0.3s;transition:0.3s}.items{width:200px;display:none;border-radius:5px;background:#33364b;border:1px solid #654dcb}.items[data-show]{display:block}.option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}.option:hover{cursor:pointer;background:#50be80}.option[disabled]{color:#aaa}.option[disabled]:hover{color:#aaa;cursor:inherit;background:transparent}.open .items{display:block}.open .arrow{background:#4c56cb;border:1px solid #707ae5}.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";
+const dropdownMenuCss = "dropdown-menu{font-family:sans-serif;font-family:var(--verdocs-font)}dropdown-menu .arrow{width:32px;height:26px;background:#fff;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #ccc;-ms-flex-pack:center;justify-content:center}dropdown-menu .arrow svg{fill:#50be80;-webkit-transition:0.3s;transition:0.3s}dropdown-menu .items{width:200px;display:none;border-radius:5px;background:#33364b;border:1px solid #654dcb}dropdown-menu .items[data-show]{display:block}dropdown-menu .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}dropdown-menu .option:hover{cursor:pointer;background:#50be80}dropdown-menu .option[disabled]{color:#aaa}dropdown-menu .option[disabled]:hover{color:#aaa;cursor:inherit;background:transparent}dropdown-menu .open .items{display:block}dropdown-menu .open .arrow{background:#4c56cb;border:1px solid #707ae5}dropdown-menu .open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";
 
 let DropdownMenu$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
     this.optionSelected = createEvent(this, "optionSelected", 7);
     /**
      * The menu options to display.
@@ -1859,13 +1857,12 @@ let DropdownMenu$1 = class extends HTMLElement {
 
 const UserGroup = `<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="#ffffff"><rect fill="none" height="24" width="24"/><g><path d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"/></g></svg>`;
 
-const orgPopupCss = ":host{display:block}.container{width:242px;height:64px;background-color:#33364b;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.container:hover>.popup{display:-ms-flexbox;display:flex;background:#ffffff;color:#33364b}.icon{-ms-flex:1;flex:1;margin-left:15px;margin-right:0px}.icon svg{width:24px;margin-bottom:-5px}.content{color:#fff;-ms-flex:4;flex:4;font-family:sans-serif}.popup{position:absolute;top:-1px;left:-4px;display:none;border:1px solid #1e2031;border-radius:10px;width:326px;height:220px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:space-evenly;justify-content:space-evenly;font-family:sans-serif}.popup-header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;width:242px;height:69px;-ms-flex-pack:justify;justify-content:space-between;font-size:21px;color:#4c56cb}.popup-body{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;width:256.2px;height:95px;-ms-flex-pack:space-evenly;justify-content:space-evenly;font-size:13px;text-transform:uppercase}.popup-body span{display:block;-ms-flex:2 80px;flex:2 80px;margin-left:7px}.popup-body span:last-child{margin-top:5px}.status{width:29px;height:29px;background-color:#aeb4bf;border-radius:50%}";
+const orgPopupCss = "org-popup{font-family:sans-serif;font-family:var(--verdocs-font)}org-popup .container{width:242px;height:64px;background-color:#33364b;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}org-popup .container:hover>.popup{display:-ms-flexbox;display:flex;background:#ffffff;color:#33364b}org-popup .icon{-ms-flex:1;flex:1;margin-left:15px;margin-right:0px}org-popup .icon svg{width:24px;margin-bottom:-5px}org-popup .content{color:#fff;-ms-flex:4;flex:4;font-family:sans-serif}org-popup .popup{position:absolute;top:-1px;left:-4px;display:none;border:1px solid var(--verdocs-background-dark);border-radius:10px;width:326px;height:220px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:space-evenly;justify-content:space-evenly;font-family:sans-serif}org-popup .popup-header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;width:242px;height:69px;-ms-flex-pack:justify;justify-content:space-between;font-size:21px;color:#4c56cb}org-popup .popup-body{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;width:256.2px;height:95px;-ms-flex-pack:space-evenly;justify-content:space-evenly;font-size:13px;text-transform:uppercase}org-popup .popup-body span{display:block;-ms-flex:2 80px;flex:2 80px;margin-left:7px}org-popup .popup-body span:last-child{margin-top:5px}org-popup .status{width:29px;height:29px;background-color:#aeb4bf;border-radius:50%}";
 
 let OrgPopup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
   }
   render() {
     var _a, _b, _c, _d, _e, _f;
@@ -15349,17 +15346,20 @@ const integerSequence = (start, count) => Array(count)
   .fill(1)
   .map((_, index) => index + start);
 
-const pdfViewerCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}button.test{color:#fff;cursor:pointer;padding:5px 10px;border-radius:4px;background:#5a5767;border:1px solid #ccc}#pdf-container canvas{max-width:100%}";
+const pdfViewerCss = "pdf-viewer{font-family:sans-serif;font-family:var(--verdocs-font);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pdf-viewer button.test{color:#fff;cursor:pointer;padding:5px 10px;border-radius:4px;background:#5a5767;border:1px solid #ccc}pdf-viewer #pdf-container canvas{max-width:100%}";
 
 const PDF_WORKER_URL = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdf.version}/pdf.worker.min.js`;
 const CMAPS_URL = `https://unpkg.com/pdfjs-dist@${pdf.version}/cmaps/`;
 // https://unpkg.com/pdfjs-dist@2.0.550/cmaps/78-EUC-H.bcmap
 console.log('[PDFVIEWER] Loading PDF-JS', { PDF_WORKER_URL, CMAPS_URL });
+// pdf.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
+// pdf.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJSversion}/pdf.worker.min.js`;
+// TODO: Re-enable this
+pdf$1.GlobalWorkerOptions.workerSrc = PDF_WORKER_URL;
 let PdfViewer$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
     this.pageRendered = createEvent(this, "pageRendered", 7);
     this.pageChange = createEvent(this, "pageChange", 7);
     // private canvas: HTMLCanvasElement;
@@ -15545,16 +15545,34 @@ let PdfViewer$1 = class extends HTMLElement {
   static get style() { return pdfViewerCss; }
 };
 
-const searchBoxCss = ":host{display:block}";
+const SearchIcon$2 = `<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"/>
+</svg>
+`;
+
+const CloseIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0739 11.7565L19.7127 6.23228C20.0875 5.85692 20.0875 5.25309 19.7127 4.87773L19.0213 4.20046C18.6382 3.82511 18.0219 3.82511 17.6387 4.20046L12 9.72472L6.36127 4.20046C5.97814 3.82511 5.36179 3.82511 4.97866 4.20046L4.28735 4.87773C3.90422 5.25309 3.90422 5.85692 4.28735 6.23228L9.92608 11.7565L4.28735 17.2808C3.90422 17.6561 3.90422 18.26 4.28735 18.6353L4.97866 19.3126C5.36179 19.688 5.97814 19.688 6.36127 19.3126L12 13.7883L17.6387 19.3126C18.0219 19.688 18.6382 19.688 19.0213 19.3126L19.7127 18.6353C20.0958 18.26 20.0958 17.6561 19.7127 17.2808L14.0739 11.7565Z" fill="white"/>
+</svg>
+`;
+
+const searchBoxCss = "search-box{font-family:sans-serif;font-family:var(--verdocs-font)}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)}search-box form input{-webkit-box-sizing:border-box;box-sizing:border-box;height:43px;width:100%;font-size:18px;border:none}search-box form button.search{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}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}search-box form .type button{border:none;color:#fff;margin:5px 0 0 8px;background:transparent}search-box form svg{width:12px;height:12px;margin-right:6px}search-box ::-webkit-input-placeholder{color:#aeb4bf}search-box ::-moz-placeholder{color:#aeb4bf}search-box :-ms-input-placeholder{color:#aeb4bf}search-box ::-ms-input-placeholder{color:#aeb4bf}search-box ::placeholder{color:#aeb4bf}";
 
 let SearchBox$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.search = createEvent(this, "search", 7);
+    this.type = 'all';
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    this.search.emit({ type: this.type, q: this.q });
+  }
+  handleChange(event) {
+    this.q = event.target.value;
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, null, h("form", { onSubmit: e => this.handleSubmit(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" }, this.type, "s ", h("button", { class: "remove", innerHTML: CloseIcon }))), h("input", { type: "text", placeholder: "search documents, templates, people...", value: this.q, onInput: e => this.handleChange(e) }), h("button", { onClick: e => this.handleSubmit(e), class: "search" }, h("span", { innerHTML: SearchIcon$2 }), "Search"))));
   }
   static get style() { return searchBoxCss; }
 };
@@ -15577,13 +15595,12 @@ const TemplateIcon = `<svg xmlns="http://www.w3.org/2000/svg" enable-background=
 
 const DocumentIcon$1 = `<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 searchQuickFunctionsCss = ":host{display:block}.container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:#1e2031;text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}.title{font-size:22px;font-weight:700;line-height:30px;margin:1em 0 40px 0}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}button svg{fill:#ffffff}";
+const searchQuickFunctionsCss = "search-quick-functions{font-family:sans-serif;font-family:var(--verdocs-font)}search-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}search-quick-functions .title{font-size:22px;font-weight:700;line-height:30px;margin:1em 0 40px 0}search-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}search-quick-functions button svg{fill:#ffffff}";
 
 let SearchQuickFunctions$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
     this.createTemplate = createEvent(this, "createTemplate", 7);
     this.createDocument = createEvent(this, "createDocument", 7);
   }
@@ -17404,12 +17421,25 @@ axios_1.default = _default;
 
 var axios = axios_1;
 
+var TRACE_ID = '' + Math.floor(Math.random() * 100000);
+// tslint:disable-next-line
+console.log('[JS-SDK Loaded]', TRACE_ID);
+// console.log('[JS-SDK Loaded]', TRACE_ID, import.meta.url);
 var config = {
     baseURL: 'https://api.verdocs.com/',
     timeout: 3000,
     headers: { 'X-Client-ID': 'NONE' },
 };
-var endpoint = axios.create(config);
+var recreateEndpoint = function () {
+    endpoint = axios.create(config);
+    endpoint.interceptors.request.use(function (r) {
+        // tslint:disable-next-line
+        console.log("[JS-SDK] " + TRACE_ID + " :: " + r.method.toUpperCase() + "  " + r.url, JSON.stringify(r.data), JSON.stringify(r.headers));
+        return r;
+    });
+};
+var endpoint;
+recreateEndpoint();
 /**
  * Helper to get the endpoint for direct access to HTTP functions.
  *
@@ -17421,7 +17451,7 @@ var endpoint = axios.create(config);
  */
 var getEndpoint = function () {
     if (!endpoint) {
-        endpoint = axios.create(config);
+        recreateEndpoint();
     }
     return endpoint;
 };
@@ -17482,13 +17512,12 @@ var getSearchHistory = function () { return __awaiter(void 0, void 0, void 0, fu
 
 const SearchIcon$1 = `<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="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`;
 
-const searchRecentCss = ":host{display:block}.container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:#1e2031;text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}.title{font-size:22px;font-weight:700;line-height:30px}.items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:start;align-items:flex-start;margin-top:20px}.button{background:transparent;border:none;height:20px;font-size:16px;font-family:sans-serif;color:#ffffff;line-height:26px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.button:hover{cursor:pointer}.button:not(:last-child){margin-bottom:36px}.button svg{fill:#707ae5;width:28px;height:28px;margin-right:26px}.pill{font-size:14px;display:-ms-inline-flexbox;display:inline-flex;padding:3px 8px;border-radius:6px;margin-right:8px;background-color:#999999;color:#333}.empty{text-transform:none;line-height:22px;color:#ccc}";
+const searchRecentCss = "search-recent{font-family:sans-serif;font-family:var(--verdocs-font)}search-recent .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}search-recent .title{font-size:22px;font-weight:700;line-height:30px}search-recent .items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:start;align-items:flex-start;margin-top:20px}search-recent .button{background:transparent;border:none;height:20px;font-size:16px;font-family:sans-serif;color:#ffffff;line-height:26px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}search-recent .button:hover{cursor:pointer}search-recent .button:not(:last-child){margin-bottom:36px}search-recent .button svg{fill:#707ae5;width:28px;height:28px;margin-right:26px}search-recent .pill{font-size:14px;display:-ms-inline-flexbox;display:inline-flex;padding:3px 8px;border-radius:6px;margin-right:8px;background-color:#999999;color:#333}search-recent .empty{text-transform:none;line-height:22px;color:#ccc}";
 
 let SearchRecent$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
     this.entrySelected = createEvent(this, "entrySelected", 7);
     /**
      * If set, limits the number of entries that will be shown. Note that there is a server-imposed limit of 20 entries
@@ -17515,13 +17544,12 @@ let SearchRecent$1 = class extends HTMLElement {
 
 const SearchIcon = `<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="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`;
 
-const searchSavedCss = ":host{display:block}.container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:#1e2031;text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}.title{font-size:22px;font-weight:700;line-height:30px}.items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:start;align-items:flex-start;margin-top:20px}.button{background:transparent;border:none;height:20px;font-size:16px;font-family:sans-serif;color:#ffffff;line-height:26px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.button:hover{cursor:pointer}.button:not(:last-child){margin-bottom:36px}.button svg{fill:#707ae5;width:28px;height:28px;margin-right:26px}.empty{text-transform:none;line-height:22px;color:#ccc}";
+const searchSavedCss = "search-saved{font-family:sans-serif;font-family:var(--verdocs-font)}search-saved .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}search-saved .title{font-size:22px;font-weight:700;line-height:30px}search-saved .items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:start;align-items:flex-start;margin-top:20px}search-saved .button{background:transparent;border:none;height:20px;font-size:16px;font-family:sans-serif;color:#ffffff;line-height:26px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}search-saved .button:hover{cursor:pointer}search-saved .button:not(:last-child){margin-bottom:36px}search-saved .button svg{fill:#707ae5;width:28px;height:28px;margin-right:26px}search-saved .empty{text-transform:none;line-height:22px;color:#ccc}";
 
 let SearchSaved$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
     this.entrySelected = createEvent(this, "entrySelected", 7);
     /**
      * If set, limits the number of entries that will be shown. Note that there is a server-imposed limit of 20 entries
@@ -17548,16 +17576,16 @@ let SearchSaved$1 = class extends HTMLElement {
 
 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 searchStarredCss = ":host{display:block}.container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:#1e2031;text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}.title{font-size:22px;font-weight:700;line-height:30px}.items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin-top:20px}.item{border:none;display:-ms-flexbox;display:flex;text-align:left;margin-bottom:20px;-ms-flex-direction:row;flex-direction:row;background:transparent}.item:hover{cursor:pointer}.icon{-ms-flex:0;flex:0;margin-right:14px}.icon svg{fill:#707ae5;width:22px;height:22px}.details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start}.item-title{font-size:16px;font-family:sans-serif;font-weight:400;color:#ffffff;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info{font-size:14px;font-family:sans-serif;font-weight:500;line-height:23px;color:#aeb4bf;grid-column:2/10;grid-row:2}.empty{text-transform:none;line-height:22px;color:#ccc}";
+const searchStarredCss = "search-starred{font-family:sans-serif;font-family:var(--verdocs-font)}search-starred .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)}search-starred .title{font-size:22px;font-weight:700;line-height:30px}search-starred .items{display:-ms-flexbox;display:flex;margin-top:20px;-ms-flex-direction:column;flex-direction:column}search-starred .item{border:none;display:-ms-flexbox;display:flex;text-align:left;margin-bottom:20px;-ms-flex-direction:row;flex-direction:row;background:transparent}search-starred .item:hover{cursor:pointer}search-starred .icon{-ms-flex:0 0 22px;flex:0 0 22px;margin-right:14px}search-starred .icon svg{fill:#707ae5;width:22px;height:22px}search-starred .details{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:column;flex-direction:column}search-starred .item-title{font-size:16px;font-weight:400;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}search-starred .info{font-size:14px;font-weight:500;line-height:23px;color:#aeb4bf}search-starred .empty{text-transform:none;line-height:22px;color:#ccc}";
 
 let SearchStarred$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.entrySelected = createEvent(this, "entrySelected", 7);
   }
-  handleSelectOption(option) {
-    console.log('option ', option, ' has been clicked!');
+  handleSelectEntry(entry) {
+    this.entrySelected.emit(entry);
   }
   computePagesText(pages) {
     if (pages < 2) {
@@ -17581,7 +17609,7 @@ let SearchStarred$1 = class extends HTMLElement {
   render() {
     var _a, _b;
     return (h(Host, null, h("div", { class: "container" }, h("p", { class: "title" }, "My Starred Items"), h("div", { class: "items" }, (_a = this.options) === null || _a === void 0 ? void 0 :
-      _a.map(option => (h("button", { class: "item", onClick: () => this.handleSelectOption(option) }, h("div", { class: "icon", innerHTML: DocumentIcon }), h("div", { class: "details" }, h("span", { class: "item-title" }, option.params.q), h("span", { class: "info" }, option.pages ? `${this.computePagesText(option.pages)} ` : '', option.recipients ? this.computeRecipientsText(option.recipients) : ''))))), (((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) || []) < 1 && h("div", { class: "empty" }, "You do not have any starred items.")))));
+      _a.map(option => (h("button", { class: "item", onClick: () => this.handleSelectEntry(option) }, h("div", { class: "icon", innerHTML: DocumentIcon }), h("div", { class: "details" }, h("div", { class: "item-title" }, option.params.q), h("div", { class: "info" }, option.pages ? `${this.computePagesText(option.pages)} ` : '', option.recipients ? this.computeRecipientsText(option.recipients) : ''))))), (((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) || []) < 1 && h("div", { class: "empty" }, "You do not have any starred items.")))));
   }
   static get style() { return searchStarredCss; }
 };
@@ -17592,7 +17620,7 @@ let SearchTabs$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.selected = 'all';
   }
   render() {
     return (h(Host, null, h("slot", null)));
@@ -17600,13 +17628,12 @@ let SearchTabs$1 = class extends HTMLElement {
   static get style() { return searchTabsCss; }
 };
 
-const tagsIndicatorCss = ".container{width:270px;height:35px;background-color:#33364b;font-family:sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.tags{display:-ms-inline-flexbox;display:inline-flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-preferred-size:content;flex-basis:content;padding:7px 12px;margin:0 5px;height:28px;background-color:#f4f4f9;text-transform:uppercase;font-size:12px;font-weight:700;color:#33374a;border-radius:5px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
+const tagsIndicatorCss = "tags-indicator{font-family:sans-serif;font-family:var(--verdocs-font)}tags-indicator .container{width:270px;height:35px;background-color:#33364b;font-family:sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}tags-indicator .tags{display:-ms-inline-flexbox;display:inline-flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-preferred-size:content;flex-basis:content;padding:7px 12px;margin:0 5px;height:28px;background-color:#f4f4f9;text-transform:uppercase;font-size:12px;font-weight:700;color:#33374a;border-radius:5px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
 
 let TagsIndicator$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
   }
   render() {
     var _a;
@@ -17623,13 +17650,12 @@ const PagesIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox
 
 const StarIcon = `<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="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>`;
 
-const templateCardCss = ".container{height:640px;width:645px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#ffffff;-webkit-box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);padding:52px 50px 20px 50px}.template-img{width:545px;height:315px;background-color:salmon;margin-bottom:22px}.template-name{font-size:28px;font-family:sans-serif;font-weight:700;margin-bottom:13px}.template-org-bname{font-size:24px;font-family:sans-serif;font-weight:700;margin-bottom:12px}.template-org-name{margin-bottom:34px}.template-org-name label{font-size:24px;font-family:sans-serif;font-weight:700;color:#666666}hr{width:100%;margin-bottom:17px;color:#aeb4bf}.template-controls{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;text-align:center;font-size:21px}.template-controls span:nth-child(-n+3){border-right:1px solid #adb6bd}.template-controls svg{fill:#adb6bd;height:30px;width:30px;margin-bottom:-8px;margin-right:18px}.additional-controls svg{margin-right:0}.additional-controls{-ms-flex:1;flex:1}.pages,.star-counter,.counter{-ms-flex:2;flex:2}";
+const templateCardCss = "template-card{font-family:sans-serif;font-family:var(--verdocs-font)}template-card .container{height:640px;width:645px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#ffffff;-webkit-box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);padding:52px 50px 20px 50px}template-card .template-img{width:545px;height:315px;background-color:salmon;margin-bottom:22px}template-card .template-name{font-size:28px;font-family:sans-serif;font-weight:700;margin-bottom:13px}template-card .template-org-bname{font-size:24px;font-family:sans-serif;font-weight:700;margin-bottom:12px}template-card .template-org-name{margin-bottom:34px}template-card .template-org-name label{font-size:24px;font-family:sans-serif;font-weight:700;color:#666666}template-card hr{width:100%;margin-bottom:17px;color:#aeb4bf}template-card .template-controls{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;text-align:center;font-size:21px}template-card .template-controls span:nth-child(-n+3){border-right:1px solid #adb6bd}template-card .template-controls svg{fill:#adb6bd;height:30px;width:30px;margin-bottom:-8px;margin-right:18px}template-card .additional-controls svg{margin-right:0}template-card .additional-controls{-ms-flex:1;flex:1}template-card .pages,template-card .star-counter,template-card .counter{-ms-flex:2;flex:2}";
 
 let TemplateCard$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
   }
   render() {
     return (h("div", { class: "container" }, h("div", { class: "template-img" }, h("img", { src: getAssetPath('template-card/dummy-image.png'), alt: "Dummy Image" })), h("span", { class: "template-name" }, this.template.name), h("span", { class: "template-org-bname" }, this.template.organization_business_name), h("div", { class: "template-org-name" }, h("input", { type: "checkbox", id: "org-name", name: "org-name", checked: true }), h("label", { htmlFor: "org-name" }, this.template.organization_name)), h("hr", null), h("div", { class: "template-controls" }, h("span", { class: "star-counter", innerHTML: StarIcon }, this.template.star_counter), h("span", { class: "pages", innerHTML: PagesIcon }, this.template.pages), h("span", { class: "counter", innerHTML: EmailIcon }, this.template.counter), h("span", { class: "additional-controls", innerHTML: ActionsIcon }))));
@@ -17638,13 +17664,12 @@ let TemplateCard$1 = class extends HTMLElement {
   static get style() { return templateCardCss; }
 };
 
-const toggleIconButtonsCss = ".container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#f2f5fa}.label{font-size:24px;font-weight:700;color:#33364b;-ms-flex-item-align:center;align-self:center;margin-right:27px;font-family:sans-serif}.buttons{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.buttons button{width:60px;height:60px;border:2px solid #654dcb;border-radius:5px;cursor:pointer}.buttons button:not(:last-child){margin-right:11px}.buttons svg{width:30px;height:30px}.buttons button:hover{background-color:#654dcb;-webkit-transition:0.25s;transition:0.25s}.buttons button:hover svg{fill:#f2f5fa;-webkit-transition:0.25s;transition:0.25s}.selected{background-color:#707ae5;-webkit-transition:0.25s;transition:0.25s}.selected svg{fill:#ffffff;-webkit-transition:0.25s;transition:0.25s}";
+const toggleIconButtonsCss = "toggle-icon-buttons{font-family:sans-serif;font-family:var(--verdocs-font)}toggle-icon-buttons .container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#f2f5fa}toggle-icon-buttons .label{font-size:24px;font-weight:700;color:#33364b;-ms-flex-item-align:center;align-self:center;margin-right:27px;font-family:sans-serif}toggle-icon-buttons .buttons{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}toggle-icon-buttons .buttons button{width:60px;height:60px;border:2px solid #654dcb;border-radius:5px;cursor:pointer}toggle-icon-buttons .buttons button:not(:last-child){margin-right:11px}toggle-icon-buttons .buttons svg{width:30px;height:30px}toggle-icon-buttons .buttons button:hover{background-color:#654dcb;-webkit-transition:0.25s;transition:0.25s}toggle-icon-buttons .buttons button:hover svg{fill:#f2f5fa;-webkit-transition:0.25s;transition:0.25s}toggle-icon-buttons .selected{background-color:#707ae5;-webkit-transition:0.25s;transition:0.25s}toggle-icon-buttons .selected svg{fill:#ffffff;-webkit-transition:0.25s;transition:0.25s}";
 
 let ToggleIconButtons$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
   }
   handleClick(event) {
     event.preventDefault();
@@ -17665,20 +17690,20 @@ let ToggleIconButtons$1 = class extends HTMLElement {
   static get style() { return toggleIconButtonsCss; }
 };
 
-const DocumentStatusIndicator = /*@__PURE__*/proxyCustomElement(DocumentStatusIndicator$1, [1,"document-status-indicator",{"status":[1],"theme":[1]}]);
-const DropdownMenu = /*@__PURE__*/proxyCustomElement(DropdownMenu$1, [1,"dropdown-menu",{"options":[16],"open":[4],"tall":[4],"isOpen":[32]}]);
-const OrgPopup = /*@__PURE__*/proxyCustomElement(OrgPopup$1, [1,"org-popup",{"organization":[8],"theme":[1]}]);
-const PdfViewer = /*@__PURE__*/proxyCustomElement(PdfViewer$1, [1,"pdf-viewer",{"rotation":[2],"src":[1]}]);
-const SearchBox = /*@__PURE__*/proxyCustomElement(SearchBox$1, [1,"search-box"]);
+const DocumentStatusIndicator = /*@__PURE__*/proxyCustomElement(DocumentStatusIndicator$1, [0,"document-status-indicator",{"status":[1],"theme":[1]}]);
+const DropdownMenu = /*@__PURE__*/proxyCustomElement(DropdownMenu$1, [0,"dropdown-menu",{"options":[16],"open":[4],"tall":[4],"isOpen":[32]}]);
+const OrgPopup = /*@__PURE__*/proxyCustomElement(OrgPopup$1, [0,"org-popup",{"organization":[8],"theme":[1]}]);
+const PdfViewer = /*@__PURE__*/proxyCustomElement(PdfViewer$1, [0,"pdf-viewer",{"rotation":[2],"src":[1]}]);
+const SearchBox = /*@__PURE__*/proxyCustomElement(SearchBox$1, [0,"search-box",{"type":[1],"q":[32]}]);
 const SearchEmbed = /*@__PURE__*/proxyCustomElement(SearchEmbed$1, [1,"search-embed"]);
-const SearchQuickFunctions = /*@__PURE__*/proxyCustomElement(SearchQuickFunctions$1, [1,"search-quick-functions"]);
-const SearchRecent = /*@__PURE__*/proxyCustomElement(SearchRecent$1, [1,"search-recent",{"limit":[2],"recent":[32]}]);
-const SearchSaved = /*@__PURE__*/proxyCustomElement(SearchSaved$1, [1,"search-saved",{"limit":[2],"saved":[32]}]);
-const SearchStarred = /*@__PURE__*/proxyCustomElement(SearchStarred$1, [1,"search-starred",{"options":[8]}]);
-const SearchTabs = /*@__PURE__*/proxyCustomElement(SearchTabs$1, [1,"search-tabs"]);
-const TagsIndicator = /*@__PURE__*/proxyCustomElement(TagsIndicator$1, [1,"tags-indicator",{"tags":[16],"theme":[1]}]);
-const TemplateCard = /*@__PURE__*/proxyCustomElement(TemplateCard$1, [1,"template-card",{"template":[8],"theme":[1]}]);
-const ToggleIconButtons = /*@__PURE__*/proxyCustomElement(ToggleIconButtons$1, [1,"toggle-icon-buttons",{"options":[16],"theme":[1]},[[6,"click","handleClick"]]]);
+const SearchQuickFunctions = /*@__PURE__*/proxyCustomElement(SearchQuickFunctions$1, [0,"search-quick-functions"]);
+const SearchRecent = /*@__PURE__*/proxyCustomElement(SearchRecent$1, [0,"search-recent",{"limit":[2],"recent":[32]}]);
+const SearchSaved = /*@__PURE__*/proxyCustomElement(SearchSaved$1, [0,"search-saved",{"limit":[2],"saved":[32]}]);
+const SearchStarred = /*@__PURE__*/proxyCustomElement(SearchStarred$1, [0,"search-starred",{"options":[8]}]);
+const SearchTabs = /*@__PURE__*/proxyCustomElement(SearchTabs$1, [4,"search-tabs",{"selected":[32]}]);
+const TagsIndicator = /*@__PURE__*/proxyCustomElement(TagsIndicator$1, [0,"tags-indicator",{"tags":[16],"theme":[1]}]);
+const TemplateCard = /*@__PURE__*/proxyCustomElement(TemplateCard$1, [0,"template-card",{"template":[8],"theme":[1]}]);
+const ToggleIconButtons = /*@__PURE__*/proxyCustomElement(ToggleIconButtons$1, [0,"toggle-icon-buttons",{"options":[16],"theme":[1]},[[6,"click","handleClick"]]]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [

package/dist/custom-elements.json

@@ -0,0 +1,266 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "document-status-indicator",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays a message describing a document's status of completion\n\n```typescript\n\n```"
+      },
+      "attributes": [
+        {
+          "name": "status",
+          "description": "The status to display",
+          "values": [
+            {
+              "name": "cancelled"
+            },
+            {
+              "name": "complete"
+            },
+            {
+              "name": "declined"
+            },
+            {
+              "name": "finished"
+            },
+            {
+              "name": "in-progress"
+            },
+            {
+              "name": "pending"
+            }
+          ]
+        },
+        {
+          "name": "theme",
+          "description": "The \"theme\" to be used",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "dropdown-menu",
+      "description": {
+        "kind": "markdown",
+        "value": "Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\nwhen the button is pressed again, or an option is selected.\n\n```typescript\ninterface IMenuOption {\n  // The label to display on the menu option.\n  label: string;\n  // Optional icon to display next to the option's label. Specify icons as SVG strings.\n  icon?: string;\n  // If true, the option will be shown disabled (dimmed and not clickable).\n  disabled?: boolean;\n  // Optional additional fields such as IDs or other data. When a menu option is clicked/tapped, the associated\n  // IMenuOptionwill be passed to the event handler. This data may be used to help identify the option selected.\n  [key: string]: any;\n}\n```"
+      },
+      "attributes": [
+        {
+          "name": "open",
+          "description": "If set, the component will be open by default. This is primarily intended to be used for testing."
+        },
+        {
+          "name": "tall",
+          "description": "If set, the component will reserve space for Storybook-display purposes."
+        }
+      ]
+    },
+    {
+      "name": "org-popup",
+      "description": {
+        "kind": "markdown",
+        "value": "Display a pop-up describing the company that was hovered over\n\n```typescript\n\n```"
+      },
+      "attributes": [
+        {
+          "name": "organization",
+          "description": "The organization to display"
+        },
+        {
+          "name": "theme",
+          "description": "The \"theme\" to be used",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "pdf-viewer",
+      "description": {
+        "kind": "markdown",
+        "value": "Test"
+      },
+      "attributes": [
+        {
+          "name": "rotation",
+          "description": "Rotate the PDF in degrees\n{number}"
+        },
+        {
+          "name": "src",
+          "description": "Src of the PDF to load and render\n{number}"
+        }
+      ]
+    },
+    {
+      "name": "search-box",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "type",
+          "description": "",
+          "values": [
+            {
+              "name": "all"
+            },
+            {
+              "name": "document"
+            },
+            {
+              "name": "organization"
+            },
+            {
+              "name": "template"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "search-embed",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": []
+    },
+    {
+      "name": "search-quick-functions",
+      "description": {
+        "kind": "markdown",
+        "value": "Display quick-function buttons for creating templates and documents."
+      },
+      "attributes": []
+    },
+    {
+      "name": "search-recent",
+      "description": {
+        "kind": "markdown",
+        "value": "Display a list of recent searches. Note that only some types of searches are automatically saved in the\nuser's history (those that contain a unique `q` query string from the next-most-recent search."
+      },
+      "attributes": [
+        {
+          "name": "limit",
+          "description": "If set, limits the number of entries that will be shown. Note that there is a server-imposed limit of 20 entries\nthat cannot currently be increased (only reduced)."
+        }
+      ]
+    },
+    {
+      "name": "search-saved",
+      "description": {
+        "kind": "markdown",
+        "value": "Display a list of saved searches. Note that only some types of searches are automatically saved in the\nuser's history (those that contain a unique `q` query string from the next-most-recent search."
+      },
+      "attributes": [
+        {
+          "name": "limit",
+          "description": "If set, limits the number of entries that will be shown. Note that there is a server-imposed limit of 20 entries\nthat cannot currently be increased (only reduced)."
+        }
+      ]
+    },
+    {
+      "name": "search-starred",
+      "description": {
+        "kind": "markdown",
+        "value": "Display a list of starred items."
+      },
+      "attributes": [
+        {
+          "name": "options",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "search-tabs",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": []
+    },
+    {
+      "name": "tags-indicator",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays a message describing a document's status of completion\n\n```typescript\n\n```"
+      },
+      "attributes": [
+        {
+          "name": "theme",
+          "description": "The \"theme\" to be used",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "template-card",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays the overview of a template\n\n```typescript\n\n```"
+      },
+      "attributes": [
+        {
+          "name": "template",
+          "description": "The template whose information is gonna be displayed"
+        },
+        {
+          "name": "theme",
+          "description": "The \"theme\" to be used",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "toggle-icon-buttons",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays a label and a set of buttons, also allowing a default selection of a button\n\n```typescript\n\n```"
+      },
+      "attributes": [
+        {
+          "name": "theme",
+          "description": "The \"theme\" to be used",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}