@aquera/nile-elements 0.1.49-beta-1.0 → 0.1.49-beta-1.2

package/dist/src/nile-empty-state/nile-empty-state.css.js

@@ -11,58 +11,57 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display:inline-flex;
+    min-width:var(--nile-empty-state-max-width);
+    max-width:var(--nile-empty-state-min-width);
     width:100%;
-    -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));
   }
 
   .empty-state--sm {
-    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
-    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
-    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-es-text-size:16px;
+    --nile-es-text-line-height:24px;
+    --nile-es-subtext-size:14px;
     --nile-es-subtext-line-height:20px;
     
-    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));
-    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
+    --nile-es-icon-size:48px;
+    --nile-es-flat-option-border-radius:5px;
     --nile-es-img-height:118px;
     --nile-es-img-width:152px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
-    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
-    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));
+    --nile-es-gap:var(--nile-spacing-spacing-3xl);
+    --nile-es-body-gap:var(--nile-spacing-spacing-xl);
+    --nile-es-text-gap:0px;
   }
 
   .empty-state--md {
-    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
-    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));
-    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    --nile-es-text-size:18px;
+    --nile-es-text-line-height:28px;
+    --nile-es-subtext-size:14px;
+    --nile-es-subtext-line-height:20px;
 
-    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));
-    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
+    --nile-es-icon-size:48px;
+    --nile-es-flat-option-border-radius:5px;
     --nile-es-img-height:128px;
     --nile-es-img-width:172px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
-    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));
-    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    --nile-es-gap:var(--nile-spacing-spacing-4xl);
+    --nile-es-body-gap:var(--nile-spacing-spacing-2xl);
+    --nile-es-text-gap:var(--nile-spacing-spacing-md);
   }
 
   .empty-state--lg {
-    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));
-    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));
-    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
-    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+    --nile-es-text-size:20px;
+    --nile-es-text-line-height:30px;
+    --nile-es-subtext-size:16px;
+    --nile-es-subtext-line-height:24px;
 
-    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));
-    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));
+    --nile-es-icon-size:56px;
+    --nile-es-flat-option-border-radius:10px;
     --nile-es-img-height:160px;
     --nile-es-img-width:220px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
-    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
-    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    --nile-es-gap:var(--nile-spacing-spacing-4xl);
+    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);
+    --nile-es-text-gap:var(--nile-spacing-spacing-md)
   }
 
   .empty-state {
@@ -86,23 +85,47 @@ export const styles = css `
   .empty-state__body--content {
     position:relative;
   }
+  .empty-state__image {    
+    background:var(--nile-empty-state-image);
+    background-size: var(--nile-es-img-width) var(--nile-es-img-height);
+    height: var(--nile-es-img-height);
+    width: var(--nile-es-img-width);
+    max-width: 100%;
+  }
+
+  .empty-state__image--grayscale {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    filter: grayscale(100%);
+  }
 
   .empty-state__img__icon {
-    display: var(--ng-display-flex);
-    justify-content: center;
-    align-items: center;
+    height: var(--nile-es-icon-size);
+    aspect-ratio:1 / 1;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    background: var(--nile-colors-neutral-500);
+    position:absolute;
+    left: calc(50% - calc(var(--nile-es-icon-size) / 2));
+    top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));
   }
 
   .empty-state__body--tonal {
-    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));
+    background: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);
     width: 104px;
     height: 104px;
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    border-radius: 50%;
     display:flex;
     justify-content:center;
     align-items:center;
   }
 
+  .empty-state__body--flat {
+  }
+
   .nile-flat-type-icon {
     height:var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
@@ -111,7 +134,7 @@ export const styles = css `
     background-color: white;
     display: grid;
     place-items: center;
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .empty__state__text-section {
@@ -123,8 +146,7 @@ export const styles = css `
 
   .empty-state__text {
     font-size: var(--nile-es-text-size);
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
+    font-weight: 600;
     line-height: var(--nile-es-text-line-height);
     text-align: center;
     font-style: normal;
@@ -132,11 +154,10 @@ export const styles = css `
 
   .empty-state__subtext {
     font-size: var(--nile-es-subtext-size);
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-weight: 400;
     line-height: var(--nile-es-subtext-line-height);
     text-align: center;
-    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color:var(--nile-colors-dark-500);
     font-style: normal;
   }
 

package/dist/src/nile-empty-state/nile-empty-state.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,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 * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    width:100%;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height:20px;\n    \n    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:118px;\n    --nile-es-img-width:152px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n  }\n\n  .empty-state--md {\n    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:128px;\n    --nile-es-img-width:172px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n    --nile-es-img-height:160px;\n    --nile-es-img-width:220px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state {\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:var(--nile-es-gap);\n  }\n\n  .empty-state__body {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n    row-gap:var(--nile-es-body-gap)\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n\n  .empty-state__img__icon {\n    display: var(--ng-display-flex);\n    justify-content: center;\n    align-items: center;\n  }\n\n  .empty-state__body--tonal {\n    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));\n    width: 104px;\n    height: 104px;\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--nile-es-flat-option-border-radius);\n\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .empty__state__text-section {\n    display:flex;\n    flex-direction:column;\n    gap:var(--nile-es-text-gap);\n    max-width:80%;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    line-height: var(--nile-es-text-line-height);\n    text-align: center;\n    font-style: normal;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-es-subtext-line-height);\n    text-align: center;\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-style: normal;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JxB,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 * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    min-width:var(--nile-empty-state-max-width);\n    max-width:var(--nile-empty-state-min-width);\n    width:100%;\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size:16px;\n    --nile-es-text-line-height:24px;\n    --nile-es-subtext-size:14px;\n    --nile-es-subtext-line-height:20px;\n    \n    --nile-es-icon-size:48px;\n    --nile-es-flat-option-border-radius:5px;\n    --nile-es-img-height:118px;\n    --nile-es-img-width:152px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-3xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-xl);\n    --nile-es-text-gap:0px;\n  }\n\n  .empty-state--md {\n    --nile-es-text-size:18px;\n    --nile-es-text-line-height:28px;\n    --nile-es-subtext-size:14px;\n    --nile-es-subtext-line-height:20px;\n\n    --nile-es-icon-size:48px;\n    --nile-es-flat-option-border-radius:5px;\n    --nile-es-img-height:128px;\n    --nile-es-img-width:172px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-2xl);\n    --nile-es-text-gap:var(--nile-spacing-spacing-md);\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size:20px;\n    --nile-es-text-line-height:30px;\n    --nile-es-subtext-size:16px;\n    --nile-es-subtext-line-height:24px;\n\n    --nile-es-icon-size:56px;\n    --nile-es-flat-option-border-radius:10px;\n    --nile-es-img-height:160px;\n    --nile-es-img-width:220px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);\n    --nile-es-text-gap:var(--nile-spacing-spacing-md)\n  }\n\n  .empty-state {\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:var(--nile-es-gap);\n  }\n\n  .empty-state__body {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n    row-gap:var(--nile-es-body-gap)\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n  .empty-state__image {    \n    background:var(--nile-empty-state-image);\n    background-size: var(--nile-es-img-width) var(--nile-es-img-height);\n    height: var(--nile-es-img-height);\n    width: var(--nile-es-img-width);\n    max-width: 100%;\n  }\n\n  .empty-state__image--grayscale {\n    -webkit-filter: grayscale(100%);\n    -moz-filter: grayscale(100%);\n    -o-filter: grayscale(100%);\n    -ms-filter: grayscale(100%);\n    filter: grayscale(100%);\n  }\n\n  .empty-state__img__icon {\n    height: var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: var(--nile-colors-neutral-500);\n    position:absolute;\n    left: calc(50% - calc(var(--nile-es-icon-size) / 2));\n    top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));\n  }\n\n  .empty-state__body--tonal {\n    background: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);\n    width: 104px;\n    height: 104px;\n    border-radius: 50%;\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .empty-state__body--flat {\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--nile-es-flat-option-border-radius);\n\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .empty__state__text-section {\n    display:flex;\n    flex-direction:column;\n    gap:var(--nile-es-text-gap);\n    max-width:80%;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-weight: 600;\n    line-height: var(--nile-es-text-line-height);\n    text-align: center;\n    font-style: normal;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-weight: 400;\n    line-height: var(--nile-es-subtext-line-height);\n    text-align: center;\n    color:var(--nile-colors-dark-500);\n    font-style: normal;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n  }\n`;\n\nexport default [styles];"]}

package/dist/src/nile-empty-state/nile-empty-state.d.ts

@@ -24,9 +24,6 @@ export declare class NileEmptyState extends NileElement {
     grayscale: boolean;
     text: String;
     subText: String;
-    svgIconUrl: string;
-    svgIconSize: number;
-    svgIconColor: string;
     /**
      * Render method
      * @slot This is a slot test

package/dist/src/nile-empty-state/nile-empty-state.js

@@ -10,7 +10,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
 import NileElement from '../internal/nile-element';
-import { ifDefined } from 'lit/directives/if-defined.js';
 /**
  * Nile empty-state component.
  *
@@ -26,7 +25,6 @@ let NileEmptyState = class NileEmptyState extends NileElement {
         this.grayscale = false;
         this.text = 'Empty State';
         this.subText = 'No Data';
-        this.svgIconSize = 40;
         /* #endregion */
     }
     /**
@@ -54,34 +52,23 @@ let NileEmptyState = class NileEmptyState extends NileElement {
 
         ${this.variant == 'content' ? html `
         <div class="empty-state__body--content">
-          ${!this.icon && !this.svgIconUrl ? nothing : html `
+          
+          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale': this.grayscale })}"></div>
+          ${!this.icon ? nothing : html `
           <div class="empty-state__img__icon">
-            ${this.svgIconUrl ? html `
-              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-              <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
-            ` : html `
-              <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
-            `}
+            <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
           </div>`}
         </div>` : nothing}
 				
 			  ${this.variant == 'tonal' ? html `
 				<div class="empty-state__body--tonal">
-					${this.svgIconUrl ? html `
-            <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-          ` : html `
-            <nile-icon name="${this.icon}" size="40"></nile-icon>
-          `}
+					<nile-icon name="${this.icon}" size="40"></nile-icon>
 				</div>` : nothing}
 
 			  ${this.variant == 'flat' ? html `
 				<div class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
-						${this.svgIconUrl ? html `
-              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-            ` : html `
-              <nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
-            `}
+						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
 					</span>
 				</div>` : nothing}
       
@@ -116,15 +103,6 @@ __decorate([
 __decorate([
     property({ attribute: 'sub-text' })
 ], NileEmptyState.prototype, "subText", void 0);
-__decorate([
-    property()
-], NileEmptyState.prototype, "svgIconUrl", void 0);
-__decorate([
-    property({ type: Number })
-], NileEmptyState.prototype, "svgIconSize", void 0);
-__decorate([
-    property({ type: String })
-], NileEmptyState.prototype, "svgIconColor", void 0);
 NileEmptyState = __decorate([
     customElement('nile-empty-state')
 ], NileEmptyState);

package/dist/src/nile-empty-state/nile-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"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","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 { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property() size: 'sm' | 'md' | 'lg'  = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'error';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property({attribute:'sub-text'}) subText: String = 'No Data';\n  @property() svgIconUrl: string;\n  @property({type: Number}) svgIconSize: number = 40;\n  @property({type: String}) svgIconColor: string;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n\t\t<div class=\"${classMap({\n      'empty-state': true,\n      'empty-state--sm': this.size == 'sm',\n      'empty-state--md': this.size == 'md',\n      'empty-state--lg': this.size == 'lg'\n    })}\">\n      <div class=\"${classMap({ 'empty-state__body': true })}\">\n\n        ${this.variant == 'content' ? html`\n        <div class=\"empty-state__body--content\">\n          ${!this.icon && !this.svgIconUrl ? nothing : html`\n          <div class=\"empty-state__img__icon\">\n            ${this.svgIconUrl ? html`\n              <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n              <!-- <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${this.svgIconColor ? this.svgIconColor : '#ddd'}\"></nile-icon> -->\n            ` : html`\n              <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n            `}\n          </div>`\n          }\n        </div>`: nothing\n        }\n\t\t\t\t\n\t\t\t  ${this.variant == 'tonal' ? html`\n\t\t\t\t<div class=\"empty-state__body--tonal\">\n\t\t\t\t\t${this.svgIconUrl ? html`\n            <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n          ` : html`\n            <nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n          `}\n\t\t\t\t</div>`: nothing\n        }\n\n\t\t\t  ${this.variant == 'flat' ? html`\n\t\t\t\t<div class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t${this.svgIconUrl ? html`\n              <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" variant=\"secondary\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n            ` : html`\n              <nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n            `}\n\t\t\t\t\t</span>\n\t\t\t\t</div>`: nothing\n        }\n      \n        <div class=\"empty__state__text-section\">\n          <div class=\"empty-state__text\">${this.text}</div>\n          <div class=\"empty-state__subtext\">${this.subText}</div>\n        </div>\n\t\t\t</div>\n\n\t\t\t<div class=\"empty-state-actions\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}"]}
+{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAUO,SAAI,GAAuB,IAAI,CAAC;QAEhC,YAAO,GAGL,OAAO,CAAC;QAEV,SAAI,GAAW,OAAO,CAAC;QACT,cAAS,GAAY,KAAK,CAAC;QAEzC,SAAI,GAAW,aAAa,CAAC;QACP,YAAO,GAAW,SAAS,CAAC;QA4D9D,gBAAgB;IAClB,CAAC;IAhFC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgBD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC;YACnB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;SACrC,CAAC;oBACc,QAAQ,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC;;UAEjD,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;+BAGX,QAAQ,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,+BAA+B,EAAC,IAAI,CAAC,SAAS,EAAG,CAAC;YAC5G,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;+BAER,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;iBAE3G;eACK,CAAA,CAAC,CAAC,OACT;;OAED,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEb,IAAI,CAAC,IAAI;WACtB,CAAA,CAAC,CAAC,OACL;;OAED,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;yBAGX,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;WAEtF,CAAA,CAAC,CAAC,OACL;;;2CAGmC,IAAI,CAAC,IAAI;8CACN,IAAI,CAAC,OAAO;;;;;;;;GAQvD,CAAC;IACF,CAAC;CAGF,CAAA;AAxEa;IAAX,QAAQ,EAAE;4CAAiC;AAEhC;IAAX,QAAQ,EAAE;+CAGW;AAEV;IAAX,QAAQ,EAAE;4CAAwB;AACT;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,CAAC;iDAA4B;AAEzC;IAAX,QAAQ,EAAE;4CAA8B;AACP;IAAjC,QAAQ,CAAC,EAAC,SAAS,EAAC,UAAU,EAAC,CAAC;+CAA6B;AArBnD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkF1B;;AAED,eAAe,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 { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property() size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'error';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property({attribute:'sub-text'}) subText: String = 'No Data';\n\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n\t\t<div class=\"${classMap({\n      'empty-state': true,\n      'empty-state--sm': this.size == 'sm',\n      'empty-state--md': this.size == 'md',\n      'empty-state--lg': this.size == 'lg'\n    })}\">\n      <div class=\"${classMap({ 'empty-state__body': true })}\">\n\n        ${this.variant == 'content' ? html`\n        <div class=\"empty-state__body--content\">\n          \n          <div src=\"\" class=\"${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}\"></div>\n          ${!this.icon ? nothing : html`\n          <div class=\"empty-state__img__icon\">\n            <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n          </div>`\n          }\n        </div>`: nothing\n        }\n\t\t\t\t\n\t\t\t  ${this.variant == 'tonal' ? html`\n\t\t\t\t<div class=\"empty-state__body--tonal\">\n\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n\t\t\t\t</div>`: nothing\n        }\n\n\t\t\t  ${this.variant == 'flat' ? html`\n\t\t\t\t<div class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n\t\t\t\t\t</span>\n\t\t\t\t</div>`: nothing\n        }\n      \n        <div class=\"empty__state__text-section\">\n          <div class=\"empty-state__text\">${this.text}</div>\n          <div class=\"empty-state__subtext\">${this.subText}</div>\n        </div>\n\t\t\t</div>\n\n\t\t\t<div class=\"empty-state-actions\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}"]}

package/dist/src/nile-error-message/nile-error-message.css.js

@@ -10,61 +10,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;
   }
@@ -74,14 +75,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;
   }
 `;
 export default [styles];

package/dist/src/nile-error-message/nile-error-message.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,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 * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n    --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);\n    --ng-private-error-max-width: var(--nile-width-535px, var(--ng-width-120));\n    --ng-private-error-max-height: var(--nile-height-48px, var(--ng-height-48px));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-error-message {\n    width: 100%;\n    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));\n    max-width: var(--nile-error-max-width, var(--ng-private-error-max-width)); \n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    max-height: var(--nile-error-max-height, var(--ng-private-error-max-height));\n    overflow-x: auto;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    cursor: pointer;\n    white-space: nowrap;\n    display: inline-flex;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    align-items: center\n  }\n\n  .nile-error-message__response-expanded {\n    line-height: var(--nile-line-height-small);\n    height: auto;\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: var(--nile-spacing-none) var(--nile-spacing-none);\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: var(--nile-error-max-dialog-height, var(--ng-private-error-max-height));\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: var(--nile-spacing-lg, var(--ng-error-expanded-padding));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,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 * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-error-message {\n    width: 100%;\n    word-break: break-all;\n    font-size: var(--nile-font-size-small);\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-font-size-small);\n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-700);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n    margin-top:6px;\n    line-height: 16px;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right:2px;\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n    display: inline-flex;\n    gap: 4px;\n    align-items: center\n  }\n\n  .nile-error-message__response-expanded {\n    line-height: 18px;\n    height: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-error-message__response-expanded {\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: 0 12px;\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: 100px;\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: 12px;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -9,16 +9,12 @@ export declare class NileErrorMessage extends LitElement {
     errorResponse: string;
     errorResponseLong: string;
     isExpanded: boolean;
-    maxWidth: string;
-    maxHeight: string;
-    maxDialogHeight: string;
     private readonly MAX_LENGTH;
     /**
      * Get a truncated version of the errorResponse if it's too long.
      * @returns {string}
      */
     getTruncatedResponse(): string;
-    updated(changedProperties: Map<string, any>): void;
     /**
      * Toggle the expanded state of the error response.
      */

package/dist/src/nile-error-message/nile-error-message.js

@@ -28,17 +28,6 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
         }
         return this.errorResponse;
     }
-    updated(changedProperties) {
-        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.
      */
@@ -54,7 +43,7 @@ let NileErrorMessage = 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>
 
@@ -69,7 +58,7 @@ let NileErrorMessage = 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>
@@ -99,15 +88,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileErrorMessage.prototype, "isExpanded", void 0);
-__decorate([
-    property({ type: String })
-], NileErrorMessage.prototype, "maxWidth", void 0);
-__decorate([
-    property({ type: String })
-], NileErrorMessage.prototype, "maxHeight", void 0);
-__decorate([
-    property({ type: String })
-], NileErrorMessage.prototype, "maxDialogHeight", void 0);
 NileErrorMessage = __decorate([
     customElement('nile-error-message')
 ], NileErrorMessage);

package/dist/src/nile-error-message/nile-error-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAW1B,eAAU,GAAY,KAAK,CAAC;QAQ5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IA0E5C,CAAC;IApGQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IA0BD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAClE,CAAC;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED,OAAO,CAAC,iBAAmC;QACzC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,wBAAwB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClE,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YACvC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACpE,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;YAC7C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAA;;cAEA,IAAI,CAAC,aAAa;cAClB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,IAAI,CAAA;;;uBAGC,IAAI,CAAC,cAAc;iBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;qIACyE,QAAQ;;eAE9H,CAAA,CAAC,CAAA,EAAE;;aAEL;YACL,CAAC,CAAC,EAAE;;;yDAG6C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;CACF,CAAA;AA9FC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAEA;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAyB;AAxBzC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAqG5B","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  @property({ type: String }) maxWidth: string;\n\n  @property({ type: String }) maxHeight: string;\n\n  @property({ type: String }) maxDialogHeight: string;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('maxWidth')) {\n      this.style.setProperty('--nile-error-max-width', this.maxWidth);\n    }\n    if (changedProperties.has('maxHeight')) {\n      this.style.setProperty('--nile-error-max-height', this.maxHeight);\n    }\n    if (changedProperties.has('maxDialogHeight')) {\n      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);\n    }\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}\n              <nile-icon color=\"var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n              </span\n            > `:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}
+{"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAW1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IA8D5C,CAAC;IAlFQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAoBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAClE,CAAC;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAA;;cAEA,IAAI,CAAC,aAAa;cAClB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,IAAI,CAAA;;;uBAGC,IAAI,CAAC,cAAc;iBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;8FACkC,QAAQ;;eAEvF,CAAA,CAAC,CAAA,EAAE;;aAEL;YACL,CAAC,CAAC,EAAE;;;yDAG6C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;CACF,CAAA;AA5EC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAlBjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAmF5B","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"var(--nile-colors-red-700)\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}\n              <nile-icon color=\"var(--nile-colors-primary-600)\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n              </span\n            > `:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}

package/dist/src/nile-error-notification/nile-error-notification.css.js

@@ -10,31 +10,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;
   }
 `;
 export default [styles];

package/dist/src/nile-error-notification/nile-error-notification.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-notification.css.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,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 * ErrorNotification CSS\n */\nexport const styles = css`\n  :host {\n    --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-error-notification {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    letter-spacing: 0.2px;\n    border: 1px solid var(--indication-color);\n    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\n    color: var(--indication-color);\n    box-sizing: border-box;\n  }\n\n  .nile-error-notification__icon {\n    vertical-align: middle;\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xxs));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-error-notification.css.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,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 * ErrorNotification CSS\n */\nexport const styles = css`\n  :host {\n    --indication-color: var(--nile-colors-red-500);\n  }\n\n  .nile-error-notification {\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n    border: 1px solid var(--indication-color);\n    border-left: 6px solid var(--indication-color);\n    border-radius: 4px;\n    padding: 8px;\n    background: var(--nile-colors-neutral-100);\n    color: var(--indication-color);\n    box-sizing: border-box;\n  }\n\n  .nile-error-notification__icon {\n    vertical-align: middle;\n    margin-right: 4px;\n  }\n`;\n\nexport default [styles];\n"]}