@aquera/nile-elements 0.1.35-beta-1.7 → 0.1.35-beta-1.8

package/dist/src/nile-input/nile-input.css.js

@@ -17,8 +17,8 @@ export const styles = css `
   input::-webkit-contacts-auto-fill-button {
     visibility: hidden;
     width: 0;
-    margin: var(--nile-spacing-none);
-    padding: var(--nile-spacing-none);
+    margin: 0;
+    padding: 0;
   }
 
   .form-control .form-control__label {
@@ -33,18 +33,18 @@ export const styles = css `
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: 6px;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
-    line-height: var(--nile-line-height-small);
+    font-weight: 500;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -57,27 +57,27 @@ export const styles = css `
   .form-control--has-help-text .form-control__help-text {
     display: block;
     color: var(--nile-colors-dark-500);
-    margin-top: var(--nile-spacing-sm);
+    margin-top: 6px;
   }
 
   /* Error message */
   .form-control__error-message {
     display: block;
     color: var(--nile-colors-red-700);
-    margin-top: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-2);
+    margin-top: 12px;
+    font-size: 12px;
     font-style: normal;
     line-height: 12px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--nile-type-scale-1);
+    font-size: 10.24px;
   }
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 0.25rem;
   }
 
   .input {
@@ -87,7 +87,7 @@ export const styles = css `
     justify-content: start;
     position: relative;
     width: 100%;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: 400;
     vertical-align: middle;
     overflow: hidden;
     cursor: text;
@@ -95,8 +95,8 @@ export const styles = css `
       150ms background-color;
     box-sizing: border-box;
     color: var(--nile-colors-dark-900);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-family: Colfax-regular;
+    font-size: 14px;
     font-style: normal;
     line-height: 14px;
     letter-spacing: 0.2px;
@@ -110,18 +110,18 @@ export const styles = css `
   }
 
   .input--standard:hover:not(.input--disabled) {
-    background-color: var(--nile-colors-white-base);
+    background-color: hsl(0, 0%, 100%);
     border-color: var(--nile-colors-dark-900);
   }
 
   .input--standard.input--focused:not(.input--disabled) {
-    background-color: var(--nile-colors-white-base);
+    background-color: hsl(0, 0%, 100%);
     border-color: var(--nile-colors-primary-500);
     box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--nile-colors-primary-900);
+    color: hsl(240 5.3% 26.1%);
   }
 
   .input--standard.input--disabled {
@@ -195,16 +195,16 @@ export const styles = css `
     border: none;
     background: none;
     box-shadow: none;
-    padding: var(--nile-spacing-none);
-    margin: var(--nile-spacing-none);
+    padding: 0;
+    margin: 0;
     cursor: inherit;
     -webkit-appearance: none;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-sans-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 16px;
     letter-spacing: 0.2px;
   }
 
@@ -216,25 +216,25 @@ export const styles = css `
   }
 
   .input__control:-webkit-autofill {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:hover {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:focus {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
@@ -277,15 +277,15 @@ export const styles = css `
   }
 
   .input__prefix::slotted(nile-icon) {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
   }
 
   .input__suffix::slotted(nile-icon) {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
   }
 
   .input--standard:focus {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     border: 1px solid var(--nile-colors-primary-500);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
@@ -295,14 +295,14 @@ export const styles = css `
    */
 
   .input--small {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 0.25rem;
     font-size: var(--nile-input-font-size-small);
     height: 1.875rem;
   }
 
   .input--small .input__control {
     height: calc(1.875rem);
-    padding: var(--nile-spacing-none) var(--nile-spacing-lg);
+    padding: 0 0.75rem;
   }
 
   .input--small .input__clear {
@@ -314,22 +314,22 @@ export const styles = css `
   }
 
   .input--small .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-lg);
+    margin-inline-start: 0.75rem;
   }
 
   .input--small .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg);
+    margin-inline-end: 0.75rem;
   }
 
   .input--medium {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 0.25rem;
     font-size: var(--nile-input-font-size-medium);
     height: 40px;
   }
 
   .input--medium .input__control {
     height: 14px;
-    padding: var(--nile-spacing-lg);
+    padding: 12px;
   }
 
   .input--medium .input__clear {
@@ -341,22 +341,22 @@ export const styles = css `
   }
 
   .input--medium .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-lg);
+    margin-inline-start: 12px;
   }
 
   .input--medium .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg);
+    margin-inline-end: 12px;
   }
 
   .input--large {
-    border-radius: var(--nile-radius-sm);
-    font-size: var(--nile-type-scale-6);
+    border-radius: 0.25rem;
+    font-size: 1.25rem;
     height: 3.125rem;
   }
 
   .input--large .input__control {
     height: calc(3.125rem - 1px * 2);
-    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+    padding: 0 1.25rem;
   }
 
   .input--large .input__clear {
@@ -368,11 +368,11 @@ export const styles = css `
   }
 
   .input--large .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-xl);
+    margin-inline-start: 1.25rem;
   }
 
   .input--large .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-xl);
+    margin-inline-end: 1.25rem;
   }
 
   /*
@@ -380,15 +380,15 @@ export const styles = css `
    */
 
   .input--pill.input--small {
-    border-radius:var(--nile-radius-3xl);
+    border-radius: 1.875rem;
   }
 
   .input--pill.input--medium {
-    border-radius: var(--nile-radius-4xl);
+    border-radius: 2.5rem;
   }
 
   .input--pill.input--large {
-    border-radius: var(--nile-radius-4xl);
+    border-radius: 3.125rem;
   }
 
   /*
@@ -400,10 +400,10 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
     border: none;
     background: none;
-    padding: var(--nile-spacing-none);
+    padding: 0;
     transition: 150ms color;
     cursor: pointer;
   }
@@ -413,20 +413,20 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
     border: none;
     background: none;
-    padding: var(--nile-spacing-none);
+    padding: 0;
     transition: 150ms color;
     cursor: pointer;
   }
 
   .input__clear:hover {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 5.2% 33.9%);
   }
 
   .input__password-toggle:hover {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 5.2% 33.9%);
   }
 
   .input__clear:focus,
@@ -480,31 +480,31 @@ export const styles = css `
   }
 
   .input__non-printable {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     max-width: 400px;
     background-color: var(--nile-colors-white-base);
     border: 1px solid var(--nile-colors-red-500);
     color: var(--nile-colors-red-500);
-    padding: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-2);
+    padding: 10px;
+    font-size: 12px;
     max-height: 300px;
     overflow-y: scroll;
-    line-height: var(--nile-line-height-xsmall);
+    line-height: 16px;
   }
 
   .input__remove-non-printable {
     color: var(--nile-colors-red-500);
-    margin-left: var(--nile-spacing-md);
-    font-size: var(--nile-type-scale-3);
+    margin-left: 10px;
+    font-size: 14px;
     color: var(--nile-colors-dark-900);
     cursor: pointer;
   }
 
   .input__srtiked-text-container {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 4px;
     color: var(--nile-colors-dark-900);
     word-break: break-all;
-    line-height: var(--nile-line-height-xsmall);
+    line-height: 16px;
   }
 
   .input__srtiked-text {

package/dist/src/nile-input/nile-input.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: var(--nile-spacing-none);\n    padding: var(--nile-spacing-none);\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: var(--nile-spacing-sm);\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium);\n    line-height: var(--nile-line-height-small);\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3);\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-sm);\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700);\n    margin-top: var(--nile-spacing-lg);\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs);\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: var(--nile-font-weight-regular);\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color);\n    border: solid 1px var(--nile-input-standard-border-color);\n    box-shadow: var(--nile-input-shadow-standard);\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-dark-900);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--nile-colors-primary-900);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color);\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500);\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-sans-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-neutral-700);\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input--standard:focus {\n    border-radius: var(--nile-radius-sm);\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--nile-radius-sm);\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: var(--nile-spacing-none) var(--nile-spacing-lg);\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-lg);\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg);\n  }\n\n  .input--medium {\n    border-radius: var(--nile-radius-sm);\n    font-size: var(--nile-input-font-size-medium);\n    height: 40px;\n  }\n\n  .input--medium .input__control {\n    height: 14px;\n    padding: var(--nile-spacing-lg);\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-lg);\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg);\n  }\n\n  .input--large {\n    border-radius: var(--nile-radius-sm);\n    font-size: var(--nile-type-scale-6);\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: var(--nile-spacing-none) var(--nile-spacing-xl);\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-xl);\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-xl);\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius:var(--nile-radius-3xl);\n  }\n\n  .input--pill.input--medium {\n    border-radius: var(--nile-radius-4xl);\n  }\n\n  .input--pill.input--large {\n    border-radius: var(--nile-radius-4xl);\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-neutral-700);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__password-toggle:hover {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  .input__password {\n    font-family: 'disc';\n    letter-spacing: 2px;\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm);\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-lg);\n    font-size: var(--nile-type-scale-2);\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: var(--nile-line-height-xsmall);\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: var(--nile-spacing-md);\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs);\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: var(--nile-line-height-xsmall);\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  /* To Hide Safari's AutoFill icon */\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    width: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 6px;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 14px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: 6px;\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700);\n    margin-top: 12px;\n    font-size: 12px;\n    font-style: normal;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 10.24px;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: 400;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color);\n    border: solid 1px var(--nile-input-standard-border-color);\n    box-shadow: var(--nile-input-shadow-standard);\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: var(--nile-colors-dark-900);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: var(--nile-colors-primary-500);\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color);\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .input--standard.input--error {\n    border-color: var(--nile-colors-red-500);\n  }\n\n  .input--standard.input--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .input--standard.input--destructive {\n    border-color: var(--nile-colors-red-400);\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid var(--nile-colors-red-400);\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: var(--nile-colors-dark-100);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: var(--nile-colors-dark-100);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: var(--nile-colors-dark-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-sans-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--nile-colors-neutral-700);\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--nile-colors-dark-900);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input--standard:focus {\n    border-radius: 4px;\n    border: 1px solid var(--nile-colors-primary-500);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-medium);\n    height: 40px;\n  }\n\n  .input--medium .input__control {\n    height: 14px;\n    padding: 12px;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 12px;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 12px;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  .input__password {\n    font-family: 'disc';\n    letter-spacing: 2px;\n  }\n\n  .input__non-printable {\n    border-radius: 4px;\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: 10px;\n    font-size: 12px;\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: 16px;\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: 10px;\n    font-size: 14px;\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: 4px;\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: 16px;\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-link/nile-link.css.js

@@ -19,8 +19,8 @@ export const styles = css `
     text-align: center;
     user-select: none;
     white-space: nowrap;
-    padding: var(--nile-spacing-lg);
-    gap: var(--nile-spacing-md);
+    padding: 12px;
+    gap: 8px;
     height: 38px;
     box-sizing: border-box;
     cursor: pointer;
@@ -33,8 +33,8 @@ export const styles = css `
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-3);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 14px;
     letter-spacing: 0.2px;
   }
 
@@ -57,14 +57,14 @@ export const styles = css `
 
   .link__button:hover {
     color: var(--nile-colors-primary-700);
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-radius-xs);
     background: var(--nile-colors-dark-200);
   }
 
   .link__button:active {
     color: var(--nile-colors-primary-100);
-    border-radius: var(--nile-radius-sm);
-    background: var(--nile-colors-primary-100);
+    border-radius: var(--nile-radius-radius-xs);
+    background: rgba(0, 94, 166, 0.1);
   }
 
 `;

package/dist/src/nile-link/nile-link.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-link.css.js","sourceRoot":"","sources":["../../../src/nile-link/nile-link.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Link CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    user-select: none;\n    white-space: nowrap;\n    padding: var(--nile-spacing-lg);\n    gap: var(--nile-spacing-md);\n    height: 38px;\n    box-sizing: border-box;\n    cursor: pointer;\n    text-decoration:none;\n  }\n\n  .link__label {\n    color: var(--nile-colors-primary-600);\n    text-align: center;\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n  }\n\n  .link--disabled {\n    color: rgba(0, 94, 166, 0.5);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n\n  .link:not(.link--disabled):not(.link__button):hover ,\n  .link:not(.link--disabled):not(.link__button):hover .link__label {\n    color: var(--nile-colors-primary-700);\n  }\n\n  .link:not(.link--disabled):not(.link__button):active,\n  .link:not(.link--disabled):not(.link__button):active .link__label {\n    color: var(--nile-colors-primary-900);\n  }\n\n  .link__button:hover {\n    color: var(--nile-colors-primary-700);\n    border-radius: var(--nile-radius-sm);\n    background: var(--nile-colors-dark-200);\n  }\n\n  .link__button:active {\n    color: var(--nile-colors-primary-100);\n    border-radius: var(--nile-radius-sm);\n    background: var(--nile-colors-primary-100);\n  }\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-link.css.js","sourceRoot":"","sources":["../../../src/nile-link/nile-link.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Link CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    user-select: none;\n    white-space: nowrap;\n    padding: 12px;\n    gap: 8px;\n    height: 38px;\n    box-sizing: border-box;\n    cursor: pointer;\n    text-decoration:none;\n  }\n\n  .link__label {\n    color: var(--nile-colors-primary-600);\n    text-align: center;\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .link--disabled {\n    color: rgba(0, 94, 166, 0.5);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n\n  .link:not(.link--disabled):not(.link__button):hover ,\n  .link:not(.link--disabled):not(.link__button):hover .link__label {\n    color: var(--nile-colors-primary-700);\n  }\n\n  .link:not(.link--disabled):not(.link__button):active,\n  .link:not(.link--disabled):not(.link__button):active .link__label {\n    color: var(--nile-colors-primary-900);\n  }\n\n  .link__button:hover {\n    color: var(--nile-colors-primary-700);\n    border-radius: var(--nile-radius-radius-xs);\n    background: var(--nile-colors-dark-200);\n  }\n\n  .link__button:active {\n    color: var(--nile-colors-primary-100);\n    border-radius: var(--nile-radius-radius-xs);\n    background: rgba(0, 94, 166, 0.1);\n  }\n\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-list/nile-list.css.js

@@ -12,8 +12,8 @@ export const styles = css `
   :host {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md);
-    padding: var(--nile-spacing-xl);
+    gap: 9px;
+    padding: 16px;
   }
 `;
 export default [styles];

package/dist/src/nile-list/nile-list.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-list.css.js","sourceRoot":"","sources":["../../../src/nile-list/nile-list.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * List CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md);\n    padding: var(--nile-spacing-xl);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-list.css.js","sourceRoot":"","sources":["../../../src/nile-list/nile-list.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * List CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: 9px;\n    padding: 16px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-list-item/nile-list-item.css.js

@@ -11,7 +11,7 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: flex;
-    padding: var(--nile-spacing-lg) var(--nile-sapcing-xl);
+    padding: 12px 16px;
     flex-direction: row;
     align-items: flex-start;
     justify-content: start;
@@ -25,34 +25,34 @@ export const styles = css `
 
   .preffix__icon {
     display: inline-block;
-    margin-right: var(--nile-spacing-lg);
+    margin-right: 12px;
   }
 
   .list__item {
     cursor: pointer;
     height: 100%;
     display: block;
-    font-size: var(--nile-type-scale-4);
+    font-size: 16px;
   }
 
   .content__wrapper {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xs);
+    gap: 3px;
     height: 100%;
     box-sizing: border-box;
   }
 
   .heading {
     display: inline-block;
-    font-size: var(--nile-type-scale-5);
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-size: 18px;
+    font-weight: 600;
   }
 
   .subheading {
     display: inline-block;
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: 12px;
+    font-weight: 300;
   }
 
   .list-item__suffix {

package/dist/src/nile-list-item/nile-list-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-list-item.css.js","sourceRoot":"","sources":["../../../src/nile-list-item/nile-list-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ListItem CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    padding: var(--nile-spacing-lg) var(--nile-sapcing-xl);\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: start;\n    position: relative;\n    height: 100%;\n  }\n\n  :host(:hover) {\n    background-color: var(--nile-colors-neutral-400); /* Change background color on hover */\n  }\n\n  .preffix__icon {\n    display: inline-block;\n    margin-right: var(--nile-spacing-lg);\n  }\n\n  .list__item {\n    cursor: pointer;\n    height: 100%;\n    display: block;\n    font-size: var(--nile-type-scale-4);\n  }\n\n  .content__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  .heading {\n    display: inline-block;\n    font-size: var(--nile-type-scale-5);\n    font-weight: var(--nile-font-weight-semi-bold);\n  }\n\n  .subheading {\n    display: inline-block;\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .list-item__suffix {\n    display: inline-block;\n    position: absolute;\n    right: 16px;\n    cursor: pointer;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-list-item.css.js","sourceRoot":"","sources":["../../../src/nile-list-item/nile-list-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ListItem CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    padding: 12px 16px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: start;\n    position: relative;\n    height: 100%;\n  }\n\n  :host(:hover) {\n    background-color: var(--nile-colors-neutral-400); /* Change background color on hover */\n  }\n\n  .preffix__icon {\n    display: inline-block;\n    margin-right: 12px;\n  }\n\n  .list__item {\n    cursor: pointer;\n    height: 100%;\n    display: block;\n    font-size: 16px;\n  }\n\n  .content__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  .heading {\n    display: inline-block;\n    font-size: 18px;\n    font-weight: 600;\n  }\n\n  .subheading {\n    display: inline-block;\n    font-size: 12px;\n    font-weight: 300;\n  }\n\n  .list-item__suffix {\n    display: inline-block;\n    position: absolute;\n    right: 16px;\n    cursor: pointer;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-loader/nile-loader.css.js

@@ -1,9 +1,9 @@
 import { css } from 'lit';
 export default css `
   :host {
-    --loader-spacing: var(--nile-spacing-lg);
-    --loader-label-font-size: var(--nile-type-scale-3);
-    --loader-label-line-height: var(--nile-line-height-small);
+    --loader-spacing: var(--nile-spacing-spacing-lg);
+    --loader-label-font-size: 14px;
+    --loader-label-line-height: 20px;
   }
 
   .loader__container {
@@ -18,14 +18,14 @@ export default css `
   .loader__container--md {}
 
   .loader__container--lg {
-    --loader-label-font-size: var(--nile-type-scale-5);
-    --loader-label-line-height: var(--nile-line-height-large);
+    --loader-label-font-size: 18px;
+    --loader-label-line-height: 28px;
   }
   
   .loader__container--xl {
-    --loader-spacing: var(--nile-spacing-xl);
-    --loader-label-font-size: var(--nile-type-scale-5);
-    --loader-label-line-height: var(--nile-line-height-large);
+    --loader-spacing: var(--nile-spacing-spacing-xl);
+    --loader-label-font-size: 18px;
+    --loader-label-line-height: 28px;
   }
 
   .svg__container {
@@ -39,7 +39,7 @@ export default css `
     line-height: var(--loader-label-line-height); 
     font-family: Inter;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
+    font-weight: 500;
   }
 
   .nile-loader__v1 {

package/dist/src/nile-loader/nile-loader.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-loader.css.js","sourceRoot":"","sources":["../../../src/nile-loader/nile-loader.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --loader-spacing: var(--nile-spacing-lg);\n    --loader-label-font-size: var(--nile-type-scale-3);\n    --loader-label-line-height: var(--nile-line-height-small);\n  }\n\n  .loader__container {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--loader-spacing);\n  }\n\n  .loader__container--sm {}\n\n  .loader__container--md {}\n\n  .loader__container--lg {\n    --loader-label-font-size: var(--nile-type-scale-5);\n    --loader-label-line-height: var(--nile-line-height-large);\n  }\n  \n  .loader__container--xl {\n    --loader-spacing: var(--nile-spacing-xl);\n    --loader-label-font-size: var(--nile-type-scale-5);\n    --loader-label-line-height: var(--nile-line-height-large);\n  }\n\n  .svg__container {\n    display: flex;\n    position: relative;\n    transform: translate(50%, 50%);\n  }\n\n  .loader__label {\n    font-size: var(--loader-label-font-size);\n    line-height: var(--loader-label-line-height); \n    font-family: Inter;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium);\n  }\n\n  .nile-loader__v1 {\n    border-radius: 50%;\n    display: inline-block;\n    border-top: 1px solid currentColor;\n    border-right: 1px solid currentColor;\n    box-shadow: 0 1px 1px -1px currentColor;\n    box-sizing: border-box;\n    animation: rotation 0.5s linear infinite;\n  }\n\n  @keyframes rotation {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .nile-loader__v2,\n  .nile-loader__v3 {\n    animation: spin 1.5s linear infinite;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: translate(-50%, -50%) rotate(0deg);\n    }\n    100% {\n      transform: translate(-50%, -50%) rotate(360deg);\n    }\n  }\n`;\n"]}
+{"version":3,"file":"nile-loader.css.js","sourceRoot":"","sources":["../../../src/nile-loader/nile-loader.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --loader-spacing: var(--nile-spacing-spacing-lg);\n    --loader-label-font-size: 14px;\n    --loader-label-line-height: 20px;\n  }\n\n  .loader__container {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--loader-spacing);\n  }\n\n  .loader__container--sm {}\n\n  .loader__container--md {}\n\n  .loader__container--lg {\n    --loader-label-font-size: 18px;\n    --loader-label-line-height: 28px;\n  }\n  \n  .loader__container--xl {\n    --loader-spacing: var(--nile-spacing-spacing-xl);\n    --loader-label-font-size: 18px;\n    --loader-label-line-height: 28px;\n  }\n\n  .svg__container {\n    display: flex;\n    position: relative;\n    transform: translate(50%, 50%);\n  }\n\n  .loader__label {\n    font-size: var(--loader-label-font-size);\n    line-height: var(--loader-label-line-height); \n    font-family: Inter;\n    font-style: normal;\n    font-weight: 500;\n  }\n\n  .nile-loader__v1 {\n    border-radius: 50%;\n    display: inline-block;\n    border-top: 1px solid currentColor;\n    border-right: 1px solid currentColor;\n    box-shadow: 0 1px 1px -1px currentColor;\n    box-sizing: border-box;\n    animation: rotation 0.5s linear infinite;\n  }\n\n  @keyframes rotation {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .nile-loader__v2,\n  .nile-loader__v3 {\n    animation: spin 1.5s linear infinite;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: translate(-50%, -50%) rotate(0deg);\n    }\n    100% {\n      transform: translate(-50%, -50%) rotate(360deg);\n    }\n  }\n`;\n"]}