legalesign-document-viewer 0.7.2 → 0.7.3

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

@@ -1,205 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,159 +0,0 @@
-: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

@@ -1,63 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,232 +0,0 @@
-: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;
-}