@verdocs/web-sdk 1.0.22 → 1.1.0

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

@@ -0,0 +1,133 @@
+import { Component, Prop, h, Host, Event } from '@stencil/core';
+/**
+ * Display a simple button. Three variants are supported. Standard and Outline buttons look like traditional form buttons and are
+ * ideal candidates for 'Ok' and 'Cancel' options in most cases. Text buttons are intended to be used inline in content blocks or
+ * for more subtle button options. (Auth uses text buttons for the Forgot Password and Sign Up options.)
+ */
+export class VerdocsButton {
+  constructor() {
+    /**
+     * The label for the  button.
+     */
+    this.label = '';
+    /**
+     * The type of the button.
+     */
+    this.type = 'button';
+    /**
+     * The display variant of the button.
+     */
+    this.variant = 'standard';
+    /**
+     * Whether the button should be disabled.
+     */
+    this.disabled = false;
+  }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  handleClick(e) {
+    e.preventDefault();
+    this.press.emit();
+  }
+  render() {
+    return (h(Host, { class: `${this.variant}` },
+      h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e) }, this.label)));
+  }
+  static get is() { return "verdocs-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-button.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label for the  button."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'button' | 'submit' | 'reset'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The type of the button."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'button'"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'standard' | 'text' | 'outline'",
+        "resolved": "\"outline\" | \"standard\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The display variant of the button."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'standard'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the button should be disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "press",
+      "name": "press",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the button is pressed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,20 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Button',
+  component: 'verdocs-button',
+  args: {
+    label: 'Click Me',
+    type: 'button',
+    disabled: false,
+  },
+  argTypes: {
+    variant: { defaultValue: 'standard' },
+    press: {
+      action: 'press',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const Button = ({ label, variant, disabled, press }) => html `<verdocs-button .label=${label} .variant=${variant} .disabled=${disabled} @press=${press} />`;

package/dist/collection/components/controls/verdocs-document-status/check.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.7367 1.10949L10.8409 19.2378L4.26524 12.5768C3.94644 12.2538 3.42951 12.2538 3.11064 12.5768L1.18637 14.5261C0.867564 14.849 0.867564 15.3726 1.18637 15.6957L10.2635 24.8907C10.5823 25.2136 11.0992 25.2136 11.4181 24.8907L31.8155 4.22835C32.1344 3.9054 32.1344 3.38177 31.8155 3.05875L29.8913 1.10949C29.5725 0.786542 29.0556 0.786542 28.7367 1.10949Z" fill="#AEB4BF"/>
+</svg>

package/dist/collection/components/controls/verdocs-document-status/verdocs-document-status.css

@@ -0,0 +1,18 @@
+verdocs-document-status {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  width: 140px;
+  display: flex;
+  font-size: 16px;
+  flex-wrap: nowrap;
+  align-items: center;
+  flex-direction: row;
+  color: var(--verdocs-label-color);
+}
+verdocs-document-status svg {
+  height: 20px;
+  width: 20px;
+  margin: 0 8px -4px 0;
+  fill: var(--verdocs-icon-color);
+}

package/dist/collection/components/controls/{document-status-indicator/document-status-indicator.js → verdocs-document-status/verdocs-document-status.js}

@@ -1,19 +1,19 @@
-import { Component, Prop, h } from '@stencil/core';
-import CancelledIcon from './cancelled-icon.svg';
-import DeclinedIcon from './declined-icon.svg';
-import FinishedIcon from './finished-icon.svg';
-import PendingIcon from './pending-icon.svg';
+import { Component, Prop, Host, h } from '@stencil/core';
+import PendingIcon from './pending.svg';
+import CheckIcon from './check.svg';
+import StopIcon from './stop.svg';
+import XIcon from './x.svg';
 /**
- * Displays an icon and message describing a document's status of completion.
+ * Displays an icon and message describing a document's completion status.
  */
-export class DocumentStatusIndicator {
+export class VerdocsDocumentStatus {
   render() {
     let icon;
     let statusMessage;
     switch (this.status) {
       case 'complete':
-        icon = FinishedIcon;
-        statusMessage = 'Complete';
+        icon = CheckIcon;
+        statusMessage = 'Completed';
         break;
       case 'pending':
         icon = PendingIcon;
@@ -24,34 +24,34 @@ export class DocumentStatusIndicator {
         statusMessage = 'In Progress';
         break;
       case 'canceled':
-        icon = CancelledIcon;
+        icon = XIcon;
         statusMessage = 'Cancelled';
         break;
       case 'declined':
-        icon = DeclinedIcon;
+        icon = StopIcon;
         statusMessage = 'Declined';
         break;
     }
-    return (h("div", { class: "container" },
+    return (h(Host, null,
       h("span", { class: "icon", innerHTML: icon }),
       h("span", { class: "content" }, statusMessage)));
   }
-  static get is() { return "document-status-indicator"; }
+  static get is() { return "verdocs-document-status"; }
   static get originalStyleUrls() { return {
-    "$": ["document-status-indicator.scss"]
+    "$": ["verdocs-document-status.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["document-status-indicator.css"]
+    "$": ["verdocs-document-status.css"]
   }; }
   static get properties() { return {
     "status": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "IDocumentStatus",
+        "original": "TDocumentStatus",
         "resolved": "\"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"pending\"",
         "references": {
-          "IDocumentStatus": {
+          "TDocumentStatus": {
             "location": "import",
             "path": "@verdocs/js-sdk/Documents/Documents"
           }

package/dist/collection/components/controls/verdocs-document-status/verdocs-document-status.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Document Status',
+  component: 'verdocs-docus-status',
+  args: {},
+  argTypes: {
+    status: {
+      defaultValue: 'complete',
+      type: 'string',
+      control: 'radio',
+      options: ['complete', 'pending', 'in progress', 'declined', 'canceled'],
+    },
+  },
+};
+export const DocumentStatus = ({ status }) => html `<verdocs-document-status .status="${status}" />`;

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

@@ -1,45 +1,36 @@
-dropdown-menu {
+verdocs-dropdown {
   /* Fallback font for old browsers */
   font-family: sans-serif;
   font-family: var(--verdocs-font);
+  display: block;
 }
-
-/*:host {*/
-/*  display: block;*/
-/*  position: relative;*/
-/*}*/
-/*:host([tall]) {*/
-/*  height: 160px;*/
-/*}*/
-dropdown-menu .arrow {
+verdocs-dropdown .arrow {
   width: 32px;
   height: 26px;
   background: #fff;
+  cursor: pointer;
   border-radius: 4px;
   align-items: center;
   display: inline-flex;
   border: 1px solid #ccc;
   justify-content: center;
 }
-
-dropdown-menu .arrow svg {
-  fill: #50be80;
+verdocs-dropdown .arrow svg {
+  fill: var(--verdocs-primary-color);
   transition: 0.3s;
 }
-
-dropdown-menu .items {
+verdocs-dropdown .items {
   width: 200px;
   display: none;
+  z-index: 10000;
   border-radius: 5px;
   background: #33364b;
   border: 1px solid #654dcb;
 }
-
-dropdown-menu .items[data-show] {
+verdocs-dropdown .items[data-show] {
   display: block;
 }
-
-dropdown-menu .option {
+verdocs-dropdown .option {
   width: 100%;
   color: #fff;
   border: none;
@@ -48,32 +39,26 @@ dropdown-menu .option {
   background: none;
   padding: 10px 20px;
 }
-
-dropdown-menu .option:hover {
+verdocs-dropdown .option:hover {
   cursor: pointer;
-  background: #50be80;
+  background: var(--verdocs-primary-color);
 }
-
-dropdown-menu .option[disabled] {
+verdocs-dropdown .option[disabled] {
   color: #aaa;
 }
-
-dropdown-menu .option[disabled]:hover {
+verdocs-dropdown .option[disabled]:hover {
   color: #aaa;
   cursor: inherit;
   background: transparent;
 }
-
-dropdown-menu .open .items {
+verdocs-dropdown.open .items {
   display: block;
 }
-
-dropdown-menu .open .arrow {
+verdocs-dropdown.open .arrow {
   background: #4c56cb;
   border: 1px solid #707ae5;
 }
-
-dropdown-menu .open .arrow svg {
+verdocs-dropdown.open .arrow svg {
   /*transform: rotate(180deg);*/
   transform: scaleY(-1);
   fill: #fff;

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

@@ -1,3 +1,4 @@
+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';
@@ -19,7 +20,7 @@ import SortDown from './down-arrow.svg';
  * }
  * ```
  */
-export class DropdownMenu {
+export class VerdocsDropdown {
   constructor() {
     /**
      * The menu options to display.
@@ -35,6 +36,7 @@ export class DropdownMenu {
   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 +51,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 +77,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 +127,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,13 @@
+import { Component, h, Host } from '@stencil/core';
+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,44 +1,27 @@
-org-popup {
+verdocs-organization-card {
   /* Fallback font for old browsers */
   font-family: sans-serif;
   font-family: var(--verdocs-font);
-}
-
-org-popup .container {
   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;
 }
-
-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: var(--verdocs-icon-color);
   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;
@@ -53,8 +36,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 +46,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 +56,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;