@aquera/nile-elements 0.0.3-1 → 0.0.3-10

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.3-1",
+  "version": "0.0.3-10",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -26,3 +26,5 @@ export { NileChip } from './nile-chip';
 export { NileTextarea } from './nile-textarea';
 export { NileDatePicker } from './nile-date-picker';
 export { NileErrorMessage } from './nile-error-message';
+export { NileFormErrorMessage } from './nile-form-error-message';
+export { NileFormHelpText } from './nile-form-help-text';

package/src/nile-checkbox/nile-checkbox.css.ts

@@ -100,12 +100,16 @@ export const styles = css`
 
   .checkbox__label {
     display: inline-block;
-    color: var(--nile-type-scale-3);
     line-height: 14px;
     font-size: 14px;
     margin-inline-start: 0.5em;
     user-select: none;
     margin-top: 2px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.2px;
   }
 
   :host([required]) .checkbox__label::after {

package/src/nile-checkbox/nile-checkbox.ts

@@ -82,7 +82,7 @@ export class NileCheckbox extends NileElement {
   @property({ type: Boolean, reflect: true }) checked = false;
 
   /** Label, declared this property for backward compatibility of old component  */
-  @property({ type: Boolean, reflect: true }) label = '';
+  @property({ type: String, reflect: true }) label = '';
 
   /**
    * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
@@ -93,6 +93,10 @@ export class NileCheckbox extends NileElement {
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue('checked') defaultChecked = false;
 
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
@@ -154,6 +158,9 @@ export class NileCheckbox extends NileElement {
 
 
   render() {
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
+
     return html`
       <label
         part="base"
@@ -224,6 +231,24 @@ export class NileCheckbox extends NileElement {
           <slot></slot>
         </div>
       </label>
+
+      ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
     `;
   }
 }

package/src/nile-chip/nile-chip.css.ts

@@ -37,19 +37,18 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: 0.125rem;
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: 0.875rem;
+    margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: 1rem;
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: 1.25rem;
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -92,7 +91,6 @@ export const styles = css`
     background-color: #fff;
     border-radius: 0.25rem;
     border: solid 1px #c7ced4;
-    padding: 5px 10px;
     display: flex;
     flex-wrap: wrap;
     width: 100%;

package/src/nile-chip/nile-chip.ts

@@ -73,9 +73,6 @@ export class NileChip extends NileElement {
   /** Disables the input. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
-
   // Auto-complete options
   @property({ type: Array }) autoCompleteOptions: any[] = [];
 
@@ -85,6 +82,13 @@ export class NileChip extends NileElement {
 
   @property({ type: Boolean }) noWrap: boolean = false;
 
+  @property({ type: Array }) errorIndexes: number[] = [];
+
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
+
   @watch('autoCompleteOptions')
   onAutoCompleteOptionsChanged() {
     this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
@@ -186,7 +190,9 @@ export class NileChip extends NileElement {
 
     // Check if label and help text are present
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
       <div
@@ -218,9 +224,12 @@ export class NileChip extends NileElement {
           })}
         >
           ${this.tags.map(
-            tag => html`
+            (tag, index) => html`
               <nile-tag
-                class="nile-chip__tags"
+                class=${classMap({
+                  'nile-chip__tags': true,
+                })}
+                .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}
                 @nile-remove=${() => this.handleRemove(tag)}
                 removable
                 pill
@@ -253,6 +262,23 @@ export class NileChip extends NileElement {
             ${this.helpText}
           </slot>
         </div>
+        ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
       </div>
     `;
   }

package/src/nile-form-error-message/index.ts

@@ -0,0 +1 @@
+export { NileFormErrorMessage } from './nile-form-error-message';

package/src/nile-form-error-message/nile-form-error-message.css.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * FormErrorMessage CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .nile-form-error-message {
+    display: flex;
+    align-items: center;
+    color: var(--nile-colors-red-700);
+    font-family: Colfax-regular;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 0.2px;
+    margin-top: 6px;
+  }
+
+  .nile-form-error-message__icon {
+    margin-right: 6px;
+  }
+`;
+
+export default [styles];

package/src/nile-form-error-message/nile-form-error-message.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-form-error-message.css';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-form-error-message
+ *
+ */
+@customElement('nile-form-error-message')
+export class NileFormErrorMessage extends LitElement {
+
+	/**
+	 * The styles for FormErrorMessage
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+      <div class="nile-form-error-message">
+       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="#A4121C"> </nile-icon> <slot> </slot>
+        </div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileFormErrorMessage;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-form-error-message': NileFormErrorMessage;
+  }
+}

package/src/nile-form-help-text/index.ts

@@ -0,0 +1 @@
+export { NileFormHelpText } from './nile-form-help-text';

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -0,0 +1,33 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * FormHelpText CSS
+ */
+export const styles = css`
+	:host {
+
+	}
+
+  .nile-form-help-text {
+    display: flex;
+    align-items: center;
+    color: var(--nile-colors-dark-500);
+    font-family: Colfax-regular;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 0.2px;
+    margin-top: 6px;
+  }
+
+`;
+
+export default [styles];

package/src/nile-form-help-text/nile-form-help-text.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-form-help-text.css';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-form-help-text
+ *
+ */
+@customElement('nile-form-help-text')
+export class NileFormHelpText extends LitElement {
+
+	/**
+	 * The styles for FormHelpText
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+      <div class="nile-form-help-text">
+         <slot> </slot>
+        </div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileFormHelpText;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-form-help-text': NileFormHelpText;
+  }
+}

package/src/nile-icon/icons/svg/aquera.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJtNy45OSwybDMuNTEsMTBoLTEuOTRsLS42Ni0yLjFoLTMuOGwtLjY2LDIuMWgtMS45NEw2LjAxLDJoMS45OFptLS45OSwxLjhsLTEuNDEsNC41MWgyLjgxbC0xLjQtNC41MVoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/block.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48cmVjdCB4PSIyLjI1IiB5PSIyLjI1IiB3aWR0aD0iOS41IiBoZWlnaHQ9IjkuNSIgc3R5bGU9ImZpbGw6bm9uZTsgc3Ryb2tlOiMwMDA7Ii8+PC9zdmc+";

package/src/nile-icon/icons/svg/button-loading-blue-animated.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjIwMXB4IiBoZWlnaHQ9IjIwMXB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBlODNjYyIgc3Ryb2tlLXdpZHRoPSIxMCIgcj0iMzUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2NC45MzM2MTQzMTM0NjQxNSA1Ni45Nzc4NzE0Mzc4MjEzOCI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjIuNTY0MTAyNTY0MTAyNTY0cyIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwhLS0gW2xkaW9dIGdlbmVyYXRlZCBieSBodHRwczovL2xvYWRpbmcuaW8vIC0tPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/color.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJtMy42MSw5LjNjLjM5LDAsLjcxLS4zMy43MS0uNzNzLS4zMi0uNzMtLjcxLS43My0uNzEuMzMtLjcxLjczLjMyLjczLjcxLjczWiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTUuNTEsMTEuMjVjLjM5LDAsLjcxLS4zMy43MS0uNzNzLS4zMi0uNzMtLjcxLS43My0uNzEuMzMtLjcxLjczLjMyLjczLjcxLjczWiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTMuNjEsNi4zN2MuMzksMCwuNzEtLjMzLjcxLS43M3MtLjMyLS43My0uNzEtLjczLS43MS4zMy0uNzEuNzMuMzIuNzMuNzEuNzNaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtNS41MSw0LjQyYy4zOSwwLC43MS0uMzMuNzEtLjczcy0uMzItLjczLS43MS0uNzMtLjcxLjMzLS43MS43My4zMi43My43MS43M1oiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im0xMC4yNSw2LjM3Yy4zOSwwLC43MS0uMzMuNzEtLjczcy0uMzItLjczLS43MS0uNzMtLjcxLjMzLS43MS43My4zMi43My43MS43M1oiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im04LjM2LDQuNDJjLjM5LDAsLjcxLS4zMy43MS0uNzNzLS4zMi0uNzMtLjcxLS43My0uNzEuMzMtLjcxLjczLjMyLjczLjcxLjczWiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTEzLDYuOTFjLS4wMi0xLjU4LS42Ni0zLjA4LTEuNzktNC4xOS0xLjEzLTEuMTEtMi42NS0xLjczLTQuMjMtMS43Mi0xLjU4LjAxLTMuMDkuNjQtNC4yMSwxLjc2LTEuMTIsMS4xMS0xLjc1LDIuNjItMS43Nyw0LjItLjAxLDEuNTguNiwzLjA5LDEuNyw0LjIyLDEuMSwxLjEzLDIuNiwxLjc5LDQuMTgsMS44MmguMDdjLjI1LDAsLjUtLjA1LjczLS4xNi4yMy0uMS40My0uMjYuNTktLjQ1LjE3LS4xOS4yOS0uNDIuMzUtLjY3LjA3LS4yNC4wOC0uNS4wNC0uNzUtLjAyLS4xMi0uMDMtLjI1LS4wMy0uMzcuMDItLjUxLjIzLTEsLjU5LTEuMzZzLjg1LS41NywxLjM2LS41OGMuMTIsMCwuMjUsMCwuMzcuMDMuMjUuMDQuNTEuMDMuNzUtLjA0LjI1LS4wNy40Ny0uMTkuNjctLjM1LjE5LS4xNi4zNS0uMzcuNDUtLjYuMS0uMjMuMTYtLjQ4LjE2LS43M3YtLjA2Wm0tMS4wNy44NWMtLjEyLjEtLjI1LjE3LS40LjIxLS4xNS4wNC0uMy4wNS0uNDUuMDItLjE3LS4wMy0uMzMtLjA0LS41LS4wMy0uNjkuMDItMS4zNS4zLTEuODQuNzktLjQ5LjQ5LS43NywxLjE1LS43OSwxLjg0LDAsLjE3LDAsLjM0LjAzLjUuMDMuMTUuMDIuMy0uMDIuNDUtLjA0LjE1LS4xMS4yOC0uMjEuNC0uMS4xMS0uMjIuMi0uMzUuMjctLjEzLjA2LS4yOC4wOS0uNDMuMDloLS4wNmMtMS40MS0uMDEtMi43Ni0uNTgtMy43NS0xLjU4LS45OS0xLTEuNTQtMi4zNS0xLjUzLTMuNzYuMDEtMS40MS41OC0yLjc1LDEuNTktMy43NCwxLjAxLS45OSwyLjM2LTEuNTMsMy43Ny0xLjUyLDEuNCwwLDIuNzQuNTQsMy43MywxLjUyLjk5Ljk4LDEuNTYsMi4zMSwxLjU4LDMuN3YuMDVjMCwuMTUtLjAzLjMtLjA5LjQ0LS4wNi4xNC0uMTUuMjYtLjI3LjM1WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PC9zdmc+";

package/src/nile-icon/icons/svg/firewallagent.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNCAxNCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJiIj48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHN0eWxlPSJmaWxsOm5vbmU7IHN0cm9rZS13aWR0aDowcHg7Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgc3R5bGU9ImNsaXAtcGF0aDp1cmwoI2IpOyI+PHBhdGggZD0ibTguMTEsMi45MXY2LjY0cy0yLjU4LTIuNDQtMi41OC0yLjQ0bC0uNTguNTksMy41NywzLjM4LDMuNTctMy4zOC0uNTgtLjU5LTIuNTgsMi40NFYyLjkxcy0uODMsMC0uODMsMFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im00Ljc3LDEyLjFoNy41MnMwLTIuMDQsMC0yLjA0aC44NHYzLjA2SDMuOTR2LTMuMDZoLjg0djIuMDRaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtNC43NywxLjloNy41MnYyLjA0cy44NCwwLC44NCwwVi44OHMtOS4xOSwwLTkuMTksMHYzLjA2cy44NCwwLC44NCwwVjEuOVoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im0xLjksMTMuMTNILjg4Vi44OGgxLjAydjEyLjI1WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PC9nPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/handtool.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNCAxNCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJiIj48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHN0eWxlPSJmaWxsOm5vbmU7IHN0cm9rZS13aWR0aDowcHg7Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgc3R5bGU9ImNsaXAtcGF0aDp1cmwoI2IpOyI+PHBhdGggZD0ibTExLjgxLDIuMWMtLjM1LS4zNS0uODgtLjQ0LTEuMzEtLjI2LDAtLjI2LS4wOS0uNTItLjM1LS43OS0uMTctLjE3LS41Mi0uMzUtLjk2LS4zNS0uMjYsMC0uNDQuMDktLjYxLjA5LDAtLjE4LS4wOS0uMjYtLjE4LS40NC0uNDQtLjUyLTEuMzEtLjUyLTEuNzUsMC0uMTguMTctLjM1LjM1LS4zNS41My0uMTgsMC0uMzUtLjA5LS41My0uMDktLjQ0LDAtLjcuMTctLjk2LjQ0LS40NC40NC0uNDQsMS4xNC0uNDQsMS4xNHYzLjMzYy0uMjYtLjI2LS43LS43LTEuMzEtLjctLjE3LDAtLjQ0LjA5LS42MS4xOC0uMzUuMTgtLjUzLjQ0LS42MS43OS0uMjYuODguNTIsMi4xLjUyLDIuMTkuMDkuMDksMS4wNSwyLjM2LDEuOTIsMy4zMy44OCwxLjA1LDEuODQsMS42Niw0LjI5LDEuNjZzMy42Ny0xLjQsMy42Ny00LjQ2VjMuODVjMC0uMDkuMDktMS4xNC0uNDQtMS43NVptLTQuODEtLjM1YzAtLjI2LS4wOS0uODcuNDQtLjg3LjQ0LDAsLjQ0LjQ0LjQ0Ljg3djMuNWMwLC4yNi4xNy40NC40NC40NHMuNDQtLjE4LjQ0LS40NFYxLjkzczAtLjM1LjQ0LS4zNWMuNTMsMCwuNDQuNzkuNDQuNzl2Mi44OWMwLC4yNi4xOC40NC40NC40NHMuNDQtLjE4LjQ0LS40NHYtMi4xYzAtLjA5LDAtLjUyLjQ0LS41MnMuNDQuODguNDQuODh2NS4xNmMwLDIuOTgtMS4xNCwzLjU5LTIuOCwzLjU5LTIuMSwwLTIuODktLjQ0LTMuNTktMS40LS43OS0uODgtMS44NC0zLjE1LTEuODQtMy4yNC0uMjYtLjI2LS42MS0xLjA1LS41My0xLjQsMC0uMDkuMDktLjE4LjE3LS4yNi4wOSwwLC4xNy0uMDkuMTctLjA5LjM1LDAsLjcuNDQuNzkuNjFsLjUyLjc5Yy4wOS4xOC4zNS4yNi41My4xOC4zNSwwLC40NC0uMTguNDQtLjM1VjIuNTRjMC0uMzUsMC0uODguNDQtLjg4LjM1LDAsLjQ0LjI2LjQ0Ljd2Mi44OWMwLC4yNi4xOC40NC40NC40NHMuNDQtLjE4LjQ0LS40NFYxLjc1WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PC9nPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/index.ts

@@ -12,6 +12,7 @@ export { default as api } from './api';
 export { default as application } from './application';
 export { default as applications } from './applications';
 export { default as approve } from './approve';
+export { default as aquera } from './aquera';
 export { default as aquerasupport } from './aquerasupport';
 export { default as arrow } from './arrow';
 export { default as arrowdown } from './arrowdown';
@@ -26,10 +27,12 @@ export { default as back } from './back';
 export { default as bargraph } from './bargraph';
 export { default as bellicon } from './bell-icon';
 export { default as bell } from './bell';
+export { default as block } from './block';
 export { default as bluedot } from './bluedot';
 export { default as boolean } from './boolean';
 export { default as bulksync } from './bulk-sync';
 export { default as buttonloadingblack } from './button-loading-black';
+export { default as buttonloadingblueanimated } from './button-loading-blue-animated';
 export { default as buttonloadingblue } from './button-loading-blue';
 export { default as buttonloadingwhite } from './button-loading-white';
 export { default as calendar } from './calendar';
@@ -43,6 +46,7 @@ export { default as chevronup } from './chevron-up';
 export { default as close } from './close';
 export { default as collapse1 } from './collapse-1';
 export { default as collapse } from './collapse';
+export { default as color } from './color';
 export { default as compact } from './compact';
 export { default as comparetiles } from './compare-tiles';
 export { default as componentmenu } from './component-menu';
@@ -115,6 +119,7 @@ export { default as eyeclosed } from './eyeclosed';
 export { default as file } from './file';
 export { default as filter } from './filter';
 export { default as firewall } from './firewall';
+export { default as firewallagent } from './firewallagent';
 export { default as flowh } from './flow-h';
 export { default as flow } from './flow';
 export { default as flowmapagent } from './flowmap-agent';
@@ -158,6 +163,7 @@ export { default as group } from './group';
 export { default as groupby } from './groupby';
 export { default as groups } from './groups';
 export { default as guide } from './guide';
+export { default as handtool } from './handtool';
 export { default as headeractions } from './header-actions';
 export { default as headerchildworkflow } from './header-child-workflow';
 export { default as headerflows } from './header-flows';
@@ -192,6 +198,7 @@ export { default as loader } from './loader';
 export { default as loading } from './loading';
 export { default as loading2 } from './loading2';
 export { default as lock } from './lock';
+export { default as loginfo } from './log-info';
 export { default as log } from './log';
 export { default as logowhite } from './logo-white';
 export { default as logout } from './logout';
@@ -259,6 +266,7 @@ export { default as preview } from './preview';
 export { default as privilage } from './privilage';
 export { default as privilege } from './privilege';
 export { default as privilegeobject } from './privilegeobject';
+export { default as process } from './process';
 export { default as professionaldetails } from './professionaldetails';
 export { default as question } from './question';
 export { default as radio } from './radio';
@@ -288,6 +296,7 @@ export { default as schema } from './schema';
 export { default as script } from './script';
 export { default as searchstepsicon } from './search-steps-icon';
 export { default as search } from './search';
+export { default as section } from './section';
 export { default as select } from './select';
 export { default as selectapplication } from './selectapplication';
 export { default as selectattributes } from './selectattributes';
@@ -317,6 +326,7 @@ export { default as sync } from './sync';
 export { default as table } from './table';
 export { default as tag } from './tag';
 export { default as test } from './test';
+export { default as text } from './text';
 export { default as textareaexpander } from './textarea-expander';
 export { default as themes } from './themes';
 export { default as thumbsdown } from './thumbsdown';
@@ -365,6 +375,7 @@ export { default as variable } from './variable';
 export { default as video } from './video';
 export { default as view } from './view';
 export { default as virtualserver } from './virtualserver';
+export { default as virtualservergroup } from './virtualservergroup';
 export { default as visibility } from './visibility';
 export { default as visibilityoff } from './visibilityoff';
 export { default as wait } from './wait';

package/src/nile-icon/icons/svg/log-info.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC45NzAyIDguMjEwOTRMNC45NTAyIDEyLjAyMDlMOC45NzAyIDE1Ljg0NTlMOS45MDAyIDE0Ljk0NTlMNi44MjUyIDEyLjAyMDlMOS45MDAyIDkuMDk1OTRMOC45NzAyIDguMjEwOTRaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xNC4zMDk5IDguMjEwOTRMMTMuMzc5OSA5LjA5NTk0TDE2LjQ1NDkgMTIuMDIwOUwxMy4zNzk5IDE0Ljk0NTlMMTQuMzA5OSAxNS44NDU5TDE4LjMxNDkgMTIuMDIwOUwxNC4zMDk5IDguMjEwOTRaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMS42Mzk2IDEuNTIzNDRDNS44NDk2NSAxLjUyMzQ0IDEuMTM5NjUgNi4yMzM0NCAxLjEzOTY1IDEyLjAyMzRDMS4xMzk2NSAxNy44MTM0IDUuODQ5NjUgMjIuNTIzNCAxMS42Mzk2IDIyLjUyMzRDMTcuNDI5NiAyMi41MjM0IDIyLjEzOTYgMTcuODEzNCAyMi4xMzk2IDEyLjAyMzRDMjIuMTM5NiA2LjIzMzQ0IDE3LjQyOTYgMS41MjM0NCAxMS42Mzk2IDEuNTIzNDRaTTExLjYzOTYgMjEuMDIzNEM2LjY3NDY1IDIxLjAyMzQgMi42Mzk2NSAxNi45ODg0IDIuNjM5NjUgMTIuMDIzNEMyLjYzOTY1IDcuMDU4NDQgNi42NzQ2NSAzLjAyMzQ0IDExLjYzOTYgMy4wMjM0NEMxNi42MDQ2IDMuMDIzNDQgMjAuNjM5NiA3LjA1ODQ0IDIwLjYzOTYgMTIuMDIzNEMyMC42Mzk2IDE2Ljk4ODQgMTYuNjA0NiAyMS4wMjM0IDExLjYzOTYgMjEuMDIzNFoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/process.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNCAxNCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJiIj48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHN0eWxlPSJmaWxsOm5vbmU7IHN0cm9rZS13aWR0aDowcHg7Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgc3R5bGU9ImNsaXAtcGF0aDp1cmwoI2IpOyI+PHBhdGggZD0ibTEyLjM4LDEuMDhIMS42MmMtLjE0LDAtLjI4LjA2LS4zOC4xNi0uMS4xLS4xNi4yNC0uMTYuMzh2MTAuNzdjMCwuMTQuMDYuMjguMTYuMzguMS4xLjI0LjE2LjM4LjE2aDEwLjc3Yy4xNCwwLC4yOC0uMDYuMzgtLjE2LjEtLjEuMTYtLjI0LjE2LS4zOFYxLjYyYzAtLjE0LS4wNi0uMjgtLjE2LS4zOC0uMS0uMS0uMjQtLjE2LS4zOC0uMTZaTTEuNjIsMGMtLjQzLDAtLjg0LjE3LTEuMTQuNDctLjMuMy0uNDcuNzEtLjQ3LDEuMTR2MTAuNzdjMCwuNDMuMTcuODQuNDcsMS4xNC4zLjMuNzEuNDcsMS4xNC40N2gxMC43N2MuNDMsMCwuODQtLjE3LDEuMTQtLjQ3LjMtLjMuNDctLjcxLjQ3LTEuMTRWMS42MmMwLS40My0uMTctLjg0LS40Ny0xLjE0LS4zLS4zLS43MS0uNDctMS4xNC0uNDdIMS42MloiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDsgc3Ryb2tlLXdpZHRoOjBweDsiLz48L2c+PC9zdmc+";

package/src/nile-icon/icons/svg/section.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJtMy41LDIuNjJ2LS44OGguODh2Ljg4aC0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtNS4yNSwyLjYydi0uODhoLjg4di44OGgtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTEuNzUsMi42MnYtLjg4aC44OHYuODhoLS44OFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im03LDIuNjJ2LS44OGguODh2Ljg4aC0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtOC43NSwyLjYydi0uODhoLjg4di44OGgtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTEwLjUsMi42MnYtLjg4aC44OHYuODhoLS44OFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im0yLjYyLDEyLjI1di0uODhoLjg4di44OGgtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTQuMzgsMTIuMjV2LS44OGguODh2Ljg4aC0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtNi4xMiwxMi4yNXYtLjg4aC44OHYuODhoLS44OFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im0xMS4zOCwxMi4yNXYtLjg4aC44OHYuODhoLS44OFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im03Ljg4LDEyLjI1di0uODhoLjg4di44OGgtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTkuNjIsMTIuMjV2LS44OGguODh2Ljg4aC0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtMS43NSw3aC44OHYuODhoLS44OHYtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTEuNzUsOC43NWguODh2Ljg4aC0uODh2LS44OFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im0xLjc1LDEwLjVoLjg4di44OGgtLjg4di0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtMS43NSw1LjI1aC44OHYuODhoLS44OHYtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTEuNzUsMy41aC44OHYuODhoLS44OHYtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTEuNzUsMTEuMzhoLjg4di44OGgtLjg4di0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtMTEuMzgsNi4xMmguODh2Ljg4aC0uODh2LS44OFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im0xMS4zOCw3Ljg4aC44OHYuODhoLS44OHYtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTExLjM4LDkuNjJoLjg4di44OGgtLjg4di0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtMTEuMzgsMTEuMzhoLjg4di44OGgtLjg4di0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48cGF0aCBkPSJtMTEuMzgsNC4zOGguODh2Ljg4aC0uODh2LS44OFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MHB4OyIvPjxwYXRoIGQ9Im0xMS4zOCwyLjYyaC44OHYuODhoLS44OHYtLjg4WiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PHBhdGggZD0ibTExLjM4LDEuNzVoLjg4di44OGgtLjg4di0uODhaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjBweDsiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/text.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJtMTAuOTUsMi42MnYyLjUxaC0uMjVjLS4xNS0uNTgtLjMxLS45OS0uNDktMS4yNC0uMTgtLjI2LS40Mi0uNDYtLjczLS42MS0uMTctLjA4LS40OC0uMTItLjkxLS4xMmgtLjY5djcuMTVjMCwuNDcuMDMuNzcuMDguODkuMDUuMTIuMTYuMjIuMzEuMzEuMTUuMDkuMzYuMTMuNjMuMTNoLjMxdi4yNWgtNC44NXYtLjI1aC4zMWMuMjcsMCwuNDktLjA1LjY1LS4xNC4xMi0uMDYuMjEtLjE3LjI4LS4zMy4wNS0uMTEuMDgtLjQuMDgtLjg2VjMuMTZoLS42N2MtLjYyLDAtMS4wOC4xMy0xLjM2LjQtLjQuMzctLjY1LjktLjc1LDEuNThoLS4yNnYtMi41MWg4LjMzWiIgc3R5bGU9InN0cm9rZS13aWR0aDowcHg7Ii8+PC9zdmc+";

package/src/nile-icon/icons/svg/virtualservergroup.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHJ4PSI0IiBmaWxsPSIjNDJBM0U1Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy43NSAxMy43NUgyMi41MzVWMTcuMjQxM0gyMy40MVYxMi44NzVIMTIuODc1VjI1LjEzMzdIMTQuNjQyNVYyNC4yNTg3SDEzLjc1VjEzLjc1Wk0xNi40MSAxNS40OTEySDE1LjUzNVYxNi4zNjYySDE2LjQxVjE1LjQ5MTJaTTE4LjE0MjUgMTUuNDkxMkgyMC43ODVWMTYuMzY2MkgxOC4xNDI1VjE1LjQ5MTJaTTE2LjQxIDE4LjExNjJIMTUuNTM1VjE4Ljk5MTJIMTYuNDFWMTguMTE2MlpNMjAuNzg1IDE4LjM3QzIyLjQ2NSAxOC4zNyAyMy4zMTM4IDE5LjM1ODggMjMuNjI4NyAyMC4wNzYzSDIzLjYyQzI0LjUzIDIwLjE5IDI1Ljg0MjUgMjAuODExMyAyNS44NDI1IDIyLjU5NjNDMjUuODQyNSAyNC42IDI0LjE4IDI1LjEzMzggMjMuMzA1IDI1LjEzMzhIMTcuODM2M0MxNy4xMDEzIDI1LjEzMzggMTUuNzE4OCAyNC42OTYzIDE1LjcxODggMjMuMDE2M0MxNS43MTg4IDIxLjYwNzUgMTYuNjk4NyAyMS4wNzM4IDE3LjQ0MjUgMjAuOTMzOEMxNy42MjYyIDE5Ljg3NSAxOC40NzUgMTguMzcgMjAuNzg1IDE4LjM3Wk0xNy44NDUgMjQuMjU4OEgyMy4zMTM4TDIzLjMyMjUgMjQuMjY3NUMyMy40ODg3IDI0LjI2NzUgMjQuOTg1IDI0LjIxNSAyNC45ODUgMjIuNjA1QzI0Ljk4NSAyMC45OTUgMjMuNDggMjAuOTMzOCAyMy4zMTM4IDIwLjkzMzhIMjIuOTcyNUwyMi44ODUgMjAuNjAxM0MyMi44ODQ2IDIwLjYwMDEgMjIuODg0IDIwLjU5ODIgMjIuODgzMiAyMC41OTU3QzIyLjg0OTggMjAuNDg5NyAyMi40NjA0IDE5LjI1MzggMjAuNzg1IDE5LjI1MzhDMTguNDMxMyAxOS4yNTM4IDE4LjI4MjUgMjEuMTM1IDE4LjI4MjUgMjEuMzUzOEwxOC4yNjUgMjEuNzczOEgxNy44NDVDMTcuNjQzNyAyMS43NzM4IDE2LjYwMjUgMjEuODA4OCAxNi42MDI1IDIzLjAxNjNDMTYuNjAyNSAyNC4yMjM4IDE3LjcxMzcgMjQuMjU4OCAxNy44NDUgMjQuMjU4OFoiIGZpbGw9IndoaXRlIi8+PC9zdmc+";

package/src/nile-icon-button/nile-icon-button.ts

@@ -138,6 +138,7 @@ export class NileIconButton extends NileElement {
           library=${ifDefined(this.library)}
           src=${ifDefined(this.src)}
           aria-hidden="true"
+          size="14"
         ></nile-icon>
       </${tag}>
     `;

package/src/nile-input/nile-input.css.ts

@@ -28,6 +28,13 @@ export const styles = css`
     display: inline-block;
     color: inherit;
     margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
@@ -37,7 +44,7 @@ export const styles = css`
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: undefined;
+    color: #A4121C;
   }
 
   /* Help text */
@@ -74,16 +81,19 @@ export const styles = css`
     justify-content: start;
     position: relative;
     width: 100%;
-    font-family: inherit;
     font-weight: 400;
-    letter-spacing: normal;
     vertical-align: middle;
     overflow: hidden;
     cursor: text;
     transition: 150ms color, 150ms border, 150ms box-shadow,
       150ms background-color;
     box-sizing: border-box;
-  }
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    line-height: 14px;
+    letter-spacing: 0.2px;  }
 
   /* Standard inputs */
   .input--standard {
@@ -157,12 +167,8 @@ export const styles = css`
 
   .input__control {
     flex: 1 1 auto;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
     min-width: 0;
     height: 100%;
-    color: hsl(240 5.3% 26.1%);
     border: none;
     background: none;
     box-shadow: none;
@@ -170,6 +176,13 @@ export const styles = css`
     margin: 0;
     cursor: inherit;
     -webkit-appearance: none;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .input__control::-webkit-search-decoration,