legalesign-document-viewer 0.10.2 → 0.10.4

package/dist/cjs/ls-label.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsLabelCss = () => `.label-span{position:relative;display:inline-flex;align-items:center;line-height:1rem;font-weight:var(--font-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.size-sm{padding:0.125rem 0.25rem;font-size:0.75rem;gap:0.25rem;border-radius:0.25rem}.size-md{padding:0.25rem 0.375rem;font-size:0.875rem;gap:0.25rem;border-radius:0.25rem}.size-lg{padding:0.375rem 0.5rem;font-size:0.875rem;}`;

package/dist/cjs/ls-list-card-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsListCardButtonCss = () => `.container {

package/dist/cjs/ls-loading_2.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-DFeU0FNc.js');
+var clsx = require('./clsx-BtxeOLZW.js');
+
+const lsLoadingCss$1 = () => `.container{display:flex;align-items:center;line-height:1rem}div{line-height:0}.text{margin-left:0.5rem}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}`;
+
+const LsLoading = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        const classes = clsx.clsx('container');
+        return (index.h("div", { key: '82f6d5fb973d1722115d23196b452d37858fa4fd', class: classes, style: this.customStyle }, index.h("ls-loading-icon", { key: '8571fdec066bb1742520d229110b64d37784204f', default: this.defaultIcon, size: this.iconSize }), this.text && index.h("div", { key: '37c8166db1fc67529a41b74eb9d15d98dfd3d9f5', class: 'text' }, this.text)));
+    }
+    get el() { return index.getElement(this); }
+};
+LsLoading.style = lsLoadingCss$1();
+
+const lsLoadingCss = () => `.container{display:flex;align-items:center;line-height:1rem}div{line-height:0}.text{margin-left:0.5rem}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}`;
+
+const LsLoadingIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.default = true;
+        this.size = 20;
+    }
+    render() {
+        const loadingClass = clsx.clsx('loadingIcon', 'animate-spin');
+        return (index.h("div", { key: 'dc21ad882fdd44c6eed3dff86209efafc330d0bc' }, this.default ? (index.h("svg", { width: this.size, height: this.size, viewBox: '0 0 24 24', class: loadingClass, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, index.h("g", { "clip-path": 'url(#clip0_5402_116)' }, index.h("path", { opacity: '0.2', d: 'M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), index.h("path", { d: 'M20 12C20 14.2044 19.1022 16.2044 17.6622 17.6533', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), index.h("path", { opacity: '0.8', d: 'M17.6533 6.34692C19.1022 7.79581 20 9.79581 20 12.0003', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), index.h("path", { opacity: '0.6', d: 'M12 4C14.2133 4 16.2133 4.89778 17.6533 6.34667', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), index.h("path", { opacity: '0.4', d: 'M6.33777 6.34667C7.78666 4.89778 9.78666 4 12 4', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' }), index.h("path", { opacity: '0.2', d: 'M4 12.0003C4 9.79581 4.89778 7.79581 6.33778 6.34692', stroke: 'currentColor', "stroke-width": '4', "stroke-miterlimit": '10' })), index.h("defs", null, index.h("clipPath", { id: 'clip0_5402_116' }, index.h("rect", { width: '20', height: '20', fill: 'white', transform: 'translate(2 2)' }))))) : (index.h("svg", { width: this.size, height: this.size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', class: loadingClass }, index.h("path", { d: 'M12.0433 3V6.46154M12.0433 17.5385V21M17.5385 12.1812H21M3 12.1812H6.46154M16.1538 8.08933L18.6015 5.64166M5.39624 5.64213L7.84392 8.0898M15.908 15.6752L18.3556 18.1229M5.64213 18.6011L8.0898 16.1534', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round' }), index.h("defs", null, index.h("radialGradient", { id: 'paint0_angular_2161_284876', cx: '0', cy: '0', r: '1', gradientUnits: 'userSpaceOnUse', gradientTransform: 'translate(12 12) rotate(-123.69) scale(9.01388)' }, index.h("stop", { "stop-opacity": '0' }), index.h("stop", { offset: '1' })))))));
+    }
+};
+LsLoadingIcon.style = lsLoadingCss();
+
+exports.ls_loading = LsLoading;
+exports.ls_loading_icon = LsLoadingIcon;
+//# sourceMappingURL=ls-loading.ls-loading-icon.entry.cjs.js.map

package/dist/cjs/ls-navbar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsNavbarCss = () => `.title{font-weight:var(--font-semibold);font-size:0.875rem;line-height:1.5rem;color:var(--gray-70);text-transform:uppercase;padding-top:10px;padding-bottom:0.625rem;padding-left:1.5rem;padding-right:1rem;margin-top:0;margin-bottom:0}ul{padding-left:0;margin-bottom:0;margin-top:0}li{list-style-type:none}button{background-color:transparent;border:none;cursor:pointer;padding:0;margin:0;width:100%}.item{display:flex;justify-content:space-between;border-right:3px solid transparent;padding-top:10px;padding-bottom:10px;padding-left:2.75rem;padding-right:1rem;color:var(--gray-100);text-transform:capitalize;font-size:1rem;text-decoration:none}.item:hover{background-color:var(--primary-10);border-right-color:var(--primary-60);color:var(--primary-100)}.item:hover .icon{color:var(--primary-100)}.selected{background-color:var(--primary-60);color:white}.selected .icon{color:white}.selected:hover .icon{color:white}.selected:hover{background-color:var(--primary-70);color:white;border-right-color:var(--primary-70)}.icon{color:var(--gray-80)}.itemLeft{display:flex;align-items:center;gap:0.5rem}.itemRight{display:flex;align-items:center;gap:0.5rem}.dot{display:inline-block;width:0.5rem;height:0.5rem;background-color:var(--red-50);border-radius:50%}`;

package/dist/cjs/ls-notification.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsNotificationCss = () => `* {

package/dist/cjs/ls-radio-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 
 const lsRadioGroupCss = () => `.host{display:flex;flex-direction:column;gap:0.5rem}.title{font-weight:var(--font-semibold);color:var(--gray-100)}.subTitle{color:var(--gray-80);margin-top:-0.5rem}.horizontal{flex-direction:row;gap:1rem;flex-wrap:wrap}`;
 

package/dist/cjs/ls-radio-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 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}`;

package/dist/cjs/ls-tabs.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsTabsCss = () => `.container{background-color:var(--gray-10);height:2.25rem;display:flex;gap:0.25rem;justify-content:center;padding:0.25rem;border-radius:0.625rem}.size-sm{height:1.75rem}.size-md{height:2.25rem}.size-lg{height:2.75rem}.tab{display:flex;align-items:center;gap:0.325rem;justify-content:center;width:100%;border-radius:0.375rem;border:none;flex:1 0 0}.tab.selected{color:var(--primary-100);background-color:var(--white)}.tab.selected:not(:focus){box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);border:1px solid var(--gray-20)}.tab.selected:hover{cursor:pointer}.tab.not-selected{color:var(--gray-80);background-color:transparent}.tab.not-selected:not(:focus){border:1px solid transparent}.tab.not-selected:hover{color:var(--gray-100);background-color:var(--gray-20);cursor:pointer}button:focus{box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);border:1px solid var(--primary-60)}.tab.disabled:disabled{color:var(--gray-50);background-color:var(--gray-10);cursor:not-allowed}.dot{width:0.375rem;height:0.375rem;border-radius:50%;background-color:var(--red-50);margin-top:0.5rem;align-self:flex-start}.counter{display:flex;justify-content:center;align-items:center;color:var(--white);background-color:var(--red-60);padding:0 0.25rem;border-radius:0.75rem}`;

package/dist/cjs/ls-tag.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsTagCss = () => `* {

package/dist/cjs/ls-text.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsTextCss = () => `* {

package/dist/cjs/ls-timeline-step.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsTimelineStepCss = () => `.disk{box-sizing:border-box;display:flex;width:1rem;height:1rem;padding:0.125rem;margin:0;border-radius:999px}.container{width:100%;display:flex;gap:0.5rem;align-items:center}.disk-scheduled{color:var(--gray-60);background-color:var(--gray-20);outline:solid 1px var(--gray-80)}.disk-bounced{color:var(--yellow-60);background-color:var(--yellow-20);outline:solid 1px var(--yellow-80)}.disk-emailed{color:var(--gray-60);background-color:var(--gray-20);outline:solid 1px var(--gray-80)}.disk-opened{color:var(--blue-60);background-color:var(--blue-20);outline:solid 1px var(--blue-80)}.disk-viewed{color:var(--purple-60);background-color:var(--purple-20);outline:solid 1px var(--purple-80)}.disk-complete{color:var(--green-60);background-color:var(--green-20);outline:solid 1px var(--green-80)}.disk-rejected{color:var(--red-60);background-color:var(--red-20);outline:solid 1px var(--red-80)}.disk-withdrawn{color:var(--gray-40);background-color:var(--gray-10);outline:solid 1px var(--gray-30)}.disk-incomplete{outline:dashed 1px var(--gray-40)}.text-and-disk{display:flex;gap:0.5rem;align-items:center;width:fit-content}p{color:var(--Grey-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:var(--font-medium)}.text-complete{color:var(--Grey-100, #45484d);font-weight:var(--font-medium)}.text-incomplete{color:var(--Grey-50, #c8c9cc)}.bounced-text-width{width:3.75rem}.emailed-text-width{width:3.75rem}.opened-text-width{width:3.125rem}.viewed-text-width{width:3.125rem}.complete-text-width{width:4.25rem}.rejected-text-width{width:4.25rem}.line{height:1px;width:100%;padding:0;margin:0;border-radius:999px}.line-opened{background:linear-gradient(90deg, var(--gray-80) 0%, var(--blue-80) 100%)}.line-viewed{background:linear-gradient(90deg, var(--blue-80) 0%, var(--purple-80) 100%)}.line-complete{background:linear-gradient(90deg, var(--purple-80) 0%, var(--green-80) 100%)}.line-rejected{background:linear-gradient(90deg, var(--purple-80) 0%, var(--red-80) 100%)}.line-incomplete{background:repeating-linear-gradient(

package/dist/cjs/ls-timeline.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const lsTimelineCss = () => `*{box-sizing:border-box;line-height:1}.timeline-wrapper{display:flex;align-items:center;gap:0.75rem;width:100%}.recipient{display:flex;align-items:center;gap:0.5rem;flex-shrink:0}.recipient-icon{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:0.625rem;flex-shrink:0}.recipient-details{display:flex;flex-direction:column;width:7.75rem}.recipient-name{color:var(--gray-100);font-size:0.75rem;font-weight:var(--font-medium);line-height:1rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recipient-email{color:var(--gray-80);font-size:0.75rem;line-height:1rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.divider{width:1px;height:1rem;background-color:var(--gray-20);flex-shrink:0}.mobile{display:flex;align-items:center;justify-content:flex-end;width:100%}.mobile-tag{display:flex;align-items:center;gap:0.25rem;height:1.5rem;padding:0.25rem 0.5rem;border-radius:9999px;font-size:0.875rem;font-weight:var(--font-medium);white-space:nowrap;width:fit-content}.desktop{display:none;align-items:center;justify-content:space-evenly;gap:0.625rem;width:100%}@media (min-width: 1024px){.mobile{display:none}.desktop{display:flex}}.step-group{display:flex;align-items:center;gap:0.5rem;flex-shrink:0;position:relative}.step[data-tooltip]{cursor:default}.step[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 0.5rem);left:50%;transform:translateX(-50%);background:var(--gray-90);color:white;font-size:0.75rem;padding:0.375rem 0.5rem;border-radius:0.375rem;white-space:nowrap;z-index:10;pointer-events:none;line-height:1}.step[data-tooltip='']:hover::after{display:none}.step{width:1.125rem;height:1.125rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;flex-shrink:0;position:relative}.step--empty{background:transparent;border:1px dashed var(--gray-40)}.step--bypassed{background:var(--gray-10);border:1px solid var(--gray-40)}.step--emailed{background:var(--gray-20);border:1px solid var(--gray-80)}.step--bounced{background:var(--yellow-10);border:1px solid var(--yellow-80)}.step--expired{background:var(--red-10);border:1px solid var(--red-80)}.step--opened{background:var(--blue-20);border:1px solid var(--blue-80)}.step--viewed{background:var(--purple-20);border:1px solid var(--purple-80)}.step--signed{background:var(--green-20);border:1px solid var(--green-80)}.step--rejected{background:var(--red-20);border:1px solid var(--red-80)}.step-dash{background:var(--gray-40);border-radius:9999px;width:0.5rem;height:0.125rem;overflow:hidden}.label{font-size:0.875rem;font-weight:var(--font-medium);white-space:nowrap;margin:0;color:var(--gray-100)}.label--emailed{width:4.375rem}.label--opened{width:3.938rem}.label--viewed{width:3.938rem}.label--inactive{color:var(--gray-50)}.connector{width:100%;height:1px;border-radius:9999px;margin:0 0.25rem;flex-shrink:1}.connector--inactive{background:repeating-linear-gradient(

package/dist/cjs/ls-title-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CmGbWor3.js');
+var index = require('./index-DFeU0FNc.js');
 
 const lsTitleInputCss = () => `*{box-sizing:border-box;margin:0;padding:0}:host{display:block}.ls-dv-template-title{border-radius:0.625rem;padding:0 0.25rem;color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;cursor:pointer}.ls-dv-template-title:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-edit-button{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--gray-70, #939599)}.ls-dv-edit-button:hover{color:var(--gray-80, #6f7176)}p{color:var(--gray-80, #6f7176);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.ls-dv-has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.625rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #ffffff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #ffffff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type=checkbox]{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type=checkbox]:checked,input[type=checkbox].ls-dv-indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type=checkbox]:checked::after{content:"";position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type=checkbox].ls-dv-indeterminate::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type=checkbox]:checked:hover,input[type=checkbox].ls-dv-indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type=checkbox]:hover{border:1px solid #9ca3af}input[type=checkbox]:focus,input[type=checkbox]:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type=checkbox]:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type=checkbox]:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
 
@@ -30,7 +30,7 @@ const LsTitleInput = class {
         }, delay);
     }
     render() {
-        return (index.h(index.Host, { key: '7c80161609400517e506a871872d54bf43c3937f' }, this.editTitle ? (index.h("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("input", { value: this.template?.title, style: { height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }, onInput: e => {
+        return (index.h(index.Host, { key: '75206cc51e3fb549f0f0ccc893db270e4d66e323' }, this.editTitle ? (index.h("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("input", { value: this.template?.title, style: { height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }, onInput: e => {
                 e.preventDefault();
                 this.alter({ title: e.target.value });
             }, onKeyUp: e => {

package/dist/cjs/ls-toolbox-field.cjs.entry.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var index = require('./index-DFeU0FNc.js');
+var defaultPalette = require('./defaultPalette-Dt4FmPno.js');
+
+const lsToolboxFieldCss = () => `.ls-dv-toolbox-field{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:white;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);cursor:grab}:host(.ls-dv-dragging) .ls-dv-toolbox-field,:host(.ls-dv-dragging) .ls-dv-toolbox-field *{cursor:grabbing !important}.ls-dv-toolbox-field:active{cursor:grabbing}.ls-dv-toolbox-field:hover{background:var(--gray-10, #f7f8fa);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);border:1px solid var(--gray-30, #e0e2e5)}.ls-dv-warning-box{display:flex;padding:0.38rem;align-items:center;justify-content:center;border-radius:0.625rem;border:1px solid var(--red-40, #ffa19e);background:var(--red-10, #fff0f0);color:var(--red-60, #f64a44)}.ls-dv-toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.625rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.ls-dv-toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}p{color:var(--gray-80, #6f7176);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.ls-dv-has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.625rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #ffffff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #ffffff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type=checkbox]{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type=checkbox]:checked,input[type=checkbox].ls-dv-indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type=checkbox]:checked::after{content:"";position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type=checkbox].ls-dv-indeterminate::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type=checkbox]:checked:hover,input[type=checkbox].ls-dv-indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type=checkbox]:hover{border:1px solid #9ca3af}input[type=checkbox]:focus,input[type=checkbox]:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type=checkbox]:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type=checkbox]:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsToolboxField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.fieldTypeSelected = index.createEvent(this, "fieldTypeSelected", 7);
+        this.toolboxDragStart = index.createEvent(this, "toolboxDragStart", 7);
+    }
+    get component() { return index.getElement(this); }
+    /**
+     * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.
+     */
+    formElementType;
+    elementType;
+    validation = 0;
+    fixedAspect = null;
+    redDot = false;
+    /**
+     * The text to display for this field type.
+     */
+    label;
+    /**
+     * The icon to display for this field type.
+     */
+    icon;
+    /**
+     * The tooltip hint to describe to the field type
+     */
+    tooltip;
+    /**
+     * The starting height of this control type in pixels.
+     */
+    defaultHeight;
+    /**
+     * The starting width of this control type in pixels.
+     */
+    defaultWidth;
+    /**
+     * The signer color of the element
+     */
+    signer = 0;
+    isSelected = false;
+    fieldTypeSelected;
+    toolboxDragStart;
+    handleMouseDown(event) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        // Always select this field type
+        this.fieldTypeSelected.emit({
+            label: this.label,
+            formElementType: this.formElementType,
+            elementType: this.elementType,
+            validation: this.validation,
+            defaultHeight: this.defaultHeight,
+            defaultWidth: this.defaultWidth,
+            fixedAspect: this.fixedAspect,
+        });
+        // Also start dragging
+        this.toolboxDragStart.emit({
+            label: this.label,
+            formElementType: this.formElementType,
+            elementType: this.elementType,
+            validation: this.validation,
+            defaultHeight: this.defaultHeight,
+            defaultWidth: this.defaultWidth,
+            fixedAspect: this.fixedAspect,
+        });
+    }
+    handleKeyDown(event) {
+        if (event.key === 'ArrowDown') {
+            console.log('down arrow pressed');
+        }
+    }
+    componentDidLoad() {
+    }
+    render() {
+        return (index.h(index.Host, { key: '5eb3a6f89ccf710b77c3e483f45eba2f61864526' }, index.h("div", { key: 'f6d76d87ba82428e034e1afe72e43b6f3c0c38aa', class: 'ls-dv-toolbox-field', style: this.isSelected && {
+                background: defaultPalette.defaultRolePalette[this.signer % 100].s10,
+                border: `1px solid ${defaultPalette.defaultRolePalette[this.signer % 100].s60}`,
+                color: defaultPalette.defaultRolePalette[this.signer % 100].s80,
+                boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,
+            } }, index.h("div", { key: '7799d28220afcd1d147413c587f471b5dc8c68eb', class: "ls-dv-toolbox-field-icon", style: { '--signer-color-light': defaultPalette.defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultPalette.defaultRolePalette[this.signer % 100].s60 }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": this.tooltip, "data-tooltip-place": "right" }, index.h("ls-icon", { key: '0eef21c559e2d1680b08dd9122f49fa1a4bd4d12', name: this.icon, size: 20 })), index.h("p", { key: 'b891f8d75de4eb59fc4fcc4c3bfa038094768595', class: "ls-dv-toolbox-field-label", style: this.isSelected && {
+                color: defaultPalette.defaultRolePalette[this.signer % 100].s80,
+            } }, this.label), this.redDot && (index.h("div", { key: '11a4bb6640b0e416412301f20f7f0a18856d49bc', class: 'ls-dv-warning-box', "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": `${this.label} Field Required`, "data-tooltip-place": "left" }, index.h("ls-icon", { key: '51c02ca8369793eb14f285e43149331878bb4bb7', name: "exclamation-circle-icon", size: 18, solid: true }))), index.h("ls-icon", { key: '112f2300a14b12e1979c4650bceebf64762695e9', name: "drag-vertical-icon", size: 16, customStyle: { color: this.isSelected ? defaultPalette.defaultRolePalette[this.signer % 100].s60 : '#787a80' } })), index.h("ls-tooltip", { key: 'f3f61da3c58bd4bc350de745389f3c27a852ebde', tooltipId: "ls-dv-tooltip" })));
+    }
+};
+LsToolboxField.style = lsToolboxFieldCss();
+
+exports.ls_toolbox_field = LsToolboxField;
+//# sourceMappingURL=ls-toolbox-field.entry.cjs.js.map

package/dist/cjs/ls-tooltip.cjs.entry.js

@@ -0,0 +1,247 @@
+'use strict';
+
+var index = require('./index-DFeU0FNc.js');
+
+const LsTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** The tooltip id to match against data-tooltip-id attributes */
+        this.tooltipId = 'le-tooltip';
+        this.floatHandler = null;
+        this.floatTarget = null;
+        this.attachedElements = new WeakSet();
+        this.show = (target) => {
+            const content = target.getAttribute('data-tooltip-content') || '';
+            const html = target.getAttribute('data-tooltip-html') || '';
+            if (!content && !html)
+                return;
+            const place = target.getAttribute('data-tooltip-place') || 'top';
+            const variant = target.getAttribute('data-tooltip-variant') || 'dark';
+            const delayShow = parseInt(target.getAttribute('data-tooltip-delay-show') || '0', 10);
+            const isFloat = target.hasAttribute('data-tooltip-float');
+            const doShow = () => {
+                const rect = target.getBoundingClientRect();
+                const pos = this.computePosition(rect, place);
+                if (html) {
+                    this.contentDiv.innerHTML = html;
+                }
+                else {
+                    this.contentDiv.textContent = content;
+                }
+                this.tooltipDiv.style.left = `${pos.x}px`;
+                this.tooltipDiv.style.top = `${pos.y}px`;
+                this.applyVariant(variant);
+                this.applyPlacement(place);
+                this.tooltipDiv.style.opacity = '1';
+            };
+            if (isFloat) {
+                this.floatHandler = (e) => {
+                    if (html) {
+                        this.contentDiv.innerHTML = html;
+                    }
+                    else {
+                        this.contentDiv.textContent = content;
+                    }
+                    this.tooltipDiv.style.left = `${e.clientX}px`;
+                    this.tooltipDiv.style.top = `${e.clientY - 10}px`;
+                    this.applyVariant(variant);
+                    this.applyPlacement('top');
+                    this.tooltipDiv.style.opacity = '1';
+                };
+                this.floatTarget = target;
+                target.addEventListener('mousemove', this.floatHandler);
+            }
+            this.clearTimers();
+            if (delayShow > 0) {
+                this.delayTimer = setTimeout(doShow, delayShow);
+            }
+            else {
+                doShow();
+            }
+        };
+        this.hide = () => {
+            this.clearTimers();
+            this.tooltipDiv.style.opacity = '0';
+            if (this.floatTarget && this.floatHandler) {
+                this.floatTarget.removeEventListener('mousemove', this.floatHandler);
+                this.floatTarget = null;
+                this.floatHandler = null;
+            }
+        };
+        this.handleEnter = (e) => {
+            this.show(e.currentTarget);
+        };
+        this.handleLeave = () => {
+            this.hide();
+        };
+    }
+    clearTimers() {
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+    }
+    createTooltipDiv() {
+        const div = document.createElement('div');
+        div.role = 'tooltip';
+        div.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      z-index: 99999;
+      max-width: 25vw;
+      padding: 0.5rem 0.75rem;
+      border-radius: 0.375rem;
+      font-family: var(--font-family, 'IBM Plex Sans', sans-serif);
+      font-size: 0.8125rem;
+      line-height: 1.4;
+      white-space: nowrap;
+      opacity: 0;
+      overflow: visible;
+      transition: opacity 0.15s ease-in-out;
+      background: var(--gray-90, #222);
+      color: #fff;
+      transform: translateX(-50%) translateY(-100%);
+    `;
+        const content = document.createElement('div');
+        div.appendChild(content);
+        this.contentDiv = content;
+        const arrow = document.createElement('div');
+        arrow.style.cssText = `
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: var(--gray-90, #222);
+      transform: rotate(45deg);
+    `;
+        div.appendChild(arrow);
+        this.arrowDiv = arrow;
+        document.body.appendChild(div);
+        return div;
+    }
+    applyVariant(variant) {
+        const div = this.tooltipDiv;
+        let bg;
+        switch (variant) {
+            case 'light':
+                bg = '#fff';
+                div.style.background = bg;
+                div.style.color = 'var(--gray-90, #222)';
+                div.style.border = '1px solid var(--gray-20, #e5e7eb)';
+                div.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+                break;
+            case 'warning':
+                bg = 'var(--yellow-90, #78350f)';
+                div.style.background = bg;
+                div.style.color = '#fff';
+                div.style.border = 'none';
+                div.style.boxShadow = 'none';
+                break;
+            case 'error':
+                bg = 'var(--red-60, #dc2626)';
+                div.style.background = bg;
+                div.style.color = '#fff';
+                div.style.border = 'none';
+                div.style.boxShadow = 'none';
+                break;
+            case 'info':
+                bg = 'var(--blue-60, #2563eb)';
+                div.style.background = bg;
+                div.style.color = '#fff';
+                div.style.border = 'none';
+                div.style.boxShadow = 'none';
+                break;
+            default:
+                bg = 'var(--gray-90, #222)';
+                div.style.background = bg;
+                div.style.color = '#fff';
+                div.style.border = 'none';
+                div.style.boxShadow = 'none';
+        }
+        this.arrowDiv.style.background = bg;
+    }
+    applyPlacement(place) {
+        switch (place) {
+            case 'bottom':
+                this.tooltipDiv.style.transform = 'translateX(-50%)';
+                this.arrowDiv.style.top = '-4px';
+                this.arrowDiv.style.bottom = '';
+                this.arrowDiv.style.left = '50%';
+                this.arrowDiv.style.right = '';
+                this.arrowDiv.style.marginLeft = '-4px';
+                break;
+            case 'left':
+                this.tooltipDiv.style.transform = 'translateX(-100%) translateY(-50%)';
+                this.arrowDiv.style.top = '50%';
+                this.arrowDiv.style.bottom = '';
+                this.arrowDiv.style.right = '-4px';
+                this.arrowDiv.style.left = '';
+                this.arrowDiv.style.marginTop = '-4px';
+                this.arrowDiv.style.marginLeft = '';
+                break;
+            case 'right':
+                this.tooltipDiv.style.transform = 'translateY(-50%)';
+                this.arrowDiv.style.top = '50%';
+                this.arrowDiv.style.bottom = '';
+                this.arrowDiv.style.left = '-4px';
+                this.arrowDiv.style.right = '';
+                this.arrowDiv.style.marginTop = '-4px';
+                this.arrowDiv.style.marginLeft = '';
+                break;
+            default:
+                this.tooltipDiv.style.transform = 'translateX(-50%) translateY(-100%)';
+                this.arrowDiv.style.bottom = '-4px';
+                this.arrowDiv.style.top = '';
+                this.arrowDiv.style.left = '50%';
+                this.arrowDiv.style.right = '';
+                this.arrowDiv.style.marginLeft = '-4px';
+                this.arrowDiv.style.marginTop = '';
+        }
+    }
+    computePosition(rect, place) {
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        switch (place) {
+            case 'bottom': return { x: cx, y: rect.bottom + 10 };
+            case 'left': return { x: rect.left - 10, y: cy };
+            case 'right': return { x: rect.right + 10, y: cy };
+            default: return { x: cx, y: rect.top - 10 };
+        }
+    }
+    attach(el) {
+        if (this.attachedElements.has(el))
+            return;
+        this.attachedElements.add(el);
+        el.addEventListener('mouseenter', this.handleEnter);
+        el.addEventListener('mouseleave', this.handleLeave);
+    }
+    scan() {
+        const hostRoot = this.el.getRootNode();
+        const selector = `[data-tooltip-id="${this.tooltipId}"]`;
+        hostRoot.querySelectorAll(selector).forEach((el) => this.attach(el));
+    }
+    componentDidLoad() {
+        this.tooltipDiv = this.createTooltipDiv();
+        this.scan();
+        const hostRoot = this.el.getRootNode();
+        const observeTarget = hostRoot === document ? document.body : hostRoot;
+        this.observer = new MutationObserver(() => this.scan());
+        this.observer.observe(observeTarget, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.observer)
+            this.observer.disconnect();
+        this.clearTimers();
+        if ((_a = this.tooltipDiv) === null || _a === void 0 ? void 0 : _a.parentNode) {
+            this.tooltipDiv.parentNode.removeChild(this.tooltipDiv);
+        }
+    }
+    render() {
+        return null;
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.ls_tooltip = LsTooltip;
+//# sourceMappingURL=ls-tooltip.entry.cjs.js.map