globuswebcomponents 0.3.6 → 0.3.7

package/dist/collection/components/gb-file-upload-item-base/gb-file-upload-item-base.css

@@ -218,6 +218,14 @@
         --color-text-selected: var(--blue-300);
     }
 
+    [data-theme="light"] {
+        --color-text-danger-bold: var(--brandRed-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-bold: var(--brandRed-100);
+    }
+
     [data-theme="light"] {
         --color-text-danger: var(--brandRed-700);
     }
@@ -226,6 +234,14 @@
         --color-text-danger: var(--brandRed-700);
     }
 
+     [data-theme="light"] {
+        --color-text-danger-subtle: var(--brandRed-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-subtle: var(--brandRed-300);
+    }
+
     [data-theme="light"] {
         --color-text-danger-inverse: var(--base-white);
     }
@@ -235,11 +251,11 @@
     }
 
     [data-theme="light"] {
-        --color-text-danger-bold: var(--brandRed-800);
+        --color-text-warning-bold: var(--warning-800);
     }
 
     [data-theme="dark"] {
-        --color-text-danger-bold: var(--brandRed-100);
+        --color-text-warning-bold: var(--warning-100);
     }
 
     [data-theme="light"] {
@@ -251,52 +267,53 @@
         --color-text-warning: var(--warning-300);
     }
 
+
     [data-theme="light"] {
-        --color-text-warning-bold: var(--warning-800);
+        --color-text-warning-subtle: var(--warning-500);
     }
 
     [data-theme="dark"] {
-        --color-text-warning-bold: var(--warning-100);
+        --color-text-warning-subtle: var(--warning-400);
     }
 
     [data-theme="light"] {
-        --color-text-warning-subtle: var(--warning-500);
+        --color-text-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-text-warning-subtle: var(--warning-400);
+        --color-text-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-text-sucess: var(--success-600);
+        --color-text-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess: var(--success-300);
+        --color-text-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-text-sucess-bold: var(--success-800);
+        --color-text-success-subtle: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess-bold: var(--success-100);
+        --color-text-success-subtle: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-text-discovery: var(--blueLight-800);
+        --color-text-discovery-bold: var(--blueLight-800);
     }
 
     [data-theme="dark"] {
-        --color-text-discovery: var(--blueLight-100);
+        --color-text-discovery-bold: var(--blueLight-100);
     }
 
     [data-theme="light"] {
-        --color-text-discovery-bold: var(--blueLight-800);
+        --color-text-discovery: var(--blueLight-800);
     }
 
     [data-theme="dark"] {
-        --color-text-discovery-bold: var(--blueLight-100);
+        --color-text-discovery: var(--blueLight-100);
     }
 
     [data-theme="light"] {
@@ -308,19 +325,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-information: var(--blue-600);
+        --color-text-information-bold: var(--blue-800);
     }
 
     [data-theme="dark"] {
-        --color-text-information: var(--blue-300);
+        --color-text-information-bold: var(--blue-100);
     }
 
     [data-theme="light"] {
-        --color-text-information-bold: var(--blue-800);
+        --color-text-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-text-information-bold: var(--blue-100);
+        --color-text-information: var(--blue-300);
     }
 
     [data-theme="light"] {
@@ -332,19 +349,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-purple: var(--purple-600);
+        --color-text-purple-bold: var(--purple-800);
     }
 
     [data-theme="dark"] {
-        --color-text-purple: var(--purple-300);
+        --color-text-purple-bold: var(--purple-100);
     }
 
     [data-theme="light"] {
-        --color-text-purple-bold: var(--purple-800);
+        --color-text-purple: var(--purple-600);
     }
 
     [data-theme="dark"] {
-        --color-text-purple-bold: var(--purple-100);
+        --color-text-purple: var(--purple-300);
     }
 
     [data-theme="light"] {
@@ -356,19 +373,27 @@
     }
 
     [data-theme="light"] {
-        --color-text-pink: var(--purple-600);
+        --color-text-pink-bold: var(--pink-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--pink-600);
     }
 
     [data-theme="dark"] {
-        --color-text-pink: var(--purple-300);
+        --color-text-pink: var(--pink-300);
     }
 
     [data-theme="light"] {
-        --color-text-pink-subtle: var(--purple-500);
+        --color-text-pink-subtle: var(--pink-500);
     }
 
     [data-theme="dark"] {
-        --color-text-pink-subtle: var(--purple-400);
+        --color-text-pink-subtle: var(--pink-400);
     }
 
 
@@ -443,11 +468,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-darkBlue: var(--brandDarkBlue-500);
+        --color-icon-brandDarkBlue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-icon-darkBlue: var(--brandDarkBlue-200);
+        --color-icon-brandDarkBlue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -459,35 +484,35 @@
     }
 
     [data-theme="light"] {
-        --color-icon-danger: var(--brandRed-700);
+        --color-icon-selected: var(--blue-500);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger: var(--brandRed-200);
+        --color-icon-selected: var(--blue-300);
     }
 
     [data-theme="light"] {
-        --color-icon-danger-inverse: var(--base-white);
+        --color-icon-danger-bold: var(--brandRed-800);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger-inverse: var(--brandRed-950);
+        --color-icon-danger-bold: var(--brandRed-100);
     }
 
     [data-theme="light"] {
-        --color-icon-danger-bold: var(--brandRed-800);
+        --color-icon-danger: var(--brandRed-700);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger-bold: var(--brandRed-100);
+        --color-icon-danger: var(--brandRed-200);
     }
 
     [data-theme="light"] {
-        --color-icon-warning: var(--warning-600);
+        --color-icon-danger-inverse: var(--base-white);
     }
 
     [data-theme="dark"] {
-        --color-icon-warning: var(--warning-300);
+        --color-icon-danger-inverse: var(--brandRed-950);
     }
 
     [data-theme="light"] {
@@ -499,27 +524,27 @@
     }
 
     [data-theme="light"] {
-        --color-icon-sucess: var(--success-600);
+        --color-icon-warning: var(--warning-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-sucess: var(--success-300);
+        --color-icon-warning: var(--warning-300);
     }
 
     [data-theme="light"] {
-        --color-icon-sucess-bold: var(--success-800);
+        --color-icon-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-icon-sucess-bold: var(--success-100);
+        --color-icon-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-icon-discovery: var(--blueLight-600);
+        --color-icon-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-discovery: var(--blueLight-300);
+        --color-icon-success: var(--success-300);
     }
 
     [data-theme="light"] {
@@ -531,11 +556,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-information: var(--blue-600);
+        --color-icon-discovery: var(--blueLight-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-information: var(--blue-300);
+        --color-icon-discovery: var(--blueLight-300);
     }
 
     [data-theme="light"] {
@@ -547,11 +572,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-purple: var(--purple-600);
+        --color-icon-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-purple: var(--purple-300);
+        --color-icon-information: var(--blue-300);
     }
 
     [data-theme="light"] {
@@ -563,11 +588,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-pink: var(--pink-600);
+        --color-icon-purple: var(--purple-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-pink: var(--pink-300);
+        --color-icon-purple: var(--purple-300);
     }
 
     [data-theme="light"] {
@@ -575,7 +600,15 @@
     }
 
     [data-theme="dark"] {
-        --color-icon-pink: var(--pink-100);
+        --color-icon-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-pink: var(--pink-300);
     }
 
     /* ----------------Border Color --------------- */
@@ -653,11 +686,11 @@
     }
 
     [data-theme="light"] {
-        --color-border-darkBlue: var(--brandDarkBlue-500);
+        --color-border-brandDarkBlue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-border-darkBlue: var(--brandDarkBlue-200);
+        --color-border-brandDarkBlue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -733,35 +766,35 @@
     }
 
     [data-theme="light"] {
-        --color-border-sucess-bold: var(--success-800);
+        --color-border-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-bold: var(--success-100);
+        --color-border-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-border-sucess: var(--success-600);
+        --color-border-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess: var(--success-300);
+        --color-border-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-border-sucess-subtle: var(--success-200);
+        --color-border-success-subtle: var(--success-200);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-subtle: var(--success-800);
+        --color-border-success-subtle: var(--success-800);
     }
 
     [data-theme="light"] {
-        --color-border-sucess-subtler: var(--success-100);
+        --color-border-success-subtler: var(--success-100);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-subtler: var(--success-900);
+        --color-border-success-subtler: var(--success-900);
     }
 
     [data-theme="light"] {
@@ -939,11 +972,11 @@
     }
 
     [data-theme="light"] {
-        --color-background-darkblue: var(--brandDarkBlue-500);
+        --color-background-brandDarkblue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-background-darkblue: var(--brandDarkBlue-200);
+        --color-background-brandDarkblue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -1332,11 +1365,11 @@
 
     /* ----------------Surface Color --------------- */
     [data-theme="light"] {
-        --color-surface-secondary: var(--gray-50);
+        --color-surface-bold: var(--gray-25);
     }
 
     [data-theme="dark"] {
-        --color-surface-secondary: var(--gray-950);
+        --color-surface-bold: var(--gray-950);
     }
 
     [data-theme="light"] {
@@ -1362,9 +1395,6 @@
     [data-theme="dark"] {
         --color-surface-pressed: var(--gray-700);
     }
-
- 
-
 }
 
 /* -----------------Shadow and Blur----------------- */

package/dist/collection/components/gb-file-upload-item-base/gb-file-upload-item-base.js

@@ -18,7 +18,7 @@ export class GbFileUploadItemBase {
         }
     }
     render() {
-        return (h("div", { key: 'ab09e059bcc1b113d67cd82ac6f600f9a26aee68', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'in_progress' && (h("div", { key: '1a6cf253cb7428be1fad8a4a80bba35967571a2b', class: `in_progress_div ${this.heightSize}` }, h("div", { key: 'd1271ed155689bab49a8439e070a41350818b8f2', class: "file_icon" }), h("div", { key: '545488f90c277a2f1e646dc3238b5f9c0b2e7533', class: "in_progress_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '9ca115baeac85e10856a17d1ded92bb742ea625c', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '3fca0c7baf9d4e2a1d8eced833d7375e8175e2fc', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'f5e2e8d777a6456bef100603ca422f5966b5ce76', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '89a278855665137aadd54d6e3a29990d823e9b83', size: "sm", color: "gray", class: "close_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '84002d132a6ac00bea7e60383eed6a968c9721dc', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'ae139354764b7911e691fd0ef7e05d9799eeafb8', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'b1a0389f0eaf8f7e784dddbb961c0a617868f774', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '6ef434b86af37a9dfb9dd5421d57a7696db62438', size: "sm", color: "gray", class: "close_button" })))))), this.state === 'complete' && (h("div", { key: '8f17d45b259c512736e4aca1cc21ebbfa1dd3e75', class: `complete ${this.heightSize}` }, h("div", { key: '4da1e5a784a9f258d3184af1a11f14bbd4bad046', class: "file_icon" }), h("div", { key: '300182d1c106749b1924377d582bd88775a0d969', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '9702b13e5f449e909da462d4d669d984d283bdd7', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'dcf98cc04b93cb3808fd60b421d5980f19877038', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '9706ba656b365dc7bd247d8932aecf8434e9eb99', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '601869e520c6e46fa6a1f48f225f10769e6bd62d', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '62a9e24b6f3fa7bc10e770d9f28bb0d7c2a49c04', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: 'e376213949203aec6e1dbaac0a4d1c27f45e6569', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: 'e45290e6f43fa53d919f6de3f0078da06ccbf187' }, "Clear"))))))), this.state === 'error' && (h("div", { key: '1c547a295ef7a2cb78ca6fd07dfb9a6e9cdb1c0a', class: `error ${this.heightSize}` }, h("div", { key: '4e16aa0348abe7b303c838dc3f810638d978d08f', class: "file_icon" }), h("div", { key: 'ba89f73c4a8008229c8d1036875dee89b09c8fe4', class: "error_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '4a19b601acd9f2b4476f6aca86de879aaad7f988', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'e9f9f2787bec32a5c594d78d9110947df93b566d', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("gb-button", { key: 'f6a253baef7bf6e5bfb38091e239302890681034', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true }, h("p", { key: '047e0384ccf40557e1e6428b5f8fd4688179eb09' }, "Try again")), h("gb-button", { key: '5a48e90be135c09497449ed98618e70139325ab1', size: "sm", hierarchy: "tertiary_gray", icon: "only", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: 'f1cfd917aa3c2f06462e5e62a8caf201776f2e99', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'b35db2a2cfc9e4b5e0bd94c4f2b07b67b474c9f2', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("div", { key: 'eb97f98b80d8c76c9a39ce3a6742cc30a0651db6', class: "btns" }, h("test-button", { key: '79c757adc6c62fc9c02222ac73479b4118a0b3cb', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '1d76e6068749cf99fe62345e03f27e05d4d2b265' }, "Clear")), h("div", { key: 'a7faa9958702d3da8a6183cef29a6a3e381fd404', class: "btn" }, h("test-button", { key: '0ced8e4e8f5d8f729a9cb1debe92cc79a6438bd6', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true, class: "btn" }, h("p", { key: 'd6b2618de7ce9b52e516261362fe53b198d9ae3f' }, "Try again")))))))))));
+        return (h("div", { key: 'a9589d22049584d4e0a7a49a742c1f743d22182b', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'in_progress' && (h("div", { key: '35e1796f88f430abcd8b0e223e51ff4df71c4079', class: `in_progress_div ${this.heightSize}` }, h("div", { key: '0d31b9e6a252e8d1088cd74ad667246bc16e1385', class: "file_icon" }), h("div", { key: '0f63f549b29b2275944c1dd670b62930f8f80a17', class: "in_progress_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '5378a070916a5390dbcff2135441de1218d4d0f3', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '888782289ec642ace661b3031ef54f3ccfae75d2', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'b2093e1f3009562586d28c8d4bf15137b14ff492', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '72ac79bac462c8d01576f6212751d4ff877237f5', size: "sm", color: "gray", class: "close_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '8d48034ab0871f88593ac698fe6fe4690a917a03', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'abb2563536e161dd72a60c0ea2fc74b78f0f91af', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'af7c7cc5fb73885b0ab3c79cc4cbac88c5d244f6', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '74ef7bd9528fb8e996ffa906f4afd8e8687b95c3', size: "sm", color: "gray", class: "close_button" })))))), this.state === 'complete' && (h("div", { key: '47985d24bd7ab3acf580e51041a25bb1409cef70', class: `complete ${this.heightSize}` }, h("div", { key: 'dba1a5c4bc012bc919f8063b2d2389e63094aff2', class: "file_icon" }), h("div", { key: '5ce54893c676a91b8124f11963d54ff1ebf58ca5', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'd8e09c5ab05ac66add48a7d9b6721ad8b4fac4c5', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '4abab0a91e348629cadad0dfd64bed93e798342a', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '392208b5e7a60b865224bdc27561dce5be52fe17', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: 'ddf870c9b618891175d33a955bf77e6a70d582dc', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '5fa503726aee27aba02888214957a173325f53a8', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: 'c3e642d656fae17d63a70c03dde9a68a405de3c0', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '6c96ba1c0b9ee150eff8b8e7055a45b8855eff57' }, "Clear"))))))), this.state === 'error' && (h("div", { key: '4947c7840888d848ca2dd5b5ad3a9239dffef86f', class: `error ${this.heightSize}` }, h("div", { key: '4f2d79de478d12eb39d50a9e741f81181051699e', class: "file_icon" }), h("div", { key: '0ac932c4a1465efe4f537e23f67ac13205e27847', class: "error_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'd4ee05812ae371de5849c703f64a7de84876ad4c', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '318c6de5e5ba40cc86898129630f4ce8a888be45', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("gb-button", { key: '0e61db394c8272a54458f3e5889c86b6a3199a61', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true }, h("p", { key: '3389e781b526863d26245d1e44dc08f88df9384e' }, "Try again")), h("gb-button", { key: 'cebfe5ab9771b131c3ac95e5abd0c640fc468345', size: "sm", hierarchy: "tertiary_gray", icon: "only", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '6e04dc7800bd70f9734f430f386edca55580f675', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '82b01334021ae6c0f263d3d42a62db32660e69ed', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("div", { key: '735fb8e916f1757e4ed51734e39168dd354bb556', class: "btns" }, h("test-button", { key: 'f914fcff9181efbed32d767126f59e871ed37b50', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '68cd10b50940925aa96f5416aef1c68bf9c32a13' }, "Clear")), h("div", { key: '74439ded0e85469a58ad967335cb337991ba019f', class: "btn" }, h("test-button", { key: '6e29671d62e40423dd3065df4025dcb4b1a18c1d', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true, class: "btn" }, h("p", { key: '92ca82ce20655620cbd2cc9feb189c20b5b6ff1a' }, "Try again")))))))))));
     }
     static get is() { return "gb-file-upload-item-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-header/gb-header.css

@@ -0,0 +1,24 @@
+.header_div{
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    border-bottom: 0.7px solid var(--color-border-subtle, #CDD5DF);
+    background: var(--color-surface, #FFFFFF);
+}
+
+.content{
+    display: flex;
+    height: 4.5rem;
+    padding: 0rem 2rem;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+}
+
+.inner_content{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-Positive-spacing-4, 1rem);
+    flex: 1 0 0;
+}

package/dist/collection/components/gb-header/gb-header.js

@@ -0,0 +1,114 @@
+import { h } from "@stencil/core";
+import { StateEnum } from "../../models/reusableModels";
+export class GbHeader {
+    constructor() {
+        this.state = undefined;
+        this.showIndicator = false;
+        this.text = false;
+        this.placeholder = false;
+    }
+    componentDidLoad() {
+        const initials = this.el.querySelector("[slot='initials']");
+        if (initials) {
+            initials.classList.add('text-md-semi-bold');
+        }
+    }
+    render() {
+        return (h("div", { key: '53f1bf3c88cc2dbda3c53366f8d4fd7ea5c7f7ec', class: `header_div` }, h("div", { key: 'd26bf028e7ec21e1b1ea0f6b0d00cc789248f00a', class: "content" }, h("div", { key: '7974b6405e5c8904a663f8031b540114cb9758e5', class: "inner_content" }, h("gb-header-icon", { key: '82c7298f647b0f82a9dc1066d771b9d53cb7a2cf', state: StateEnum.Default, icon: "build/assets/help-circle.svg" }), h("gb-header-icon", { key: '89734921a668399151659a331d9909dfdddc5576', state: this.state, icon: "build/assets/notification-03.svg", "show-indicator": this.showIndicator }), h("gb-avatar", { key: 'af3d865e923684506d4c8cb5712a4a5a3c0d2370', size: "md", text: this.text, placeholder: this.placeholder }, this.text ? (h("slot", { slot: "initials", name: "initials" })) : (h("slot", { name: "image", slot: "image" })))))));
+    }
+    static get is() { return "gb-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateEnum",
+                    "resolved": "StateEnum.Default | StateEnum.Disabled",
+                    "references": {
+                        "StateEnum": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "showIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-indicator",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "text": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-header.js.map

package/dist/collection/components/gb-header/gb-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,OAAO,QAAQ;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;IAGpC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,YAAY;YACtB,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,eAAe;oBACxB,uEAAgB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAC,8BAA8B,GAAkB;oBAC/F,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,kCAAkC,oBAAiB,IAAI,CAAC,aAAa,GAAmB;oBAChI,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAChE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAAC,CAC9F,CACR,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() placeholder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`header_div`}>\r\n        <div class=\"content\">\r\n          <div class=\"inner_content\">\r\n            <gb-header-icon state={StateEnum.Default} icon=\"build/assets/help-circle.svg\"></gb-header-icon>\r\n            <gb-header-icon state={this.state} icon=\"build/assets/notification-03.svg\" show-indicator={this.showIndicator}></gb-header-icon>\r\n            <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder}>\r\n              {this.text ? (<slot slot=\"initials\" name=\"initials\"></slot>) : (<slot name=\"image\" slot=\"image\"></slot>)}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}