legalesign-document-viewer 0.4.5 → 0.4.7

package/dist/collection/components/ls-field-properties-text/ls-field-properties-text.css

@@ -50,7 +50,7 @@ a:hover {
 
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
   width: 100%;
 }
 .has-leading-icon {

package/dist/collection/components/ls-field-properties-text/ls-field-properties-text.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class LsFieldPropertiesText {
     dataItem;
     render() {
-        return (h(Host, { key: '4f61bffe1259f8672e4480ec7f4cd18ecf1a9a7c' }, h("ls-field-properties-container", { key: '614aad16a2a80dcca2a791d0ce1342667813b37d', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '49dbe5e32d5a02afcb27165a60c759c89a5b2b50', class: 'field-set', slot: "content" }, h("ls-field-content", { key: 'cc7a0e20886e6561ca959d0f2e1f4ee49ac2e879', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '58220b511bb05449ccee2f2e5c54a591c79b6ac8', dataItem: this.dataItem })), h("div", { key: '6de32144ed7ee7472f4b6f1778b4a424fcc09462', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '5a77d95dc87ab771d85bfb25b801fdabd4214565', dataItem: this.dataItem })), h("div", { key: '24e06038f5a910dea658c863e007770546802bf8', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: 'd786ff7dc7c61a3a82f266a692c09e44bb417e8a', dataItem: this.dataItem }))), h("ls-field-footer", { key: '31b5b36d2dbf01cb09700ffc3ffa9c224db61cd1', dataItem: this.dataItem })));
+        return (h(Host, { key: 'd98dcc06c9bd451991818629afbc2fff1d6c8fff' }, h("ls-field-properties-container", { key: 'a9f6c081272cf74cd4be29c78769422161dba816', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '5c625ed9ae36342832779428938c2de7a7aa7163', class: 'field-set', slot: "content" }, h("ls-field-content", { key: 'd11bd76deb30a0aa93766167fe81adf8428ad4c3', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: 'f6c373b50a2742321af5e464ccaad5154a0a8cb4', dataItem: this.dataItem })), h("div", { key: '61f7e8aec05f9ee370eeda26eb169ae96c23bdc6', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '1a261f3e557bd7d69cff9980a864fb1e90ac07ba', dataItem: this.dataItem })), h("div", { key: '535ba971134ab505302a23932df23136a387bce5', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '7e84324458a5410b9d4af72a982c87e46d075cbc', dataItem: this.dataItem }))), h("ls-field-footer", { key: 'e8b395dc2d6f049b8715870b602f3510a8e99b7f', dataItem: this.dataItem })));
     }
     static get is() { return "ls-field-properties-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-size/ls-field-size.css

@@ -7,8 +7,8 @@
 }
 
 .ls-toolbar-numeric {
-  width: 45px;
-  max-height: 18px;
+  width: 2.813rem;
+  max-height: 1.25rem;
   margin: 0px;
   padding: 0px;
 }

package/dist/collection/components/ls-field-size/ls-field-size.js

@@ -19,7 +19,7 @@ export class LsFieldSize {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '4a8c5b6091593c6658d52f332dc0180a9aa7c234' }, h("div", { key: 'c2235c25b8c994e86191ee4c0b60aac827a99304', class: 'ls-field-properties-section' }, h("div", { key: '342929332fd0df3c4316713564a8a33b3a9ba7f5', class: 'ls-field-properties-section-text' }, h("p", { key: '511b3d62008d18fcd867a724bf66c4222b5b31db', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '246c72ab2973d7de15b9ee60eb684221d2de8c09', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '2f9956bd71a5195ca540f8e7c77d705c49b82eaa', class: 'button-group' }, h("button", { key: '5c66c06e562a38a15d1dba9a7a02d91facfcb79b', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip": "Make selected fields the same height and width as the first selected field" }, h("ls-icon", { key: '577fbb9f0309603f92c64c85dfd4bdebca26b08f', name: "field-scale" })), h("button", { key: '15f47dec9a4d8be2abd9cf49db82eed86efd6274', "aria-label": "Make selected fields the same width as the first selected field", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip": "Make selected fields the same width as the first selected field" }, h("ls-icon", { key: 'd586958503eda47fbe1c1ffd37737fbafb936857', name: "field-match-width" })), h("button", { key: 'e94c585c27941e00c5801ffce2ea4124e84a5c2f', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip": "Make selected fields the same height as the first selected field" }, h("ls-icon", { key: '3e1877707b12710e6d38fe7bd40bd653703e5d2e', name: "field-match-height" })))), h("slot", { key: '80290ec35de43ab1bb2f39ba303a6b4b1127a74a' }), h("ls-tooltip", { key: 'd7ae2421a26db540d0d440e9d987934601ab5257', id: "ls-tooltip-master" })));
+        return (h(Host, { key: '1cabd4d6ece5981e2e50933fa93d19b113cd6bca' }, h("div", { key: 'faabdbcb881e7724694750df2de7151d7a8990ac', class: 'ls-field-properties-section' }, h("div", { key: '14cd8bae67637aadb831dee0c2373e280dd26199', class: 'ls-field-properties-section-text' }, h("p", { key: '3a2f88d275b7b7932d7816d692ef768ac24d3774', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: 'e88a8518e89b06f7b446b387fd063ccf15f23f86', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: 'e7bb74bd8e58ee30d14736a52925ea8a144dc54f', class: 'button-group' }, h("button", { key: 'ff0c8337a67047633e50e9f3133a9611dc005e2e', onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip": "Make selected fields the same height and width as the first selected field" }, h("ls-icon", { key: 'c4618753082d4e2212a273fece998e8bd51f6688', name: "field-scale" })), h("button", { key: 'd88b13b511c417036b7cbac398bc8f1627cb6d26', "aria-label": "Make selected fields the same width as the first selected field", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip": "Make selected fields the same width as the first selected field" }, h("ls-icon", { key: 'ee4cbf6e84d12685d3ef7516557d6ffe5214524c', name: "field-match-width" })), h("button", { key: 'a16e991225c105f124afc5c65960a8b8e595867e', onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip": "Make selected fields the same height as the first selected field" }, h("ls-icon", { key: 'cbc94846ea2c09a47800e0f7e073be43c8ed2230', name: "field-match-height" })))), h("slot", { key: 'cc0e771946fe9cbd33d19a0c0fee3e025fc4870d' }), h("ls-tooltip", { key: '9f8b2d85bc49f41b85a34b30763088f804e5e5df', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-field-size"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-type-display/ls-field-type-display.js

@@ -7,14 +7,14 @@ export class LsFieldTypeDisplay {
     fieldType = 'signature';
     render() {
         const color = defaultRolePalette[this.assignee % 100];
-        return (h(Host, { key: 'b96d23acd3d237cbdb28c0fd245a972c80b7fd25', class: 'ls-field-type-wrapper', style: {
+        return (h(Host, { key: 'e40b140dc43b54a9b5902db8ee47f713da12e723', class: 'ls-field-type-wrapper', style: {
                 border: `1px dashed ${color.s30}`,
                 background: color.s10,
-            } }, h("div", { key: 'cdc499d6c1c686ad2691a74c248c6e222d68f6aa', class: 'ls-field-type-inner' }, h("div", { key: '79170b027981ad4a685fbb9d9632c4972e09dd6b', class: 'ls-field-type-icon', style: {
+            } }, h("div", { key: '3c16f1b3c1e5370986c266173f0792cae15e3345', class: 'ls-field-type-inner' }, h("div", { key: '268ac5892e08c2b253a722ebab1faeaffaa63db0', class: 'ls-field-type-icon', style: {
                 border: `1px solid ${color.s60}`,
                 color: color.s60,
                 background: color.s10,
-            } }, h("ls-icon", { key: 'e5673bce1895cbd07640580560517efd1fa89c4d', name: getFieldIcon(this.fieldType), size: "20" })), h("p", { key: '8bc1644f6a070c41d2f967d9eb8e535df3dd9bf3', class: 'ls-field-type-name' }, getFieldLabel(this.fieldType)))));
+            } }, h("ls-icon", { key: '9ec309d89e6405f0aff5ac94868166b932983331', name: getFieldIcon(this.fieldType), size: "1.25rem" })), h("p", { key: '0f64e64d628e4b9bd7ee2426237ef1dcfc5f4940', class: 'ls-field-type-name' }, getFieldLabel(this.fieldType)))));
     }
     static get is() { return "ls-field-type-display"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-field-type-display/ls-field-type-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-field-type-display.js","sourceRoot":"","sources":["../../../src/components/ls-field-type-display/ls-field-type-display.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAOvE,MAAM,OAAO,kBAAkB;IACrB,QAAQ,CAAS;IACjB,SAAS,GAAW,WAAW,CAAC;IAExC,MAAM;QACJ,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;QACtD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE;gBACL,MAAM,EAAE,cAAc,KAAK,CAAC,GAAG,EAAE;gBACjC,UAAU,EAAE,KAAK,CAAC,GAAG;aACtB;YAED,4DAAK,KAAK,EAAE,qBAAqB;gBAC/B,4DACE,KAAK,EAAE,oBAAoB,EAC3B,KAAK,EAAE;wBACL,MAAM,EAAE,aAAa,KAAK,CAAC,GAAG,EAAE;wBAChC,KAAK,EAAE,KAAK,CAAC,GAAG;wBAChB,UAAU,EAAE,KAAK,CAAC,GAAG;qBACtB;oBAED,gEAAS,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,IAAI,GAAG,CACrD;gBACN,0DAAG,KAAK,EAAE,oBAAoB,IAAG,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAK,CAC/D,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldLabel } from '../ls-document-viewer/defaultFieldLabels';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n  tag: 'ls-field-type-display',\n  styleUrl: 'ls-field-type-display.css',\n  shadow: true,\n})\nexport class LsFieldTypeDisplay {\n  @Prop() assignee: number;\n  @Prop() fieldType: string = 'signature';\n\n  render() {\n    const color = defaultRolePalette[this.assignee % 100];\n    return (\n      <Host\n        class={'ls-field-type-wrapper'}\n        style={{\n          border: `1px dashed ${color.s30}`,\n          background: color.s10,\n        }}\n      >\n        <div class={'ls-field-type-inner'}>\n          <div\n            class={'ls-field-type-icon'}\n            style={{\n              border: `1px solid ${color.s60}`,\n              color: color.s60,\n              background: color.s10,\n            }}\n          >\n            <ls-icon name={getFieldIcon(this.fieldType)} size=\"20\" />\n          </div>\n          <p class={'ls-field-type-name'}>{getFieldLabel(this.fieldType)}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-field-type-display.js","sourceRoot":"","sources":["../../../src/components/ls-field-type-display/ls-field-type-display.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAOvE,MAAM,OAAO,kBAAkB;IACrB,QAAQ,CAAS;IACjB,SAAS,GAAW,WAAW,CAAC;IAExC,MAAM;QACJ,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;QACtD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE;gBACL,MAAM,EAAE,cAAc,KAAK,CAAC,GAAG,EAAE;gBACjC,UAAU,EAAE,KAAK,CAAC,GAAG;aACtB;YAED,4DAAK,KAAK,EAAE,qBAAqB;gBAC/B,4DACE,KAAK,EAAE,oBAAoB,EAC3B,KAAK,EAAE;wBACL,MAAM,EAAE,aAAa,KAAK,CAAC,GAAG,EAAE;wBAChC,KAAK,EAAE,KAAK,CAAC,GAAG;wBAChB,UAAU,EAAE,KAAK,CAAC,GAAG;qBACtB;oBAED,gEAAS,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CAC1D;gBACN,0DAAG,KAAK,EAAE,oBAAoB,IAAG,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAK,CAC/D,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldLabel } from '../ls-document-viewer/defaultFieldLabels';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n  tag: 'ls-field-type-display',\n  styleUrl: 'ls-field-type-display.css',\n  shadow: true,\n})\nexport class LsFieldTypeDisplay {\n  @Prop() assignee: number;\n  @Prop() fieldType: string = 'signature';\n\n  render() {\n    const color = defaultRolePalette[this.assignee % 100];\n    return (\n      <Host\n        class={'ls-field-type-wrapper'}\n        style={{\n          border: `1px dashed ${color.s30}`,\n          background: color.s10,\n        }}\n      >\n        <div class={'ls-field-type-inner'}>\n          <div\n            class={'ls-field-type-icon'}\n            style={{\n              border: `1px solid ${color.s60}`,\n              color: color.s60,\n              background: color.s10,\n            }}\n          >\n            <ls-icon name={getFieldIcon(this.fieldType)} size=\"1.25rem\" />\n          </div>\n          <p class={'ls-field-type-name'}>{getFieldLabel(this.fieldType)}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.css

@@ -178,7 +178,7 @@ input:focus:not(:disabled) {
 .right-items {
   position: absolute;
   padding: 0.25rem;
-  height: 36px;
+  height: 2.25rem;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
@@ -198,8 +198,8 @@ input:focus:not(:disabled) {
 
 .button {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -215,8 +215,8 @@ input:focus:not(:disabled) {
 
 .button-disabled {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -255,8 +255,8 @@ input:focus:not(:disabled) {
 
 .button:focus {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;

package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.js

@@ -34,7 +34,7 @@ export class LsNumberInput {
                     ? 'invalid'
                     : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
         const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (h("host", { key: '3223f1b5c6ee85269516ffa345acd30bf507cea6', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: 'bf9c84bd74f40f8e4de7b74ffaae507a0d3278cb', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '2d698e76aa909ee6d44e6aee3dd7edbc93283544', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: '344f3a64c0da8b072544b1bef65b1d9961921302', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '74e2c1aaff565cdfeec39ac2c1410a38e4a7ebb3', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: 'b658f716bd7a26eceeeb3afbedef32a5ba344d96', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '4675bf6bea3de2e6952b107bf208ee60fedd7666', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'afacf0c0780d60d7211aeb3c22dbc5c9a070cf5e', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '81db4646d078e20bf49c53420c4af351ad1c6403', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '098621b5511e1aa0e3baf8d655aab0afbfa38dce', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: 'c967580b4cbc4e7374e928d22a7fe869df5857f9', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: 'b212edc85ce547d05d4345a6b8ab2addd0e56ac0', id: 'buttonIcon', name: 'plus-sm' })))));
+        return (h("host", { key: '16b2658c62a3ea3de4f55ef91fd669677506e1fe', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: 'c1ac4489e1eae6a84a56bff53d22dc7a33d7d4a4', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '8db14a1fd8fad4907c73dd2a41a1e584ddd02914', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: 'f612a83f625cb10b7e11249b281be587c92e783c', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: 'e737ac19586a0a5bca2f1caaf18b1f68b25c9c03', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '2f8681769df8a8affc62f0744e198896eb893ffb', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '3f175e8ed586f731c62d81b286cc3fa198ae8e4b', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '451f88055782062684466fe084477eb675eaec62', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '0699154beaa0964a71b0e378c76853f8bd1832fc', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'edad9c88e963bba30a8f6e3ccd7dc5c9646828bb', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: '2b263884f201f422652393f95e486e51a6e369fb', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: '57dcfe868a3865e0b9b5a9930596a8c758513723', id: 'buttonIcon', name: 'plus-sm' })))));
     }
     static get is() { return "ls-number-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.js

@@ -11,7 +11,7 @@ export class LsRadioInput {
     render() {
         const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
         const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (h("label", { key: '92e3bc9b5774de619922d43ef9c24ad7a43568c7', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '3e89bd9b39c9f37c156f17d42108bc788091ebcf', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: 'e3f1f7b06e8b81eee01d2ce4d674a7ff5c9c76a4', class: 'spanContainer' }, h("span", { key: '7170cb3702dbf2dc9bc07a67c4d91ebc9a8e30ea' }, icon && h("ls-icon", { key: '4de2c9271302dc11bdd6b35fd273b3c6a5b33b39', name: icon, size: "16" })), h("span", { key: '9ce53c08c5031725d09e2edb03660eac4aae9f16' }, label))));
+        return (h("label", { key: 'affba3f5b1b1c934f56a2cb7568dfee10639e842', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '4287b9cd8a951be8c65ce0fb83580ed32fbee77a', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: '7d80ac9ae37ad054e726fd75f52d3568c0f13a25', class: 'spanContainer' }, h("span", { key: '5d2fb9b0d694e03f38da46459b5bcbd97a4982cf' }, icon && h("ls-icon", { key: 'c618f79ac8f61cec3cde549a554190e085599091', name: icon, size: "16" })), h("span", { key: 'a4ab42377ba01f88819b12beacdace5ea6d393b7' }, label))));
     }
     static get is() { return "ls-radio-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/ls-formfield/inputs/ls-select-input/ls-select-input.css

@@ -137,7 +137,7 @@ select {
 .right-items {
   position: absolute;
   padding: 0.25rem;
-  height: 36px;
+  height: 2.25rem;
   right: 0;
   top: 0;
   display: flex;
@@ -156,8 +156,8 @@ select {
 
 .button {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -173,8 +173,8 @@ select {
 
 .button:hover {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -190,8 +190,8 @@ select {
 
 .button:active {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -207,8 +207,8 @@ select {
 
 .button:focus {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;

package/dist/collection/components/ls-formfield/inputs/ls-select-input/ls-select-input.js

@@ -27,7 +27,7 @@ export class LsSelectInput {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: 'ad6571818f20395ecda1dbd22a574b999afa73ca', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'a68a46e5237f98a621a546b4d8295a3594b73ffd', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: 'd84a610ada56cb39fd0125184a9d5257b9127892', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '2a61c4932a822f0f813e20f6ef079569624ea3ad' })), h("div", { key: '7dddfb3625c9f1a0ed02dc5250e3db876299077d', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '405f8a0bfc03565b843001e746059adc77e1558b', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (h("host", { key: '9980f5312e7bdd61255e5684404c85351dd32b63', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'ee10c135a53f825b16f134af7d5d24762ea0794a', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '95875345316282ded2d72eabe24ebcfe9e112947', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '352aae0b0c6ad7dae862021cf81584b89fe761e5' })), h("div", { key: '5ce9ec6d3edb7645be270874087c5b066996e8a6', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '07ad8dc616954c148b044fd68e4518d583e14300', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
     static get is() { return "ls-select-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/ls-formfield/inputs/ls-text-input/ls-text-input.css

@@ -127,7 +127,7 @@
 .right-items {
   position: absolute;
   padding: 0.25rem;
-  height: 36px;
+  height: 2.25rem;
   right: 0;
   top: 0;
   display: flex;
@@ -146,8 +146,8 @@
 
 .button {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -163,8 +163,8 @@
 
 .button:hover {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -180,8 +180,8 @@
 
 .button:active {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -197,8 +197,8 @@
 
 .button:focus {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;

package/dist/collection/components/ls-formfield/inputs/ls-text-input/ls-text-input.js

@@ -35,13 +35,13 @@ export class LsTextInput {
                     : dirty && !valid
                         ? 'invalid'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h(Host, { key: '5d0e39de960da7c05dd64f96360cfcd9133aa95e', class: 'host' }, fieldIcon && (h("ls-icon", { key: '148402cd6087ec414122a54d42ce460fa8fd63e4', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
+        return (h(Host, { key: '065f2582758ce9cfeea52508bd051c49ac8f7a22', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'b5e77210c848cff4c8c572fc2ad2b137e67670c1', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
             } })) : type === 'displayonly' ? (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true, onChange: (e) => {
                 this.changeHandler(e);
             } })) : (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
                 this.changeHandler(e);
-            } })), h("div", { key: 'e86d919029eed85799ae53542758356629dab343', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'c5a0d12e3c07c6708c936b985464b6ff7aff82d1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '7f852342bb7e9407c492b589422494dd088fd61f', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '05d9fcdb971a2876a656ab9f68329899074de1ef', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '2694d48907b91951095d662e68215958ebe68d63', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+            } })), h("div", { key: 'aa71635dc5ce7a3727559271dd57cead5d5f2c7b', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '07561e3d44c33a945083f69cf1c1449257153ed5', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '7fa27ddfe3e004c6c2232210bf0ab39664f7cc75', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '2a07f650fdd786d01a7d88548ba07074da25fbc9', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '1b3fd40bf47799698ea65239eedc0123e01e6cda', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
     }
     static get is() { return "ls-text-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.css

@@ -118,7 +118,7 @@
 .right-items {
   position: absolute;
   padding: 0.25rem;
-  height: 36px;
+  height: 2.25rem;
   right: 0;
   top: 0;
   display: flex;
@@ -137,8 +137,8 @@
 
 .button {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -154,8 +154,8 @@
 
 .button:hover {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -171,8 +171,8 @@
 
 .button:active {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;
@@ -190,8 +190,8 @@
 
 .button:focus {
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 1.75rem;
+  width: 1.75rem;
   padding: 0.25rem;
   justify-content: center;
   align-items: center;

package/dist/collection/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.js

@@ -26,7 +26,7 @@ export class LsTextareaInput {
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: '4e65014b5d0e8df0a397042d501a6c26f250324d', class: 'host' }, fieldIcon && (h("ls-icon", { key: '5ba14d902bdcfaa3d6825ece9a848ae1d8531888', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: 'e490afebd2e14ede73a904f890e8ebdd5f34dc53', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: 'b3139ce875b8e39d41931d9507b9e6007faaf94d', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'c0b3e669755f05961a199008385248c9a8e60f8e', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '97011df16622fc8fe7ef0c9c458667ad5844a9a9', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '7046d7ce171217f536f527309ec15e42ffdd87bb', id: 'buttonIcon', name: buttonIcon }))))));
+        return (h("host", { key: '9ae8b4df7f03ce8007522c161f373be320f802aa', class: 'host' }, fieldIcon && (h("ls-icon", { key: '6ee5150550cf1fcbe0ddf70e1100a424c4cbf799', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: '4db4ca2f5402d0081750eb05c24d384e6604915b', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: 'bd8f98837ef04e4f47ea4cb6f14e7cf75d40e026', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '4b9fcca0baa77a2fc70ecfcda72e09fc60560005', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '2bbf87b77cf0df42e620b8ee8990a15efdf29699', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '53e406ede857fa2fbe2550ac448b5ebf81427a02', id: 'buttonIcon', name: buttonIcon }))))));
     }
     static get is() { return "ls-textarea-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,10 +38,10 @@ export class LsFormfield {
     render() {
         const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
         const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
-        return (h("host", { key: 'abb10c40dccbc1df9073bb8135933b50c7addf3f', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (h("div", { key: 'b8f8cec278fc8b3e224dd4d4cb2a7e3381f1fc53', class: "formfield-top-elements" }, h("div", { key: '090b6ce8001334d8ea27ee503bb80abdb4458765', class: "formfield-left-side" }, labelIcon && h("ls-icon", { key: 'ae0d3022a53947e3948deeb160b1922f9532f662', name: labelIcon }), h("label", { key: '63dfbcd3acfd52aa6f977755734071b320ffe717', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && h("ls-icon", { key: '266a2155a80ccc3e51d5474896fc2250964dff1e', name: 'information-circle' })), extraLabel === 'optional' ? (h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, h("slot", null))) : as === 'radio' ? (h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (h("p", null, "placeholder")), errorText ||
+        return (h("host", { key: '7d9ce8f93eef332dc934dbb8b18c686a24b7bb7b', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (h("div", { key: '83f6dc53d7ed4a97574788f5226f58c7dcdf7f76', class: "formfield-top-elements" }, h("div", { key: '61761e85e2d573f7361d990474dfc8fa168db633', class: "formfield-left-side" }, labelIcon && h("ls-icon", { key: 'f2c2d195abf5ecd11db30844f7a9a45f37a585b1', name: labelIcon }), h("label", { key: 'eb97be872ffcb60d4d161283af72882303471e76', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && h("ls-icon", { key: '09065bb12b3df7e2daf4fd761b328f7b86fdb44e', name: 'information-circle' })), extraLabel === 'optional' ? (h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, h("slot", null))) : as === 'radio' ? (h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (h("p", null, "placeholder")), errorText ||
             count ||
             countMax ||
-            (descriptionText && (h("div", { key: 'cc8ffdb0f955baab2627011dc3ce756d9f3fb755', class: "formfield-bottom-elements" }, errorText && !valid ? h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (h("div", { key: 'b6d2515988fe6022fbc5dbf353650ad03fa06ed0', class: "formfield-count-container" }, h("p", { key: 'ac29508788d292a28e13a88f2dfd0f97bfc54120', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: 'c6da1cc6b8e8970326344ccc37fc7055c36603c7', class: countClass }, h("p", { key: '68250a9de3633f0a9d0f64006016663d5e4f9414' }, "/"), h("p", { key: '4c541ba2dff8b2cdbc9b49830ed46e871cc2bd1f' }, countMax))))))))));
+            (descriptionText && (h("div", { key: '0729bf9725dd53684bf0475718955fbe6847ebcf', class: "formfield-bottom-elements" }, errorText && !valid ? h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (h("div", { key: 'df740e5bc22bd24bbc496a00c02023a95fdf6b9a', class: "formfield-count-container" }, h("p", { key: '0bcd5b23f4ab2483cda330829feea022f2bb33fd', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: '36280cff83fc6522a36778577f04bd9644e1f800', class: countClass }, h("p", { key: 'a1516c03a84710c101b92710cc9ea77ca8a5d45b' }, "/"), h("p", { key: '55b029ed794ce322b7e75a49776d74d21e6f57cf' }, countMax))))))))));
     }
     static get is() { return "ls-formfield"; }
     static get originalStyleUrls() {

package/dist/collection/components/ls-helper-bar/ls-helper-bar.js

@@ -8,11 +8,11 @@ export class LsHelperBar {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '061822abff6f324af19fc264ca4ef838bb0bbe0a' }, h("div", { key: '76cc6c198cf588c9f25557094449edc9522d22f4', class: 'controls-bar', onMouseEnter: () => (this.expanded = true), onMouseLeave: () => (this.expanded = false) }, h("button", { key: '8b8d38b8625b4b4f072beb2c4eb31379d90d40be', style: !this.expanded ? { display: 'none' } : { display: 'block' }, id: "keyboard-btn", ref: el => {
+        return (h(Host, { key: '0ea5ddfbf8e09f857ce4bea741fab2f9661785c7' }, h("div", { key: 'a0d17c33fa0f6513ab6b22d3715bf31625e77fba', class: 'controls-bar', onMouseEnter: () => (this.expanded = true), onMouseLeave: () => (this.expanded = false) }, h("button", { key: 'd4d1405c68b9e96babb93e2044d7bf7b736444b3', style: !this.expanded ? { display: 'none' } : { display: 'block' }, id: "keyboard-btn", ref: el => {
                 if (el) {
                     this.shortcutsBtn = el;
                 }
-            } }, h("ls-keyboard-shortcuts", { key: '23c97b13dad7092a849dfe3093000e07d2f9ff7b', referenceElement: this.shortcutsBtn }), h("ls-icon", { key: '5a64cbe09d163178f2cfb613b4a9d871bc7661cd', name: "keyboard" })), h("button", { key: '3fd30dd762bf8bf3266d5be0cee8c41a4cedcdb1', style: !this.expanded ? { display: 'none' } : { display: 'block' }, "data-pendo": "launch-new-edit-tour" }, h("ls-icon", { key: '4173bf9e2c74a21e7bc02b09657c2f9fab638dc0', name: "map", "data-tooltip": "Take a Guided Tour", "data-tooltip-placement": "left" })), h("button", { key: 'd2960e5793c7a3a0ccac756ace603714fb650f56', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://legalesign.com/articles/', '_blank') }, h("ls-icon", { key: '0fe4f8204e9988d4149b0988f71c8d4cf18ec6cf', name: "book-open", "data-tooltip": "View Documentation \u2197", "data-tooltip-placement": "left" })), h("div", { key: 'd9fc9f72efa34d85d49292a22483dceefe70fcf5', class: "divider", style: !this.expanded ? { display: 'none' } : { display: 'block' } }), h("button", { key: '27469a568bd52b8720fd1f7f09eb1847aea7504f' }, h("ls-icon", { key: '59025902862e563da1cc9f45bdf5b822b00ab4c9', name: "question-mark-circle" }))), h("slot", { key: '4336509f3a61062d59d5f5a87ccfeb1021de2a9a' }), h("ls-tooltip", { key: '0d9025118f530702b32903c96bdd468b7907a211', id: "ls-tooltip-master" })));
+            } }, h("ls-keyboard-shortcuts", { key: 'dce4fffb30a3ed7115ee0816434552996794ad3a', referenceElement: this.shortcutsBtn }), h("ls-icon", { key: '04e31a96e6593b2fc73854619bbc80ef20fc4d26', name: "keyboard" })), h("button", { key: 'e0ff256398468065fb76fe273c1a4089af598dbf', style: !this.expanded ? { display: 'none' } : { display: 'block' }, "data-pendo": "launch-new-edit-tour" }, h("ls-icon", { key: '5ce37cfa92b2525a8d344fed6b8835930db1aeb0', name: "map", "data-tooltip": "Take a Guided Tour", "data-tooltip-placement": "left" })), h("button", { key: 'ab1cc9441815b58fc92d1688bf540a6ad9ea9349', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://legalesign.com/articles/', '_blank') }, h("ls-icon", { key: 'fdb1d13e35ff66d03c77bd15858910c4773b5105', name: "book-open", "data-tooltip": "View Documentation \u2197", "data-tooltip-placement": "left" })), h("div", { key: 'cfc76e9434590eb0c06055d89b219479e4b0fa8b', class: "divider", style: !this.expanded ? { display: 'none' } : { display: 'block' } }), h("button", { key: '430c37f8e0f4206a76f006c3f72c60c5e2b8a2dc' }, h("ls-icon", { key: 'c3e6c2bac0ec08c2cec5c0c5237cdb7b2ec740ef', name: "question-mark-circle" }))), h("slot", { key: '38c98e7e91042d1cddb4217e8f61c44d32f65a7a' }), h("ls-tooltip", { key: '8ddaf7d60cd84a206efb4c71240db45772bc8d70', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-helper-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class LsIcon {
     name;
     solid = false;
     color = "#000000";
-    size = "20";
+    size = "1.25rem";
     customStyle;
     // Added function to check that the Icon enum type has all the icons from the icons.ts file
     arraysAreIdentical(arr1, arr2) {
@@ -25,11 +25,11 @@ export class LsIcon {
             console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
     }
     render() {
-        return (h("host", { key: 'cde74309a5d2874ef637402ef4263d7b498c74cc' }, icons
+        return (h("host", { key: 'bd029331162812961f4b1413bcedd4688cece878' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
-                height: `${this.size}px`,
-                width: `${this.size}px`,
+                height: `${this.size}`,
+                width: `${this.size}`,
                 ...this.customStyle,
             } }, this.solid ? (h("div", { innerHTML: icon.svgSolid, style: { top: '0px' } })) : (h("div", { innerHTML: icon.svgOutline, style: { top: '0px' } })))))));
     }
@@ -120,7 +120,7 @@ export class LsIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "\"20\""
+                "defaultValue": "\"1.25rem\""
             },
             "customStyle": {
                 "type": "unknown",

package/dist/collection/components/ls-icon/ls-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-icon.js","sourceRoot":"","sources":["../../../src/components/ls-icon/ls-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAM7D,MAAM,OAAO,MAAM;IACT,IAAI,CAAQ;IACZ,KAAK,GAAa,KAAK,CAAC;IACxB,KAAK,GAAY,SAAS,CAAC;IAC3B,IAAI,GAAY,IAAI,CAAC;IACrB,WAAW,CAA6B;IAEhD,2FAA2F;IACnF,kBAAkB,CAAC,IAAc,EAAE,IAAc;QACvD,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE/D,IAAI,YAAY,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,UAAU,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QAC5C,MAAM,UAAU,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QAE5C,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IACzE,CAAC;IACD,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC5C,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAC1C,SAAS,EACT,IAAI,CAAC,iBAAiB,CACvB,CAAC;QACF,IAAI,CAAC,YAAY;YACf,OAAO,CAAC,IAAI,CACV,4IAA4I,CAC7I,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACG,KAAK;YACJ,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC;YAC3C,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,WACE,GAAG,EAAE,IAAI,EAAE,IAAI,EACf,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACxB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACvB,GAAG,IAAI,CAAC,WAAW;aAEpB,IAEA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,WAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAC,GAAG,CACvD,CAAC,CAAC,CAAC,CACF,WAAK,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAC,GAAI,CAC1D,CACG,CACP,CAAC,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { icons } from './icons';\nimport { Icon, IconEnum, iconNames } from '../../types/Icon';\n\n@Component({\n  tag: 'ls-icon',\n  shadow: true,\n})\nexport class LsIcon {\n  @Prop() name?: Icon;\n  @Prop() solid?: boolean = false;\n  @Prop() color?: string = \"#000000\";\n  @Prop() size?: string = \"20\";\n  @Prop() customStyle?: { [key: string]: string };\n\n  // Added function to check that the Icon enum type has all the icons from the icons.ts file\n  private arraysAreIdentical(arr1: string[], arr2: string[]): boolean {\n    const modifiedArr1 = arr1[0] === 'none' ? arr1.slice(1) : arr1;\n    const modifiedArr2 = arr2[0] === 'none' ? arr2.slice(1) : arr2;\n\n    if (modifiedArr1.length !== modifiedArr2.length) {\n      return false;\n    }\n    const sortedArr1 = [...modifiedArr1].sort();\n    const sortedArr2 = [...modifiedArr2].sort();\n\n    return sortedArr1.every((value, index) => value === sortedArr2[index]);\n  }\n  iconNamesFromEnum = Object.values(IconEnum);\n  componentDidLoad() {\n    const areIdentical = this.arraysAreIdentical(\n      iconNames,\n      this.iconNamesFromEnum,\n    );\n    if (!areIdentical)\n      console.warn(\n        'Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.',\n      );\n  }\n\n  render() {\n    return (\n      <host>\n        {icons\n          ?.filter((icon) => icon.name === this.name)\n          ?.map((icon) => (\n            <div\n              key={icon?.name}\n              class='iconContainer'\n              style={{\n                height: `${this.size}px`,\n                width: `${this.size}px`,\n                ...this.customStyle,\n                \n              }}\n            >\n              {this.solid ? (\n                <div innerHTML={icon.svgSolid} style={{ top: '0px'}}/>\n              ) : (\n                <div innerHTML={icon.svgOutline} style={{ top: '0px'}} />\n              )}\n            </div>\n          ))}\n      </host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-icon.js","sourceRoot":"","sources":["../../../src/components/ls-icon/ls-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAM7D,MAAM,OAAO,MAAM;IACT,IAAI,CAAQ;IACZ,KAAK,GAAa,KAAK,CAAC;IACxB,KAAK,GAAY,SAAS,CAAC;IAC3B,IAAI,GAAY,SAAS,CAAC;IAC1B,WAAW,CAA6B;IAEhD,2FAA2F;IACnF,kBAAkB,CAAC,IAAc,EAAE,IAAc;QACvD,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE/D,IAAI,YAAY,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,UAAU,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QAC5C,MAAM,UAAU,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QAE5C,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IACzE,CAAC;IACD,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC5C,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAC1C,SAAS,EACT,IAAI,CAAC,iBAAiB,CACvB,CAAC;QACF,IAAI,CAAC,YAAY;YACf,OAAO,CAAC,IAAI,CACV,4IAA4I,CAC7I,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACG,KAAK;YACJ,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC;YAC3C,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,WACE,GAAG,EAAE,IAAI,EAAE,IAAI,EACf,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;gBACtB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;gBACrB,GAAG,IAAI,CAAC,WAAW;aAEpB,IAEA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,WAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAC,GAAG,CACvD,CAAC,CAAC,CAAC,CACF,WAAK,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAC,GAAI,CAC1D,CACG,CACP,CAAC,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { icons } from './icons';\nimport { Icon, IconEnum, iconNames } from '../../types/Icon';\n\n@Component({\n  tag: 'ls-icon',\n  shadow: true,\n})\nexport class LsIcon {\n  @Prop() name?: Icon;\n  @Prop() solid?: boolean = false;\n  @Prop() color?: string = \"#000000\";\n  @Prop() size?: string = \"1.25rem\";\n  @Prop() customStyle?: { [key: string]: string };\n\n  // Added function to check that the Icon enum type has all the icons from the icons.ts file\n  private arraysAreIdentical(arr1: string[], arr2: string[]): boolean {\n    const modifiedArr1 = arr1[0] === 'none' ? arr1.slice(1) : arr1;\n    const modifiedArr2 = arr2[0] === 'none' ? arr2.slice(1) : arr2;\n\n    if (modifiedArr1.length !== modifiedArr2.length) {\n      return false;\n    }\n    const sortedArr1 = [...modifiedArr1].sort();\n    const sortedArr2 = [...modifiedArr2].sort();\n\n    return sortedArr1.every((value, index) => value === sortedArr2[index]);\n  }\n  iconNamesFromEnum = Object.values(IconEnum);\n  componentDidLoad() {\n    const areIdentical = this.arraysAreIdentical(\n      iconNames,\n      this.iconNamesFromEnum,\n    );\n    if (!areIdentical)\n      console.warn(\n        'Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.',\n      );\n  }\n\n  render() {\n    return (\n      <host>\n        {icons\n          ?.filter((icon) => icon.name === this.name)\n          ?.map((icon) => (\n            <div\n              key={icon?.name}\n              class='iconContainer'\n              style={{\n                height: `${this.size}`,\n                width: `${this.size}`,\n                ...this.customStyle,\n                \n              }}\n            >\n              {this.solid ? (\n                <div innerHTML={icon.svgSolid} style={{ top: '0px'}}/>\n              ) : (\n                <div innerHTML={icon.svgOutline} style={{ top: '0px'}} />\n              )}\n            </div>\n          ))}\n      </host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-input-wrapper/ls-input-wrapper.js

@@ -3,7 +3,7 @@ export class LsInputWrapper {
     leadingIcon;
     select = false;
     render() {
-        return (h(Host, { key: '7750671f8dde3da2567df36c98dca70344b63ca4' }, h("ls-icon", { key: '20fe94a9a904f9872cdc106ad8b01432e9021211', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && h("ls-icon", { key: '45e1dddd802766e2e9c6c744c956864d641be133', id: "selectorIcon", name: "selector" }), h("slot", { key: 'cf176ab0464b7f7b01160391327b741733887c12' })));
+        return (h(Host, { key: '80c79e120bd0d44c11cac3e8096715e59d21a793' }, h("ls-icon", { key: 'a8af28777cb9cea7294075df1714473b8310d98d', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && h("ls-icon", { key: '0e68b967bcb36ea63a3bbd147c4af70916443c68', id: "selectorIcon", name: "selector" }), h("slot", { key: 'c547d8642431a3fc34e36c967bf9789e7b10921d' })));
     }
     static get is() { return "ls-input-wrapper"; }
     static get encapsulation() { return "shadow"; }