@aquera/nile-elements 0.1.47-beta-1.2 → 0.1.47-beta-1.3

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

@@ -12,61 +12,62 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);
-    --ng-private-error-max-width: var(--nile-width-535px, var(--ng-width-120));
-    --ng-private-error-max-height: var(--nile-height-48px, var(--ng-height-48px));
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile-error-message {
     width: 100%;
-    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));
+    word-break: break-all;
+    font-size: var(--nile-font-size-small);
     letter-spacing: 0.2px;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
-    line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));
-    max-width: var(--nile-error-max-width, var(--ng-private-error-max-width)); 
+    font-weight: var(--nile-font-weight-regular);
+    line-height: var(--nile-font-size-small);
   }
 
   .nile-error-message__error {
-    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    color: var(--nile-colors-red-700);
     word-break: break-word;
   }
 
   .nile-error-message__response {
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
-    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
-    max-height: var(--nile-error-max-height, var(--ng-private-error-max-height));
-    overflow-x: auto;
+    color: var(--nile-colors-dark-500);
+    margin-top:6px;
+    line-height: 16px;
   }
 
   .nile-error-message__icon {
     vertical-align: middle;
-    margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
+    margin-right:2px;
   }
 
   .nile-error-message__more-button {
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-600);
     cursor: pointer;
     white-space: nowrap;
     display: inline-flex;
-    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    gap: 4px;
     align-items: center
   }
 
   .nile-error-message__response-expanded {
-    line-height: var(--nile-line-height-small);
+    line-height: 18px;
     height: auto;
+    border: 1px solid var(--nile-colors-red-500);
+    border-left: 6px solid var(--nile-colors-red-500);
+    border-radius: 4px;
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--nile-colors-neutral-100);
+  }
+
+  .nile-error-message__response-expanded {
     max-height: 100px;
     overflow-y: auto;
-    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));
-    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));
-    padding: var(--nile-spacing-lg, var(--ng-spacing-md));
-    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
+    border: 1px solid var(--nile-colors-red-500);
+    border-left: 6px solid var(--nile-colors-red-500);
+    border-radius: 4px;
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--nile-colors-neutral-100);
     transition: max-height 0.3s ease-in-out;
     flex-shrink: 0;
   }
@@ -76,14 +77,14 @@ export const styles = css`
     overflow: hidden;
     transition: max-height 0.3s ease-in-out;
     visibility: hidden;
-    padding: var(--nile-spacing-none) var(--nile-spacing-none);
+    padding: 0 12px;
   }
 
   .nile-error-message__response-expanded.expanded {
-    max-height: var(--nile-error-max-dialog-height, var(--ng-private-error-max-height));
+    max-height: 100px;
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
-    padding: var(--nile-spacing-lg, var(--ng-error-expanded-padding));
+    padding: 12px;
   }
 `;
 

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

@@ -32,12 +32,6 @@ export class NileErrorMessage extends LitElement {
   @property({ type: Boolean })
   isExpanded: boolean = false;
 
-  @property({ type: String }) maxWidth: string;
-
-  @property({ type: String }) maxHeight: string;
-
-  @property({ type: String }) maxDialogHeight: string;
-
   // The maximum length before truncation.
   private readonly MAX_LENGTH: number = 100;
 
@@ -52,18 +46,6 @@ export class NileErrorMessage extends LitElement {
     return this.errorResponse;
   }
 
-  updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has('maxWidth')) {
-      this.style.setProperty('--nile-error-max-width', this.maxWidth);
-    }
-    if (changedProperties.has('maxHeight')) {
-      this.style.setProperty('--nile-error-max-height', this.maxHeight);
-    }
-    if (changedProperties.has('maxDialogHeight')) {
-      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);
-    }
-  }
-
   /**
    * Toggle the expanded state of the error response.
    */
@@ -81,7 +63,7 @@ export class NileErrorMessage extends LitElement {
           size="14"
           class="nile-error-message__icon"
           part="icon"
-          color="var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))"
+          color="var(--nile-colors-red-700)"
         ></nile-icon>
         <span class="nile-error-message__error">${this.errorMessage}</span>
 
@@ -96,7 +78,7 @@ export class NileErrorMessage extends LitElement {
               class="nile-error-message__more-button"
               @click=${this.toggleExpanded}
               >${this.isExpanded ? 'View Less' : 'View More'}
-              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}"></nile-icon>
+              <nile-icon color="var(--nile-colors-primary-600)" part="icon" size="14" name="${iconName}"></nile-icon>
               </span
             > `:``}
             </div>

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -12,31 +12,28 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    --indication-color: var(--nile-colors-red-500);
   }
 
   .nile-error-notification {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-family: var(--nile-font-family-serif);
+    font-size: 12px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+    font-weight: 400;
+    line-height: 12px;
     letter-spacing: 0.2px;
     border: 1px solid var(--indication-color);
-    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    padding: var(--nile-spacing-md, var(--ng-spacing-md));
-    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
+    border-left: 6px solid var(--indication-color);
+    border-radius: 4px;
+    padding: 8px;
+    background: var(--nile-colors-neutral-100);
     color: var(--indication-color);
     box-sizing: border-box;
   }
 
   .nile-error-notification__icon {
     vertical-align: middle;
-    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xxs));
+    margin-right: 4px;
   }
 `;
 

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

@@ -13,11 +13,6 @@ import {css} from 'lit';
 
 export const styles = css`
 
-  :host{
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
-  }
 
   .filter-chips {
     display: flex;
@@ -30,31 +25,31 @@ export const styles = css`
     align-items: center;
     height: 30px;
     padding: 8px;
-    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
+    border-radius: 4px;
     font-size: 14px;
-    background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));
-    color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));
+    background-color: var(--nile-filter-chip-background-default);
+    color: var(--nile-filter-chip-text-default);
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     cursor: pointer;
     box-sizing: border-box;
   }
 
   .chip:hover {
-    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));
+    background-color: var(--nile-filter-chip-hover-background);
   }
  .chip:active {
-  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
+  background-color: var(--nile-filter-chip-active-background);
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 :host([active]) .chip {
-  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
+  background-color: var(--nile-filter-chip-active-background);
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 
 
   .icon {
-    color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));
+    color: var(--nile-filter-chip-icon-color-default);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -65,7 +60,7 @@ export const styles = css`
 
   .label {
     font-weight: 500;
-    color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));
+    color: var(--nile-filter-chip-label-color-default);
   }
 
   nile-badge::part(base) {
@@ -96,7 +91,7 @@ export const styles = css`
 
 
  .value {
-  color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));
+  color: var(--nile-filter-chip-values-color-default);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -107,7 +102,7 @@ export const styles = css`
 
 
   .close-icon {
-    color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));
+    color: var(--nile-filter-chip-close-icon-color-default);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -116,8 +111,8 @@ export const styles = css`
   }
 
   .close-icon:hover {
-    background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));
-    color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));
+    background-color: var(--nile-filter-chip-close-icon-hover-background);
+    color: var(--nile-filter-chip-close-icon-hover-color);
   }
 
 .label-wrapper {

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

@@ -12,9 +12,7 @@ import {css} from 'lit';
  */
 export const styles = css`
 	:host {
-	-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+
 	}
 `;
 

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

@@ -12,27 +12,24 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile-form-error-message {
     display: flex;
     align-items: center;
-    color: var(--nile-form-error-text-color, var(--ng-colors-text-error-primary-600));
-    font-family: var(--nile-font-family-serif,var(--ng-font-family-body));
-    font-size: var(--nile-form-error-text-font-size, var(--ng-font-size-text-sm));
+    color: var(--nile-form-error-text-color);
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-form-error-text-font-size);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    line-height: var(--nile-form-error-text-line-height,  var(--ng-line-height-text-md));
+    font-weight: 400;
+    line-height: 12px;
+    line-height: var(--nile-form-error-text-line-height);
     letter-spacing: 0.2px;
-    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    margin-top: 6px;
   }
 
   .nile-form-error-message__icon {
-    display: var(--nile-display-inline-block, var(--ng-display-none));
-    margin-right: var(--nile-spacing-sm, var(--ng-spacing-none));
+    margin-right: 6px;
   }
 `;
 

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

@@ -37,7 +37,7 @@ export class NileFormErrorMessage extends LitElement {
 	public render(): TemplateResult {
 		return html`
       <div class="nile-form-error-message">
-       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
+       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700)"> </nile-icon> <slot> </slot>
         </div>
 			`;
 	}

package/src/nile-form-group/nile-form-group.css.ts

@@ -13,9 +13,6 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --min-width: 288px;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .form__base {
@@ -23,71 +20,67 @@ export const styles = css`
     flex-direction: column;
     min-width: var(--min-width);
     width: max-content;
-    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));
-    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
-    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
+    border-radius: var(--nile-radius-base-standard);
+    border: 1px solid var(--nile-colors-neutral-400);
+    background: var(--nile-colors-white-base);
+    font-family: var(--nile-font-family-serif);
   }
 
   .form__header {
     width: 100%;
+    height: 82px;
     box-sizing: border-box;
+    padding: var(--nile-spacing-3-x);
     display: flex;
+    flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
-    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
-  }
-
-  .form__divider {
-    width: 100%;
-  }
-
-  .form__divider::part(divider) {
-    width: 100%;
-    height: 1px;
-    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
-    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    gap: var(--nile-spacing-1-x);
+    border-radius: var(--nile-radius-base-standard)
+      var(--nile-radius-base-standard) 0 0;
+    background: var(--nile-colors-neutral-100);
   }
 
   .form__title-content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));
-    justify-content:center;
+    gap: var(--nile-spacing-1-x);
+    justify-content:centre;
   }
 
+
+
   .form__title {
     display: block;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    color: var(--nile-colors-dark-900);
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));
+    font-size: var(--nile-type-scale-4);
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
-    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));
+    font-weight: 500;
+    line-height: var(--nile-type-scale-4);
     letter-spacing: 0.2px;
   }
 
   .form__subtitle {
     display: block;
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-500);
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-size: var(--nile-type-scale-2);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
-    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));
+    font-weight: var(--nile-font-weight-regular);
+    line-height: var(--nile-type-scale-2);
     letter-spacing: 0.2px;
   }
 
   .form__body {
     width: 100%;
     box-sizing: border-box;
+    padding: var(--nile-spacing-3-x);
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));
+    gap: var(--nile-spacing-3-x);
   }
 `;
 export default [styles];

package/src/nile-form-group/nile-form-group.ts

@@ -49,7 +49,7 @@ export class NileFormGroup extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div part="base" class="form__base">
+      <div class="form__base">
         ${this.title
           ? html` <div class="form__header">
               <div class="form__title-content">
@@ -63,10 +63,8 @@ export class NileFormGroup extends NileElement {
                   : ``}
               </div>
 
-              <slot name="action" class="form__action"></slot>
-            </div>
-            <nile-divider class="form__divider"></nile-divider>
-            `
+              <slot name="action" class="form__action"> </slot>
+            </div>`
           : ``}
         <div class="form__body">
           <slot></slot>

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

@@ -13,22 +13,19 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     width:100%;
-    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));
+    color: var(--nile-form-help-text-color);
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-form-help-text-font-size);
     font-style: normal;
-    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    line-height: var(--nile-form-help-text-line-height);
   }
 
   .nile-form-help-text {
     display:flex;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-weight: 400;
     letter-spacing: 0.2px;
-    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
-    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    margin-top: 6px;
+    margin-right: 4px;
     width: auto;
   }
 
@@ -39,8 +36,8 @@ export const styles = css`
 
   .nile-form-help-text__more-button {
     display: inline-flex;
-    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));
-    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));
+    gap: 4px;
+    color: var(--nile-colors-primary-600);
     cursor: pointer;
     white-space: nowrap;
     align-items: center;
@@ -52,7 +49,7 @@ export const styles = css`
     white-space: nowrap;
     display:inline;
   }
-
+  
   .help__text__full--expanded{
     white-space: wrap;
   }

package/src/nile-format-date/nile-format-date.css.ts

@@ -12,9 +12,6 @@ import {css} from 'lit';
  */
 export const styles = css`
 	:host {
-	-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 
 	}
 `;

package/src/nile-heading/index.ts

@@ -14,11 +14,9 @@ export class NileHeading extends LitElement {
     :host {
       display: block;
       border: solid 1px gray;
-      padding: 16px 16px var(--nile-spacing-1-x) 16px;
+      padding: 16px;
       font-size: var(--nile-type-scale-5);
-      -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-      -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-      text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+      padding-bottom: var(--nile-spacing-1-x);      
     }
 
     :host([size='header-1']) {

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

@@ -15,9 +15,6 @@ export const styles = css`
 	:host {
 		display:block;
 		--nile-hero-transition-time:2000ms;
-		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 	}
 
 	.hero__header--collapsed{
@@ -50,14 +47,14 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: var(--nile-radius-radius-xl);
+		border-radius: 8px;
 		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}
 
 	.hero__slot__container {
 		height:var(--nile-hero-height);
-		padding-left: var(--nile-spacing-5xl);
+		padding-left: 48px;
 		display: flex;
 		align-items: center;
 		gap:var(--nile-spacing-spacing-xl);
@@ -89,4 +86,4 @@ export const styles = css`
 	}
 `;
 
-export default [styles];
+export default [styles];

package/src/nile-hero-header/nile-hero-header.css.ts

@@ -16,12 +16,9 @@ export const styles = css`
 		width:100%;
 		display: flex;
 		align-items: center;
-		padding:var(--nile-spacing-xl) var(--nile-spacing-5xl);
-		gap: var(--nile-spacing-xl);
+		padding:16px 48px;
+		gap: 16px;
 		border-bottom: 1px solid rgb(234, 236, 240);
-		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 	}
 
 	.icon__container {
@@ -29,7 +26,7 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: var(--nile-radius-radius-xl);
+		border-radius: 8px;
 		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}
@@ -43,4 +40,4 @@ export const styles = css`
 	}
 `;
 
-export default [styles];
+export default [styles];

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

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyBpZD0iYWRkcmVzcyIgZGF0YS1uYW1lPSJhZGRyZXNzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMyI+PHRpdGxlPkFkZHJlc3M8L3RpdGxlPjxwYXRoIGQ9Ik02LDYgQTEsMSAwIDEsMSA0LDYgQTEsMSAwIDEsMSA2LDZaIi8+PHBhdGggZD0iTTUsOWEyLDIsMCwwLDEsMiwySDNBMiwyLDAsMCwxLDUsOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEpIi8+PHBhdGggZD0iTTgsNmg1djFoLTV6Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNOSw5aDR2MWgtNHoiLz48cGF0aCBkPSJNMTYsMTRIMFYxSDRWMkExLDEsMCwwLDAsNiwyVjFoNFYyYTEsMSwwLDAsMCwyLDBWMWg0Wk0xLDEzSDE1VjJIMTNBMiwyLDAsMCwxLDksMkg3QTIsMiwwLDAsMSwzLDJIMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEpIi8+PC9zdmc+";
+export default "PHN2ZyBpZD0iYWRkcmVzcyIgZGF0YS1uYW1lPSJhZGRyZXNzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxMyI+PGRlZnM+PC9kZWZzPjx0aXRsZT5BZGRyZXNzPC90aXRsZT48Y2lyY2xlICBjeD0iNSIgY3k9IjYiIHI9IjEiLz48cGF0aCBkPSJNNSw5YTIsMiwwLDAsMSwyLDJIM0EyLDIsMCwwLDEsNSw5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMSkiLz48cmVjdCB4PSI4IiB5PSI2IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSI5IiB5PSI5IiB3aWR0aD0iNCIgaGVpZ2h0PSIxIi8+PHBhdGggZD0iTTE2LDE0SDBWMUg0VjJBMSwxLDAsMCwwLDYsMlYxaDRWMmExLDEsMCwwLDAsMiwwVjFoNFpNMSwxM0gxNVYySDEzQTIsMiwwLDAsMSw5LDJIN0EyLDIsMCwwLDEsMywySDFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0xKSIvPjwvc3ZnPg==";

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

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTAuNSwwLjVMMC41LDYuNUw4LjUsNi41TDguNSw1LjVMMS41LDUuNUwxLjUsMS41TDE0LjUsMS41TDE0LjUsNS41TDEzLjUsNS41TDEzLjUsNi41TDE1LjUsNi41TDE1LjUsMC41TDAuNSwwLjVaIE0xNC41LDE0LjVMMS41LDE0LjVMMS41LDEwLjVMNC41LDEwLjVMNC41LDkuNUwwLjUsOS41TDAuNSwxNS41TDE1LjUsMTUuNUwxNS41LDEyLjVMMTQuNSwxMi41TDE0LjUsMTQuNVogTTIuNSwyLjVoMXYxaC0xWiBNMi42LDExLjVoMXYxaC0xWiBNMTAuNSwzLjVMMTAuNSwxMS42TDcuNCw4LjZMNi43LDkuNEwxMSwxMy41TDE1LjMsOS40TDE0LjYsOC42TDExLjUsMTEuNkwxMS41LDMuNUwxMC41LDMuNVoiLz48L3N2Zz4=";
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBvbHlnb24gcG9pbnRzPSIwLjUgMC41IDAuNSA2LjUgOC41IDYuNSA4LjUgNS41IDEuNSA1LjUgMS41IDEuNSAxNC41IDEuNSAxNC41IDUuNSAxMy41IDUuNSAxMy41IDYuNSAxNS41IDYuNSAxNS41IDAuNSAwLjUgMC41Ii8+PHBvbHlnb24gcG9pbnRzPSIxNC41IDE0LjUgMS41IDE0LjUgMS41IDEwLjUgNC41IDEwLjUgNC41IDkuNSAwLjUgOS41IDAuNSAxNS41IDE1LjUgMTUuNSAxNS41IDEyLjUgMTQuNSAxMi41IDE0LjUgMTQuNSIvPjxyZWN0IHg9IjIuNSIgeT0iMi41IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMi42IiB5PSIxMS41IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHBvbHlnb24gcG9pbnRzPSIxMC41IDMuNSAxMC41IDExLjYgNy40IDguNiA2LjcgOS40IDExIDEzLjUgMTUuMyA5LjQgMTQuNiA4LjYgMTEuNSAxMS42IDExLjUgMy41IDEwLjUgMy41Ii8+PC9zdmc+";

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

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJtMy4xLDVsLTIuMSw2aDEuMTVsLjQ5LTEuNDhoMi4yNGwuNDksMS40OGgxLjE1bC0yLjEtNmgtMS4zM1ptLS4xNiwzLjY1bC44MS0yLjQyaC4wNWwuODEsMi40MmgtMS42NlogTTExLjM3LDUuMjZjLS4zMS0uMTctLjctLjI2LTEuMTUtLjI2aC0yLjI0djZoMS4wOHYtMi4wM2gxLjE0Yy40NiwwLC44NS0uMDgsMS4xNi0uMjUuMzEtLjE3LjU1LS40MS43MS0uNzEuMTYtLjMuMjQtLjY0LjI0LTEuMDNzLS4wOC0uNzItLjI0LTEuMDJjLS4xNi0uMy0uNC0uNTQtLjcxLS43MVptLS4yOCwyLjI5Yy0uMDguMTYtLjIxLjI5LS4zOC4zOS0uMTcuMDktLjM5LjE0LS42Ni4xNGgtMXYtMi4xN2guOTljLjI3LDAsLjQ5LjA1LjY2LjE0LjE3LjA5LjMuMjIuMzguMzguMDguMTYuMTMuMzUuMTMuNTZzLS4wNC40LS4xMy41N1ogTTEzLjkyLDVoMS4wOHY2aC0xLjA4WiIvPjwvc3ZnPg==";
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0ibTMuMSw1bC0yLjEsNmgxLjE1bC40OS0xLjQ4aDIuMjRsLjQ5LDEuNDhoMS4xNWwtMi4xLTZoLTEuMzNabS0uMTYsMy42NWwuODEtMi40MmguMDVsLjgxLDIuNDJoLTEuNjZaIi8+PHBhdGggZD0ibTExLjM3LDUuMjZjLS4zMS0uMTctLjctLjI2LTEuMTUtLjI2aC0yLjI0djZoMS4wOHYtMi4wM2gxLjE0Yy40NiwwLC44NS0uMDgsMS4xNi0uMjUuMzEtLjE3LjU1LS40MS43MS0uNzEuMTYtLjMuMjQtLjY0LjI0LTEuMDNzLS4wOC0uNzItLjI0LTEuMDJjLS4xNi0uMy0uNC0uNTQtLjcxLS43MVptLS4yOCwyLjI5Yy0uMDguMTYtLjIxLjI5LS4zOC4zOS0uMTcuMDktLjM5LjE0LS42Ni4xNGgtMXYtMi4xN2guOTljLjI3LDAsLjQ5LjA1LjY2LjE0LjE3LjA5LjMuMjIuMzguMzguMDguMTYuMTMuMzUuMTMuNTZzLS4wNC40LS4xMy41N1oiLz48cmVjdCB4PSIxMy45MiIgeT0iNSIgd2lkdGg9IjEuMDgiIGhlaWdodD0iNiIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/apply-filter.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEsMWgxNHYxSDFWMVogTTMsNWgxMHYxSDNWNVogTTUsOWgzdjFINVY5WiBNNywxM2gxdjFIN1YxM1ogTTExLjMwNzIsOS41MjMyM0MxMS43OTU4LDkuMTg5MjksMTIuMzcyMiw5LjAwNzMzLDEyLjk2NCw5LjAwMDIyQzEzLjM2MDksOC45OTU0NSwxMy43NTQ5LDkuMDY5NTIsMTQuMTIzMSw5LjIxODE1QzE0LjQ5MTIsOS4zNjY3OCwxNC44MjYyLDkuNTg3LDE1LjEwODYsOS44NjYwNUMxNS4zOTEsMTAuMTQ1MSwxNS42MTUyLDEwLjQ3NzQsMTUuNzY4MiwxMC44NDM4QzE1LjkyMTIsMTEuMjEwMSwxNiwxMS42MDMyLDE2LDEyLjAwMDJDMTUuOTk5OSwxMi41OTIsMTUuODI0OSwxMy4xNzA2LDE1LjQ5NjgsMTMuNjYzMUMxNS4xNjg3LDE0LjE1NTYsMTQuNzAyMywxNC41NDAxLDE0LjE1NjIsMTQuNzY4MkMxMy42MTAxLDE0Ljk5NjMsMTMuMDA4OCwxNS4wNTc4LDEyLjQyNzksMTQuOTQ0OUMxMS44NDY5LDE0LjgzMjEsMTEuMzEyMywxNC41NDk5LDEwLjg5MTQsMTQuMTMzOUMxMC40NzA0LDEzLjcxOCwxMC4xODE5LDEzLjE4NjgsMTAuMDYyMSwxMi42MDczQzkuOTQyMzEsMTIuMDI3Nyw5Ljk5NjYsMTEuNDI1NywxMC4yMTgyLDEwLjg3NjlDMTAuNDM5NywxMC4zMjgxLDEwLjgxODYsOS44NTcxNywxMS4zMDcyLDkuNTIzMjNaTTEyLjU3MDgsMTMuNjkxMUwxNS4xNDE1LDExLjEyMDNMMTQuNTA0NSwxMC40ODMzTDEyLjU3MDgsMTIuNDE3TDExLjUzNzksMTEuMzg0MkwxMC45MDA5LDEyLjAyMTJMMTIuNTcwOCwxMy42OTExWiIvPjwvc3ZnPg==";
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMTQiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz48cmVjdCB4PSIzIiB5PSI1IiB3aWR0aD0iMTAiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz48cmVjdCB4PSI1IiB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIvPjxyZWN0IHg9IjciIHk9IjEzIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuMzA3MiA5LjUyMzIzQzExLjc5NTggOS4xODkyOSAxMi4zNzIyIDkuMDA3MzMgMTIuOTY0IDkuMDAwMjJDMTMuMzYwOSA4Ljk5NTQ1IDEzLjc1NDkgOS4wNjk1MiAxNC4xMjMxIDkuMjE4MTVDMTQuNDkxMiA5LjM2Njc4IDE0LjgyNjIgOS41ODcgMTUuMTA4NiA5Ljg2NjA1QzE1LjM5MSAxMC4xNDUxIDE1LjYxNTIgMTAuNDc3NCAxNS43NjgyIDEwLjg0MzhDMTUuOTIxMiAxMS4yMTAxIDE2IDExLjYwMzIgMTYgMTIuMDAwMkMxNS45OTk5IDEyLjU5MiAxNS44MjQ5IDEzLjE3MDYgMTUuNDk2OCAxMy42NjMxQzE1LjE2ODcgMTQuMTU1NiAxNC43MDIzIDE0LjU0MDEgMTQuMTU2MiAxNC43NjgyQzEzLjYxMDEgMTQuOTk2MyAxMy4wMDg4IDE1LjA1NzggMTIuNDI3OSAxNC45NDQ5QzExLjg0NjkgMTQuODMyMSAxMS4zMTIzIDE0LjU0OTkgMTAuODkxNCAxNC4xMzM5QzEwLjQ3MDQgMTMuNzE4IDEwLjE4MTkgMTMuMTg2OCAxMC4wNjIxIDEyLjYwNzNDOS45NDIzMSAxMi4wMjc3IDkuOTk2NiAxMS40MjU3IDEwLjIxODIgMTAuODc2OUMxMC40Mzk3IDEwLjMyODEgMTAuODE4NiA5Ljg1NzE3IDExLjMwNzIgOS41MjMyM1pNMTIuNTcwOCAxMy42OTExTDE1LjE0MTUgMTEuMTIwM0wxNC41MDQ1IDEwLjQ4MzNMMTIuNTcwOCAxMi40MTdMMTEuNTM3OSAxMS4zODQyTDEwLjkwMDkgMTIuMDIxMkwxMi41NzA4IDEzLjY5MTFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";