@aquera/nile-elements 0.1.57-beta-1.7 → 0.1.57-beta-1.9

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

@@ -52,20 +52,20 @@ export class NileEmptyState extends NileElement {
    */
   public render(): TemplateResult {
     return html`
-		<div class="${classMap({
+		<div part="container" class="${classMap({
       'empty-state': true,
       'empty-state--sm': this.size == 'sm',
       'empty-state--md': this.size == 'md',
       'empty-state--lg': this.size == 'lg'
     })}">
-      <div class="${classMap({ 'empty-state__body': true })}">
+      <div  part="body" class="${classMap({ 'empty-state__body': true })}">
 
         ${this.variant == 'content' ? html`
-        <div class="empty-state__body--content">
+        <div part="content-image" class="empty-state__body--content">
           
-          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}"></div>
+          <div part="image" src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}"></div>
           ${!this.icon ? nothing : html`
-          <div class="empty-state__img__icon">
+          <div part="icon-wrapper" 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>`
           }
@@ -73,26 +73,26 @@ export class NileEmptyState extends NileElement {
         }
 				
 			  ${this.variant == 'tonal' ? html`
-				<div class="empty-state__body--tonal">
+				<div part="tonal-body" class="empty-state__body--tonal">
 					<nile-icon name="${this.icon}" size="40"></nile-icon>
 				</div>`: nothing
         }
 
 			  ${this.variant == 'flat' ? html`
-				<div class="empty-state__body--flat">
+				<div part="flat-body" 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-section">
-          <div class="empty-state__text">${this.text}</div>
-          <div class="empty-state__subtext">${this.subText}</div>
+        <div part="text-section" class="empty__state__text-section">
+          <div part="text" class="empty-state__text">${this.text}</div>
+          <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
         </div>
 			</div>
 
-			<div class="empty-state-actions">
+			<div part="actions" class="empty-state-actions">
 				<slot></slot>
 			</div>
 		</div>

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

@@ -35,7 +35,6 @@ export class NileErrorNotification extends LitElement {
   @property({ type: String, reflect: true  }) errorMessage: string = '';
 
   @property({ type: String, reflect: true  }) color: string = '';
-  
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('color')){
       this.style.setProperty('--indication-color',this.color)
@@ -52,7 +51,7 @@ export class NileErrorNotification extends LitElement {
    */
   public render(): TemplateResult {
     return html`
-      <div class="nile-error-notification">
+      <div class="nile-error-notification" part="container">
         <nile-icon
           name="info2"
           size="14"
@@ -60,7 +59,9 @@ export class NileErrorNotification extends LitElement {
           part="icon"
           color="var(--indication-color)"
         ></nile-icon>
-        ${this.errorMessage}
+        <span part="message">
+          ${this.errorMessage}
+        </span>
       </div>
     `;
   }

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

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

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

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

package/src/nile-icon/icons/svg/column-add.ts

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

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

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

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

@@ -32,6 +32,7 @@ export { default as arrowleft } from './arrowleft';
 export { default as arrowright } from './arrowright';
 export { default as arrowup } from './arrowup';
 export { default as attributemapanalysisicon } from './attribute-map-analysis-icon';
+export { default as attribute } from './attribute';
 export { default as attributemap } from './attributemap';
 export { default as automationdetails } from './automation-details';
 export { default as back } from './back';
@@ -60,6 +61,7 @@ export { default as checkdone01 } from './check-done-01';
 export { default as checkdone02 } from './check-done-02';
 export { default as chevronleftdouble } from './chevron-left-double';
 export { default as chevronup } from './chevron-up';
+export { default as class } from './class';
 export { default as clockcheck } from './clock-check';
 export { default as clockrewind } from './clock-rewind';
 export { default as clock } from './clock';
@@ -70,6 +72,7 @@ export { default as collapse1 } from './collapse-1';
 export { default as collapse } from './collapse';
 export { default as color } from './color';
 export { default as column02 } from './column-02';
+export { default as columnadd } from './column-add';
 export { default as columns03 } from './columns-03';
 export { default as combo1 } from './combo1';
 export { default as comment } from './comment';
@@ -173,6 +176,7 @@ export { default as fullunion } from './full-union';
 export { default as fullscreen } from './fullscreen';
 export { default as fullscreenexit } from './fullscreenexit';
 export { default as fullscreenshrink } from './fullscreenshrink';
+export { default as function } from './function';
 export { default as funnel02 } from './funnel-02';
 export { default as funnel } from './funnel';
 export { default as gateway } from './gateway';
@@ -221,6 +225,7 @@ export { default as intersection } from './intersection';
 export { default as js } from './js';
 export { default as keyperformanceindicator } from './key-performance-indicator';
 export { default as keyboard01 } from './keyboard-01';
+export { default as keyword } from './keyword';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree02 } from './layers-three-02';

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

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

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

@@ -18,14 +18,10 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
-  }
-
-  .pagination-wrapper.v2 {
-    justify-content: flex-start;
-    gap: var(--nile-spacing-spacing-lg);
+    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;
   }
 
+ 
   .pagination-wrapper.v2 .pager-container {
     flex-direction: row;
     align-items: center;
@@ -41,12 +37,79 @@ export const styles = css`
     font-weight: var(--nile-font-weight-regular);
   }
 
+ 
+  .pagination-wrapper.compact {
+    min-width: 324px;
+    justify-content: space-between;
+  }
+
+
+
+.pagination-wrapper.compact .range-text {
+  margin-right: var(--nile-spacing-spacing-md);
+  white-space: nowrap;
+}
+
+
+.pagination-wrapper.compact .pager-container {
+  gap: var(--nile-spacing-spacing-md);
+}
+
+
+  .pagination-wrapper.compact .pager-container {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-spacing-md);
+  }
+
+  .pagination-wrapper.compact .page-size-dropdown ::part(base) {
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+  }
+
+  .pagination-wrapper.compact .page-size-dropdown .chevron {
+    transition: transform 0.2s;
+  }
+  .pagination-wrapper.compact .page-size-dropdown .open .chevron {
+    transform: rotate(180deg);
+  }
+
+  .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {
+    display: none;
+  }
+
+  .compact-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-spacing-xs);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .page-dropdown .current-page-btn {
+    padding: 2px;
+    font-size: var(--nile-font-size-small);
+  }
+
+  nile-button.current-page-btn::part(base){
+    min-width: 51px;
+  }
+
+  nile-button.current-page-btn::part(base):active {
+  min-width: 51px;
+}
+
   .pager-container {
     display: flex;
     align-items: center;
     gap: var(--nile-spacing-spacing-3xl);
   }
 
+.pagination-wrapper.compact .pager-container {
+  gap: var(--nile-spacing-xxs) !important;
+}
+
   .range-text {
     font-size: var(--nile-font-size-small);
     color: var(--nile-colors-dark-900);
@@ -75,63 +138,113 @@ export const styles = css`
     overflow-y: auto;
     width: 66px;
   }
+    .down-scroll-wrapper {
+    max-height: 150px;
+    overflow-y: auto;
+    width: 60px;
+  }
 
-  .ellipsis-dropdown nile-menu {
+
+    .compact-scroll-wrapper {
+    max-height: 160px;
+    overflow-y: auto;
+    width: 60px;
+  }
+  .compact-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+  
+    .page-size-dropdown nile-menu {
     overflow-y: auto;
     padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
- 
+      .compact-scroll-wrapper1 {
+    max-height: 164px;
+    overflow-y: auto;
+    width: 60px;
+  }
 
-  .page-size-menu {
-    max-height: 144px;
+  .compact-dropdown1 nile-menu {
     overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+  
+    .compact-dropdown1 nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
-  ul.pagination li:first-child {
-    margin-right: var(--nile-spacing-spacing-xs);
+
+  .ellipsis-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
-  ul.pagination li:last-child {
-    margin-left: var(--nile-spacing-spacing-md);
+
+  .page-size-menu {
+    max-height: 144px;
+    overflow-y: auto;
   }
 
+.pagination-wrapper.fluid ul.pagination li:first-child {
+  margin-right: var(--nile-spacing-spacing-xs);
+}
+.pagination-wrapper.fluid ul.pagination li:last-child {
+  margin-left: var(--nile-spacing-spacing-md);
+}
+
+
   .page-size-label {
     font-size: var(--nile-type-scale-3);
     color: var(--nile-colors-dark-500);
     margin-left: var(--nile-spacing-spacing-md);
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular); 
   }
 
   nile-button::part(base) {
-      min-width: 32px;
-  height: 32px;
-  padding: 0px 6px;
-  box-shadow: none;
-}
+    min-width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-shadow: none;
+  }
 
   nile-button::part(base):active {
-  min-width: 32px;
-  height: 32px;
-  padding: 0px 6px;
-  box-shadow: none;
-  border:none;
-}
- 
- nile-button.down::part(base){
-  min-width: 62px;
-
- }
-.page-size-dropdown .chevron {
-  transition: transform 0.2s;
-}
-.page-size-dropdown .open .chevron {
-  transform: rotate(180deg);
-}
-
+    min-width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-shadow: none;
+    border: none;
+  }
 
+  nile-button.down::part(base) {
+    min-width: 62px;
+  }
 
+  nile-button.compactbtn:part(base){
+    background-color: red;
+  }
+  .page-size-dropdown .chevron {
+    transition: transform 0.2s;
+  }
+  .page-size-dropdown .open .chevron {
+    transform: rotate(180deg);
+  }
+ 
+  .pagination-wrapper.compact .compact-dropdown .chevron,
+  .pagination-wrapper.compact .compact-dropdown1 .chevron {
+    transition: transform 0.2s;
+  }
+  .pagination-wrapper.compact .compact-dropdown .down.open .chevron,
+  .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {
+    transform: rotate(180deg);
+  }
 
 
 `;