legalesign-document-viewer 0.9.7 → 0.9.9

package/dist/collection/components/ls-participant-select/ls-participant-select.js

@@ -47,42 +47,42 @@ export class LsParticipantSelect {
         this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (h(Host, { key: 'c141766f1eb5c4b043fe9e6cccf73d68ad5a9f37' }, h("div", { key: 'b4524f25d68a5a715ece2cee78e09b47b6c0241b', class: "dropdown" }, h("div", { key: '81099026f34762dfe3e5073cf35b143590649879', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'e4a18cb2949cb87ece3fc31771f592b3a5b291ce', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3d3b48a2741681b7a1c24ad018e6077badbdbc53', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: 'b572e561374421a6f4712cd495c4eb2f8dee9d8b', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: 'b44f5beb1ece1c918921d547823c30b0fb3700c6', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: '3f174e6df96be1bb6e3479b653bdb1e8968d8c2d', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: '2c121f619fababc6f2063406e142bcd6aa93879c', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '62fb1e6f88acdd44eaffc6f27d18959891f0a35e', class: 'selected-role-label', style: {
+        return (h(Host, { key: 'e7dc142088796a020aefa9e4b073477b16335dc9' }, h("div", { key: '1802964c48679daeb59616d31847d6f58793b3cb', class: "ls-dv-dropdown" }, h("div", { key: 'd07ea1bb59a6ab2f6f127b8e1b190573331ef898', class: "ls-dv-dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'd64f615e2011f82b8e0c2e2b02caff74bf5799c2', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e774266782f47d1424872d9c43cdb2600f74a002', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: 'e19c49169b0ed0c16c1494ede1ca58d4bf88e37b', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: '704e206010943c961b37dbe2eddaace725bddfbe', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: '07d0251c84273d7f5c89436b4f448162c295067c', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: '3fc7da64874009a1bb5d8251a747162359cb9488', class: 'ls-dv-placing-fields-text' }, "Placing Fields for"), h("div", { key: '7577ab9fa0d4b2e4b0e008fb01bffbe60dea9afa', class: 'ls-dv-selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, h("ls-icon", { key: 'd0ad93cd6345f998fbe43fc9ffed8638861f84a2', size: "1.125rem", name: this.selectedRole?.roleType === 'SENDER'
+            } }, h("ls-icon", { key: 'f386b1b79d5f1a2cee16383190f3cb0cb0c906fb', size: "1.125rem", name: this.selectedRole?.roleType === 'SENDER'
                 ? 'user'
                 : this.selectedRole?.roleType === 'APPROVER'
                     ? 'check-circle'
                     : this.selectedRole?.roleType === 'WITNESS'
                         ? 'eye'
                         : 'signature' }), this.selectedRole.name ||
-            (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'ccf21bb38feec686b6d8d5e2832e508b6f415256', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: 'f89863173df88aa55e363f5dd9f2ad145cb33d12', name: "chevron-down" }))), this.isOpen && (h("div", { key: '78da1100aabb62f5ad6d5f294b1aab9d5547e1e6', class: "dropdown-list" }, h("div", { key: '136ce701994a107daa5c0786dddcd476574cef31', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+            (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'b9b040d6c193ba04f945b6d8416dd2c34d9d4eac', class: 'ls-dv-tertiary-grey ls-dv-expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '5d16a71655b95c1be06c9d9df435cf09847958ee', name: "chevron-down" }))), this.isOpen && (h("div", { key: '62f0c384b2e2791cec701c3f3625341aa8569809', class: "ls-dv-dropdown-list" }, h("div", { key: 'd4fae2d93377a8e714082085cd81c19924e7b7ee', class: this.selectedRole?.signerIndex === 0 ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item', style: {
                 '--background-selected': defaultRolePalette[0].s10,
                 '--check-icon-selected': defaultRolePalette[0].s50,
-            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '283ca0d9fdd21a5e7a18273319e6af0d2ddf2886', class: 'role-icon', style: {
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: 'ac8464f1d7523a4368cf4931e8e00eac1c0238e0', class: 'ls-dv-role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, h("ls-icon", { key: '07a6bcd8180da7fbc10f74974d054c4b8931430f', name: "user" })), h("div", { key: '512c4f3fe266d71acb906349b27f5591074bd504', class: 'role-text' }, h("p", { key: 'bab252d2494e47ccf85c67af43452dac7153828f', class: 'role-name', style: {
+            } }, h("ls-icon", { key: '2b16509cabab3d0806b0cb47aa565d57e866600e', name: "user" })), h("div", { key: 'e77180d46d7bf89f7c6ab798c9de1c0b2a6f56db', class: 'ls-dv-role-text' }, h("p", { key: '54361dd78bdbf74a05026db56e01000d2d9772bb', class: 'ls-dv-role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), h("p", { key: 'eaaa3335214cdd4f1c4a33322ef6856eec60b8ae', class: 'role-type', style: {
+            } }, 'Sender'), h("p", { key: 'ea196b60c38461b386d66495c73ad418279e46dd', class: 'ls-dv-role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), h("ls-icon", { key: 'fd6a73b8395974ec0fd7354729decfb89834fef6', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+            } }, "You")), h("ls-icon", { key: '8535a7ecd926c8f6227a80a4ba8dcb5a7ef848b1', class: 'ls-dv-check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item', style: {
                 '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,
                 '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,
-            }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
-                .querySelector('.check-icon')
-                ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'role-icon', style: {
+            }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
+                .querySelector('.ls-dv-check-icon')
+                ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'ls-dv-role-icon', style: {
                 background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,
                 color: defaultRolePalette[r?.signerIndex % 100].s90,
-            } }, h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name', style: {
+            } }, h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature' })), h("div", { class: 'ls-dv-role-text' }, h("p", { class: 'ls-dv-role-name', style: {
                 '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
-            } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), h("p", { class: 'role-type', style: {
+            } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), h("p", { class: 'ls-dv-role-type', style: {
                 '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: 'f4258f3b7b58f99612391bdf1af167a7ac9e9e39', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'ls-dv-check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: '3cfade5d46569a5ac056506fbd4a28a82944b2b2', onClick: () => this.createHandler(), class: 'ls-dv-add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, h("div", { key: 'cd4f50c0aa9b9da2cb182625ed0aa4dc03f6aade', class: 'add-participant-icon' }, h("ls-icon", { key: 'a836beba284e419d48c4e49a831dcd8e35636c95', name: "user-add" })), h("div", { key: '867fa31f01ce54f54ec77a018d6998496470ac39', class: 'role-text' }, h("p", { key: '545385488508f94bd10875e6d299a979b65f218c', class: 'role-name' }, "Add Participant"), h("p", { key: 'c721a5c2b58ff972cd4854bfc797556ce0de20e7', class: 'role-type' }, "Add a new Signer")), h("ls-icon", { key: '0fc515b652f7bebf60e93e08674d540e17bf6a0c', class: 'plus-icon', name: "plus" }))))), h("slot", { key: '6f18592b6d1d532ad5079237e5c065127437ebce' })));
+            } }, h("div", { key: '8fe6ec55b50e4ca9d88ee5f4a7c07e52888aebb4', class: 'ls-dv-add-participant-icon' }, h("ls-icon", { key: '14b376ee02bf0a6b9aa426626b0e79712c805364', name: "user-add" })), h("div", { key: 'ed569bef4600d8a65eafe0b96a7e5328da60f5b5', class: 'ls-dv-role-text' }, h("p", { key: 'bcab20bb1d8862332dcbff44144dfb92ecdb7c9b', class: 'ls-dv-role-name' }, "Add Participant"), h("p", { key: '04d3cd02de952635a3888a58aaa48f058eefe9ac', class: 'ls-dv-role-type' }, "Add a new Signer")), h("ls-icon", { key: '367e9c451e784fd2390b0b2a471276b56295c45d', class: 'ls-dv-plus-icon', name: "plus" }))))), h("slot", { key: 'eddb284e55e42f98e04c72403229646c8290af3e' })));
     }
     static get is() { return "ls-participant-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-participant-select/ls-participant-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-participant-select.js","sourceRoot":"","sources":["../../../src/components/ls-participant-select/ls-participant-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-participant-select',\n  styleUrl: 'ls-participant-select.css',\n  shadow: true,\n})\nexport class LsParticipantSelect {\n  /**\n * The id of the currently selected role.\n * {string}\n */\n  @Prop({ mutable: true}) selected: string;\n  \n  /**\n   * The currently selected role.\n   * {number}\n   */\n  @State() selectedRole: { signerIndex: number; name: string; roleType?: string; default: boolean } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };\n\n  @Watch('roles')\n  handleRoleLoad() {\n    if(this.selectedRole.default) {\n      if(this.roles.length > 0) {\n        const initialRole = this.roles.find(r => r.signerIndex === 1);\n        if(initialRole) {\n          this.selectedRole = { ...initialRole, default: false };\n        }\n      }\n    } else {\n      const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);\n      if(updatedRole) {\n        this.selectedRole = { ...updatedRole, default: false };\n      }\n    }\n  }\n  /**\n   * The current template roles.\n   * {LSApiRole}\n   */\n  @Prop() roles?: LSApiRole[] = [];\n\n  @State() isOpen: boolean = false;\n\n\n  toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Event() roleChange: EventEmitter<number>;\n\n  @Event({\n    bubbles: true,\n    composed: true,\n  }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string | null}>;\n\n\n  selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n    this.selectedRole = { ...role, default: false };\n    this.isOpen = false;\n    this.roleChange.emit(role.signerIndex);\n  }\n\n  createHandler() {\n    this.addParticipant.emit({type: 'SIGNER'});\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"dropdown\">\n          <div class=\"dropdown-header\" onClick={this.toggleDropdown}>\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z\" fill=\"#78A3FA\" stroke=\"#F7F8FA\" />\n              <path\n                d=\"M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z\"\n                fill=\"#46DBAA\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z\"\n                fill=\"#FAD232\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n                stroke=\"#939599\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n            <p class={'placing-fields-text'}>Placing Fields for</p>\n            <div\n              class={'selected-role-label'}\n              style={{\n                background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n                color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n              }}\n            >\n              <ls-icon\n                size=\"1.125rem\"\n                name={\n                  this.selectedRole?.roleType === 'SENDER'\n                    ? 'user'\n                    : this.selectedRole?.roleType === 'APPROVER'\n                      ? 'check-circle'\n                      : this.selectedRole?.roleType === 'WITNESS'\n                        ? 'eye'\n                        : 'signature'\n                }\n              />\n              {this.selectedRole.name ||\n                (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n            </div>\n            <button class={'tertiaryGrey expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n              <ls-icon name=\"chevron-down\"></ls-icon>\n            </button>\n          </div>\n          {this.isOpen && (\n            <div class=\"dropdown-list\">\n              \n              <div\n                class={this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item'}\n                style={{\n                  '--background-selected': defaultRolePalette[0].s10,\n                  '--check-icon-selected': defaultRolePalette[0].s50,\n                }}\n                onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n                onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n                onMouseLeave={e =>\n                  (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n                }\n              >\n                <div\n                  class={'role-icon'}\n                  style={{\n                    background: defaultRolePalette[0].s50,\n                    color: defaultRolePalette[0].s80,\n                  }}\n                >\n                  <ls-icon name=\"user\" />\n                </div>\n                <div class={'role-text'}>\n                  <p\n                    class={'role-name'}\n                    style={{\n                      '--role-name-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    {'Sender'}\n                  </p>\n                  <p\n                    class={'role-type'}\n                    style={{\n                      '--role-type-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    You\n                  </p>\n                </div>\n\n                <ls-icon class={'check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n              </div>\n              {this.roles.map(r => (\n                <div\n                  class={r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item'}\n                  style={{\n                    '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n                    '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n                  }}\n                  onClick={() => this.selectRole(r)}\n                  onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n                  onMouseLeave={e =>\n                    (e.currentTarget as HTMLElement)\n                      .querySelector('.check-icon')\n                      ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n                  }\n                >\n                  <div\n                    class={'role-icon'}\n                    style={{\n                      background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n                      color: defaultRolePalette[r?.signerIndex % 100].s90,\n                    }}\n                  >\n                    <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n                  </div>\n                  <div class={'role-text'}>\n                    <p\n                      class={'role-name'}\n                      style={{\n                        '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n                      }}\n                    >\n                      {r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)}\n                    </p>\n                    <p\n                      class={'role-type'}\n                      style={{\n                        '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n                      }}\n                    >\n                      {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n                    </p>\n                  </div>\n                  <ls-icon\n                    class={'check-icon'}\n                    name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n                    solid={r.signerIndex === this.selectedRole?.signerIndex}\n                  />\n                </div>\n              ))}\n              <button\n                onClick={() => this.createHandler()}\n                class={'add-participant-row'}\n                style={{\n                  '--background-selected': defaultRolePalette[1].s10,\n                  '--check-icon-selected': defaultRolePalette[1].s50,\n                }}\n              >\n                <div\n                  class={'add-participant-icon'}\n                >\n                  <ls-icon name=\"user-add\" />\n                </div>\n                <div class={'role-text'}>\n                  <p class={'role-name'}>Add Participant</p>\n                  <p class={'role-type'}>Add a new Signer</p>\n                </div>\n                <ls-icon class={'plus-icon'} name=\"plus\" />\n              </button>\n            </div>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-participant-select.js","sourceRoot":"","sources":["../../../../src/components/ls-participant-select/ls-participant-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-participant-select',\n  styleUrl: 'ls-participant-select.css',\n  shadow: true,\n})\nexport class LsParticipantSelect {\n  /**\n * The id of the currently selected role.\n * {string}\n */\n  @Prop({ mutable: true}) selected: string;\n  \n  /**\n   * The currently selected role.\n   * {number}\n   */\n  @State() selectedRole: { signerIndex: number; name: string; roleType?: string; default: boolean } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };\n\n  @Watch('roles')\n  handleRoleLoad() {\n    if(this.selectedRole.default) {\n      if(this.roles.length > 0) {\n        const initialRole = this.roles.find(r => r.signerIndex === 1);\n        if(initialRole) {\n          this.selectedRole = { ...initialRole, default: false };\n        }\n      }\n    } else {\n      const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);\n      if(updatedRole) {\n        this.selectedRole = { ...updatedRole, default: false };\n      }\n    }\n  }\n  /**\n   * The current template roles.\n   * {LSApiRole}\n   */\n  @Prop() roles?: LSApiRole[] = [];\n\n  @State() isOpen: boolean = false;\n\n\n  toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Event() roleChange: EventEmitter<number>;\n\n  @Event({\n    bubbles: true,\n    composed: true,\n  }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string | null}>;\n\n\n  selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n    this.selectedRole = { ...role, default: false };\n    this.isOpen = false;\n    this.roleChange.emit(role.signerIndex);\n  }\n\n  createHandler() {\n    this.addParticipant.emit({type: 'SIGNER'});\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ls-dv-dropdown\">\n          <div class=\"ls-dv-dropdown-header\" onClick={this.toggleDropdown}>\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z\" fill=\"#78A3FA\" stroke=\"#F7F8FA\" />\n              <path\n                d=\"M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z\"\n                fill=\"#46DBAA\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z\"\n                fill=\"#FAD232\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n                stroke=\"#939599\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n            <p class={'ls-dv-placing-fields-text'}>Placing Fields for</p>\n            <div\n              class={'ls-dv-selected-role-label'}\n              style={{\n                background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n                color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n              }}\n            >\n              <ls-icon\n                size=\"1.125rem\"\n                name={\n                  this.selectedRole?.roleType === 'SENDER'\n                    ? 'user'\n                    : this.selectedRole?.roleType === 'APPROVER'\n                      ? 'check-circle'\n                      : this.selectedRole?.roleType === 'WITNESS'\n                        ? 'eye'\n                        : 'signature'\n                }\n              />\n              {this.selectedRole.name ||\n                (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n            </div>\n            <button class={'ls-dv-tertiary-grey ls-dv-expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n              <ls-icon name=\"chevron-down\"></ls-icon>\n            </button>\n          </div>\n          {this.isOpen && (\n            <div class=\"ls-dv-dropdown-list\">\n              \n              <div\n                class={this.selectedRole?.signerIndex === 0 ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item'}\n                style={{\n                  '--background-selected': defaultRolePalette[0].s10,\n                  '--check-icon-selected': defaultRolePalette[0].s50,\n                }}\n                onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n                onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle')}\n                onMouseLeave={e =>\n                  (e.currentTarget as HTMLElement).querySelector('.ls-dv-check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n                }\n              >\n                <div\n                  class={'ls-dv-role-icon'}\n                  style={{\n                    background: defaultRolePalette[0].s50,\n                    color: defaultRolePalette[0].s80,\n                  }}\n                >\n                  <ls-icon name=\"user\" />\n                </div>\n                <div class={'ls-dv-role-text'}>\n                  <p\n                    class={'ls-dv-role-name'}\n                    style={{\n                      '--role-name-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    {'Sender'}\n                  </p>\n                  <p\n                    class={'ls-dv-role-type'}\n                    style={{\n                      '--role-type-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    You\n                  </p>\n                </div>\n\n                <ls-icon class={'ls-dv-check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n              </div>\n              {this.roles.map(r => (\n                <div\n                  class={r.signerIndex === this.selectedRole?.signerIndex ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item'}\n                  style={{\n                    '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n                    '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n                  }}\n                  onClick={() => this.selectRole(r)}\n                  onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle')}\n                  onMouseLeave={e =>\n                    (e.currentTarget as HTMLElement)\n                      .querySelector('.ls-dv-check-icon')\n                      ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n                  }\n                >\n                  <div\n                    class={'ls-dv-role-icon'}\n                    style={{\n                      background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n                      color: defaultRolePalette[r?.signerIndex % 100].s90,\n                    }}\n                  >\n                    <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n                  </div>\n                  <div class={'ls-dv-role-text'}>\n                    <p\n                      class={'ls-dv-role-name'}\n                      style={{\n                        '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n                      }}\n                    >\n                      {r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)}\n                    </p>\n                    <p\n                      class={'ls-dv-role-type'}\n                      style={{\n                        '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n                      }}\n                    >\n                      {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n                    </p>\n                  </div>\n                  <ls-icon\n                    class={'ls-dv-check-icon'}\n                    name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n                    solid={r.signerIndex === this.selectedRole?.signerIndex}\n                  />\n                </div>\n              ))}\n              <button\n                onClick={() => this.createHandler()}\n                class={'ls-dv-add-participant-row'}\n                style={{\n                  '--background-selected': defaultRolePalette[1].s10,\n                  '--check-icon-selected': defaultRolePalette[1].s50,\n                }}\n              >\n                <div\n                  class={'ls-dv-add-participant-icon'}\n                >\n                  <ls-icon name=\"user-add\" />\n                </div>\n                <div class={'ls-dv-role-text'}>\n                  <p class={'ls-dv-role-name'}>Add Participant</p>\n                  <p class={'ls-dv-role-type'}>Add a new Signer</p>\n                </div>\n                <ls-icon class={'ls-dv-plus-icon'} name=\"plus\" />\n              </button>\n            </div>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-props-section/ls-props-section.css

@@ -3,27 +3,27 @@
   box-sizing: border-box;
 }
 
-.ls-field-properties-section {
+.ls-dv-field-properties-section {
   display: flex;
   position: relative;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.row {
+.ls-dv-row {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
 
-.ls-field-properties-section-text {
+.ls-dv-field-properties-section-text {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.25rem;
 }
 
-.ls-field-properties-section-title {
+.ls-dv-field-properties-section-title {
   color: var(--gray-90, #5e6066);
   font-size: 1rem;
   font-style: normal;
@@ -31,7 +31,7 @@
   line-height: 1.25rem; /* 142.857% */
 }
 
-.ls-field-properties-section-description {
+.ls-dv-field-properties-section-description {
   overflow: hidden;
   color: var(--gray-80, #6c6e73);
   text-overflow: ellipsis;

package/dist/collection/components/ls-props-section/ls-props-section.js

@@ -4,7 +4,7 @@ export class LsPropsSection {
     sectionDescription;
     row = false;
     render() {
-        return (h(Host, { key: 'e101c1333ab857dd1dfa3bed2ef93b3065f79e77' }, h("div", { key: '7bb13b1c0ac11351034e94a2fbcb4627489f895c', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, h("div", { key: 'd61ba3466266155a10cefe3354ce2927cb5f6f1d', class: 'ls-field-properties-section-text' }, h("p", { key: '210ac570926c048ce8199a476b9dbfd912a02177', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: '685f607680c9675f24fc1c8274374ae740d05ee2', class: 'ls-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: '0950497c90b960fd3a6348bf70a1d4562f25ae42' }))));
+        return (h(Host, { key: '7d1522657fdc08e55230521236ad663fe68603f0' }, h("div", { key: 'aeb5dcc428790deb768c8b26db00c40ba35ffc62', class: this.row ? 'ls-dv-field-properties-section ls-dv-row' : 'ls-dv-field-properties-section' }, h("div", { key: '52e52fe448eca8570a182ffe0b1d15fcf836c0f9', class: 'ls-dv-field-properties-section-text' }, h("p", { key: 'af365873d49935e98989a50c8896e640dc97d4d5', class: 'ls-dv-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: 'eb49875c06e60bacb0d6233aa440968458ddd2ae', class: 'ls-dv-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: '9d7fa2c6434b14b5e5bb47088683a8e2729e80c2' }))));
     }
     static get is() { return "ls-props-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-props-section/ls-props-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-props-section.js","sourceRoot":"","sources":["../../../src/components/ls-props-section/ls-props-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;IACjB,YAAY,CAAS;IACrB,kBAAkB,CAAU;IAC5B,GAAG,GAAa,KAAK,CAAC;IAE9B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,6BAA6B;gBACtF,4DAAK,KAAK,EAAE,kCAAkC;oBAC5C,0DAAG,KAAK,EAAE,mCAAmC,IAAG,IAAI,CAAC,YAAY,CAAK;oBACrE,IAAI,CAAC,kBAAkB,IAAI,0DAAG,KAAK,EAAE,yCAAyC,IAAG,IAAI,CAAC,kBAAkB,CAAK,CAC1G;gBACN,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-props-section',\n  styleUrl: 'ls-props-section.css',\n  shadow: true,\n})\nexport class LsPropsSection {\n  @Prop() sectionTitle: string;\n  @Prop() sectionDescription?: string;\n  @Prop() row?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>{this.sectionTitle}</p>\n            {this.sectionDescription && <p class={'ls-field-properties-section-description'}>{this.sectionDescription}</p>}\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-props-section.js","sourceRoot":"","sources":["../../../../src/components/ls-props-section/ls-props-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;IACjB,YAAY,CAAS;IACrB,kBAAkB,CAAU;IAC5B,GAAG,GAAa,KAAK,CAAC;IAE9B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,0CAA0C,CAAC,CAAC,CAAC,gCAAgC;gBAClG,4DAAK,KAAK,EAAE,qCAAqC;oBAC/C,0DAAG,KAAK,EAAE,sCAAsC,IAAG,IAAI,CAAC,YAAY,CAAK;oBACxE,IAAI,CAAC,kBAAkB,IAAI,0DAAG,KAAK,EAAE,4CAA4C,IAAG,IAAI,CAAC,kBAAkB,CAAK,CAC7G;gBACN,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-props-section',\n  styleUrl: 'ls-props-section.css',\n  shadow: true,\n})\nexport class LsPropsSection {\n  @Prop() sectionTitle: string;\n  @Prop() sectionDescription?: string;\n  @Prop() row?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={this.row ? 'ls-dv-field-properties-section ls-dv-row' : 'ls-dv-field-properties-section'}>\n          <div class={'ls-dv-field-properties-section-text'}>\n            <p class={'ls-dv-field-properties-section-title'}>{this.sectionTitle}</p>\n            {this.sectionDescription && <p class={'ls-dv-field-properties-section-description'}>{this.sectionDescription}</p>}\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-recipient-card/ls-recipient-card.css

@@ -7,7 +7,7 @@
   margin: 0;
 }
 
-.participant-card {
+.ls-dv-participant-card {
   display: flex;
   padding: 0.75rem;
   flex-direction: column;
@@ -20,18 +20,18 @@
   transform-origin: top;
 }
 
-.participant-card.expand-up {
+.ls-dv-participant-card.ls-dv-expand-up {
   transform-origin: bottom;
 }
-.participant-card.expand-down {
+.ls-dv-participant-card.ls-dv-expand-down {
   transform-origin: top;
 }
 
-.participant-card.expanded {
+.ls-dv-participant-card.ls-dv-expanded {
   max-height: 125rem; /* large enough for any content */
 }
 
-.dot {
+.ls-dv-dot {
   width: 0.5rem;
   height: 0.5rem;
   background: var(--red-50, #ff706b);
@@ -39,42 +39,42 @@
   margin-right: 0.25rem;
 }
 
-.top-card {
+.ls-dv-top-card {
   border-radius: 1rem 1rem 0 0;
 }
 
-.full-card {
+.ls-dv-full-card {
   border-radius: 1.5rem;
 }
 
-.bottom-card {
+.ls-dv-bottom-card {
   border-radius: 0 0 1rem 1rem;
 }
 
-.participant-card-inner {
+.ls-dv-participant-card-inner {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.hidden {
+.ls-dv-hidden {
   visibility: hidden;
   display: none;
 }
 
-.form-button-set {
+.ls-dv-form-button-set {
   display: flex;
   gap: 0.5rem;
 }
 
-.role-label {
+.ls-dv-role-label {
   display: flex;
   padding: 0.125rem 0.5rem;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 500;
@@ -82,19 +82,19 @@
   text-transform: capitalize;
 }
 
-.fields-box {
+.ls-dv-fields-box {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
 }
 
-.role-label.fields {
+.ls-dv-role-label.ls-dv-fields {
   border-radius: 1rem;
   margin-top: 0.5rem;
 }
 
-.innerButton {
+.ls-dv-inner-button {
   margin: 0px;
   padding: 0px;
   max-height: 1.25rem !important;
@@ -105,36 +105,36 @@
   color: var(--default-button-colour);
 }
 
-.innerButton:hover {
+.ls-dv-inner-button:hover {
   color: var(--hover-button-colour);
 }
 
-.participant-card-top-items {
+.ls-dv-participant-card-top-items {
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: center;
 }
 
-.button-set {
+.ls-dv-button-set {
   display: flex;
   gap: 0.125rem;
 }
 
-.participant-text-description {
+.ls-dv-participant-text-description {
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 500;
   line-height: 1.25rem; /* 142.857% */
 }
 
-.participant-text-type {
+.ls-dv-participant-text-type {
   font-style: normal;
   font-weight: 400;
   line-height: 1.25rem; /* 142.857% */
 }
 
-.titleButton {
+.ls-dv-title-button {
   width: 100%;
   text-align: left;
   background-color: transparent;
@@ -143,11 +143,11 @@
 
 /* Global Styles */
 
-.full-width {
+.ls-dv-full-width {
   width: 100%;
 }
 
-.participant-card-text {
+.ls-dv-participant-card-text {
   padding: 0 0.125rem 0.125rem 0.125rem;
 }
 
@@ -174,8 +174,8 @@ a:hover {
   color: var(--primary-70, #2134dc);
 }
 
-.button-link,
-.button-link:hover {
+.ls-dv-button-link,
+.ls-dv-button-link:hover {
   all: unset;
 }
 
@@ -185,7 +185,7 @@ select {
   width: 100%;
 }
 
-.input-wrapper {
+.ls-dv-input-wrapper {
   position: relative;
   width: fit-content;
 }
@@ -208,7 +208,7 @@ select {
   color: var(--gray-80, #6c6e73);
 }
 
-.has-leading-icon {
+.ls-dv-has-leading-icon {
   padding-left: 2.5rem;
 }
 
@@ -220,7 +220,7 @@ textarea {
   padding: 0.5rem 0.75rem;
   font-family: var(--font-family);
   font-size: var(--text-sm);
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   color: var(--gray-100, #45484d);
   font-weight: 400;
 }
@@ -273,7 +273,7 @@ input[type='checkbox'] {
 }
 
 input[type='checkbox']:checked,
-input[type='checkbox'].indeterminate {
+input[type='checkbox'].ls-dv-indeterminate {
   background-color: var(--primary-60, #4456f6);
   border: none;
 }
@@ -290,7 +290,7 @@ input[type='checkbox']:checked::after {
   border-right: 0.125rem solid white;
 }
 
-input[type='checkbox'].indeterminate::after {
+input[type='checkbox'].ls-dv-indeterminate::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -302,7 +302,7 @@ input[type='checkbox'].indeterminate::after {
 }
 
 input[type='checkbox']:checked:hover,
-input[type='checkbox'].indeterminate:hover {
+input[type='checkbox'].ls-dv-indeterminate:hover {
   background-color: var(--primary-70, #2134dc);
   border: none;
 }
@@ -331,13 +331,13 @@ input[type='checkbox']:disabled:checked {
   cursor: not-allowed;
 }
 
-.checkbox-container {
+.ls-dv-checkbox-container {
   display: flex;
   gap: 0.5rem;
   width: 100%;
 }
 
-.checkbox-label {
+.ls-dv-checkbox-label {
   color: var(--gray-100, #45484d);
   font-size: 1rem;
   font-style: normal;
@@ -345,7 +345,7 @@ input[type='checkbox']:disabled:checked {
   line-height: 1rem;
 }
 
-.form-label {
+.ls-dv-form-label {
   color: var(--gray-100, #45484d);
   font-size: 1rem;
   font-style: normal;
@@ -353,14 +353,14 @@ input[type='checkbox']:disabled:checked {
   line-height: 1.5rem;
 }
 
-.form-field {
+.ls-dv-form-field {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   width: 100%;
 }
 
-.loading-box {
+.ls-dv-loading-box {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -384,61 +384,61 @@ button {
   min-width: 2.25rem;
 }
 
-button.tertiaryGrey {
+button.ls-dv-tertiary-grey {
   border: 1px solid var(--gray-40, #d8d9dc);
   background-color: white;
   color: var(--gray-80, #787a80);
 }
 
-button.tertiaryGrey:hover {
+button.ls-dv-tertiary-grey:hover {
   border: 1px solid var(--gray-50, #c8c9cc);
   background: var(--gray-10, #f7f8fa);
 }
 
-button.tertiary {
+button.ls-dv-tertiary {
   border: 1px solid var(--primary-60, #4456f6);
   background: transparent;
   color: var(--primary-70, #2134dc);
 }
 
-button.tertiary:hover {
+button.ls-dv-tertiary:hover {
   border: 1px solid var(--primary-70, #2134dc);
   border: 1px solid var(--primary-80, #0c34b8);
 }
 
-button.destructive {
+button.ls-dv-destructive {
   border: 1px solid var(--red-60, #f04438);
   background: transparent;
   color: var(--red-60);
 }
 
-button.destructive:hover {
+button.ls-dv-destructive:hover {
   border: 1px solid var(--red-70, #d92d20);
   background: var(--red-10, #fff1f0);
   background-color: var(--red-10, #fff1f0);
 }
 
-button.secondary {
+button.ls-dv-secondary {
   border: 1px solid var(--gray-50, #c8c9cc);
   background: var(--white, #fff);
   color: var(--gray-90, #5e6066);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 }
 
-button.secondary:hover {
+button.ls-dv-secondary:hover {
   border: 1px solid var(--gray-50, #c8c9cc);
   background: var(--gray-10, #f7f8fa);
 }
 
-.button-group {
+.ls-dv-button-group {
   display: flex;
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   border: 1px solid var(--gray-30, #e0e2e5);
   background: var(--white, #ffffff);
   overflow: clip;
 }
 
-.button-group button {
+.ls-dv-button-group button {
   display: flex;
   background: transparent;
   border-radius: unset;
@@ -448,18 +448,18 @@ button.secondary:hover {
   color: var(--gray-80, #6c6e73);
 }
 
-.button-group button:hover {
+.ls-dv-button-group button:hover {
   background: var(--gray-10, #f7f8fa);
 }
 
-.button-group > :first-child {
-  border-radius: 0.5rem 0 0 0.5rem;
+.ls-dv-button-group > :first-child {
+  border-radius: 0.625rem 0 0 0.625rem;
 }
 
-.button-group > :last-child {
+.ls-dv-button-group > :last-child {
   border-radius: 0 0.5rem 0.5rem 0;
 }
 
-.button-group > :not(:first-child) {
+.ls-dv-button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }