@verdocs/web-sdk 1.0.25 → 1.4.0

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.css

@@ -0,0 +1,62 @@
+verdocs-dropdown {
+  font-family: "Barlow", sans-serif;
+  display: block;
+}
+verdocs-dropdown .arrow {
+  width: 32px;
+  height: 26px;
+  background: #fff;
+  cursor: pointer;
+  border-radius: 4px;
+  align-items: center;
+  display: inline-flex;
+  border: 1px solid #cccccc;
+  justify-content: center;
+}
+verdocs-dropdown .arrow svg {
+  fill: #55bc81;
+  transition: 0.3s;
+}
+verdocs-dropdown .items {
+  width: 200px;
+  display: none;
+  z-index: 10000;
+  border-radius: 5px;
+  background: #33354c;
+  border: 1px solid #654dcb;
+}
+verdocs-dropdown .items[data-show] {
+  display: block;
+}
+verdocs-dropdown .option {
+  width: 100%;
+  color: #fff;
+  border: none;
+  display: block;
+  text-align: left;
+  background: none;
+  padding: 10px 20px;
+}
+verdocs-dropdown .option:hover {
+  cursor: pointer;
+  background: #55bc81;
+}
+verdocs-dropdown .option[disabled] {
+  color: #aaaaaa;
+}
+verdocs-dropdown .option[disabled]:hover {
+  color: #aaaaaa;
+  cursor: inherit;
+  background: transparent;
+}
+verdocs-dropdown.open .items {
+  display: block;
+}
+verdocs-dropdown.open .arrow {
+  background: #4c56cb;
+  border: 1px solid #707ae5;
+}
+verdocs-dropdown.open .arrow svg {
+  transform: scaleY(-1);
+  fill: #fff;
+}

package/dist/collection/components/controls/{dropdown-menu/dropdown-menu.js → verdocs-dropdown/verdocs-dropdown.js}

@@ -1,25 +1,12 @@
+import { Host } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
 import { Component, Prop, State, h, Event } from '@stencil/core';
 import SortDown from './down-arrow.svg';
 /**
  * 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
  * when the button is pressed again, or an option is selected.
- *
- * ```typescript
- * interface IMenuOption {
- *   // The label to display on the menu option.
- *   label: string;
- *   // Optional icon to display next to the option's label. Specify icons as SVG strings.
- *   icon?: string;
- *   // If true, the option will be shown disabled (dimmed and not clickable).
- *   disabled?: boolean;
- *   // Optional additional fields such as IDs or other data. When a menu option is clicked/tapped, the associated
- *   // IMenuOptionwill be passed to the event handler. This data may be used to help identify the option selected.
- *   [key: string]: any;
- * }
- * ```
  */
-export class DropdownMenu {
+export class VerdocsDropdown {
   constructor() {
     /**
      * The menu options to display.
@@ -30,11 +17,12 @@ export class DropdownMenu {
     this.isOpen = !!this.open;
   }
   componentDidLoad() {
-    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] });
+    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
   }
   handleSelectOption(option) {
     this.isOpen = false;
     this.optionSelected.emit(option);
+    this.hide();
   }
   // See https://popper.js.org/docs/v2/tutorial/
   // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
@@ -49,7 +37,23 @@ export class DropdownMenu {
     }));
     (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update();
   }
-  hideDropdown() {
+  handleHideDropdown(e) {
+    var _a, _b;
+    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
+      // This event is fired when a menu element is clicked because the button "loses focus" then too
+      return;
+    }
+    this.hide();
+  }
+  toggleDropdown() {
+    if (this.isOpen) {
+      this.hide();
+    }
+    else {
+      this.showDropdown();
+    }
+  }
+  hide() {
     var _a;
     this.isOpen = false;
     this.dropdownMenu.removeAttribute('data-show');
@@ -59,26 +63,18 @@ export class DropdownMenu {
       modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
     }));
   }
-  toggleDropdown() {
-    if (this.isOpen) {
-      this.hideDropdown();
-    }
-    else {
-      this.showDropdown();
-    }
-  }
   render() {
     var _a;
-    return (h("div", { class: { open: !!this.isOpen } },
-      h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: () => this.toggleDropdown(), onBlur: () => this.hideDropdown(), ref: el => (this.dropdownButton = el) }),
+    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } },
+      h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: () => this.toggleDropdown(), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }),
       h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: () => this.handleSelectOption(option), class: "option", disabled: option.disabled }, option.label))))));
   }
-  static get is() { return "dropdown-menu"; }
+  static get is() { return "verdocs-dropdown"; }
   static get originalStyleUrls() { return {
-    "$": ["dropdown-menu.scss"]
+    "$": ["verdocs-dropdown.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["dropdown-menu.css"]
+    "$": ["verdocs-dropdown.css"]
   }; }
   static get properties() { return {
     "options": {
@@ -117,23 +113,6 @@ export class DropdownMenu {
       },
       "attribute": "open",
       "reflect": false
-    },
-    "tall": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set, the component will reserve space for Storybook-display purposes."
-      },
-      "attribute": "tall",
-      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/controls/{dropdown-menu/dropdown-menu.stories.js → verdocs-dropdown/verdocs-dropdown.stories.js}

@@ -9,7 +9,7 @@ export default {
   // Where in Storybook this control will be listed
   title: 'Controls/Dropdown Menu',
   // Hint to help the docs addon find the component
-  component: 'dropdown-menu',
+  component: 'verdocs-dropdown',
   // We can apply default args only shown in Storybook as follows
   args: {
     options: [{ label: 'Option 1' }, { label: 'Disabled Option', disabled: true }, { label: 'Option 2' }],
@@ -17,12 +17,9 @@ export default {
   // Here we can apply overrides to component property documentation. Note that we don't need to (and shouldn't) specify every field
   // here. Only those that need special attention.
   argTypes: {
-    optionSelected: { action: 'optionSelected' },
-    // Here we take advantage of "hidden" properties to make an undocumented feature. We will allow "tall" to be set as an
-    // attribute to force the component to set a fixed height on its host container. (See the CSS for how this is applied.)
-    // We are doing this only so Storybook can draw it properly, though, and don't want it used as a regular feature, so we
-    // hide it from the documentation
-    tall: {
+    optionSelected: {
+      action: 'optionSelected',
+      // Prevents a duplicate event entry from appearing in the properties table
       table: {
         disable: true,
       },
@@ -30,5 +27,4 @@ export default {
   },
 };
 // See https://lit-html.polymer-project.org/guide/template-reference "Binding Types" for an explanation of '.' vs '@'
-export const Default = ({ options, optionSelected }) => html `<dropdown-menu .options=${options} @optionSelected=${optionSelected} tall />`;
-export const Open = ({ options, optionSelected }) => html `<dropdown-menu .options=${options} @optionSelected=${optionSelected} tall open />`;
+export const DropdownMenu = ({ options, optionSelected }) => html `<verdocs-dropdown .options=${options} @optionSelected=${optionSelected} />`;

package/dist/collection/components/controls/verdocs-loader/verdocs-loader.css

@@ -0,0 +1,45 @@
+verdocs-loader {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -20px;
+  margin-top: -20px;
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  text-indent: -9999em;
+  -webkit-animation: load5 1.1s infinite ease;
+  animation: verdocs-loader-kf 1.1s infinite ease;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+@keyframes verdocs-loader-kf {
+  0%, 100% {
+    box-shadow: 0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);
+  }
+  12.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);
+  }
+  25% {
+    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  37.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  50% {
+    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  62.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  75% {
+    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  87.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa;
+  }
+}

package/dist/collection/components/controls/verdocs-loader/verdocs-loader.js

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+/**
+ * Animated loader placeholder. There are currently no configuration options for this control.
+ */
+export class VerdocsLoader {
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "verdocs-loader"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-loader.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-loader.css"]
+  }; }
+}

package/dist/collection/components/controls/verdocs-loader/verdocs-loader.stories.js

@@ -0,0 +1,8 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Loader',
+  component: 'verdocs-loader',
+  args: {},
+  argTypes: {},
+};
+export const Loader = ({}) => html `<verdocs-loader />`;

package/dist/collection/components/{elements/org-popup/org-popup.css → controls/verdocs-organization-card/verdocs-organization-card.css}

@@ -1,49 +1,30 @@
-org-popup {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
-}
-
-org-popup .container {
+verdocs-organization-card {
+  font-family: "Barlow", sans-serif;
   width: 242px;
-  height: 64px;
-  background-color: #33364b;
   position: relative;
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: center;
 }
-
-org-popup .container:hover > .popup {
+verdocs-organization-card:hover > .popup {
   display: flex;
   background: #ffffff;
-  color: #33364b;
+  color: #33354c;
 }
-
-org-popup .icon {
-  flex: 1;
-  margin-left: 15px;
-  margin-right: 0px;
+verdocs-organization-card .icon {
+  flex: 0;
+  margin: 0 7px 0 0;
 }
-
-org-popup .icon svg {
+verdocs-organization-card .icon svg {
+  fill: #aeb4bf;
   width: 24px;
   margin-bottom: -5px;
 }
-
-org-popup .content {
-  color: #fff;
-  flex: 4;
-  font-family: sans-serif;
-}
-
-org-popup .popup {
+verdocs-organization-card .popup {
   position: absolute;
   top: -1px;
   left: -4px;
   display: none;
-  border: 1px solid var(--verdocs-background-dark);
+  border: 1px solid #1e2031;
   border-radius: 10px;
   width: 326px;
   height: 220px;
@@ -53,8 +34,7 @@ org-popup .popup {
   justify-content: space-evenly;
   font-family: sans-serif;
 }
-
-org-popup .popup-header {
+verdocs-organization-card .popup-header {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -64,8 +44,7 @@ org-popup .popup-header {
   font-size: 21px;
   color: #4c56cb;
 }
-
-org-popup .popup-body {
+verdocs-organization-card .popup-body {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -75,18 +54,15 @@ org-popup .popup-body {
   font-size: 13px;
   text-transform: uppercase;
 }
-
-org-popup .popup-body span {
+verdocs-organization-card .popup-body span {
   display: block;
   flex: 2 80px;
   margin-left: 7px;
 }
-
-org-popup .popup-body span:last-child {
+verdocs-organization-card .popup-body span:last-child {
   margin-top: 5px;
 }
-
-org-popup .status {
+verdocs-organization-card .status {
   width: 29px;
   height: 29px;
   background-color: #aeb4bf;

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.js

@@ -0,0 +1,60 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+import UserGroup from './user-group.svg';
+/**
+ * Display a pop-up describing the company that was hovered over
+ */
+export class VerdocsOrganizationCard {
+  render() {
+    console.log('org', JSON.stringify(this.organization, null, 2));
+    return (h(Host, null,
+      h("span", { class: "icon", innerHTML: UserGroup }),
+      h("span", { class: "content" }, this.organization.name),
+      h("div", { class: "popup" },
+        h("div", { class: "popup-header" },
+          h("span", { class: "status" }),
+          h("span", { class: "title" }, this.organization.name)),
+        h("div", { class: "popup-body" },
+          h("span", { class: "joined" },
+            h("b", null, "Joined"),
+            " ",
+            'Jan 1 2022'),
+          h("span", { class: "followers" },
+            h("b", null, "Followers"),
+            " 57"),
+          h("span", { class: "website" },
+            h("b", null, "Website")),
+          h("span", { class: "templates" },
+            h("b", null, "Templates"),
+            " 7"),
+          h("span", null, "https://www.google.com")))));
+  }
+  static get is() { return "verdocs-organization-card"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-organization-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-organization-card.css"]
+  }; }
+  static get properties() { return {
+    "organization": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IOrganization",
+        "resolved": "IOrganization",
+        "references": {
+          "IOrganization": {
+            "location": "import",
+            "path": "@verdocs/js-sdk/Organizations/Types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The organization to display"
+      }
+    }
+  }; }
+}

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit-html';
+const MockOrganization = {
+  id: '3',
+  name: 'ACME Widgets, LLC',
+  address: null,
+  phone: null,
+  business_name: null,
+  is_business: true,
+  address2: null,
+  contact_email: null,
+  timezone: null,
+  envelope_responsible: false,
+};
+export default {
+  title: 'Controls/Organization Card',
+  component: 'verdocs-organization-card',
+  args: {
+    organization: MockOrganization,
+  },
+  argTypes: {},
+};
+export const OrganizationCard = ({ organization }) => html `<verdocs-organization-card .organization=${organization} />`;

package/dist/collection/components/controls/verdocs-status-indicator/accepted-dark.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="12.5" r="11.5" stroke="white" stroke-width="2"/>
+<path d="M11.728 15.968C11.7067 15.9893 11.7013 16.0107 11.712 16.032C11.7227 16.0533 11.744 16.064 11.776 16.064H16.112C16.1653 16.064 16.208 16.0853 16.24 16.128C16.2827 16.16 16.304 16.2027 16.304 16.256V17.808C16.304 17.8613 16.2827 17.9093 16.24 17.952C16.208 17.984 16.1653 18 16.112 18H8.912C8.85867 18 8.81067 17.984 8.768 17.952C8.736 17.9093 8.72 17.8613 8.72 17.808V16.336C8.72 16.24 8.752 16.16 8.816 16.096C9.33867 15.584 9.872 15.0293 10.416 14.432C10.96 13.824 11.3013 13.4453 11.44 13.296C11.7387 12.944 12.0427 12.608 12.352 12.288C13.3227 11.2107 13.808 10.4107 13.808 9.888C13.808 9.51467 13.6747 9.21067 13.408 8.976C13.1413 8.73067 12.7947 8.608 12.368 8.608C11.9413 8.608 11.5947 8.73067 11.328 8.976C11.0613 9.21067 10.928 9.52533 10.928 9.92V10.32C10.928 10.3733 10.9067 10.4213 10.864 10.464C10.832 10.496 10.7893 10.512 10.736 10.512H8.848C8.79467 10.512 8.74667 10.496 8.704 10.464C8.672 10.4213 8.656 10.3733 8.656 10.32V9.568C8.688 8.992 8.86933 8.48533 9.2 8.048C9.53067 7.6 9.968 7.25867 10.512 7.024C11.0667 6.78933 11.6853 6.672 12.368 6.672C13.1253 6.672 13.7813 6.816 14.336 7.104C14.9013 7.38133 15.3333 7.76 15.632 8.24C15.9413 8.72 16.096 9.25333 16.096 9.84C16.096 10.288 15.984 10.7467 15.76 11.216C15.536 11.6853 15.2 12.192 14.752 12.736C14.4213 13.152 14.064 13.5627 13.68 13.968C13.296 14.3733 12.7253 14.96 11.968 15.728L11.728 15.968Z" fill="white"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/accepted-light.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="12.5" r="11.5" stroke="#654DCB" stroke-width="2"/>
+<path d="M11.728 15.968C11.7067 15.9893 11.7013 16.0107 11.712 16.032C11.7227 16.0533 11.744 16.064 11.776 16.064H16.112C16.1653 16.064 16.208 16.0853 16.24 16.128C16.2827 16.16 16.304 16.2027 16.304 16.256V17.808C16.304 17.8613 16.2827 17.9093 16.24 17.952C16.208 17.984 16.1653 18 16.112 18H8.912C8.85867 18 8.81067 17.984 8.768 17.952C8.736 17.9093 8.72 17.8613 8.72 17.808V16.336C8.72 16.24 8.752 16.16 8.816 16.096C9.33867 15.584 9.872 15.0293 10.416 14.432C10.96 13.824 11.3013 13.4453 11.44 13.296C11.7387 12.944 12.0427 12.608 12.352 12.288C13.3227 11.2107 13.808 10.4107 13.808 9.888C13.808 9.51467 13.6747 9.21067 13.408 8.976C13.1413 8.73067 12.7947 8.608 12.368 8.608C11.9413 8.608 11.5947 8.73067 11.328 8.976C11.0613 9.21067 10.928 9.52533 10.928 9.92V10.32C10.928 10.3733 10.9067 10.4213 10.864 10.464C10.832 10.496 10.7893 10.512 10.736 10.512H8.848C8.79467 10.512 8.74667 10.496 8.704 10.464C8.672 10.4213 8.656 10.3733 8.656 10.32V9.568C8.688 8.992 8.86933 8.48533 9.2 8.048C9.53067 7.6 9.968 7.25867 10.512 7.024C11.0667 6.78933 11.6853 6.672 12.368 6.672C13.1253 6.672 13.7813 6.816 14.336 7.104C14.9013 7.38133 15.3333 7.76 15.632 8.24C15.9413 8.72 16.096 9.25333 16.096 9.84C16.096 10.288 15.984 10.7467 15.76 11.216C15.536 11.6853 15.2 12.192 14.752 12.736C14.4213 13.152 14.064 13.5627 13.68 13.968C13.296 14.3733 12.7253 14.96 11.968 15.728L11.728 15.968Z" fill="#654DCB"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/arrowright.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#ffffff" stroke-width="2">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/canceled-dark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0C8.8174 0 5.76516 1.26428 3.51472 3.51472C1.26428 5.76516 0 8.8174 0 12C0 15.1826 1.26428 18.2348 3.51472 20.4853C5.76516 22.7357 8.8174 24 12 24V24ZM9 7.5C8.60218 7.5 8.22064 7.65804 7.93934 7.93934C7.65804 8.22064 7.5 8.60218 7.5 9V15C7.5 15.3978 7.65804 15.7794 7.93934 16.0607C8.22064 16.342 8.60218 16.5 9 16.5H15C15.3978 16.5 15.7794 16.342 16.0607 16.0607C16.342 15.7794 16.5 15.3978 16.5 15V9C16.5 8.60218 16.342 8.22064 16.0607 7.93934C15.7794 7.65804 15.3978 7.5 15 7.5H9Z" fill="#9095B3"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/canceled-light.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0C8.8174 0 5.76516 1.26428 3.51472 3.51472C1.26428 5.76516 0 8.8174 0 12C0 15.1826 1.26428 18.2348 3.51472 20.4853C5.76516 22.7357 8.8174 24 12 24V24ZM9 7.5C8.60218 7.5 8.22064 7.65804 7.93934 7.93934C7.65804 8.22064 7.5 8.60218 7.5 9V15C7.5 15.3978 7.65804 15.7794 7.93934 16.0607C8.22064 16.342 8.60218 16.5 9 16.5H15C15.3978 16.5 15.7794 16.342 16.0607 16.0607C16.342 15.7794 16.5 15.3978 16.5 15V9C16.5 8.60218 16.342 8.22064 16.0607 7.93934C15.7794 7.65804 15.3978 7.5 15 7.5H9Z" fill="#9095B3"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/complete-dark.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.7152 2.35464C7.71225 2.27504 8.65876 1.88287 9.41995 1.23399C10.2797 0.501758 11.3721 0.0996094 12.5013 0.0996094C13.6306 0.0996094 14.723 0.501758 15.5827 1.23399C16.3439 1.88287 17.2904 2.27504 18.2875 2.35464C19.4135 2.44463 20.4706 2.93273 21.2693 3.73145C22.068 4.53017 22.5561 5.58727 22.6461 6.71324C22.7251 7.70989 23.1173 8.65694 23.7667 9.41799C24.499 10.2777 24.9011 11.3701 24.9011 12.4994C24.9011 13.6287 24.499 14.7211 23.7667 15.5808C23.1179 16.342 22.7257 17.2885 22.6461 18.2855C22.5561 19.4115 22.068 20.4686 21.2693 21.2673C20.4706 22.0661 19.4135 22.5542 18.2875 22.6441C17.2904 22.7237 16.3439 23.1159 15.5827 23.7648C14.723 24.497 13.6306 24.8992 12.5013 24.8992C11.3721 24.8992 10.2797 24.497 9.41995 23.7648C8.65876 23.1159 7.71225 22.7237 6.7152 22.6441C5.58923 22.5542 4.53213 22.0661 3.73341 21.2673C2.93469 20.4686 2.44658 19.4115 2.35659 18.2855C2.27699 17.2885 1.88482 16.342 1.23595 15.5808C0.503711 14.7211 0.101562 13.6287 0.101562 12.4994C0.101562 11.3701 0.503711 10.2777 1.23595 9.41799C1.88482 8.65681 2.27699 7.71029 2.35659 6.71324C2.44658 5.58727 2.93469 4.53017 3.73341 3.73145C4.53213 2.93273 5.58923 2.44463 6.7152 2.35464V2.35464ZM18.2472 10.4952C18.5295 10.2029 18.6858 9.81138 18.6822 9.40497C18.6787 8.99857 18.5157 8.60981 18.2283 8.32242C17.9409 8.03504 17.5522 7.87203 17.1458 7.8685C16.7394 7.86497 16.3478 8.0212 16.0555 8.30354L10.9513 13.4077L8.9472 11.4035C8.65486 11.1212 8.26333 10.965 7.85692 10.9685C7.45052 10.972 7.06176 11.135 6.77438 11.4224C6.48699 11.7098 6.32398 12.0986 6.32045 12.505C6.31692 12.9114 6.47315 13.3029 6.7555 13.5952L9.8555 16.6952C10.1462 16.9858 10.5403 17.1491 10.9513 17.1491C11.3624 17.1491 11.7565 16.9858 12.0472 16.6952L18.2472 10.4952V10.4952Z" fill="#63C58E"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/complete-light.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.7152 2.35464C7.71225 2.27504 8.65876 1.88287 9.41995 1.23399C10.2797 0.501758 11.3721 0.0996094 12.5013 0.0996094C13.6306 0.0996094 14.723 0.501758 15.5827 1.23399C16.3439 1.88287 17.2904 2.27504 18.2875 2.35464C19.4135 2.44463 20.4706 2.93273 21.2693 3.73145C22.068 4.53017 22.5561 5.58727 22.6461 6.71324C22.7251 7.70989 23.1173 8.65694 23.7667 9.41799C24.499 10.2777 24.9011 11.3701 24.9011 12.4994C24.9011 13.6287 24.499 14.7211 23.7667 15.5808C23.1179 16.342 22.7257 17.2885 22.6461 18.2855C22.5561 19.4115 22.068 20.4686 21.2693 21.2673C20.4706 22.0661 19.4135 22.5542 18.2875 22.6441C17.2904 22.7237 16.3439 23.1159 15.5827 23.7648C14.723 24.497 13.6306 24.8992 12.5013 24.8992C11.3721 24.8992 10.2797 24.497 9.41995 23.7648C8.65876 23.1159 7.71225 22.7237 6.7152 22.6441C5.58923 22.5542 4.53213 22.0661 3.73341 21.2673C2.93469 20.4686 2.44658 19.4115 2.35659 18.2855C2.27699 17.2885 1.88482 16.342 1.23595 15.5808C0.503711 14.7211 0.101562 13.6287 0.101562 12.4994C0.101562 11.3701 0.503711 10.2777 1.23595 9.41799C1.88482 8.65681 2.27699 7.71029 2.35659 6.71324C2.44658 5.58727 2.93469 4.53017 3.73341 3.73145C4.53213 2.93273 5.58923 2.44463 6.7152 2.35464V2.35464ZM18.2472 10.4952C18.5295 10.2029 18.6858 9.81138 18.6822 9.40497C18.6787 8.99857 18.5157 8.60981 18.2283 8.32242C17.9409 8.03504 17.5522 7.87203 17.1458 7.8685C16.7394 7.86497 16.3478 8.0212 16.0555 8.30354L10.9513 13.4077L8.9472 11.4035C8.65486 11.1212 8.26333 10.965 7.85692 10.9685C7.45052 10.972 7.06176 11.135 6.77438 11.4224C6.48699 11.7098 6.32398 12.0986 6.32045 12.505C6.31692 12.9114 6.47315 13.3029 6.7555 13.5952L9.8555 16.6952C10.1462 16.9858 10.5403 17.1491 10.9513 17.1491C11.3624 17.1491 11.7565 16.9858 12.0472 16.6952L18.2472 10.4952V10.4952Z" fill="#50BE80"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/declined-dark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12V12ZM13.5 18C13.5 18.3978 13.342 18.7794 13.0607 19.0607C12.7794 19.342 12.3978 19.5 12 19.5C11.6022 19.5 11.2206 19.342 10.9393 19.0607C10.658 18.7794 10.5 18.3978 10.5 18C10.5 17.6022 10.658 17.2206 10.9393 16.9393C11.2206 16.658 11.6022 16.5 12 16.5C12.3978 16.5 12.7794 16.658 13.0607 16.9393C13.342 17.2206 13.5 17.6022 13.5 18V18ZM12 4.5C11.6022 4.5 11.2206 4.65804 10.9393 4.93934C10.658 5.22064 10.5 5.60218 10.5 6V12C10.5 12.3978 10.658 12.7794 10.9393 13.0607C11.2206 13.342 11.6022 13.5 12 13.5C12.3978 13.5 12.7794 13.342 13.0607 13.0607C13.342 12.7794 13.5 12.3978 13.5 12V6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5Z" fill="#F95353"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/declined-light.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12V12ZM13.5 18C13.5 18.3978 13.342 18.7794 13.0607 19.0607C12.7794 19.342 12.3978 19.5 12 19.5C11.6022 19.5 11.2206 19.342 10.9393 19.0607C10.658 18.7794 10.5 18.3978 10.5 18C10.5 17.6022 10.658 17.2206 10.9393 16.9393C11.2206 16.658 11.6022 16.5 12 16.5C12.3978 16.5 12.7794 16.658 13.0607 16.9393C13.342 17.2206 13.5 17.6022 13.5 18V18ZM12 4.5C11.6022 4.5 11.2206 4.65804 10.9393 4.93934C10.658 5.22064 10.5 5.60218 10.5 6V12C10.5 12.3978 10.658 12.7794 10.9393 13.0607C11.2206 13.342 11.6022 13.5 12 13.5C12.3978 13.5 12.7794 13.342 13.0607 13.0607C13.342 12.7794 13.5 12.3978 13.5 12V6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5Z" fill="#FF0000"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/in-progress-dark.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7917 9.625L18.6667 13.5M18.6667 13.5L14.7917 17.375M18.6667 13.5H8.33333M25.125 13.5C25.125 15.0266 24.8243 16.5383 24.2401 17.9487C23.6559 19.3591 22.7996 20.6406 21.7201 21.7201C20.6406 22.7996 19.3591 23.6559 17.9487 24.2401C16.5383 24.8243 15.0266 25.125 13.5 25.125C11.9734 25.125 10.4617 24.8243 9.0513 24.2401C7.64089 23.6559 6.35936 22.7996 5.27988 21.7201C4.2004 20.6406 3.34411 19.3591 2.7599 17.9487C2.17569 16.5383 1.875 15.0266 1.875 13.5C1.875 10.4169 3.09977 7.45999 5.27988 5.27988C7.45999 3.09977 10.4169 1.875 13.5 1.875C16.5831 1.875 19.54 3.09977 21.7201 5.27988C23.9002 7.45999 25.125 10.4169 25.125 13.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/in-progress-light.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7917 9.625L18.6667 13.5M18.6667 13.5L14.7917 17.375M18.6667 13.5H8.33333M25.125 13.5C25.125 15.0266 24.8243 16.5383 24.2401 17.9487C23.6559 19.3591 22.7996 20.6406 21.7201 21.7201C20.6406 22.7996 19.3591 23.6559 17.9487 24.2401C16.5383 24.8243 15.0266 25.125 13.5 25.125C11.9734 25.125 10.4617 24.8243 9.0513 24.2401C7.64089 23.6559 6.35936 22.7996 5.27988 21.7201C4.2004 20.6406 3.34411 19.3591 2.7599 17.9487C2.17569 16.5383 1.875 15.0266 1.875 13.5C1.875 10.4169 3.09977 7.45999 5.27988 5.27988C7.45999 3.09977 10.4169 1.875 13.5 1.875C16.5831 1.875 19.54 3.09977 21.7201 5.27988C23.9002 7.45999 25.125 10.4169 25.125 13.5Z" stroke="#654DCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/opened-dark.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="12.5" r="11.5" stroke="white" stroke-width="2"/>
+<path d="M11.4 6.848C11.4533 6.816 11.5333 6.8 11.64 6.8H13.576C13.6293 6.8 13.672 6.82133 13.704 6.864C13.7467 6.896 13.768 6.93867 13.768 6.992V17.808C13.768 17.8613 13.7467 17.9093 13.704 17.952C13.672 17.984 13.6293 18 13.576 18H11.704C11.6507 18 11.6027 17.984 11.56 17.952C11.528 17.9093 11.512 17.8613 11.512 17.808V9.04C11.512 9.01867 11.5013 8.99733 11.48 8.976C11.4587 8.95467 11.4373 8.94933 11.416 8.96L9.832 9.392L9.768 9.408C9.672 9.408 9.624 9.34933 9.624 9.232L9.576 7.856C9.576 7.74933 9.624 7.67467 9.72 7.632L11.4 6.848Z" fill="white"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/opened-light.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="12.5" r="11.5" stroke="#654DCB" stroke-width="2"/>
+<path d="M11.4 6.848C11.4533 6.816 11.5333 6.8 11.64 6.8H13.576C13.6293 6.8 13.672 6.82133 13.704 6.864C13.7467 6.896 13.768 6.93867 13.768 6.992V17.808C13.768 17.8613 13.7467 17.9093 13.704 17.952C13.672 17.984 13.6293 18 13.576 18H11.704C11.6507 18 11.6027 17.984 11.56 17.952C11.528 17.9093 11.512 17.8613 11.512 17.808V9.04C11.512 9.01867 11.5013 8.99733 11.48 8.976C11.4587 8.95467 11.4373 8.94933 11.416 8.96L9.832 9.392L9.768 9.408C9.672 9.408 9.624 9.34933 9.624 9.232L9.576 7.856C9.576 7.74933 9.624 7.67467 9.72 7.632L11.4 6.848Z" fill="#654DCB"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/pending-dark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33333 12H7.345M12 12H12.0117M16.6667 12H16.6783M22.5 12C22.5 13.3789 22.2284 14.7443 21.7007 16.0182C21.1731 17.2921 20.3996 18.4496 19.4246 19.4246C18.4496 20.3996 17.2921 21.1731 16.0182 21.7007C14.7443 22.2284 13.3789 22.5 12 22.5C10.6211 22.5 9.25574 22.2284 7.98182 21.7007C6.70791 21.1731 5.55039 20.3996 4.57538 19.4246C3.60036 18.4496 2.82694 17.2921 2.29926 16.0182C1.77159 14.7443 1.5 13.3789 1.5 12C1.5 9.21523 2.60625 6.54451 4.57538 4.57538C6.54451 2.60625 9.21523 1.5 12 1.5C14.7848 1.5 17.4555 2.60625 19.4246 4.57538C21.3938 6.54451 22.5 9.21523 22.5 12Z" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/pending-light.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33333 12H7.345M12 12H12.0117M16.6667 12H16.6783M22.5 12C22.5 13.3789 22.2284 14.7443 21.7007 16.0182C21.1731 17.2921 20.3996 18.4496 19.4246 19.4246C18.4496 20.3996 17.2921 21.1731 16.0182 21.7007C14.7443 22.2284 13.3789 22.5 12 22.5C10.6211 22.5 9.25574 22.2284 7.98182 21.7007C6.70791 21.1731 5.55039 20.3996 4.57538 19.4246C3.60036 18.4496 2.82694 17.2921 2.29926 16.0182C1.77159 14.7443 1.5 13.3789 1.5 12C1.5 9.21523 2.60625 6.54451 4.57538 4.57538C6.54451 2.60625 9.21523 1.5 12 1.5C14.7848 1.5 17.4555 2.60625 19.4246 4.57538C21.3938 6.54451 22.5 9.21523 22.5 12Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>