legalesign-document-viewer 0.9.7 → 0.9.9

package/dist/cjs/ls-number-input_5.cjs.entry.js

@@ -12,7 +12,7 @@ const lsNumberInputCss = () => `* {
   margin: 0;
 }
 
-.host {
+.ls-dv-host {
   display: flex;
   width: 100%;
   padding: 0.25rem;
@@ -23,7 +23,7 @@ const lsNumberInputCss = () => `* {
   background: var(--Grey-10, #f7f8fa);
 }
 
-.input-container {
+.ls-dv-input-container {
   position: relative;
   display: flex;
   width: 100%;
@@ -49,19 +49,19 @@ const lsNumberInputCss = () => `* {
   padding-right: 0.25rem;
 }
 
-.icon-input {
+.ls-dv-icon-input {
   padding-left: 2.5rem !important;
 }
 
-.button-input {
+.ls-dv-button-input {
   padding-right: 2.5rem !important;
 }
 
-.right-items-input {
+.ls-dv-right-items-input {
   padding-right: 4rem !important;
 }
 
-.input-basic {
+.ls-dv-input-basic {
   display: flex;
   width: 100%;
   height: 2.25rem;
@@ -69,7 +69,7 @@ const lsNumberInputCss = () => `* {
   align-items: center;
   gap: 0.5rem;
   align-self: stretch;
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   /* Shadow/sm */
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   overflow: hidden;
@@ -82,7 +82,7 @@ const lsNumberInputCss = () => `* {
   font-weight: 400;
 }
 
-.input-ls {
+.ls-dv-input-ls {
   display: flex;
   width: 100%;
   height: 1.75rem;
@@ -105,13 +105,13 @@ const lsNumberInputCss = () => `* {
 
 }
 
-.input-ls::-webkit-outer-spin-button,
-.input-ls::-webkit-inner-spin-button {
+.ls-dv-input-ls::-webkit-outer-spin-button,
+.ls-dv-input-ls::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.input-ls {
+.ls-dv-input-ls {
   -moz-appearance: textfield;
 }
 
@@ -131,57 +131,57 @@ input:focus:not(:disabled) {
     0px 0px 0px 4px #9dc3fc;
 }
 
-.default {
+.ls-dv-default {
   border: 1px solid var(--gray-40, #d8d9dc);
   background: var(--White, #fff);
   color: var(--gray-100);
 }
 
-.default:hover {
+.ls-dv-default:hover {
   border: 1px solid var(--gray-50, #d8d9dc);
   background: var(--White, #fff);
   color: var(--gray-110);
 }
 
-.disabled {
+.ls-dv-disabled {
   border: 1px solid var(--gray-40, #d8d9dc);
   background: var(--gray-10, #f7f8fa);
   color: var(--gray-60);
   cursor: not-allowed;
 }
 
-.display-only {
+.ls-dv-display-only {
   border: 1px solid var(--gray-40, #d8d9dc);
   background: var(--gray-10, #f7f8fa);
   color: var(--gray-100);
   cursor: not-allowed;
 }
 
-.invalid {
+.ls-dv-invalid {
   border: 1px solid var(--red-40, #ffa19e);
   background: var(--White, #fff);
   color: var(--Red-100, #7a1714);
 }
 
-.invalid:hover {
+.ls-dv-invalid:hover {
   border: 1px solid var(--red-50, #ffa19e);
   background: var(--White, #fff);
   color: var(--Red-100, #7a1714);
 }
 
-.valid {
+.ls-dv-valid {
   border: 1px solid var(--green-40, #72f0c2);
   background: var(--White, #fff);
   color: var(--Green-100, #125241);
 }
 
-.valid:hover {
+.ls-dv-valid:hover {
   border: 1px solid var(--green-50, #72f0c2);
   background: var(--White, #fff);
   color: var(--Green-100, #125241);
 }
 
-.right-items {
+.ls-dv-right-items {
   position: absolute;
   padding: 0.25rem;
   height: 2.25rem;
@@ -202,7 +202,7 @@ input:focus:not(:disabled) {
   color: var(--green-60);
 }
 
-.button {
+.ls-dv-button {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -219,7 +219,7 @@ input:focus:not(:disabled) {
   }
 }
 
-.button-disabled {
+.ls-dv-button-disabled {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -237,7 +237,7 @@ input:focus:not(:disabled) {
   }
 }
 
-.button:hover {
+.ls-dv-button:hover {
   border: 1px solid var(--gray-50, #c8c9cc);
   background: var(--gray-20, #edeff2);
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
@@ -247,7 +247,7 @@ input:focus:not(:disabled) {
   }
 }
 
-.button:active {
+.ls-dv-button:active {
   border: 1px solid var(--Primary-Blue-Light, #4456f6);
   background: var(--White, #fff);
   box-shadow:
@@ -259,7 +259,7 @@ input:focus:not(:disabled) {
   }
 }
 
-.button:focus {
+.ls-dv-button:focus {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -308,20 +308,20 @@ const LsNumberInput = class {
     };
     render() {
         const { type, name, value, placeholder, aria, disabled, required, valid, dirty, buttonClick, buttonIcon, fieldIcon, handleChange, handleMinus, handlePlus, } = this;
-        const inputClass = clsx(type === 'ls' ? 'input-ls' : 'input-basic', disabled
-            ? 'disabled'
+        const inputClass = clsx(type === 'ls' ? 'ls-dv-input-ls' : 'ls-dv-input-basic', disabled
+            ? 'ls-dv-disabled'
             : dirty && valid
-                ? 'valid'
+                ? 'ls-dv-valid'
                 : dirty && !valid
-                    ? 'invalid'
-                    : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (index.h("host", { key: '9114045f57d6a88ebffaa6ced9a8c500bc2716b0', class: type === 'ls' && 'host' }, type === 'ls' && (index.h("button", { key: '0733a5e621ebf1ea6eb325a667be4f599b5b2365', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '488ae5ed33e3d395c037283e0017917a43608adc', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: '7bea9c1f79acaf0f8914447143a5942918b5436b', class: 'input-container' }, fieldIcon && (index.h("ls-icon", { key: 'a9b70f9ca1d501f753bc10fccbb84f1de4c6fb0e', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '6c42a54a61e9ef2ee90f39b83b0ea9b9dac60c9a', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), index.h("div", { key: '394aa256f306c1b9afbeecbd9e1f1993ef92158f', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '7c670e23084ccbd8b02adf0cfb2367165ded6c51', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: '473d42bfb91cde0718eb651a2f1b8c61a35d4f78', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '33a1eee6a18b5ea30693dbd3fd894d91700666aa', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: '74fdfd758f02f3b53301c3d84e3a8eb8efc8d3c6', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: '40c6e35452a62d954cdd1038debf02e56b5269a8', id: 'buttonIcon', name: 'plus-sm' })))));
+                    ? 'ls-dv-invalid'
+                    : 'ls-dv-default', fieldIcon && 'ls-dv-icon-input', dirty && 'ls-dv-button-input', buttonIcon && 'ls-dv-button-input', buttonIcon && dirty && 'ls-dv-right-items-input');
+        const plusMinusClass = clsx(disabled ? 'ls-dv-button-disabled' : 'ls-dv-button');
+        return (index.h("host", { key: 'ce940a88ce54fb1f2de819c987269f67954c1ff2', class: type === 'ls' && 'ls-dv-host' }, type === 'ls' && (index.h("button", { key: 'b980053dc102e90fd7464112686b0622aee5acc0', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, index.h("ls-icon", { key: '6ff8a82f872212c1dcb38bb7ed2012169f1177a3', id: 'buttonIcon', name: 'minus-sm' }))), index.h("div", { key: 'f3d6186625f1a07abe6100e241f8db80739f6ee8', class: 'ls-dv-input-container' }, fieldIcon && (index.h("ls-icon", { key: '4ae9e1a3be089097e7140e8f7bbc5b0ce7dcbd1e', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("input", { key: '3af4a80c8833e1f1f92bffd414649d0ec81a1ec1', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), index.h("div", { key: 'f100898c83ce5b3aa0d213542ece90a5611a6153', class: 'ls-dv-right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '40f004e2611d013b58227bd093db3260d4e84328', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (index.h("button", { key: 'f7ac21f9ca2d1b2529981ee036dbcd5280f5a86e', class: 'ls-dv-button', onClick: buttonClick }, index.h("ls-icon", { key: 'ea3654ad6a8e15fd796688626e99f0b2d2d857df', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (index.h("button", { key: '0dcefec7d6e2766a73abc5194982d445e1704c96', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, index.h("ls-icon", { key: 'ad4afc8a5c68552436987e5acce62767301e408b', id: 'buttonIcon', name: 'plus-sm' })))));
     }
 };
 LsNumberInput.style = lsNumberInputCss();
 
-const lsRadioInputCss = () => `.radioLabel{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.5rem 0.75rem}.radioLabel.checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.radioLabel:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.radioLabel.checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.radioLabel:not(.checked):not(.disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.radioLabel:focus:not(.disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.radioLabel.disabled{cursor:not-allowed}.radioLabel.disabled.checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.radioLabel.disabled:not(.checked){background-color:var(--gray-10);color:var(--gray-60)}.inputClass{margin-top:0px}.inputClass:focus{outline:none}.inputClass:disabled{cursor:not-allowed}.spanContainer{display:flex;gap:0.25rem;align-items:center}`;
+const lsRadioInputCss = () => `.ls-dv-radio-label{display:flex;align-items:center;gap:0.75rem;border-radius:0.625rem;padding:0.5rem 0.75rem}.ls-dv-radio-label.ls-dv-checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.ls-dv-radio-label:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.ls-dv-radio-label.ls-dv-checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.ls-dv-radio-label:not(.ls-dv-checked):not(.ls-dv-disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.ls-dv-radio-label:focus:not(.ls-dv-disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.ls-dv-radio-label.ls-dv-disabled{cursor:not-allowed}.ls-dv-radio-label.ls-dv-disabled.ls-dv-checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.ls-dv-radio-label.ls-dv-disabled:not(.ls-dv-checked){background-color:var(--gray-10);color:var(--gray-60)}.ls-dv-input-class{margin-top:0px}.ls-dv-input-class:focus{outline:none}.ls-dv-input-class:disabled{cursor:not-allowed}.ls-dv-span-container{display:flex;gap:0.25rem;align-items:center}`;
 
 const LsRadioInput = class {
     constructor(hostRef) {
@@ -336,8 +336,8 @@ const LsRadioInput = class {
     customStyle;
     render() {
         const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
-        const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (index.h("label", { key: 'b0bfe57cbbe4021b0e05adaeddd45a5e3733a0e9', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '5a2841e892763953a7b04ccb868f7b621808cb57', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: '1a5d4aab50813cea85662a9bbe706db5688a521b', class: 'spanContainer' }, index.h("span", { key: 'd37ebe931692ed543284dd96d47371af369a23ca' }, icon && index.h("ls-icon", { key: '6361c2d3f46d553e6a79964536e433f4768879fd', name: icon, size: "16" })), index.h("span", { key: 'b824adb5f5634230aa43741105e855f6a4df8c67' }, label))));
+        const radioLabelClass = clsx('ls-dv-radio-label', disabled && 'ls-dv-disabled', checked && 'ls-dv-checked');
+        return (index.h("label", { key: '4790e31ad8d38631b2f57dc14e29423623510ac6', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, index.h("input", { key: '75aa12d63ea029a4c14cbedc70ef23617a5702ef', type: 'radio', class: 'ls-dv-input-class', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), index.h("div", { key: 'd84143f3d70ccfe3b722e05c8ff11705c2825813', class: 'ls-dv-span-container' }, index.h("span", { key: '4726c6d60b29730aeacdd93002579e4379c275e9' }, icon && index.h("ls-icon", { key: '97eab5929dbfb6cf8884371560b38f20c43499d0', name: icon, size: "16" })), index.h("span", { key: 'cf759e07cebd1816b9fb8ff26e5d397dc4cddc18' }, label))));
     }
 };
 LsRadioInput.style = lsRadioInputCss();
@@ -347,7 +347,7 @@ const lsSelectInputCss = () => `* {
   margin: 0;
 }
 
-.host {
+.ls-dv-host {
   position: relative;
   display: flex;
   width: 100%;
@@ -367,19 +367,19 @@ const lsSelectInputCss = () => `* {
   color: var(--gray-60)
 }
 
-.icon-input {
+.ls-dv-icon-input {
   padding-left: 2.5rem !important;
 }
 
-.button-input {
+.ls-dv-button-input {
   padding-right: 2.5rem !important;
 }
 
-.right-items-input {
+.ls-dv-right-items-input {
   padding-right: 4rem !important;
 }
 
-.input-base {
+.ls-dv-input-base {
   display: flex;
   width: 100%;
   height: 2.25rem;
@@ -388,7 +388,7 @@ const lsSelectInputCss = () => `* {
   vertical-align: text-top;
   gap: 0.5rem;
   align-self: stretch;
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   /* Shadow/sm */
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   overflow: hidden;
@@ -422,63 +422,63 @@ select {
   margin-left: -0.125rem;
 }
 
-.input-base:active:not(:disabled) {
+.ls-dv-input-base:active:not(:disabled) {
   outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
   box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
 }
 
-.input-base:focus:not(:disabled) {
+.ls-dv-input-base:focus:not(:disabled) {
   outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
   box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
 }
 
 
-.default {
+.ls-dv-default {
   border: 1px solid var(--gray-40, #D8D9DC);
   background: var(--White, #FFF);
   color: var(--gray-100);
 }
 
-.default:hover {
+.ls-dv-default:hover {
   border: 1px solid var(--gray-50, #D8D9DC);
   background: var(--White, #FFF);
   color: var(--gray-110);
 }
 
 
-.disabled {
+.ls-dv-disabled {
   border: 1px solid var(--gray-40, #D8D9DC);
   background: var(--gray-10, #F7F8FA);
   color: var(--gray-60);
   cursor: not-allowed;
 }
 
-.invalid {
+.ls-dv-invalid {
   border: 1px solid var(--red-40, #FFA19E);
   background: var(--White, #FFF);
   color: var(--Red-100, #7A1714);
 }
 
-.invalid:hover {
+.ls-dv-invalid:hover {
   border: 1px solid var(--red-50, #FFA19E);
   background: var(--White, #FFF);
   color: var(--Red-100, #7A1714);
 }
 
-.valid {
+.ls-dv-valid {
   border: 1px solid var(--green-40, #72F0C2);
   background: var(--White, #FFF);
   color: var(--Green-100, #125241);
 }
 
-.valid:hover {
+.ls-dv-valid:hover {
   border: 1px solid var(--green-50, #72F0C2);
   background: var(--White, #FFF);
   color: var(--Green-100, #125241);
 }
 
 
-.right-items {
+.ls-dv-right-items {
   position: absolute;
   padding: 0.25rem;
   height: 2.25rem;
@@ -498,7 +498,7 @@ select {
   color: var(--green-60);
 }
 
-.button {
+.ls-dv-button {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -515,7 +515,7 @@ select {
   }
 }
 
-.button:hover {
+.ls-dv-button:hover {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -532,7 +532,7 @@ select {
   }
 }
 
-.button:active {
+.ls-dv-button:active {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -549,7 +549,7 @@ select {
   }
 }
 
-.button:focus {
+.ls-dv-button:focus {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -593,16 +593,16 @@ const LsSelectInput = class {
     // }
     render() {
         const { name, aria, disabled, displayOnly, required, valid, dirty, buttonClick, buttonIcon, fieldIcon, } = this;
-        const inputClass = clsx('input-base', disabled
-            ? 'disabled'
+        const inputClass = clsx('ls-dv-input-base', disabled
+            ? 'ls-dv-disabled'
             : dirty && valid
-                ? 'valid'
+                ? 'ls-dv-valid'
                 : dirty && !valid
-                    ? 'invalid'
+                    ? 'ls-dv-invalid'
                     : displayOnly
                         ? 'displayOnly'
-                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: '7e2f92d2af5629bff210d9bbd956541164479d23', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '321f068929d845ad9ffb2a0d3a0d15683ab1f9e2', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: '0e87d08f8f75d3fb8129280d1ae653beb4bb2063', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: 'a3ec595b4442184afc7c156c9a15e4ff4f6f1915' })), index.h("div", { key: 'b471cf02fb50521c5140485dc137920d9c9dd408', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '026efb5d2f0d06be94585a90133ca979b77f992c', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+                        : 'ls-dv-default', fieldIcon && 'ls-dv-icon-input', dirty && 'ls-dv-button-input', buttonIcon && 'ls-dv-button-input', buttonIcon && dirty && 'ls-dv-right-items-input');
+        return (index.h("host", { key: '471a78d5e3a5f3020ba9707b87941117b30a5034', class: 'ls-dv-host' }, fieldIcon && (index.h("ls-icon", { key: 'c6f09ab173d8e97d9e80e356972737fcd89be456', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("select", { key: 'ebf2847210428441d07e35cbf4c0726dfc1062e0', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, index.h("slot", { key: '79e35429464410f7dd574f60a5726d9e2004b9be' })), index.h("div", { key: '9736ace16cec16e0b6ef6b6c4ac6d2a05db531db', class: 'ls-dv-right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'e3e2a2bcdf05f8cfea635d7fa9ac7dc75a4de652', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (index.h("button", { class: 'ls-dv-button', onClick: buttonClick }, index.h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (index.h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
 };
 LsSelectInput.style = lsSelectInputCss();
@@ -613,7 +613,7 @@ const lsTextInputCss = () => `* {
   margin: 0;
 }
 
-.host {
+.ls-dv-host {
   position: relative;
   display: flex;
   width: 100%;
@@ -637,19 +637,19 @@ const lsTextInputCss = () => `* {
   padding-right: 0.25rem;
 }
 
-.icon-input {
+.ls-dv-icon-input {
   padding-left: 2.5rem !important;
 }
 
-.button-input {
+.ls-dv-button-input {
   padding-right: 2.5rem !important;
 }
 
-.right-items-input {
+.ls-dv-right-items-input {
   padding-right: 4rem !important;
 }
 
-.input-base {
+.ls-dv-input-base {
   display: flex;
   width: 100%;
   height: 2.25rem;
@@ -657,7 +657,7 @@ const lsTextInputCss = () => `* {
   align-items: center;
   gap: 0.5rem;
   align-self: stretch;
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   /* Shadow/sm */
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   overflow: hidden;
@@ -670,70 +670,70 @@ const lsTextInputCss = () => `* {
   font-weight: 400;
 }
 
-.input-base:active:not(:disabled) {
+.ls-dv-input-base:active:not(:disabled) {
   outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
   box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
 }
 
-.input-base:focus:not(:disabled) {
+.ls-dv-input-base:focus:not(:disabled) {
   outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
   box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
 }
 
 
-.default {
+.ls-dv-default {
   border: 1px solid var(--gray-40, #D8D9DC);
   background: var(--White, #FFF);
   color: var(--gray-100);
 }
 
-.default:hover {
+.ls-dv-default:hover {
   border: 1px solid var(--gray-50, #D8D9DC);
   background: var(--White, #FFF);
   color: var(--gray-110);
 }
 
 
-.disabled {
+.ls-dv-disabled {
   border: 1px solid var(--gray-40, #D8D9DC);
   background: var(--gray-10, #F7F8FA);
   color: var(--gray-60);
   cursor: not-allowed;
 }
 
-.display-only {
+.ls-dv-display-only {
   border: 1px solid var(--gray-40, #D8D9DC);
   background: var(--gray-10, #F7F8FA);
   color: var(--gray-100);
   cursor: not-allowed;
 }
 
-.invalid {
+.ls-dv-invalid {
   border: 1px solid var(--red-40, #FFA19E);
   background: var(--White, #FFF);
   color: var(--Red-100, #7A1714);
 }
 
-.invalid:hover {
+.ls-dv-invalid:hover {
   border: 1px solid var(--red-50, #FFA19E);
   background: var(--White, #FFF);
   color: var(--Red-100, #7A1714);
 }
 
-.valid {
+.ls-dv-valid {
   border: 1px solid var(--green-40, #72F0C2);
   background: var(--White, #FFF);
   color: var(--Green-100, #125241);
 }
 
-.valid:hover {
+.ls-dv-valid:hover {
   border: 1px solid var(--green-50, #72F0C2);
   background: var(--White, #FFF);
   color: var(--Green-100, #125241);
 }
 
 
-.right-items {
+.ls-dv-right-items {
   position: absolute;
   padding: 0.25rem;
   height: 2.25rem;
@@ -753,7 +753,7 @@ const lsTextInputCss = () => `* {
   color: var(--green-60);
 }
 
-.button {
+.ls-dv-button {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -770,7 +770,7 @@ const lsTextInputCss = () => `* {
   }
 }
 
-.button:hover {
+.ls-dv-button:hover {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -787,7 +787,7 @@ const lsTextInputCss = () => `* {
   }
 }
 
-.button:active {
+.ls-dv-button:active {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -804,7 +804,7 @@ const lsTextInputCss = () => `* {
   }
 }
 
-.button:focus {
+.ls-dv-button:focus {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -857,22 +857,22 @@ const LsTextInput = class {
     }
     render() {
         const { type, name, value, placeholder, aria, disabled, required, valid, dirty, countMax, buttonClick, buttonIcon, fieldIcon, showPassword, handlePassword, } = this;
-        const inputClass = clsx('input-base', type === 'displayonly'
-            ? 'display-only'
+        const inputClass = clsx('ls-dv-input-base', type === 'displayonly'
+            ? 'ls-dv-display-only'
             : disabled
-                ? 'disabled'
+                ? 'ls-dv-disabled'
                 : dirty && valid
-                    ? 'valid'
+                    ? 'ls-dv-valid'
                     : dirty && !valid
-                        ? 'invalid'
-                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h(index.Host, { key: 'fc106c6a7a7764c8586c003422cad5ba80ebcb26', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: '761585b7694e2d96e7589f792b3d585d733e7d6b', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (index.h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
+                        ? 'ls-dv-invalid'
+                        : 'ls-dv-default', fieldIcon && 'ls-dv-icon-input', dirty && 'ls-dv-button-input', buttonIcon && 'ls-dv-button-input', buttonIcon && dirty && 'ls-dv-right-items-input');
+        return (index.h(index.Host, { key: '4b16778d421ea542c4acc8cc3a23c1e25d2dd2ab', class: 'ls-dv-host' }, fieldIcon && (index.h("ls-icon", { key: '1fc669e1002a11914733cf60a92eeb8925c0a7ba', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (index.h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
             } })) : type === 'displayonly' ? (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true, onChange: (e) => {
                 this.changeHandler(e);
             } })) : (index.h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
-            } })), index.h("div", { key: '82950d2016707dc134465309a11fb96d29524e26', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'e26592e29ef88b943c54d810fc38205e07787e55', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '7020ef37953b7e37c28af9c18b02298db2cf5201', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '3ad18586309c7cae59f7beca9b818a1b30cf228c', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '91e90ed4b2d3431a8df608b731a214583ba219f7', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+            } })), index.h("div", { key: '18013eec5f698667cdb92eb729be8f077a891389', class: 'ls-dv-right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '74ad5be388fbe12a4f23724293a37f20585f1dfd', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: 'a4ff8fca5c75c70069f80edfb2b66921ddf04e02', class: 'ls-dv-button', onClick: buttonClick }, index.h("ls-icon", { key: '4bb59040493bacee3b66d9b9ab862baac4a73bb7', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (index.h("ls-icon-button", { key: '433bb351b65266f704ad2cc2302310a63b40301e', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
     }
 };
 LsTextInput.style = lsTextInputCss();
@@ -883,7 +883,7 @@ const lsTextareaInputCss = () => `* {
   margin: 0;
 }
 
-.host {
+.ls-dv-host {
   position: relative;
   display: flex;
   width: 100%;
@@ -903,19 +903,19 @@ const lsTextareaInputCss = () => `* {
   color: var(--gray-60);
 }
 
-.icon-input {
+.ls-dv-icon-input {
   padding-left: 2.5rem !important;
 }
 
-.button-input {
+.ls-dv-button-input {
   padding-right: 2.5rem !important;
 }
 
-.right-items-input {
+.ls-dv-right-items-input {
   padding-right: 4rem !important;
 }
 
-.input-base {
+.ls-dv-input-base {
   display: flex;
   resize: vertical;
   width: 100%;
@@ -924,7 +924,7 @@ const lsTextareaInputCss = () => `* {
   align-items: center;
   gap: 0.5rem;
   align-self: stretch;
-  border-radius: 0.5rem;
+  border-radius: 0.625rem;
   /* Shadow/sm */
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   overflow: hidden;
@@ -935,7 +935,7 @@ const lsTextareaInputCss = () => `* {
   font-weight: 400;
 }
 
-.input-base:active:not(:disabled) {
+.ls-dv-input-base:active:not(:disabled) {
   outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
   box-shadow:
     0px 0px 3px 0px rgba(0, 15, 153, 0.25),
@@ -943,7 +943,7 @@ const lsTextareaInputCss = () => `* {
     0px 0px 0px 4px #9dc3fc;
 }
 
-.input-base:focus:not(:disabled) {
+.ls-dv-input-base:focus:not(:disabled) {
   outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
   box-shadow:
     0px 0px 3px 0px rgba(0, 15, 153, 0.25),
@@ -951,50 +951,50 @@ const lsTextareaInputCss = () => `* {
     0px 0px 0px 4px #9dc3fc;
 }
 
-.default {
+.ls-dv-default {
   border: 1px solid var(--gray-40, #d8d9dc);
   background: var(--White, #fff);
   color: var(--gray-100);
 }
 
-.default:hover {
+.ls-dv-default:hover {
   border: 1px solid var(--gray-50, #d8d9dc);
   background: var(--White, #fff);
   color: var(--gray-110);
 }
 
-.disabled {
+.ls-dv-disabled {
   border: 1px solid var(--gray-40, #d8d9dc);
   background: var(--gray-10, #f7f8fa);
   color: var(--gray-60);
   cursor: not-allowed;
 }
 
-.invalid {
+.ls-dv-invalid {
   border: 1px solid var(--red-40, #ffa19e);
   background: var(--White, #fff);
   color: var(--Red-100, #7a1714);
 }
 
-.invalid:hover {
+.ls-dv-invalid:hover {
   border: 1px solid var(--red-50, #ffa19e);
   background: var(--White, #fff);
   color: var(--Red-100, #7a1714);
 }
 
-.valid {
+.ls-dv-valid {
   border: 1px solid var(--green-40, #72f0c2);
   background: var(--White, #fff);
   color: var(--Green-100, #125241);
 }
 
-.valid:hover {
+.ls-dv-valid:hover {
   border: 1px solid var(--green-50, #72f0c2);
   background: var(--White, #fff);
   color: var(--Green-100, #125241);
 }
 
-.right-items {
+.ls-dv-right-items {
   position: absolute;
   padding: 0.25rem;
   height: 2.25rem;
@@ -1014,7 +1014,7 @@ const lsTextareaInputCss = () => `* {
   color: var(--green-60);
 }
 
-.button {
+.ls-dv-button {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -1031,7 +1031,7 @@ const lsTextareaInputCss = () => `* {
   }
 }
 
-.button:hover {
+.ls-dv-button:hover {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -1048,7 +1048,7 @@ const lsTextareaInputCss = () => `* {
   }
 }
 
-.button:active {
+.ls-dv-button:active {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -1067,7 +1067,7 @@ const lsTextareaInputCss = () => `* {
   }
 }
 
-.button:focus {
+.ls-dv-button:focus {
   display: flex;
   height: 1.75rem;
   width: 1.75rem;
@@ -1107,16 +1107,16 @@ const LsTextareaInput = class {
     fieldIcon;
     render() {
         const { name, value, placeholder, aria, disabled, displayOnly, required, valid, dirty, countMax, buttonClick, buttonIcon, fieldIcon, } = this;
-        const inputClass = clsx('input-base', disabled
-            ? 'disabled'
+        const inputClass = clsx('ls-dv-input-base', disabled
+            ? 'ls-dv-disabled'
             : dirty && valid
-                ? 'valid'
+                ? 'ls-dv-valid'
                 : dirty && !valid
-                    ? 'invalid'
+                    ? 'ls-dv-invalid'
                     : displayOnly
                         ? 'displayOnly'
-                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (index.h("host", { key: 'b9b212fa870cab626f6e1dc5f48d0dcd45a5d1bd', class: 'host' }, fieldIcon && (index.h("ls-icon", { key: 'f3373d97aec26d513a31a95ee616324f07b4c7d9', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: '704e3606a789cc71f142bd34df933a173232f5f5', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: 'df50eb4f16b1e9847569f2f5e6ad17510ec8e93a', class: 'right-items' }, dirty && !disabled && (index.h("ls-icon", { key: 'a6b317c7baa79e9e31b2327e68cc5205b0505308', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '12cd96da1502f4271259c82d331fa4278643a999', class: 'button', onClick: buttonClick }, index.h("ls-icon", { key: '2b9a1052b00ee9f9a078962e7cc927355b219fc9', id: 'buttonIcon', name: buttonIcon }))))));
+                        : 'ls-dv-default', fieldIcon && 'ls-dv-icon-input', dirty && 'ls-dv-button-input', buttonIcon && 'ls-dv-button-input', buttonIcon && dirty && 'ls-dv-right-items-input');
+        return (index.h("host", { key: '79fc43eefeb79e23355a7981b49c13b27026bfa9', class: 'ls-dv-host' }, fieldIcon && (index.h("ls-icon", { key: '59280a7eb1056132082f80767014b1fb3e4236af', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), index.h("textarea", { key: 'b65e6694f2041495d81893138351852c01e29392', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), index.h("div", { key: '5a3570efdaa7504629a014c94f47703169e1ffc8', class: 'ls-dv-right-items' }, dirty && !disabled && (index.h("ls-icon", { key: '815db1bdf88056bd86c99ffcce0cfdb106eab0e2', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (index.h("button", { key: '4b387f5116349e9207d596e2e95da48d21b0b00c', class: 'ls-dv-button', onClick: buttonClick }, index.h("ls-icon", { key: '706d8fbf3250b60f1634b13503f6b9fea0502d6f', id: 'buttonIcon', name: buttonIcon }))))));
     }
 };
 LsTextareaInput.style = lsTextareaInputCss();