globuswebcomponents 0.3.4 → 0.3.6

package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.js

@@ -4,7 +4,7 @@ export class GbMegaInputField {
         this.size = undefined;
     }
     render() {
-        return (h("input", { key: '6efddc74b26772eacc8eaa72219725ffa2ddc0db', class: this.size, type: "number", placeholder: "0" }));
+        return (h("input", { key: 'c7af33feef77401dc89f26fa5013da5e15690fd1', class: this.size, type: "number", placeholder: "0" }));
     }
     static get is() { return "gb-megainput-field"; }
     static get encapsulation() { return "shadow"; }
@@ -25,7 +25,7 @@ export class GbMegaInputField {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",

package/dist/collection/components/gb-notification-content/gb-notification-content.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-notification-content/gb-notification-content.js

@@ -8,7 +8,7 @@ export class GbNotificationContent {
     }
     render() {
         const iconSrc = getAssetPath(`assets/${this.icon}.svg`);
-        return (h("div", { key: '7a6ae6b63093ee5ae708b662b5d227d4eccc1a39', class: "notification-container" }, h("div", { key: '2d720823917e67112163e753e9283190b757dbd8', class: "notification-title" }, this.icon && (h("div", { key: 'c58790882cb93e32d64757ad586421fadbf0bf88', class: "icon" }, h("img", { key: '13fbcc6a5fa0b43bd671d9e9fbbe59fe8d9746f1', src: iconSrc, alt: "Icon" }))), h("label", { key: '6c15bcb5205ba500af5ccc222eeffee369205ae7' }, this.label), h("span", { key: '07f1e4561328012c88c394f2e6a32acd2639ba25', class: "time" }, this.time)), h("div", { key: 'b26cb02e8f1b2e238152c3122cac5a4fa71b75a8', class: "supporting-text" }, this.supportingText)));
+        return (h("div", { key: 'ee845e5834649e2197d510ad1f8db297db98d4e2', class: "notification-container" }, h("div", { key: 'e6a2b64a6c2992031fde6bd72339618eaf5b760f', class: "notification-title" }, this.icon && (h("div", { key: '7537f2aa848ae0793a8d0ba63e087e1fefb95fec', class: "icon" }, h("img", { key: 'dd29adb34d0514d2a05eebb2be3f3e12ca6301f6', src: iconSrc, alt: "Icon" }))), h("label", { key: 'e8f666bca58515cb49116b1fcaaab85257f1e7b7' }, this.label), h("span", { key: '0a3ad97a1f575c0791e2cab20dabaf0ad4159f61', class: "time" }, this.time)), h("div", { key: 'c2ea947b72967fc511dceb6e17340d5c19bc25d5', class: "supporting-text" }, this.supportingText)));
     }
     static get is() { return "gb-notification-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-notification-panel/gb-notification-panel.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-notification-panel/gb-notification-panel.js

@@ -26,7 +26,7 @@ export class GbNotificationPanel {
         notification.remove();
     }
     render() {
-        return (h("div", { key: 'ae6ca41e10df7c2b1d3d393d51cf6bde47531061', class: "notification-panel" }, this.state === 'empty' && this.notifications.length === 0 && (h("div", { key: 'f51ec81ab0899d5b264f8bcd4704f1126ad74d4e' }, h("div", { key: 'edb4d506646af94e82e8d64e43d8b413c947f2b6', class: "empty-state" }, h("img", { key: 'f0f3025b84ee9fada7bdc36ac3bdba02ebb4f15f', src: "./build/assets/panel_bell.svg", alt: "No notification" }), h("h3", { key: 'bd3604a42ccaaf2737218529d4dd2734c6ef1395' }, "No notification"), h("p", { key: '243bc2f971b0448fe3526e167f164aadc80f3705' }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.")), h("gb-button", { key: 'b9b1890ae2d87903fd2c007f827c44cc2c8dc170', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read"))), this.state === 'notification_dropdown' && (h("div", { key: 'f5a318700de5011bc84b45bd3b0cbd8c55c93cb7', class: "notification-dropdown" }, h("slot", { key: '2b133b9768b483f67bcf803361ab8d613128bc10' }), h("gb-button", { key: '4b3a69120eaba1053f2513d6abdf706f78c05857', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read")))));
+        return (h("div", { key: 'e86c6646d29833dbd29ca3dbaa63c9c590a5a85b', class: "notification-panel" }, this.state === 'empty' && this.notifications.length === 0 && (h("div", { key: 'ceab9f0431e345108159a60db864f9e14bc2af82' }, h("div", { key: 'dd6e30cd7bcefd4493c4319e644e2650c25767b6', class: "empty-state" }, h("img", { key: 'a629802a27c44a5904fb29be63138bde71fd30f5', src: "./build/assets/panel_bell.svg", alt: "No notification" }), h("h3", { key: '16935cdf6cfc9c4f362465e3e505f797c9a5d8df' }, "No notification"), h("p", { key: 'ce69a263ed597da4bdb292d5035cc1981ff4bd31' }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.")), h("test-button", { key: 'ea70ff2ec7cea59686a2996ea23eda8e89acbf33', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read"))), this.state === 'notification_dropdown' && (h("div", { key: 'dde960048e86f4df68b0c4cccec372233fdb5e90', class: "notification-dropdown" }, h("slot", { key: '42c2de4ed1470d2604c6c329e293c9cab36c9e85' }), h("test-button", { key: '05e58a99765463ad877065f8d1bc74d40ae587e5', size: 'sm', hierarchy: 'tertiary_color', "left-icon": 'blush_brush' }, "Mark all as read")))));
     }
     static get is() { return "gb-notification-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-notification-panel/gb-notification-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-notification-panel.js","sourceRoot":"","sources":["../../../src/components/gb-notification-panel/gb-notification-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,mBAAmB;IAQ5B;;6BALwC,EAAE;QAMtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B;IAED,gBAAgB;QACZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACtC,CAAC;IAGD,gBAAgB;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;QAEtF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;YAC1C,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;QAC9F,CAAC,CAAC,CAAC;IACP,CAAC;IAED,cAAc;;QACV,OAAO,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;IAED,aAAa;QACT,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;IACtE,CAAC;IAED,uBAAuB,CAAC,YAAyB;QAC7C,YAAY,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,oBAAoB;YAC1B,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,CAC1D;gBACI,4DAAK,KAAK,EAAC,aAAa;oBACpB,4DAAK,GAAG,EAAC,+BAA+B,EAAC,GAAG,EAAC,iBAAiB,GAAG;oBACjE,+EAAwB;oBACxB,2KAAmH,CACjH;gBACV,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,eAAW,aAAa,uBAA6B,CAC9F,CACT;YACA,IAAI,CAAC,KAAK,KAAK,uBAAuB,IAAI,CACvC,4DAAK,KAAK,EAAC,uBAAuB;gBAC9B,8DAAa;gBACb,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,eAAW,aAAa,uBAA6B,CAClG,CACT,CACC,CACP,CAAC;IACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h, State, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-notification-panel',\r\n    styleUrl: 'gb-notification-panel.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbNotificationPanel {\r\n    @Prop() state: 'empty' | 'notification_dropdown';\r\n\r\n    @State() notifications: HTMLElement[] = [];\r\n\r\n    // Add type definition for shadowRoot\r\n    private shadowRoot: ShadowRoot | null;\r\n\r\n    constructor() {\r\n        this.shadowRoot = null;\r\n    }\r\n\r\n    componentDidLoad() {\r\n        this.shadowRoot = this.shadowRoot;\r\n    }\r\n\r\n    @Listen('slotchange')\r\n    handleSlotChange() {\r\n        const slot = this.getSlotContent();\r\n        this.notifications = slot ? Array.from(slot.assignedElements()) as HTMLElement[] : [];\r\n        \r\n        this.notifications.forEach(notification => {\r\n        notification.addEventListener('click', this.handleNotificationClick.bind(this, notification));\r\n        });\r\n    }\r\n\r\n    getSlotContent() {\r\n        return this.shadowRoot?.querySelector('slot');\r\n    }\r\n\r\n    markAllAsRead() {\r\n        this.notifications.forEach(notification => notification.remove());\r\n    }\r\n\r\n    handleNotificationClick(notification: HTMLElement) {\r\n        notification.remove();\r\n    }\r\n\r\n    render(){\r\n        return (\r\n            <div class=\"notification-panel\">\r\n                {this.state === 'empty' && this.notifications.length === 0 && (\r\n                    <div>\r\n                        <div class=\"empty-state\">\r\n                            <img src=\"./build/assets/panel_bell.svg\" alt=\"No notification\" />\r\n                            <h3>No notification</h3>\r\n                            <p>Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.</p>\r\n                        </div>\r\n                    <gb-button size='sm' hierarchy='tertiary_color' left-icon='blush_brush'>Mark all as read</gb-button>\r\n                    </div> \r\n                )}  \r\n                {this.state === 'notification_dropdown' && (\r\n                    <div class=\"notification-dropdown\">\r\n                        <slot></slot> \r\n                        <gb-button size='sm' hierarchy='tertiary_color' left-icon='blush_brush'>Mark all as read</gb-button>\r\n                    </div>\r\n                )} \r\n            </div>\r\n          );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-notification-panel.js","sourceRoot":"","sources":["../../../src/components/gb-notification-panel/gb-notification-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,mBAAmB;IAQ5B;;6BALwC,EAAE;QAMtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B;IAED,gBAAgB;QACZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACtC,CAAC;IAGD,gBAAgB;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;QAEtF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;YAC1C,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;QAC9F,CAAC,CAAC,CAAC;IACP,CAAC;IAED,cAAc;;QACV,OAAO,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;IAED,aAAa;QACT,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;IACtE,CAAC;IAED,uBAAuB,CAAC,YAAyB;QAC7C,YAAY,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,oBAAoB;YAC1B,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,CAC1D;gBACI,4DAAK,KAAK,EAAC,aAAa;oBACpB,4DAAK,GAAG,EAAC,+BAA+B,EAAC,GAAG,EAAC,iBAAiB,GAAG;oBACjE,+EAAwB;oBACxB,2KAAmH,CACjH;gBACV,oEAAa,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,eAAW,aAAa,uBAA+B,CAClG,CACT;YACA,IAAI,CAAC,KAAK,KAAK,uBAAuB,IAAI,CACvC,4DAAK,KAAK,EAAC,uBAAuB;gBAC9B,8DAAa;gBACb,oEAAa,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,eAAW,aAAa,uBAA+B,CACtG,CACT,CACC,CACP,CAAC;IACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h, State, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-notification-panel',\r\n    styleUrl: 'gb-notification-panel.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbNotificationPanel {\r\n    @Prop() state: 'empty' | 'notification_dropdown';\r\n\r\n    @State() notifications: HTMLElement[] = [];\r\n\r\n    // Add type definition for shadowRoot\r\n    private shadowRoot: ShadowRoot | null;\r\n\r\n    constructor() {\r\n        this.shadowRoot = null;\r\n    }\r\n\r\n    componentDidLoad() {\r\n        this.shadowRoot = this.shadowRoot;\r\n    }\r\n\r\n    @Listen('slotchange')\r\n    handleSlotChange() {\r\n        const slot = this.getSlotContent();\r\n        this.notifications = slot ? Array.from(slot.assignedElements()) as HTMLElement[] : [];\r\n        \r\n        this.notifications.forEach(notification => {\r\n        notification.addEventListener('click', this.handleNotificationClick.bind(this, notification));\r\n        });\r\n    }\r\n\r\n    getSlotContent() {\r\n        return this.shadowRoot?.querySelector('slot');\r\n    }\r\n\r\n    markAllAsRead() {\r\n        this.notifications.forEach(notification => notification.remove());\r\n    }\r\n\r\n    handleNotificationClick(notification: HTMLElement) {\r\n        notification.remove();\r\n    }\r\n\r\n    render(){\r\n        return (\r\n            <div class=\"notification-panel\">\r\n                {this.state === 'empty' && this.notifications.length === 0 && (\r\n                    <div>\r\n                        <div class=\"empty-state\">\r\n                            <img src=\"./build/assets/panel_bell.svg\" alt=\"No notification\" />\r\n                            <h3>No notification</h3>\r\n                            <p>Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events.</p>\r\n                        </div>\r\n                    <test-button size='sm' hierarchy='tertiary_color' left-icon='blush_brush'>Mark all as read</test-button>\r\n                    </div> \r\n                )}  \r\n                {this.state === 'notification_dropdown' && (\r\n                    <div class=\"notification-dropdown\">\r\n                        <slot></slot> \r\n                        <test-button size='sm' hierarchy='tertiary_color' left-icon='blush_brush'>Mark all as read</test-button>\r\n                    </div>\r\n                )} \r\n            </div>\r\n          );\r\n    }\r\n}"]}

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

@@ -8,7 +8,7 @@ export class GbPagination {
         this.totalPages = '10';
     }
     render() {
-        return (h("div", { key: '9097b0db5a20250da94b6d7a745760da7324daa9', class: `pagination_div` }, this.type === 'card_minimal_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '0a65f7cc0974a09e1ffd3f3522b9903c33347bfd', class: "entries" }, h("p", { key: 'be419f8783c3eef70027fd1c16afc4c9b94c9673' }, "Entries"), h("input", { key: '4bda90978e4066187d24e42a2711595d0522203a', type: "text" })), h("div", { key: '8987354c40bb05ae448865d813618a57a0ca1d4d', class: "pages" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '1df19559976015da19dbaab1b236ca5d087346a7', class: "buttons" }, h("gb-button", { key: '56d99f9cc5340e948de50327f3e4ef2c98d76166', size: "sm", hierarchy: "secondary_gray", icon: "default" }, h("p", { key: 'f25809d0c6bdb9901061e981cc7786ce2a47bb8d' }, "Previous")), h("gb-button", { key: 'cbee2e2a9f4674ca70c8923aca5196541659114d', size: "sm", hierarchy: "secondary_gray", icon: "default" }, h("p", { key: '1fa4bae10a038f38f628eb517ebf6e6c5861a1ad' }, "Next"))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '5752bcbf3411367cc38e1b1dea094af3d8b0739b', class: "prev" }, h("gb-button", { key: '7f5d1dc3177a1da465ea3e9fcf033a92e882c7af', size: "sm", hierarchy: "secondary_gray", icon: "default" }, h("p", { key: '9896b39f91bee7d39ad92b432efe25bc52a4858a' }, "Previous"))), h("div", { key: '65d7ca48ccc6b131ab4927c8f2ccaf8844b0e31c', class: "pages" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '2bdc155ef65e8c521d64b2be18866b406a49f6f2', class: "next" }, h("gb-button", { key: '4377773556f96720402e8ada7bcc50697ad4f195', size: "sm", hierarchy: "secondary_gray", icon: "default" }, h("p", { key: '5fd9853a4b6219f8f47ea1c0d65ad7a986b4303e' }, "Next")))))));
+        return (h("div", { key: 'd986dc7b3c18891bff81b49cd978e6cce34e4565', class: `pagination_div` }, this.type === 'card_minimal_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'bc2c2c72099335bff2c6b2c786cc17b96d492b54', class: "entries" }, h("p", { key: '737e82cbaa2e772568b03dcea53f08a6d162fff9' }, "Entries"), h("input", { key: '6b3a839201cf30add9e21f3788cae49d4ce0adce', type: "text" })), h("div", { key: '7e188b9632fb9fb9986edec3502c9cf850f51931', class: "pages" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: 'd0a80dc811310a17a11b394e11e4b9d4af150f15', class: "buttons" }, h("gb-button", { key: '60466b820667305f08d06a84f9e0e1c05ccc6ff3', size: "sm", hierarchy: "secondary_gray", icon: "default" }, h("p", { key: '30b91cac0e1a59f565ea930f80f00dde0e2fadb0' }, "Previous")), h("gb-button", { key: '473d40124dfff0c16f08b117758a9e598e698c6c', size: "sm", hierarchy: "secondary_gray", icon: "default" }, h("p", { key: 'cd733000dbd614ffdabbb3bfa7b99282e8b13220' }, "Next"))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'ccc2f7e1b5234de2ea103e599b426f8747b3ef0d', class: "prev" }, h("gb-button", { key: 'ee82324e1344de73328d313f40ae9522ddbf9e79', size: "sm", hierarchy: "secondary_gray", icon: "default" }, h("p", { key: '8ba9b098ff55f8dc03af13c5731a27ae1d34104d' }, "Previous"))), h("div", { key: '6dd52bcc1a5fe4b929e2aba62c4c0b457c0f3335', class: "pages" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '5aa0922681a98e4985d3030568cf1d41e1cf5102', class: "next" }, h("gb-button", { key: '775bff78df0874f71bcd98caed33f68b2f83cdf3', size: "sm", hierarchy: "secondary_gray", icon: "default" }, h("p", { key: '2d323725d3d38deb17a6677501fb838fd342b956' }, "Next")))))));
     }
     static get is() { return "gb-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-pagination-button-group-base/gb-pagination-button-group-base.css

@@ -0,0 +1,31 @@
+.button_base_div{
+    display: flex;
+    align-items: center;
+    border-right: 1px solid var(--color-border-subtle, #CDD5DF);
+    justify-content: center;
+    cursor: pointer;
+    width: fit-content;
+}
+
+.button_base_div:hover{
+    background: var(--color-background-gray-subtler, #EEF2F6);
+}
+
+.button_base_div:active{
+    background: none;
+}
+
+.button_base_div.false{
+    width: 2.5rem;
+    padding: 0.625rem;
+}
+
+.button_base_div.leading,
+.button_base_div.trailing{
+    gap: 0.5rem;
+    padding: 0.625rem var(--spacing-4);
+}
+
+::slotted(p){
+    color: var(--color-text, #4B5565);
+}

package/dist/collection/components/gb-pagination-button-group-base/gb-pagination-button-group-base.js

@@ -0,0 +1,86 @@
+import { h, Fragment } from "@stencil/core";
+export class GbPaginationButtonGroupBase {
+    constructor() {
+        this.icon = undefined;
+        this.iconLeading = undefined;
+        this.iconTrailing = undefined;
+    }
+    componentDidLoad() {
+        const slottedContent = this.el.querySelector('p');
+        if (slottedContent) {
+            slottedContent.classList.add('text-sm-semi-bold');
+        }
+    }
+    render() {
+        return (h("div", { key: '23e000cc72327574dd1bfd318b8381c3e27c038c', class: `button_base_div ${this.icon}` }, this.icon === 'false' && h("slot", { key: '6c670f46911286ab7041afc0dc63ee198af1be67' }), this.icon === 'leading' && (h(Fragment, null, h("svg", { key: '7df22c26954326e13a451a2a7d53f139e1d6fb53', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '4904f26820f1af0e6e1b1a36e059936c6d613537', d: "M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334", stroke: "#4B5565", "stroke-width": "1.67", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("slot", { key: 'f20497eb0db947aae2e8c84536253b54dc391102' }))), this.icon === 'trailing' && (h(Fragment, null, h("slot", { key: 'c4d9f7db5866da3b75cc280e1e8e903875de63e3' }), this.iconTrailing && (h("svg", { key: 'f3c144d1cffe42c5e3741b3d6ee6a718ff30f278', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'f6f236d8157f534cca2457b5ed3748fb8ed66f56', d: "M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+    }
+    static get is() { return "gb-pagination-button-group-base"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-pagination-button-group-base.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-pagination-button-group-base.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'false' | 'only' | 'trailing' | 'leading'",
+                    "resolved": "\"false\" | \"leading\" | \"only\" | \"trailing\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconLeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-leading",
+                "reflect": false
+            },
+            "iconTrailing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-trailing",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-pagination-button-group-base.js.map

package/dist/collection/components/gb-pagination-button-group-base/gb-pagination-button-group-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-pagination-button-group-base.js","sourceRoot":"","sources":["../../../src/components/gb-pagination-button-group-base/gb-pagination-button-group-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtE,MAAM,OAAO,2BAA2B;;;;;;IAMtC,gBAAgB;QACd,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAElD,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,8DAAa;YACtC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B;gBACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC5F,6DACE,CAAC,EAAC,0JAA0J,EAC5J,MAAM,EAAC,SAAS,kBACH,MAAM,oBACJ,OAAO,qBACN,OAAO,GACvB,CACE;gBACN,8DAAa,CACZ,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B;gBACE,8DAAa;gBACZ,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC5F,6DACE,CAAC,EAAC,yJAAyJ,EAC3J,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACA,CACJ,CAEG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-pagination-button-group-base',\r\n  styleUrl: 'gb-pagination-button-group-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbPaginationButtonGroupBase {\r\n  @Prop() icon: 'false' | 'only' | 'trailing' | 'leading';\r\n  @Prop() iconLeading: string;\r\n  @Prop() iconTrailing: string;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const slottedContent = this.el.querySelector('p');\r\n\r\n    if (slottedContent) {\r\n      slottedContent.classList.add('text-sm-semi-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`button_base_div ${this.icon}`}>\r\n        {this.icon === 'false' && <slot></slot>}\r\n        {this.icon === 'leading' && (\r\n          <>\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path\r\n                d=\"M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.67\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n            <slot></slot>\r\n          </>\r\n        )}\r\n        {this.icon === 'trailing' && (\r\n          <>\r\n            <slot></slot>\r\n            {this.iconTrailing && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            )}\r\n          </>\r\n        )}\r\n        {/* {this.icon === 'only' && ()} */}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-pagination-number-base/gb-pagination-number-base.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-pagination-number-base/gb-pagination-number-base.js

@@ -4,7 +4,7 @@ export class GbPaginationNumberBase {
         this.shape = undefined;
     }
     render() {
-        return (h("div", { key: '1e0de399c17d432681514440fb8746be61cc6bd5', class: `page_number_base ${this.shape}` }, "1"));
+        return (h("div", { key: '68f9115c172724cde3aaa538510c7281478aad71', class: `page_number_base ${this.shape}` }, "1"));
     }
     static get is() { return "gb-pagination-number-base"; }
     static get encapsulation() { return "shadow"; }