legalesign-document-viewer 0.4.9 → 0.5.0

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

@@ -1,8 +1,281 @@
-import { r as registerInstance, h, c as createEvent, H as Host } from './index-o0lmYfXA.js';
+import { r as registerInstance, h, c as createEvent, H as Host } from './index-BwdJ-HOC.js';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const lsNumberInputCss = "* {\n  box-sizing: border-box;\n  font-family:\n    'IBM Plex Sans',\n    sans-serif;\n  margin: 0;\n}\n\n.host {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem;\n  align-items: flex-start;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--Grey-20, #edeff2);\n  background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-60);\n}\n\n#password-icon {\n  padding-right: 0.25rem;\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-basic {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-ls {\n  display: flex;\n  width: 100%;\n  height: 1.75rem;\n  padding: 0 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.375rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n\n\n}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input-ls {\n  -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-110);\n}\n\n.disabled {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.display-only {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-100);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 2.25rem;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n}\n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button-disabled {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-=10, #F7F8FA);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  cursor: not-allowed;\n\n  #buttonIcon {\n    color: var(--gray-70);\n  }\n}\n\n.button:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-20, #edeff2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n";
+const lsNumberInputCss = () => `* {
+  box-sizing: border-box;
+  font-family:
+    'IBM Plex Sans',
+    sans-serif;
+  margin: 0;
+}
+
+.host {
+  display: flex;
+  width: 100%;
+  padding: 0.25rem;
+  align-items: flex-start;
+  gap: 0.25rem;
+  border-radius: 0.625rem;
+  border: 1px solid var(--Grey-20, #edeff2);
+  background: var(--Grey-10, #f7f8fa);
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#fieldIcon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.75rem;
+  color: var(--gray-80);
+}
+
+#fieldIconDisabled {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.75rem;
+  color: var(--gray-60);
+}
+
+#password-icon {
+  padding-right: 0.25rem;
+}
+
+.icon-input {
+  padding-left: 2.5rem !important;
+}
+
+.button-input {
+  padding-right: 2.5rem !important;
+}
+
+.right-items-input {
+  padding-right: 4rem !important;
+}
+
+.input-basic {
+  display: flex;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.input-ls {
+  display: flex;
+  width: 100%;
+  height: 1.75rem;
+  padding: 0 0.5rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.375rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+
+
+}
+
+.input-ls::-webkit-outer-spin-button,
+.input-ls::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input-ls {
+  -moz-appearance: textfield;
+}
+
+input-base:active:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+input:focus:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+.default {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-100);
+}
+
+.default:hover {
+  border: 1px solid var(--gray-50, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-110);
+}
+
+.disabled {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-60);
+  cursor: not-allowed;
+}
+
+.display-only {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-100);
+  cursor: not-allowed;
+}
+
+.invalid {
+  border: 1px solid var(--red-40, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.invalid:hover {
+  border: 1px solid var(--red-50, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.valid {
+  border: 1px solid var(--green-40, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.valid:hover {
+  border: 1px solid var(--green-50, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.right-items {
+  position: absolute;
+  padding: 0.25rem;
+  height: 2.25rem;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+#invalidIcon {
+  margin: 0 0.5rem;
+  color: var(--red-70);
+}
+
+#validIcon {
+  margin: 0 0.5rem;
+  color: var(--green-60);
+}
+
+.button {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-90);
+  }
+}
+
+.button-disabled {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-=10, #F7F8FA);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  cursor: not-allowed;
+
+  #buttonIcon {
+    color: var(--gray-70);
+  }
+}
+
+.button:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-20, #edeff2);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:active {
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:focus {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+`;
 
 const LsNumberInput = class {
     constructor(hostRef) {
@@ -44,9 +317,9 @@ const LsNumberInput = class {
         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' })))));
     }
 };
-LsNumberInput.style = lsNumberInputCss;
+LsNumberInput.style = lsNumberInputCss();
 
-const lsRadioInputCss = ".radioLabel{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.5rem 0.75rem}.radioLabel.checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.radioLabel:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.radioLabel.checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.radioLabel:not(.checked):not(.disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.radioLabel:focus:not(.disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.radioLabel.disabled{cursor:not-allowed}.radioLabel.disabled.checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.radioLabel.disabled:not(.checked){background-color:var(--gray-10);color:var(--gray-60)}.inputClass{margin-top:0px}.inputClass:focus{outline:none}.inputClass:disabled{cursor:not-allowed}.spanContainer{display:flex;gap:0.25rem;align-items:center}";
+const lsRadioInputCss = () => `.radioLabel{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.5rem 0.75rem}.radioLabel.checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.radioLabel:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.radioLabel.checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.radioLabel:not(.checked):not(.disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.radioLabel:focus:not(.disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.radioLabel.disabled{cursor:not-allowed}.radioLabel.disabled.checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.radioLabel.disabled:not(.checked){background-color:var(--gray-10);color:var(--gray-60)}.inputClass{margin-top:0px}.inputClass:focus{outline:none}.inputClass:disabled{cursor:not-allowed}.spanContainer{display:flex;gap:0.25rem;align-items:center}`;
 
 const LsRadioInput = class {
     constructor(hostRef) {
@@ -65,9 +338,237 @@ const LsRadioInput = class {
         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))));
     }
 };
-LsRadioInput.style = lsRadioInputCss;
+LsRadioInput.style = lsRadioInputCss();
+
+const lsSelectInputCss = () => `* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.host {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#fieldIcon {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--gray-80)
+}
+
+#fieldIconDisabled {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--gray-60)
+}
+
+.icon-input {
+  padding-left: 2.5rem !important;
+}
+
+.button-input {
+  padding-right: 2.5rem !important;
+}
+
+.right-items-input {
+  padding-right: 4rem !important;
+}
+
+.input-base {
+  display: flex;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0rem 0.75rem;
+  align-items: center;
+  vertical-align: text-top;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+#select-arrow {
+  color: var(--gray-70);
+  margin-right: 0.25rem;
+  margin-left: -0.125rem;
+}
+
+#select-arrow-disabled {
+  color: var(--gray-40);
+  margin-right: 0.25rem;
+  margin-left: -0.125rem;
+}
+
+.input-base:active:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
+  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
+}
+
+.input-base:focus:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
+  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
+}
+
+
+.default {
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--White, #FFF);
+  color: var(--gray-100);
+}
+
+.default:hover {
+  border: 1px solid var(--gray-50, #D8D9DC);
+  background: var(--White, #FFF);
+  color: var(--gray-110);
+}
+
+
+.disabled {
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-10, #F7F8FA);
+  color: var(--gray-60);
+  cursor: not-allowed;
+}
+
+.invalid {
+  border: 1px solid var(--red-40, #FFA19E);
+  background: var(--White, #FFF);
+  color: var(--Red-100, #7A1714);
+}
+
+.invalid:hover {
+  border: 1px solid var(--red-50, #FFA19E);
+  background: var(--White, #FFF);
+  color: var(--Red-100, #7A1714);
+}
+
+.valid {
+  border: 1px solid var(--green-40, #72F0C2);
+  background: var(--White, #FFF);
+  color: var(--Green-100, #125241);
+}
+
+.valid:hover {
+  border: 1px solid var(--green-50, #72F0C2);
+  background: var(--White, #FFF);
+  color: var(--Green-100, #125241);
+}
+
+
+.right-items {
+  position: absolute;
+  padding: 0.25rem;
+  height: 2.25rem;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+} 
+
+#invalidIcon {
+  margin: 0 0.5rem;
+  color: var(--red-70);
+}
+
+#validIcon {
+  margin: 0 0.5rem;
+  color: var(--green-60);
+}
+
+.button {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #C8C9CC);
+  background: var(--White, #FFF);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-90);
+  }
+}
+
+.button:hover {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #C8C9CC);
+  background: var(--gray-20, #EDEFF2);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:active {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456F6);
+  background: var(--White, #FFF);
+  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
 
-const lsSelectInputCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 2.25rem;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n";
+.button:focus {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456F6);
+  background: var(--White, #FFF);
+  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+
+
+
+
+`;
 
 const LsSelectInput = class {
     constructor(hostRef) {
@@ -102,9 +603,227 @@ const LsSelectInput = class {
         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' })))));
     }
 };
-LsSelectInput.style = lsSelectInputCss;
+LsSelectInput.style = lsSelectInputCss();
+
+const lsTextInputCss = () => `* {
+  box-sizing: border-box;
+  font-family: "IBM Plex", sans-serif;
+  margin: 0;
+}
+
+.host {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#fieldIcon {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--gray-80)
+}
+
+#fieldIconDisabled {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--gray-60)
+}
+
+#password-icon {
+  padding-right: 0.25rem;
+}
+
+.icon-input {
+  padding-left: 2.5rem !important;
+}
+
+.button-input {
+  padding-right: 2.5rem !important;
+}
+
+.right-items-input {
+  padding-right: 4rem !important;
+}
+
+.input-base {
+  display: flex;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.input-base:active:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
+  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
+}
+
+.input-base:focus:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
+  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
+}
+
+
+.default {
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--White, #FFF);
+  color: var(--gray-100);
+}
+
+.default:hover {
+  border: 1px solid var(--gray-50, #D8D9DC);
+  background: var(--White, #FFF);
+  color: var(--gray-110);
+}
+
+
+.disabled {
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-10, #F7F8FA);
+  color: var(--gray-60);
+  cursor: not-allowed;
+}
+
+.display-only {
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-10, #F7F8FA);
+  color: var(--gray-100);
+  cursor: not-allowed;
+}
+
+.invalid {
+  border: 1px solid var(--red-40, #FFA19E);
+  background: var(--White, #FFF);
+  color: var(--Red-100, #7A1714);
+}
+
+.invalid:hover {
+  border: 1px solid var(--red-50, #FFA19E);
+  background: var(--White, #FFF);
+  color: var(--Red-100, #7A1714);
+}
+
+.valid {
+  border: 1px solid var(--green-40, #72F0C2);
+  background: var(--White, #FFF);
+  color: var(--Green-100, #125241);
+}
+
+.valid:hover {
+  border: 1px solid var(--green-50, #72F0C2);
+  background: var(--White, #FFF);
+  color: var(--Green-100, #125241);
+}
+
+
+.right-items {
+  position: absolute;
+  padding: 0.25rem;
+  height: 2.25rem;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+} 
+
+#invalidIcon {
+  margin: 0 0.5rem;
+  color: var(--red-70);
+}
+
+#validIcon {
+  margin: 0 0.5rem;
+  color: var(--green-60);
+}
+
+.button {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #C8C9CC);
+  background: var(--White, #FFF);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-90);
+  }
+}
+
+.button:hover {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #C8C9CC);
+  background: var(--gray-20, #EDEFF2);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
 
-const lsTextInputCss = "* {\n  box-sizing: border-box;\n  font-family: \"IBM Plex\", sans-serif;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n#password-icon {\n  padding-right: 0.25rem;\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.display-only {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-100);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 2.25rem;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n";
+.button:active {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456F6);
+  background: var(--White, #FFF);
+  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:focus {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456F6);
+  background: var(--White, #FFF);
+  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+
+
+
+
+`;
 
 const LsTextInput = class {
     constructor(hostRef) {
@@ -154,9 +873,217 @@ const LsTextInput = class {
             } })), 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 })))));
     }
 };
-LsTextInput.style = lsTextInputCss;
+LsTextInput.style = lsTextInputCss();
+
+const lsTextareaInputCss = () => `* {
+  box-sizing: border-box;
+  font-family: "IBM Plex", sans-serif;
+  margin: 0;
+}
+
+.host {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#fieldIcon {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--gray-80);
+}
+
+#fieldIconDisabled {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--gray-60);
+}
+
+.icon-input {
+  padding-left: 2.5rem !important;
+}
+
+.button-input {
+  padding-right: 2.5rem !important;
+}
+
+.right-items-input {
+  padding-right: 4rem !important;
+}
+
+.input-base {
+  display: flex;
+  resize: vertical;
+  width: 100%;
+  min-height: 4rem;
+  padding: 0.5rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.input-base:active:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+.input-base:focus:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
 
-const lsTextareaInputCss = "* {\n  box-sizing: border-box;\n  font-family: \"IBM Plex\", sans-serif;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60);\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  resize: vertical;\n  width: 100%;\n  min-height: 4rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-110);\n}\n\n.disabled {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 2.25rem;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n}\n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-20, #edeff2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n";
+.default {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-100);
+}
+
+.default:hover {
+  border: 1px solid var(--gray-50, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-110);
+}
+
+.disabled {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-60);
+  cursor: not-allowed;
+}
+
+.invalid {
+  border: 1px solid var(--red-40, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.invalid:hover {
+  border: 1px solid var(--red-50, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.valid {
+  border: 1px solid var(--green-40, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.valid:hover {
+  border: 1px solid var(--green-50, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.right-items {
+  position: absolute;
+  padding: 0.25rem;
+  height: 2.25rem;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+}
+
+#invalidIcon {
+  margin: 0 0.5rem;
+  color: var(--red-70);
+}
+
+#validIcon {
+  margin: 0 0.5rem;
+  color: var(--green-60);
+}
+
+.button {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-90);
+  }
+}
+
+.button:hover {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-20, #edeff2);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:active {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:focus {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+`;
 
 const LsTextareaInput = class {
     constructor(hostRef) {
@@ -190,9 +1117,7 @@ const LsTextareaInput = class {
         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 }))))));
     }
 };
-LsTextareaInput.style = lsTextareaInputCss;
+LsTextareaInput.style = lsTextareaInputCss();
 
 export { LsNumberInput as ls_number_input, LsRadioInput as ls_radio_input, LsSelectInput as ls_select_input, LsTextInput as ls_text_input, LsTextareaInput as ls_textarea_input };
 //# sourceMappingURL=ls-number-input.ls-radio-input.ls-select-input.ls-text-input.ls-textarea-input.entry.js.map
-
-//# sourceMappingURL=ls-number-input_5.entry.js.map