legalesign-document-viewer 0.2.6 → 0.2.8

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-DqDUg8D7.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["ls-document-options_37.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"showtoolbox":[4],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"showrightpanel":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"roleColors":[16,"role-colors"],"_template":[32],"_group":[32],"selected":[32],"pageNext":[64],"pagePrev":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"update","updateHandler"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"],"displayTable":["tableViewHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-document-options",{"template":[16]},null,{"template":["selectedHandler"]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"template":[16],"editor":[16]}],[257,"ls-feature-column",{"manager":[1025]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-statusbar",{"zoom":[1026],"editor":[16]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"label":[1],"icon":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"color":[1]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"palette":[16],"type":[1],"page":[16],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-field-properties-multiple",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-signature",{"dataItem":[1040,"data-item"],"fieldSet":[1,"field-set"]}],[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]}],[257,"ls-participant-select",{"dataItem":[1040,"data-item"],"roles":[16],"selectedRole":[32],"isOpen":[32]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-toggle"],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]]], options);
+  return index.bootstrapLazy([["ls-document-options_37.cjs",[[257,"ls-document-viewer",{"template":[1],"token":[1],"templateid":[1],"zoom":[1026],"pageNum":[1026,"page-num"],"signer":[1026],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"showtoolbox":[4],"showtoolbar":[4],"showstatusbar":[4],"showpagepreview":[4],"showrightpanel":[4],"expandfields":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"_group":[32],"selected":[32],"pageNext":[64],"pagePrev":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"update","updateHandler"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"],"displayTable":["tableViewHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-document-options",{"template":[16]},null,{"template":["selectedHandler"]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"template":[16],"editor":[16]}],[257,"ls-feature-column",{"manager":[1025]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-statusbar",{"zoom":[1026],"editor":[16]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"label":[1],"icon":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"color":[1]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-field-properties-multiple",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-signature",{"dataItem":[1040,"data-item"],"fieldSet":[1,"field-set"]}],[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"],"fieldSet":[1,"field-set"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]}],[257,"ls-participant-select",{"dataItem":[1040,"data-item"],"roles":[16],"selectedRole":[32],"isOpen":[32]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-toggle"],[257,"ls-icon",{"name":[1],"solid":[4],"size":[1],"customStyle":[16,"custom-style"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ls-document-options_37.cjs.entry.js

@@ -19903,26 +19903,40 @@ const findDimensions = (frameContainer, sourceField, pageHeight, pageWidth, zoom
 };
 
 // import { RoleColor } from "../../types/RoleColor";
-// export const defaultRolePalette: RoleColor[] = [
-//   {primary:'rgb(50, 124, 244)', faded: 'rgb(240, 246, 255)'},
-//   {primary:'rgb(70, 219, 170)', faded: 'rgb(239, 255, 249)'},
-//   {primary:'rgb(240, 182, 24)', faded: 'rgb(255, 252, 239)'},
-//   {primary:'rgb(238, 229, 255)', faded: 'rgb(244, 240, 255)'},
-//   {primary:'rgb(240, 86, 178)', faded: 'rgb(255, 240, 249)'},
-//   {primary:'rgb(189, 240, 86)', faded: 'rgb(250, 255, 240)'},
-//   {primary:'rgb(246, 74, 68)', faded: 'rgb(246, 190, 188)'},
-//   {primary:'rgb(58, 0, 166)', faded: 'rgb(188, 169, 240)'},
-//   {primary:'rgba(1, 179, 34, 0.69)', faded: 'rgb(135, 173, 158)'},
-//    {primary:'rgb(201, 204, 0)', faded: 'rgba(246, 247, 203, 0.77)'},
-//   {primary:'rgb(249, 55, 129)', faded: 'rgb(255, 237, 244)'},
-//   {primary:'rgb(0, 14, 166)', faded: 'rgb(209, 212, 243)'},
-//   {primary:'rgb(135, 173, 158)', faded: 'rgb(205, 244, 228)'} ,
-//    {primary:'rgb(86, 199, 240)', faded: 'rgb(202, 236, 248)'},
-//   {primary:'rgb(246, 205, 68)', faded: 'rgb(244, 240, 255)'},
-//   {primary:'rgb(0, 94, 166)', faded: 'rgb(188, 169, 240)'},
-//   {primary:'rgba(179, 1, 63, 0.69)', faded: 'rgb(135, 173, 158)'}
-// ]
-const defaultRolePalette = ['gray', 'blue', 'green', 'yellow', 'purple', 'teal', 'pink', 'lime', 'red', 'lightblue', 'aubergine', 'burnt', 'trueGreen', 'indigo', 'cyan'];
+const defaultRolePalette = [
+    { s60: '#afb0b2', s100: '#45484d', s90: '#5e6066', s30: '#e0e2e5', s40: '#d8d9dc', s80: '#6f7176', s50: '#c8c9cc', s10: '#f7f8fa', s20: '#edeff2', description: 'gray' },
+    { s60: '#5684f0', s100: '#14287a', s90: '#233ead', s30: '#bed4fa', s40: '#a2bdf5', s80: '#2d4dcc', s50: '#78a3fa', s10: '#f0f6ff', s20: '#e0ecff', description: 'blue' },
+    { s60: '#46dbaa', s100: '#125241', s90: '#177559', s30: '#9df5d4', s40: '#72f0c2', s80: '#15946a', s50: '#57e5b1', s10: '#effff9', s20: '#c5fde8', description: 'green' },
+    { s60: '#f0b618', s100: '#70350d', s90: '#8a3f0e', s30: '#fcec9d', s40: '#ffe561', s80: '#9e5913', s50: '#fad232', s10: '#fffcef', s20: '#fff3c2', description: 'yellow' },
+    { s60: '#9956f0', s100: '#40147a', s90: '#5f23ad', s30: '#d6befa', s40: '#c6a2f5', s80: '#722dcc', s50: '#b078fa', s10: '#f4f0ff', s20: '#eee5ff', description: 'purple' },
+    { s60: '#46dbbd', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#c5fcf1', description: 'teal' },
+    { s60: '#f056b2', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#ffe5f5', description: 'pink' },
+    { s60: '#bdf056', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#f6ffe5', description: 'lime' },
+    { s60: '#f64a44', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#fff0f0', s20: '#ffe1e0', description: 'red' },
+    { s60: '#48c5f0', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#c7f1ff', description: 'lightblue' },
+    { s60: '#d156f0', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#fae5ff', description: 'aubergine' },
+    { s60: '#f09456', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#fff0e5', description: 'burnt' },
+    { s60: '#56f056', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#e5ffe5', description: 'truegreen' },
+    { s60: '#6b56f0', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#e9e5ff', description: 'indigo' },
+    { s60: '#46dbdb', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: '#c5fcfc', description: 'cyan' },
+    { s60: 'rgb(70, 219, 170)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(239, 255, 249)', description: 'overflowcolor' },
+    { s60: 'rgb(240, 182, 24)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(255, 252, 239)', description: 'overflowcolor' },
+    { s60: 'rgb(238, 229, 255)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(244, 240, 255)', description: 'overflowcolor' },
+    { s60: 'rgb(240, 86, 178)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(255, 240, 249)', description: 'overflowcolor' },
+    { s60: 'rgb(189, 240, 86)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(250, 255, 240)', description: 'overflowcolor' },
+    { s60: 'rgb(246, 74, 68)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(246, 190, 188)', description: 'overflowcolor' },
+    { s60: 'rgb(58, 0, 166)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(188, 169, 240)', description: 'overflowcolor' },
+    { s60: 'rgba(1, 179, 34, 0.69)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(135, 173, 158)', description: 'overflowcolor' },
+    { s60: 'rgb(201, 204, 0)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgba(246, 247, 203, 0.77)', description: 'overflowcolor' },
+    { s60: 'rgb(249, 55, 129)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(255, 237, 244)', description: 'overflowcolor' },
+    { s60: 'rgb(0, 14, 166)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(209, 212, 243)', description: 'overflowcolor' },
+    { s60: 'rgb(135, 173, 158)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(205, 244, 228)', description: 'overflowcolor' },
+    { s60: 'rgb(86, 199, 240)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(202, 236, 248)', description: 'overflowcolor' },
+    { s60: 'rgb(246, 205, 68)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(244, 240, 255)', description: 'overflowcolor' },
+    { s60: 'rgb(0, 94, 166)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(188, 169, 240)', description: 'overflowcolor' },
+    { s60: 'rgba(179, 1, 63, 0.69)', s100: '#', s90: '#', s30: '#', s40: '#', s80: '#', s50: '#', s10: '#', s20: 'rgb(135, 173, 158)', description: 'overflowcolor' },
+];
+// export const defaultRolePalette: string[] = ['gray', 'blue', 'green', 'yellow', 'purple', 'teal', 'pink', 'lime', 'red', 'lightblue', 'aubergine', 'burnt', 'trueGreen', 'indigo', 'cyan'];
 
 /**
  * These utils are used to make document-viewer more readable
@@ -24778,11 +24792,6 @@ const LsDocumentViewer = class {
      * {boolean}
      */
     toolboxFilter = null;
-    /**
-     * Allows you to change the colours used for each role in the template.
-     * {SignerColor[]}
-     */
-    roleColors = defaultRolePalette;
     //
     // --- Event Emitters --- //
     //
@@ -25034,10 +25043,10 @@ const LsDocumentViewer = class {
             this.load();
     }
     signerColor = (index) => {
-        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+        return defaultRolePalette[index % 100].s60 || defaultRolePalette[0].s60;
     };
     render() {
-        return (index.h(index.Host, { key: 'f0fc2b823aa34e9602080b6f43fa3d6a17644905' }, index.h(index.h.Fragment, null, index.h("div", { key: '9df7db9dd181820cc6c192edc1a93984a8a027a7', class: "page-header" }, index.h("p", { key: '43e253591b967eff115f0e95f39c42dda5370f65', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '27a2c45ef973ed2a39a88506dd4a3e36748fa861' }, "/"), index.h("p", { key: 'a31c7b901fe689d11208fc7dccc76838fbb126d0', class: "header-text-2" }, "Template Name")), index.h("form", { key: '7bad0edc525c32943bea2a39eca6de3515287263', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
+        return (index.h(index.Host, { key: '859d2cc0c98f729ebacb16f36cee16dd28af7c2d' }, index.h(index.h.Fragment, null, index.h("div", { key: '4be8fb9ad4c7d583b474e3b23b1f1006ba1c2d08', class: "page-header" }, index.h("p", { key: '2cc24d403cc217a4e2f5b2ef109412a6396f2c4a', class: "header-text-1" }, "Template Creation"), index.h("p", { key: '3cc17aa5ef734022e85ef1e8501c9f1b22a8d5e9' }, "/"), index.h("p", { key: '5524c9eb62a096563eaad2f09af00c41df806ac7', class: "header-text-2" }, "Template Name")), index.h("form", { key: '3bc3f5317106ea2c4cabe42a70451906e0f13ac3', id: "ls-editor-form" }, this.showtoolbox === true ? (index.h("div", { class: "leftBox" }, index.h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, index.h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25050,7 +25059,7 @@ const LsDocumentViewer = class {
             } }), index.h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, index.h("div", { class: "ls-editor-infobox" }, index.h("h2", { class: "toolbox-section-title" }, "Participant Fields"), index.h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { class: "fields-box" }, this.signer > 0 ? (index.h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", color: this.signerColor(this.signer) })) : (index.h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", color: this.signerColor(this.signer) })), index.h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", color: this.signerColor(this.signer) }), index.h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, index.h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), index.h("p", null, "More Field Types")), this.expandfields && (index.h("div", { class: "fields-box" }, index.h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", color: this.signerColor(this.signer) }), index.h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", color: this.signerColor(this.signer) }))))), index.h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), index.h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), this.showrightpanel && !this.displayTable && (index.h("div", { class: this.selected && this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, index.h("div", { class: 'properties-header' }, index.h("div", { class: 'properties-header-icon' }, index.h("ls-icon", { name: "pre-filled-content" })), index.h("h1", { class: 'properties-header-title' }, "Field Properties"), index.h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("div", { key: '776dff168c249752f400db7b80e740f3e2684e60', id: "ls-mid-area" }, index.h("ls-toolbar", { key: '7084a21f22f891d6fb33c1642b6167dbe674268f', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), index.h("div", { key: '8276d3e37a4171b82ab9d5d9913447a23e583d91', class: 'document-frame-wrapper' }, index.h("div", { key: '746d82daa6ebdd758c12f343d88ee7d8cc6742a6', class: 'spacer' }), index.h("div", { key: '4f5c297f03666429ad49331c768413b48a5ec397', id: "ls-document-frame" }, index.h("canvas", { key: 'f3042a35c1f9b9b91973cb87e11019a2488687a3', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: '9005b00b5e5b56c568a26ee79be8636c8280bb93', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '88ba70e9e18d000cca60eaaa77bf976e0e019fa6', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: '634e045de512429e15fff2680def5ce870bf2142', editor: this }))))));
+            } }, index.h("ls-icon", { name: "x", size: "20" }))), index.h("ls-field-properties", { id: "my-field-panel" }), index.h("slot", null))))) : (index.h(index.h.Fragment, null)), index.h("div", { key: '396f65ae8dfd571d289bfc42816c040828e8fb88', id: "ls-mid-area" }, index.h("ls-toolbar", { key: '1a621e6b7c8dad1f0a4178f94ba9d069fb129a1d', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), index.h("div", { key: 'eae5daf190f5e3bdd39823a97cec71cfb2a0fea9', class: 'document-frame-wrapper' }, index.h("div", { key: 'c97bb669bffc774f5b3eb9a3a30d73929c08e3a5', class: 'spacer' }), index.h("div", { key: 'd0c6f96d9a08ae6c0c792e2dc0ef36ef3a631b77', id: "ls-document-frame" }, index.h("canvas", { key: 'efcdc3c09c8336e3be0e51afa560b3755519e308', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), index.h("ls-editor-table", { key: '298a8c1c28d7965e3a622006d2dd8de7005ba7b7', editor: this, class: this.displayTable ? '' : 'hidden' }), index.h("div", { key: '844cda3669af25400cc2b41094c3344c5cd60264', id: "ls-box-selector" }))), index.h("ls-statusbar", { key: 'a170950405cde15290542c96fcdfc0609f81a552', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -25059,7 +25068,7 @@ const LsDocumentViewer = class {
 };
 LsDocumentViewer.style = lsDocumentViewerCss;
 
-const lsEditorFieldCss = ":host{--font-family:'IBM Plex Sans', sans-serif;--text-xs:0.75rem;--text-xs-line-height:1rem;--text-sm:0.875rem;--text-sm-line-height:1.25rem;--text-base:1rem;--text-base-line-height:1.5rem;--text-lg:1.125rem;--text-lg-line-height:1.75rem;--text-xl:1.25rem;--text-xl-line-height:1.75rem;--text-2xl:1.5rem;--text-2xl-line-height:2rem;--text-3xl:1.875rem;--text-3xl-line-height:2.25rem;--text-4xl:2.25rem;--text-4xl-line-height:2.5rem;--text-5xl:3rem;--text-5xl-line-height:1;--text-6xl:3.75rem;--text-6xl-line-height:1;--text-7xl:4.5rem;--text-7xl-line-height:1;--text-9xl:8rem;--text-9xl-line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--white:#ffffff;--black:#000000;--pink-10:#fff0f9;--pink-20:#ffe5f5;--pink-30:#fabee2;--pink-40:#f5a2d4;--pink-50:#fa78c6;--pink-60:#f056b2;--pink-70:#e043a2;--pink-80:#cc2d8c;--pink-90:#ad2376;--pink-100:#7a1451;--red-10:#fff0f0;--red-20:#ffe1e0;--red-30:#ffc9c7;--red-40:#ffa19e;--red-50:#ff706b;--red-60:#f64a44;--red-70:#dc2721;--red-80:#c1140e;--red-90:#990500;--red-100:#7a1714;--yellow-10:#fffcef;--yellow-20:#fff3c2;--yellow-30:#fcec9d;--yellow-40:#ffe561;--yellow-50:#fad232;--yellow-60:#f0b618;--yellow-70:#cc8904;--yellow-80:#9e5913;--yellow-90:#8a3f0e;--yellow-100:#70350d;--green-10:#effff9;--green-20:#c5fde8;--green-30:#9df5d4;--green-40:#72f0c2;--green-50:#57e5b1;--green-60:#46dbaa;--green-70:#33b88c;--green-80:#15946a;--green-90:#177559;--green-100:#125241;--teal-10:#effffc;--teal-20:#c5fcf1;--teal-30:#a5fae9;--teal-40:#76f5db;--teal-50:#54ebcd;--teal-60:#46dbbd;--teal-70:#33b8a2;--teal-80:#148f7e;--teal-90:#17756c;--teal-100:#15524c;--cyan-10:#efffff;--cyan-20:#c5fcfc;--cyan-30:#a0fafa;--cyan-40:#76f5f5;--cyan-50:#54ebeb;--cyan-60:#46dbdb;--cyan-70:#33b3b8;--cyan-80:#11868f;--cyan-90:#166a70;--cyan-100:#11474d;--lightblue-10:#effbff;--lightblue-20:#c7f1ff;--lightblue-30:#9de4fc;--lightblue-40:#79dbfc;--lightblue-50:#51d3ff;--lightblue-60:#48c5f0;--lightblue-70:#20a6d6;--lightblue-80:#0b80b2;--lightblue-90:#19648a;--lightblue-100:#0c3e57;--blue-10:#f0f6ff;--blue-20:#e0ecff;--blue-30:#bed4fa;--blue-40:#a2bdf5;--blue-50:#78a3fa;--blue-60:#5684f0;--blue-70:#4368e0;--blue-80:#2d4dcc;--blue-90:#233ead;--blue-100:#14287a;--purple-10:#f4f0ff;--purple-20:#eee5ff;--purple-30:#d6befa;--purple-40:#c6a2f5;--purple-50:#b078fa;--purple-60:#9956f0;--purple-70:#8743e0;--purple-80:#722dcc;--purple-90:#5f23ad;--purple-100:#40147a;--primary-10:#eff4ff;--primary-20:#c7ddff;--primary-30:#9dc3fc;--primary-40:#79adfc;--primary-50:#5185ff;--primary-60:#4456f6;--primary-70:#2134dc;--primary-80:#0e20c1;--primary-90:#000f99;--primary-100:#0c1457;--gray-10:#f7f8fa;--gray-20:#edeff2;--gray-30:#e0e2e5;--gray-40:#d8d9dc;--gray-50:#c8c9cc;--gray-60:#afb0b2;--gray-70:#939599;--gray-80:#6f7176;--gray-90:#5e6066;--gray-100:#45484d;--gray-110:#292c33;--gray-120:#151923;--gray-130:#0c1019;--gray-140:#05080d;--aubergine-10:#fcf0ff;--aubergine-20:#fae5ff;--aubergine-30:#eebefa;--aubergine-40:#e4a2f5;--aubergine-50:#e078fa;--aubergine-60:#d156f0;--aubergine-70:#c143e0;--aubergine-80:#ac2dcc;--aubergine-90:#9223ad;--aubergine-100:#66147a;--indigo-10:#f2f0ff;--indigo-20:#e9e5ff;--indigo-30:#c6befa;--indigo-40:#ada2f5;--indigo-50:#8978fa;--indigo-60:#6b56f0;--indigo-70:#5843e0;--indigo-80:#422dcc;--indigo-90:#3523ad;--indigo-100:#21147a;--lime-10:#fafff0;--lime-20:#f6ffe5;--lime-30:#e6fabe;--lime-40:#d9f5a2;--lime-50:#cffa78;--lime-60:#bdf056;--lime-70:#ace043;--lime-80:#97cc2d;--lime-90:#7fad23;--lime-100:#587a14;--trueGreen-10:#f0fff0;--trueGreen-20:#e5ffe5;--trueGreen-30:#befabe;--trueGreen-40:#a2f5a2;--trueGreen-50:#78fa78;--trueGreen-60:#56f056;--trueGreen-70:#43e043;--trueGreen-80:#2dcc2d;--trueGreen-90:#23ad23;--trueGreen-100:#147a14;--burnt-10:#fff6f0;--burnt-20:#fff0e5;--burnt-30:#fad6be;--burnt-40:#f5c3a2;--burnt-50:#faac78;--burnt-60:#f09456;--burnt-70:#e08243;--burnt-80:#cc6d2d;--burnt-90:#ad5a23;--burnt-100:#7a3d14;--shadow-base:0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);--shadow-lg:0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);--active:0px 1px 3px rgba(0, 15, 153, 0.25), 0px 1px 2px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9dc3fc;display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate}.ls-editor-field-editable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;margin:0;padding:0px 0px 0px 0px;min-width:2em;height:100%;width:100%}.ls-editor-field{opacity:0.7}.ls-editor-field-editable:focus{outline:none}.ls-editor-field-draggable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;min-width:2px;height:98%;width:98%}.hidden-field{display:none}input{all:unset}.draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.editing-input{caret-color:rgb(15 23 42);caret-shape:auto;height:100%;width:100%}";
+const lsEditorFieldCss = ":host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate}.ls-editor-field-editable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;margin:0;padding:0px 0px 0px 0px;min-width:2em;height:100%;width:100%}.ls-editor-field{opacity:0.7}.ls-editor-field-editable:focus{outline:none}.ls-editor-field-draggable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;min-width:2px;height:98%;width:98%}.hidden-field{display:none}input{all:unset}.draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.editing-input{caret-color:rgb(15 23 42);caret-shape:auto;height:100%;width:100%}";
 
 const LsEditorField = class {
     constructor(hostRef) {
@@ -25069,7 +25078,6 @@ const LsEditorField = class {
     dataItem;
     selected;
     readonly;
-    palette;
     type;
     page;
     isEditing = false;
@@ -25160,7 +25168,7 @@ const LsEditorField = class {
         this.sizeObserver.observe(this.component);
         // New dropped components automatically need selecting.
         if (this.selected) {
-            this.component.style.background = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;
+            this.component.style.background = this.participantColor(this.dataItem?.signer).s20;
             this.component.style.opacity = '0.7';
             this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
         }
@@ -25170,13 +25178,13 @@ const LsEditorField = class {
         }
     }
     participantColor = (index) => {
-        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+        return defaultRolePalette[index % 100] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: 'f4ab6bc46e4cdbd1b2bd3b18d08703369af685b9', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, index.h("div", { key: '8b8a45c0acdc4342f95abf5884b60064408c2562', class: {
+        return (index.h(index.Host, { key: '3c8441e53f90eed0e0b778924f9191342f504a65', style: { border: `1px ${this.participantColor(this.dataItem?.signer).s60} solid` } }, index.h("div", { key: 'b81189da32a8a824d19a90b452117a3e820798e5', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, index.h("input", { key: '18d0df23d55da5ca5e9a1ead1bf32797b21c8e70', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), index.h("div", { key: '1756931604edf30a6e30b055f56b70e07dd077a8', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
+            } }, index.h("input", { key: 'e339642324a7180e435f4d04eaff8823288ab4bb', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), index.h("div", { key: 'af5b7435dab53aaf8b4ad0000b0e01116c97ef52', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
     }
     static get watchers() { return {
         "selected": ["watchSelectedHandler"]
@@ -33205,30 +33213,30 @@ const LsParticipantManager = class {
         this.mutate.emit(data);
     }
     participantColor = (index) => {
-        return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+        return defaultRolePalette[index % 100] || defaultRolePalette[0];
     };
     render() {
-        return (index.h(index.Host, { key: '42b6d146cc2155c18759b2239b94e6a2061be7a8' }, index.h("div", { key: '6aabfc38a5efc199b46cce0f5184e5e0b6aedc70', class: "ls-editor-infobox" }, index.h("h2", { key: '9a1c852dad10756a01af085ba9e3d4ca6fcc4550', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: 'd074b9ad19836f29501f727bcd7c194667fe42d5', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '0bf744b4645c9476673a78c1bbdfdfae712ea308', class: "participant-list" }, this.template && this.template?.roles.map((r, index$1) => {
+        return (index.h(index.Host, { key: 'a46ae544ad9c0d0544b97503fb1310b5d08ac66b' }, index.h("div", { key: 'a440114a66fdf2c4d3218d21f708fca0d53d55dc', class: "ls-editor-infobox" }, index.h("h2", { key: 'e26cfb05079ea2ba83c224a57f3ba664c29a68b8', class: "toolbox-section-title" }, "Participants"), index.h("p", { key: 'b9dbb2642df8f613d65decaac4d258632a4dde30', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), index.h("div", { key: '87cdf8bccdbea80b3f59021bd3cad25bd35e0a0f', class: "participant-list" }, this.template && this.template?.roles.map((r, index$1) => {
             return (index.h("div", { class: "participant-card", onClick: () => {
                     this.selectedHandler(r);
                 }, style: {
-                    background: `var(--${this.participantColor(r?.signerIndex)}-10)`,
-                    border: '1px solid ' + `var(--${this.participantColor(r?.signerIndex)}-60)`,
+                    background: this.participantColor(r?.signerIndex).s10,
+                    border: `1px solid ${this.participantColor(r?.signerIndex).s60}`,
                     marginTop: r.signerIndex > 100 && '-0.813rem',
                 }, onMouseEnter: e => e.currentTarget.querySelector('.innerButton')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.innerButton')?.classList.add('hidden') }, index.h("div", { class: 'participant-card-top-items' }, ' ', index.h("div", { class: 'role-label', style: {
-                    background: `var(--${this.participantColor(r?.signerIndex)}-20)`,
-                    color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
+                    background: this.participantColor(r?.signerIndex).s20,
+                    color: this.participantColor(r?.signerIndex).s90,
                 } }, index.h("ls-icon", { name: r?.signerIndex > 100 ? 'eye' : 'signature' }), 'Participant ' + (index$1 + 1)), index.h("div", { class: "innerButton hidden", onClick: () => {
                     this.deleteHandler(r);
                 } }, index.h("ls-icon", { name: "trash", size: "18", style: {
                     color: `var(--${this.participantColor(r?.signerIndex)}-40)`,
                 } }))), index.h("div", { class: 'participant-card-text' }, index.h("p", { class: "participant-text-description", style: {
-                    color: `var(--${this.participantColor(r?.signerIndex)}-100)`,
+                    color: this.participantColor(r?.signerIndex).s100,
                 } }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index$1 + 1}`), index.h("p", { class: "participant-text-type", style: {
-                    color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
+                    color: this.participantColor(r?.signerIndex).s80,
                     textTransform: 'capitalize'
                 } }, r.roleType))));
-        })), index.h("div", { key: 'c439b737066174e8067665b0693e9b576aa3a1d9', class: 'add-participant-button' }, index.h("button", { key: '02b7de44dc38942ed7b78e8ad853202bc93b779a', onClick: () => this.createHandler() }, index.h("ls-icon", { key: '00d4bbacbc5bdcc72580c275a42e5288fc464133', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: '2f9677949581108623e917e2ecaaec90b5d60e6f' }, "Add Participant"))), index.h("slot", { key: '762710558e4f5f6e1e6a18ba12e9d0a895eac5c2' })));
+        })), index.h("div", { key: 'c9ed429a2078fbb413c7458ae3fdcf07021336dd', class: 'add-participant-button' }, index.h("button", { key: '6dbeab14580ff816e163c7ed3db7cceb718b53eb', onClick: () => this.createHandler() }, index.h("ls-icon", { key: 'd20b391942678ea0e020a8b97af4c3cb8dfd5cf2', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), index.h("p", { key: '4e62df970e619a42b532de88c8788469f8fb8e83' }, "Add Participant"))), index.h("slot", { key: '409964ed938991de4edb7f2a26bf76854c85f76b' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
@@ -33279,37 +33287,37 @@ const LsParticipantSelect = class {
         console.log('Selected role:', this.selectedRole);
     }
     participantColor = (index) => {
-        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+        return defaultRolePalette[index % 100] || defaultRolePalette[0];
     };
     render() {
         console.log(this.selectedRole);
-        return (index.h(index.Host, { key: 'ac8313459c9ae066ed40e81bb05e3d14261cffda' }, index.h("div", { key: '8203fe316fbbb5cd0ebf6396e7572006c64b10c9', class: "dropdown" }, index.h("div", { key: '365e40765ba17f4d23642b90249eed7d5b9f6081', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: '48ac4df4b56bf90ed8d8a03b01340c1ba414362e', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'd5071886581872c9b4c3d360a10ee19d86ca02a6', 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" }), index.h("path", { key: 'fdee95b45ee528b1c5f561b70ef81a6cc1872d7a', 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" }), index.h("path", { key: 'ebba43ebbadfa87164184d156f3146a2b8d47b17', 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" }), index.h("path", { key: 'e5491d46f94c9594e4eb6466442b50233ee8758a', 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" })), index.h("p", { key: '3d118bf5aceafd26c2e7bb93445a0cb5af79beb5', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: 'a83ea944e4ae65e746266cd4a337c0300328e932', class: 'selected-role-label', style: {
-                background: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-20)`,
-                color: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-90)`,
-            } }, index.h("ls-icon", { key: 'ca3b2327d2a749dc146fe92bbe510998cbe3e3f7', size: "18", name: this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature' }), this.selectedRole.name ||
-            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: '53d0a139fae7d8a8eda65d1ca5f499eefca3c864', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: '7a7ea57794f3b7d22ab0c308ba91da6eb7b879da', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '18e980a31aa8a8a2f5d27a065ec7f6a92550c78b', class: "dropdown-list" }, index.h("div", { key: '31924def19a1db92cc8f8d5e08bbca8469d66ccc', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
-                '--background-selected': `var(--${defaultRolePalette[0]}-10)`,
-                '--check-icon-selected': `var(--${defaultRolePalette[0]}-50)`,
-            }, 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') }, index.h("div", { key: 'bfc669a9f81fb9d6c77bb4f7c1bb8d6b5b9034d7', class: 'role-icon', style: {
-                background: `var(--${defaultRolePalette[0]}-40)`,
-                color: `var(--${defaultRolePalette[0]}-80)`,
-            } }, index.h("ls-icon", { key: 'e2aad499e826cbd6320771df672eb9ff8e7cce06', name: "user" })), index.h("div", { key: 'c78dc9065fab3b8ff98923542ce232e2cc07e9e8', class: 'role-text' }, index.h("p", { key: '7ece02f690e2d7c53628f6e3e3726b430f364f02', class: 'role-name', style: {
-                '--role-name-selected': `var(--${defaultRolePalette[0]}-100)`,
-            } }, 'Sender'), index.h("p", { key: '29ec9f8c6039ad54eb41b34d4be4dc59d561ac7f', class: 'role-type', style: {
-                '--role-type-selected': `var(--${defaultRolePalette[0]}-80)`,
-            } }, "You")), index.h("ls-icon", { key: 'd1aa6fe64c918563eb94d1079deb90680aef69a9', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (index.h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
-                '--background-selected': `var(--${this.participantColor(r?.signerIndex)}-10)`,
-                '--check-icon-selected': `var(--${this.participantColor(r?.signerIndex)}-50)`,
+        return (index.h(index.Host, { key: '376dc00f9ed35a608669050a14c3a6ec77222ae1' }, index.h("div", { key: 'bffe48d89c04e6d38de5a34d721fc62875233b8c', class: "dropdown" }, index.h("div", { key: '291784e958e45a72305fbdbbd220a3237e829e3b', class: "dropdown-header", onClick: this.toggleDropdown }, index.h("svg", { key: 'c4ae298b8fc164af5b3823952165885ece44a628', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'f18b791336b7901257dae3215ed0ef4128928e1d', 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" }), index.h("path", { key: '6334dacce4604c2b2a8208232e5e3e2dfbeda08d', 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" }), index.h("path", { key: 'a00c1daded99250cea5638c25fde7449cea1fb3f', 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" }), index.h("path", { key: '72c04a47d2856141e4d3083864f00c1ce2bc62ce', 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" })), index.h("p", { key: 'f44c6d982de08655cdd15a03145b3a711d045df6', class: 'placing-fields-text' }, "Placing Fields for"), index.h("div", { key: 'd83960f9c8999046c6e3e1137865e1036c651e85', class: 'selected-role-label', style: {
+                background: this.participantColor(this.selectedRole?.signerIndex).s20,
+                color: this.participantColor(this.selectedRole?.signerIndex).s80,
+            } }, index.h("ls-icon", { key: '733e9f601506e58fecd83f1a5062561ef68efb01', size: "18", name: this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature' }), this.selectedRole.name ||
+            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), index.h("button", { key: 'c5f307779432fdde633d661b19d213a8e0fbfdc3', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("ls-icon", { key: '5da68fd1dade4668364d2e328a6a404a772092eb', name: "chevron-down" }))), this.isOpen && (index.h("div", { key: '6545db8c8c0094cd863037f2e7c94c87e8a34f5b', class: "dropdown-list" }, index.h("div", { key: '4b4b466b9d9f553afb2dcbe4d1e1c623be4c3aa3', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : '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') }, index.h("div", { key: '9f4035308fc39587e417cf0a1e088a4175c118f9', class: 'role-icon', style: {
+                background: defaultRolePalette[0].s50,
+                color: defaultRolePalette[0].s80,
+            } }, index.h("ls-icon", { key: '282c618109165a412bf12d6d9eb17216f1136b0d', name: "user" })), index.h("div", { key: '1e45e9c7405abc4e230a28eb793d984a9a71434b', class: 'role-text' }, index.h("p", { key: '0971c5ec3fac86c604a27a9b258d1edc75116308', class: 'role-name', style: {
+                '--role-name-selected': defaultRolePalette[0].s80,
+            } }, 'Sender'), index.h("p", { key: '94047f15d4dd4046343924e7c553eb947c07e363', class: 'role-type', style: {
+                '--role-type-selected': defaultRolePalette[0].s80,
+            } }, "You")), index.h("ls-icon", { key: 'ec8d3927cd65ac9a2ed789c67f43c2556645cc7f', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (index.h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+                '--background-selected': this.participantColor(r?.signerIndex).s10,
+                '--check-icon-selected': this.participantColor(r?.signerIndex).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') }, index.h("div", { class: 'role-icon', style: {
-                background: r.signerIndex > 100 ? `var(--${this.participantColor(r?.signerIndex)}-30)` : `var(--${this.participantColor(r?.signerIndex)}-40)`,
+                background: r.signerIndex > 100 ? this.participantColor(r?.signerIndex).s20 : this.participantColor(r?.signerIndex).s50,
                 color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
             } }, index.h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature' })), index.h("div", { class: 'role-text' }, index.h("p", { class: 'role-name', style: {
                 '--role-name-selected': `var(--${this.participantColor(r?.signerIndex)}-100)`,
             } }, r.name || r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`), index.h("p", { class: 'role-type', style: {
                 '--role-type-selected': `var(--${this.participantColor(r?.signerIndex)}-80)`,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), index.h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex }))))))), index.h("slot", { key: '7322ac85f9aa04b6e7eff1a57cd2570122274517' })));
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), index.h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex }))))))), index.h("slot", { key: 'b2f3b76d52dab109697f7edb8d81085c7237128f' })));
     }
 };
 LsParticipantSelect.style = lsParticipantSelectCss;