legalesign-document-viewer 0.7.3 → 0.7.4

package/dist/collection/components/ls-tooltip/ls-tooltip.js

@@ -0,0 +1,205 @@
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { h } from "@stencil/core";
+export class LsTooltip {
+    el;
+    referenceElement;
+    placement = 'top';
+    tooltipText;
+    tooltipTitle;
+    tooltipLocked = false;
+    updateReferenceHandler(newReference) {
+        if (!newReference)
+            return;
+        this.tooltipText = newReference.getAttribute('data-tooltip');
+        this.tooltipTitle = newReference.getAttribute('data-tooltip-title');
+        this.placement = newReference.getAttribute('data-tooltip-placement') || 'top';
+        const arrowElement = this.el.shadowRoot.querySelector('#arrow');
+        const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner');
+        computePosition(this.referenceElement, innerTooltip, {
+            placement: this.placement,
+            middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],
+        })
+            .then(({ x, y, placement, middlewareData }) => {
+            Object.assign(innerTooltip.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[placement.split('-')[0]];
+            Object.assign(arrowElement.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
+        })
+            .then(() => {
+            innerTooltip.classList.remove('hidden');
+            innerTooltip.classList.add('visible');
+            this.referenceElement = null;
+        });
+    }
+    async hide() {
+        const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner');
+        innerTooltip.classList.remove('visible');
+        innerTooltip.classList.add('hidden');
+    }
+    render() {
+        return (h("div", { key: '451c66547f31f246ed8407cdb736024deae00c10', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: '6fab60fd203005d3188d387d56b7dfb625bd8d38', id: "arrow" }), this.tooltipTitle && h("p", { key: '0f4fac167648a5cacb497eeae366ecd099403d2b', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: '133faef9c849edc3616c55219b3147d5fe1db06b' })));
+    }
+    static get is() { return "ls-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "referenceElement": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placement": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'top'"
+            },
+            "tooltipText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-text"
+            },
+            "tooltipTitle": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-title"
+            },
+            "tooltipLocked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-locked",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "referenceElement",
+                "methodName": "updateReferenceHandler"
+            }];
+    }
+}
+//# sourceMappingURL=ls-tooltip.js.map

package/dist/collection/components/ls-tooltip/ls-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-tooltip.js","sourceRoot":"","sources":["../../../src/components/ls-tooltip/ls-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Element, Method, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-tooltip',\n  styleUrl: 'ls-tooltip.css',\n  shadow: true,\n})\nexport class LsTooltip {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true }) referenceElement: HTMLElement;\n  @Prop({ mutable: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n  @Prop({ mutable: true }) tooltipText: string;\n  @Prop({ mutable: true }) tooltipTitle: string;\n  @Prop() tooltipLocked = false;\n\n  @Watch('referenceElement')\n  updateReferenceHandler(newReference: HTMLElement) {\n    if (!newReference) return;\n\n    this.tooltipText = newReference.getAttribute('data-tooltip');\n    this.tooltipTitle = newReference.getAttribute('data-tooltip-title');\n    this.placement = (newReference.getAttribute('data-tooltip-placement') as 'top' | 'bottom' | 'left' | 'right') || 'top';\n\n    const arrowElement = this.el.shadowRoot.querySelector('#arrow');\n    const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n\n    computePosition(this.referenceElement, innerTooltip, {\n      placement: this.placement,\n      middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],\n    })\n      .then(({ x, y, placement, middlewareData }) => {\n        Object.assign(innerTooltip.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || {};\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        Object.assign((arrowElement as HTMLElement).style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          [staticSide]: '-4px',\n        });\n      })\n      .then(() => {\n        innerTooltip.classList.remove('hidden');\n        innerTooltip.classList.add('visible');\n        this.referenceElement = null;\n      });\n  }\n\n  @Method()\n  async hide() {\n    const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n    innerTooltip.classList.remove('visible');\n    innerTooltip.classList.add('hidden');\n  }\n\n  render() {\n    return (\n      <div id=\"ls-tooltip-inner\" class=\"tooltip hidden\" role=\"tooltip\">\n        <div id=\"arrow\"></div>\n        {this.tooltipTitle && <p class=\"tooltip-title\">{this.tooltipTitle}</p>}\n        {this.tooltipText}\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-validation-manager/ls-validation-manager.css

@@ -0,0 +1,159 @@
+:host {
+  display: block;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.toolbox-section-description {
+  color: var(--gray-80, #5e6066);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.validation-section-title {
+  color: var(--gray-100, #45484d);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.75rem; /* 155.556% */
+}
+
+.valid-label {
+  display: flex;
+  padding: 0.125rem 0.5rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  width: fit-content;
+}
+
+.valid {
+  background-color: var(--green-30, #9df5d4);
+  color: var(--green-100, #125241);
+}
+
+.invalid {
+  background: var(--yellow-20, #fff3c2);
+  color: var(--yellow-90, #8a3f0e);
+}
+
+.field-counter {
+  display: flex;
+  padding: 0.125rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1rem;
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  color: var(--yellow-20, #fff3c2);
+  background: #e17100;
+  min-width: 1rem;
+}
+
+.field-dropdown {
+  position: absolute;
+  top: 2rem;
+  right: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 20rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  max-height: 20rem;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 1000;
+}
+
+.required-field {
+  position: relative;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  background: var(--field-background);
+  color: var(--field-text-color);
+  border: 1px solid var(--field-border-color);
+  transition: all 0.1s ease-in-out;
+}
+
+.required-field:hover {
+  background: var(--field-background-hover);
+  color: var(--field-text-color-hover);
+  border: 1px solid var(--field-border-color-hover);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.required-field-items-left {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+.required-field-items-left p {
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 0.875rem; /* 142.857% */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dot {
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+}
+
+.role-label {
+  display: flex;
+  padding: 0.125rem 0.1875rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+  text-transform: capitalize;
+}
+
+.dropdown-header h2 {
+  color: var(--gray-100, #45484d);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  margin-bottom: 0.125rem;
+}
+
+.dropdown-header p {
+  color: var(--gray-80, #6c6e73);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+}

package/dist/collection/components/ls-validation-manager/ls-validation-manager.js

@@ -0,0 +1,63 @@
+import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+export class LsValidationManager {
+    /**
+     * The template information (as JSON).
+     * {LSApiTemplate}
+     */
+    validationErrors;
+    render() {
+        return (h(Host, { key: 'c893467217d533ecd36fad2cae23ef25a6f2fcfb' }, h("div", { key: '84e7f326878aa6f352b3d8e7e6f34d4eee311e7e' }, h("div", { key: '9ed0335e4e945dd18cf28100b60f023f49be80e5' }, h("div", { key: '90052ee13a6c44ac5ca44576a676bc98b7974435', class: 'validation-section-title' }, "Action Required"), h("p", { key: 'cfb7ba17cafac491b4e2b3f107237f4d7fd4e6fe', class: "toolbox-section-description" }, "This document needs fields added or corrected before it can be sent.")), this.validationErrors && this.validationErrors.map((field, idx) => {
+            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
+            return (h("div", { key: idx, class: 'required-field', style: {
+                    '--field-background': pallette.s10,
+                    '--field-border-color': pallette.s10,
+                    '--field-background-hover': pallette.s20,
+                    '--field-text-color': pallette.s70,
+                    '--field-text-color-hover': pallette.s80,
+                    '--field-border-color-hover': pallette.s60,
+                } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: field.element.signer }), h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
+        })), h("slot", { key: 'ccabb8a86948a763ed8548e8b2f0ca3452bfb7c5' })));
+    }
+    static get is() { return "ls-validation-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-validation-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-validation-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "validationErrors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValidationError[]",
+                    "resolved": "ValidationError[]",
+                    "references": {
+                        "ValidationError": {
+                            "location": "import",
+                            "path": "../../types/ValidationError",
+                            "id": "src/types/ValidationError.ts::ValidationError"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The template information (as JSON).\n{LSApiTemplate}"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-validation-manager.js.map

package/dist/collection/components/ls-validation-manager/ls-validation-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-validation-manager.js","sourceRoot":"","sources":["../../../src/components/ls-validation-manager/ls-validation-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { ValidationError } from '../../types/ValidationError';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-validation-manager',\n  styleUrl: 'ls-validation-manager.css',\n  shadow: true,\n})\n\nexport class LsValidationManager {\n\n  /**\n   * The template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() validationErrors: ValidationError[];\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div>\n            <div class={'validation-section-title'}>Action Required</div>\n            <p class=\"toolbox-section-description\">\n              This document needs fields added or corrected before it can be sent.\n            </p>\n          </div>\n          {this.validationErrors && this.validationErrors.map((field, idx) => {\n            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n            return (\n              <div\n                key={idx}\n                class={'required-field'}\n                style={{\n                  '--field-background': pallette.s10,\n                  '--field-border-color': pallette.s10,\n                  '--field-background-hover': pallette.s20,\n                  '--field-text-color': pallette.s70,\n                  '--field-text-color-hover': pallette.s80,\n                  '--field-border-color-hover': pallette.s60,\n                }}\n              >\n                <div class={'required-field-items-left'}>\n                  <div class={'dot'} style={{ background: pallette.s60 }} />\n                  {field?.role && (\n                    <div class={'required-field-items-left'}>\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                      <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                      </div>\n                    </div>\n                  )}\n                  {field?.element && (\n                    <>\n                     <ls-toolbox-field\n                          elementType=\"signature\"\n                          formElementType=\"signature\"\n                          label=\"Signature\"\n                          defaultHeight={27}\n                          defaultWidth={120}\n                          validation={0}\n                          icon=\"signature\"\n                          tooltip=\"Use this field to collect Signatures from Participants\"\n                          signer={field.element.signer}\n                        />\n\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                      <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.description}\n                      </div>\n                    </>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-validation-tag/ls-validation-tag.css

@@ -0,0 +1,232 @@
+:host {
+  position: relative;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.valid-label {
+  display: flex;
+  padding: 0.125rem 0.5rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  width: fit-content;
+}
+.valid-label:hover {
+  cursor: pointer;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.valid {
+  background-color: var(--green-30, #9df5d4);
+  color: var(--green-100, #125241);
+}
+
+.invalid.default {
+  background: var(--yellow-20, #fff3c2);
+  color: var(--yellow-90, #8a3f0e);
+}
+
+.invalid.compose {
+  border: 1px solid var(--red-40, #ffa19e);
+  background: var(--red-10, #fff0f0);
+  color: var(--red-80, #c1140e);
+}
+
+.field-counter {
+  display: flex;
+  padding: 0.125rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1rem;
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  color: var(--yellow-20, #fff3c2);
+  background: #e17100;
+  min-width: 1rem;
+}
+
+.field-counter.compose {
+  color: var(--red-10, #fff0f0);
+  background: var(--red-60, #f64a44);
+}
+
+.field-dropdown {
+  position: absolute;
+  top: 2rem;
+  right: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 20rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  max-height: 20rem;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 1000;
+}
+
+.field-dropdown.compose {
+  width: 14rem;
+  padding: 0.75rem;
+  gap: 0.5rem;
+}
+
+.field-dropdown.compose > * {
+  width: 100%;
+}
+.required-field {
+  position: relative;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  background: var(--field-background);
+  color: var(--field-text-color);
+  border: 1px solid var(--field-border-color);
+  transition: all 0.1s ease-in-out;
+}
+
+.required-field:hover {
+  background: var(--field-background-hover);
+  color: var(--field-text-color-hover);
+  border: 1px solid var(--field-border-color-hover);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.required-field-items-left {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+.required-field-items-left p {
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 0.875rem; /* 142.857% */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dot {
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+}
+
+.role-label {
+  display: flex;
+  padding: 0.125rem 0.1875rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+  text-transform: capitalize;
+}
+
+.dropdown-header h2 {
+  color: var(--gray-100, #45484d);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  margin-bottom: 0.125rem;
+}
+
+.dropdown-header p {
+  color: var(--gray-80, #6c6e73);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+}
+
+.validation-tag-container {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.validation-tag-header {
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #edeff2;
+}
+
+.validation-tag-title {
+  font-family: 'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  color: #45484d;
+  line-height: 1.5rem;
+}
+
+.validation-tag-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.validation-tag-row:hover {
+  background-color: var(--gray-10, #f9f9fa);
+}
+
+.validation-tag-bar {
+  width: 0.25rem;
+  height: 2rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+
+.validation-tag-details {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
+.validation-tag-name {
+  font-family: 'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  color: #45484d;
+  line-height: 1.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.validation-tag-email {
+  font-family: 'IBM Plex Sans Light', 'IBM Plex Sans', sans-serif;
+  font-size: 0.75rem;
+  color: #5e6066;
+  line-height: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}