@aquera/nile-elements 0.0.68 → 0.0.69

package/src/nile-empty-state/nile-empty-state.css.ts

@@ -13,57 +13,95 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     display:inline-flex;
-    min-width:300px;
-    max-width:512px;
+    min-width:var(--nile-empty-state-max-width);
+    max-width:var(--nile-empty-state-min-width);
     width:100%;
   }
 
   .empty-state--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:48px;
-    --es-flat-option-border-radius:5px;
+    --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);
+    --nile-es-body-gap:var(--nile-spacing-spacing-xl);
+    --nile-es-text-gap:0px;
   }
 
   .empty-state--md {
     --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:48px;
-    --es-flat-option-border-radius:5px;
+    --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);
+    --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:20px;
+    --nile-es-text-line-height:30px;
     --nile-es-subtext-size:16px;
+    --nile-es-subtext-line-height:24px;
+
     --nile-es-icon-size:56px;
-    --es-flat-option-border-radius:10px;
+    --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);
+    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);
+    --nile-es-text-gap:var(--nile-spacing-spacing-md)
   }
 
   .empty-state {
-    padding:1rem;
     min-width:300px;
     max-width:512px;
     width:100%;
     height:max-content;
     display:flex;
     flex-direction:column;
-    row-gap:2rem;
+    row-gap:var(--nile-es-gap);
   }
 
   .empty-state__body {
-    row-gap:5px;
     display:flex;
     flex-direction:column;
     justify-content:space-between;
     align-items:center;
+    row-gap:var(--nile-es-body-gap)
   }
 
   .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 {
     height: var(--nile-es-icon-size);
@@ -72,19 +110,15 @@ export const styles = css`
     display: grid;
     place-items: center;
     background: #34405466;
-  }
-
-  .empty-state__img__icon--abs {
     position:absolute;
     left: calc(50% - calc(var(--nile-es-icon-size) / 2));
-    top: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: linear-gradient(180deg, #F9FAFB 0%, #EDF0F3 100%);
-    width: 100px;
-    height: 100px;
-    padding: 1rem;
+    width: 104px;
+    height: 104px;
     border-radius: 50%;
     display:flex;
     justify-content:center;
@@ -92,13 +126,12 @@ export const styles = css`
   }
 
   .empty-state__body--flat {
-    margin:2rem;
   }
 
   .nile-flat-type-icon {
     height:var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
-    border-radius: var(--es-flat-option-border-radius);
+    border-radius: var(--nile-es-flat-option-border-radius);
 
     background-color: white;
     display: grid;
@@ -106,25 +139,33 @@ export const styles = css`
     border: 1px solid #EAECF0;
   }
 
+  .empty__state__text-section {
+    display:flex;
+    flex-direction:column;
+    gap:var(--nile-es-text-gap);
+    max-width:80%;
+  }
+
   .empty-state__text {
     font-size: var(--nile-es-text-size);
     font-weight: 600;
-    line-height: 28px;
+    line-height: var(--nile-es-text-line-height);
     text-align: center;
+    font-style: normal;
   }
 
   .empty-state__subtext {
     font-size: var(--nile-es-subtext-size);
     font-weight: 400;
-    line-height: 20px;
+    line-height: var(--nile-es-subtext-line-height);
     text-align: center;
     color:#475467;
+    font-style: normal;
   }
 
   .empty-state-actions {
     display:flex;
     justify-content:center;
-    gap:1rem;
   }
 `;
 

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

@@ -9,7 +9,6 @@ import { state, html, nothing, property, CSSResultArray, TemplateResult } from '
 import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
-import { HasSlotController } from '../internal/slot';
 import NileElement from '../internal/nile-element';
 
 /**
@@ -28,10 +27,6 @@ export class NileEmptyState extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-  private readonly hasSlotController = new HasSlotController(
-    this,
-    'actions'
-  );
 
   @property() size: 'sm' | 'md' | 'lg' = 'md';
 
@@ -41,6 +36,7 @@ export class NileEmptyState extends NileElement {
     | 'tonal' = 'tonal';
 
   @property() icon: string = 'error';
+  @property({type:Boolean}) grayscale: boolean = false;
 
   @property() text: String = 'Empty State';
   @property() subText: String = 'No Data';
@@ -55,7 +51,6 @@ export class NileEmptyState extends NileElement {
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    const hasContentSlot = this.hasSlotController.test('content');
     return html`
 		<div class="${classMap({
       'empty-state': true,
@@ -63,39 +58,38 @@ export class NileEmptyState extends NileElement {
       'empty-state--md': this.size == 'md',
       'empty-state--lg': this.size == 'lg'
     })}">
-			<div class="${classMap({
-      'empty-state__body': true,
-    })}">
-			${this.variant == 'content' ? html`
-				<div class="empty-state__body--content">
-					<slot name="content"></slot>
-					${!this.icon ? nothing :
-          html`
-						<div class="${classMap({
-            'empty-state__img__icon': true,
-            'empty-state__img__icon--abs': hasContentSlot
-          })}">
-							<nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
-						</div>`
+      <div class="${classMap({ 'empty-state__body': true })}">
+
+        ${this.variant == 'content' ? html`
+        <div class="empty-state__body--content">
+          
+          <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">
+            <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+          </div>`
+          }
+        </div>`: nothing
         }
-				</div>`: nothing
-      }
 				
-			${this.variant == 'tonal' ? html`
+			  ${this.variant == 'tonal' ? html`
 				<div class="empty-state__body--tonal">
 					<nile-icon name="${this.icon}" size="40"></nile-icon>
 				</div>`: nothing
-      }
+        }
 
-			${this.variant == 'flat' ? html`
+			  ${this.variant == 'flat' ? html`
 				<div class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
 						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
 					</span>
 				</div>`: nothing
-      }
-				<div class="empty-state__text">${this.text}</div>
-				<div class="empty-state__subtext">${this.subText}</div>
+        }
+      
+        <div class="empty__state__text-section">
+          <div class="empty-state__text">${this.text}</div>
+          <div class="empty-state__subtext">${this.subText}</div>
+        </div>
 			</div>
 
 			<div class="empty-state-actions">

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

@@ -13,57 +13,38 @@ import {css} from 'lit-element';
 export const styles = css`
 
 	:host {
-		min-height:var(--nile-hero-height);
+		display:block;
+		--transition:2000ms;
+	}
+	.hero__container{
+		overflow:hidden;
 		width:100%;
 		position:relative;
 		display:block;
-		border-bottom: 1px solid #EAECF0;
-		background: linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);
+  		transition: var(--transition);
 	}
-
 	.hero__body {
 		height:100%;
 	}
 
-	.hero__header {
-		display: flex;
-		align-items: center;
-		padding: var(--nile-hero-first-elements-padding);
-		gap: .75rem;
-	}
-
-	.icon__container {
-		height: 25px;
-		place-items: center;
-		display: grid;
-		aspect-ratio: 1 / 1;
-		border-radius: 8px;
-		border: 1px solid #EAECF0;
-		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
-	}
-
-	.hero__text {
-		color: var(--nile-hero-text-color);
-		font-size: var(--nile-hero-text-font-size);
-		font-style: normal;
-		font-weight: var(--nile-hero-text-font-weight);
-	}
-
 	.hero__slot {
-		padding: var(--nile-hero-first-elements-padding);
+		padding-left: 48px;
+		padding-top: 24px 
 	}
 
 	.hero__img__container {
-		height:100%;
+		height:var(--nile-hero-height);
+		overflow:hidden;
 		width:max-content;
 		position: absolute;
 		right: 0;
-		top:0;
+		bottom:0;
+		transition:var(--transition);
 	}
 
 	.hero__img {
 		object-fit:cover;
-		height:100%;
+		height:var(--nile-hero-height);
 		width:auto;
 	}
 `;

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

@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import {LitElement, html, property, CSSResultArray, TemplateResult,nothing} from 'lit-element';
+import { customElement, query } from 'lit/decorators.js';
 import {styles} from './nile-hero.css';
 import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+import { classMap } from 'lit/directives/class-map.js';
 
 
 /**
@@ -19,9 +21,14 @@ import NileElement from '../internal/nile-element';
  */
 @customElement('nile-hero')
 export class NileHero extends NileElement {
-	@property({reflect:true}) icon:string='action'
-	@property({ reflect: true, attribute: 'img-src' }) imgSrc:string='';
-	@property({ reflect: true, attribute: 'hero-text' }) heroText:string='Nile Hero';
+	@query('.hero__container') heroContainer:HTMLElement;
+	@query('nile-hero-header') heroHeader:HTMLElement;
+	@query('.hero__img__container') imgContainer:HTMLElement;
+	@property({ reflect: true }) icon: string = 'action';
+	@property({ reflect: true, type: Boolean }) collapse: boolean = false;
+	
+	@property({ reflect: true, attribute: 'img-src' }) imgSrc: string = '';
+	@property({ reflect: true, attribute: 'hero-text' }) heroText: string = 'Nile Hero';
 
 	/**
 	 * The styles for nile-hero
@@ -32,29 +39,48 @@ export class NileHero extends NileElement {
 	}
 
 	/* #endregion */
-
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateComplete.then(() => {
+			this.updateOnCollapseChange();
+		});
+	}
 	/* #region Methods */
 
+	@watch('collapse')
+	updateOnCollapseChange(){
+		if(!this.heroContainer) return;
+		const heroHeaderHeight=this.heroHeader.scrollHeight;
+		if(this.collapse){
+			this.heroContainer.style.height=heroHeaderHeight+'px';
+			this.heroContainer.style.background="var(--nile-hero-collapsed-background,#fff)";
+			this.heroContainer.style.borderBottom="1px solid #EAECF0";
+			this.imgContainer.style.opacity='0';
+		}
+		else{
+			this.heroContainer.style.height="var(--nile-hero-height)";
+			this.heroContainer.style.background="linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%)";
+			this.heroContainer.style.borderBottom='';
+			this.imgContainer.style.opacity='1';
+		}
+	}
 	/**
 	 * Render method
 	 * @slot This is a slot test
 	 */
 	public render(): TemplateResult {
 		return html`
+		<div class="hero__container">
 			<div class="hero__body">
-				<div class="hero__header">
-					<span class="icon__container">
-						<nile-icon name="${this.icon}" ></nile-icon>
-					</span>
-					<span class="hero__text">${this.heroText}</span>
-				</div>
+				<nile-hero-header hero-text="${this.heroText}" icon="${this.icon}"></nile-hero-header>
 				<div class="hero__slot">
 					<slot></slot>
 				</div>
 			</div>
-			<div class="hero__img__container">
+			<div class="hero__img__container" id="hero__img__container">
 				<img src="${this.imgSrc}" class="hero__img">
 			</div>
+		</div>
 		`;
 	}
 

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

@@ -0,0 +1 @@
+export { NileHeroHeader } from './nile-hero-header';

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

@@ -0,0 +1,42 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * HeroHeader CSS
+ */
+export const styles = css`
+	
+	:host {
+		width:100%;
+		display: flex;
+		align-items: center;
+		padding:16px 48px;
+		gap: 16px;
+	}
+
+	.icon__container {
+		height: 32px;
+		aspect-ratio: 1 / 1;
+		place-items: center;
+		display: grid;
+		border-radius: 8px;
+		border: 1px solid #EAECF0;
+		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
+	}
+
+	.hero__text {
+		color: var(--nile-hero-text-color);
+		font-size: var(--nile-hero-text-font-size);
+		line-height: var(--nile-hero-text-line-height);
+		font-style: normal;
+		font-weight: var(--nile-hero-text-font-weight);
+	}
+`;
+
+export default [styles];

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

@@ -0,0 +1,59 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-hero-header.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile hero-header component.
+ *
+ * @tag nile-hero-header
+ *
+ */
+@customElement('nile-hero-header')
+export class NileHeroHeader extends NileElement {
+	@property({ reflect: true }) icon: string = 'action';
+	@property({ reflect: true, attribute: 'hero-text' }) heroText: string = 'Nile Hero';
+
+	/**
+	 * The styles for nile-hero-header
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+				<span class="icon__container">
+					<nile-icon size="16" name="${this.icon}"></nile-icon>
+				</span>
+				<span class="hero__text">${this.heroText}</span>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileHeroHeader;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-hero-header': NileHeroHeader;
+  }
+}

package/src/nile-icon/icons/svg/data-insight.ts

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

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

@@ -97,6 +97,7 @@ export { default as create } from './create';
 export { default as createuser } from './createuser';
 export { default as custom } from './custom';
 export { default as dashboard } from './dashboard';
+export { default as datainsight } from './data-insight';
 export { default as datatypearray } from './data-type-array';
 export { default as datatypeboolean } from './data-type-boolean';
 export { default as datatypeexpression } from './data-type-expression';
@@ -240,6 +241,7 @@ export { default as if } from './if';
 export { default as ifelse } from './ifelse';
 export { default as image } from './image';
 export { default as immutable } from './immutable';
+export { default as infocircle } from './info-circle';
 export { default as infoicon } from './info-icon';
 export { default as infoicon1 } from './info-icon1';
 export { default as info } from './info';
@@ -436,6 +438,7 @@ export { default as updateuser } from './updateuser';
 export { default as updown } from './updown';
 export { default as upgrade } from './upgrade';
 export { default as upload } from './upload';
+export { default as user01 } from './user-01';
 export { default as user03 } from './user-03';
 export { default as useranalysisicon } from './user-analysis-icon';
 export { default as usercircle } from './user-circle';

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

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

package/src/nile-icon/icons/svg/user-01.ts

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

package/src/nile-icon/index.ts

@@ -92,6 +92,7 @@ export class NileIcon extends LitElement {
       align-items: center;
       justify-content: center;
       contain: content;
+      --nile-svg-stroke-width: 1.3;
     }
 
     .nds-icon {
@@ -104,7 +105,6 @@ export class NileIcon extends LitElement {
       height: var(--nile-svg-height);
       width: var(--nile-svg-width);
       stroke: var(--nile-svg-stroke);
-      stroke-width: var(--nile-svg-stroke-width);
     }
 
     .nds-icon svg path {
@@ -114,6 +114,7 @@ export class NileIcon extends LitElement {
     .stroke svg path {
       fill: none !important;
       stroke: var(--nile-svg-fill) !important;
+      stroke-width: var(--nile-svg-stroke-width);
     }
 
     .nds-icon--push {

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

@@ -27,13 +27,13 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: 12px;
+    margin-bottom: 6px;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
+    font-weight: 500;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
@@ -198,10 +198,10 @@ export const styles = css`
     -webkit-appearance: none;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-sans-serif);
-    font-size: 14px;
+    font-size: 16px;
     font-style: normal;
     font-weight: 400;
-    line-height: 14px;
+    line-height: 24px;
     letter-spacing: 0.2px;
   }
 
@@ -289,8 +289,7 @@ export const styles = css`
   .input--standard:focus {
     border-radius: 4px;
     border: 1px solid #85aad1;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(133, 170, 209, 0.24);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   /*
@@ -327,7 +326,7 @@ export const styles = css`
   .input--medium {
     border-radius: 0.25rem;
     font-size: var(--nile-input-font-size-medium);
-    height: 38px;
+    height: 40px;
   }
 
   .input--medium .input__control {

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

@@ -16,9 +16,10 @@ export const styles = css`
     position: relative;
     background: hsl(0, 0%, 100%);
     border: solid 1px hsl(240 5.9% 90%);
-    border-radius: 0.25rem;
+    border-radius: 6px;
     overflow: auto;
     overscroll-behavior: none;
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
   
   .search__wrapper {