globuswebcomponents 0.3.5 → 0.3.6

package/dist/collection/components/gb-tagcount/{gb-tagcount.js → gb-tag-count.js}

@@ -1,21 +1,21 @@
 import { h } from "@stencil/core";
-export class TagCount {
+export class GbTagCount {
     constructor() {
         this.size = undefined;
     }
     render() {
-        return (h("div", { key: 'c00adb464f6879e1dba79224e8b86ca4a387ed64', class: this.size }, h("p", { key: '27e22f3d42532bbf76a52a32f33388271bf80b5d' }, "5")));
+        return (h("div", { key: '841cd4a6bbc21a1999ea8d702c7d47417cd194ce', class: this.size }, h("p", { key: '5f64937df1d5b6b5e1f792447ecb3878c97ee549' }, "5")));
     }
     static get is() { return "gb-tag-count"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["gb-tagcount.css"]
+            "$": ["gb-tag-count.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["gb-tagcount.css"]
+            "$": ["gb-tag-count.css"]
         };
     }
     static get properties() {
@@ -25,7 +25,7 @@ export class TagCount {
                 "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",
@@ -46,4 +46,4 @@ export class TagCount {
         };
     }
 }
-//# sourceMappingURL=gb-tagcount.js.map
+//# sourceMappingURL=gb-tag-count.js.map

package/dist/collection/components/gb-tagcount/gb-tag-count.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-tag-count.js","sourceRoot":"","sources":["../../../src/components/gb-tagcount/gb-tag-count.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AASjD,MAAM,OAAO,UAAU;;;;IAGnB,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI;YACjB,gEAAQ,CACN,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h} from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-tag-count',\r\n    styleUrl: 'gb-tag-count.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTagCount{\r\n    @Prop() size: GeneralSizes;\r\n\r\n    render() {\r\n        return (\r\n            <div class={this.size}>\r\n                <p>5</p>\r\n            </div>\r\n        )\r\n    }\r\n}"]}

package/dist/collection/components/gb-tags/gb-tags.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 --------------- */
@@ -2962,46 +3035,63 @@
     margin-top: -0.396em;
 }
 
-div {
+.container {
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    gap: 3px;
+    gap: var(--spacing-1);
     flex-shrink: 0;
     border-radius: var(--rounded-xs);
-    border: 1px solid #CDD5DF;
-    background: #FFFFFF;
-    font-family: sans-serif;
+    border: 1px solid var(--color-boarder-subtle, #CDD5DF);
+    background: var(--color-background-card, #FFFFFF);  
+}
+
+.content {
+    display: flex;
+    padding: var(--spacing-none);
+    text-align: center;
+    align-items: center;
+    border-radius: var(--rounded-none);
+    color: var(--color-text, #4B5565);
+    font-family: var(--Font-Family-Body, Sora);
     font-style: normal;
-    font-weight: var(--font-weight-medium, 500);
-    letter-spacing: 0.5px;
+    font-weight: var(--Font-Weight-Medium, 500);
+    letter-spacing: var(--Font-Letter-spacing-T-sm, 0rem);
 }
 
 .icon {
     border: none;
 }
 
-div.sm {
+.container.sm {
     height: var(--spacing-6);
     padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-1);
-    font-size: var(--text-xs-medium-font-size, 12px);
-    line-height: var(--text-xs-medium-line-height, 18px);
 }
 
-div.md {
-    height: 28px;
+.container.md {
+    height: 1.75rem;
     padding: var(--spacing-none) var(--spacing-2);
-    font-size: var(--text-sm-medium-font-size, 14px);
-    line-height: var(--text-sm-medium-line-height, 1.25rem);
 }
 
-div.lg {
+.container.lg {
     height: var(--spacing-7);
     padding: var(--spacing-1) var(--spacing-2);
-    font-size: var(--text-sm-medium-font-size, 14px);
-    line-height: var(--text-sm-medium-line-height, 1.25rem);
 }
 
-.label {
-    font-family: var(--font-family-body);
+.content.sm {
+    gap: var(--spacing-1);
+    font-size: var(--Font-Size-T-xs, 0.75rem);
+    line-height: var(--Font-Line-height-T-xs, 1.125rem);
+}
+
+.content.md {
+    gap: 0.3125rem;
+    font-size: var(--Font-Size-T-sm, 0.875rem);   
+    line-height: var(--Font-Line-height-T-sm, 1.25rem); 
+}
+
+.content.lg {
+    gap: 0.375rem;
+    font-size: var(--Font-Size-T-sm, 0.875rem);
+    line-height: var(--Font-Line-height-T-sm, 1.25rem); /* 142.857% */
 }

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

@@ -1,15 +1,15 @@
 import { getAssetPath, h } from "@stencil/core";
-export class Tag {
+export class GbTag {
     constructor() {
         this.size = undefined;
         this.icon = undefined;
+        this.action = 'text_only';
+        this.flagSwap = undefined;
         this.checkbox = undefined;
-        this.closeButton = undefined;
-        this.count = undefined;
     }
     render() {
-        const countryIconSrc = getAssetPath(`assets/country-icon.svg`);
-        return (h("div", { key: '7419286e506c07ac075b9fd3996e3cfad0949087', class: this.size }, this.checkbox && (h("gb-tag-checkbox", { key: 'bff8dadcb04c1d8fef28ea73184b244d506edaac', size: this.size })), this.icon === 'country' && (h("div", { key: 'e73613455c48e1d8bdf3192f533c3f6c35e9e71f', class: "icon left-icon" }, h("img", { key: 'f9b13c50b990e15510901617b7d5ca788f3a50a1', src: countryIconSrc, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '87d96031fade8beebc2f5a6a59a0e90855b6b377', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("img", { key: 'e145fc24130b9636498d05f3153f554860b1f716', src: "./build/assets/avatar_pic.jpg" }))), this.icon === 'dot' && (h("svg", { key: '0979a99e333b4cce688f172133576839f3b0eb5b', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'cca8e6ff98ae638870a6ddcb1a18ccd80cda13f6', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("span", { key: '52975b44677782fce92a0e01cc40120e16829b91', class: "label" }, h("slot", { key: 'd09c716482bd8e7f920c27fd9ab83381d37024e8' })), this.closeButton && (h("gb-tag-close", { key: '396bec3fa762032e5d5f3e344390140bc49bbe71', size: this.size })), this.count && (h("gb-tag-count", { key: 'b3c8e2d787ada85b6bec2b325d7e15dd82a1d7f1' }))));
+        const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);
+        return (h("div", { key: 'eddc1c56bde4d8d1668ecaff71b68f9fd474b049', class: `container ${this.size}` }, h("div", { key: 'b50a610db6b071203e0c15e2216ec56ce749ffc9', class: `content ${this.size}` }, this.checkbox && (h("gb-tag-checkbox", { key: 'dd5df39dcefcfc0fc58dc2935a2a6f311d447fb4', size: this.size })), this.icon === 'country' && (h("div", { key: 'b22d75f23dce9d7abee595d4801cb193f7c2abda', class: "icon left-icon" }, h("img", { key: '9f70bb1314b2850166aa66c90647c6f1fbb83136', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '31deeb77a03a013b07385f5c12947e31b9e2b36d', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("slot", { key: '0a1a6477c29874869b8f471e6d7e4a2af6609193', name: 'image', slot: 'image' }))), this.icon === 'dot' && (h("svg", { key: 'ba641ea7232e553779ed3ce7a314c35797aec4dd', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'c3b6446c2d9de38bfa2d68b217cb6d4c12b5427a', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("span", { key: '61f02e7a46eecd336ac780084349ed50990fa6a7', class: "label" }, h("slot", { key: '1483f54f85e2acc08319bca1a3f197e0c996ca8c' })), this.action === 'count' && (h("gb-tag-count", { key: 'e940ea246cd9da2efccdbaa0904b16b340c80b4f', size: this.size }))), this.action === 'X_close' && (h("gb-tag-close", { key: '47ad6152c591c9470f14aaebe1da51d621e916cd', size: this.size }))));
     }
     static get is() { return "gb-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -59,41 +59,42 @@ export class Tag {
                 "attribute": "icon",
                 "reflect": false
             },
-            "checkbox": {
-                "type": "boolean",
+            "action": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'X_close' | 'text_only' | 'count'",
+                    "resolved": "\"X_close\" | \"count\" | \"text_only\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "checkbox",
-                "reflect": false
+                "attribute": "action",
+                "reflect": false,
+                "defaultValue": "'text_only'"
             },
-            "closeButton": {
-                "type": "boolean",
+            "flagSwap": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "close-button",
+                "attribute": "flag-swap",
                 "reflect": false
             },
-            "count": {
+            "checkbox": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -107,7 +108,7 @@ export class Tag {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "count",
+                "attribute": "checkbox",
                 "reflect": false
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"gb-tags.js","sourceRoot":"","sources":["../../../src/components/gb-tags/gb-tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,GAAG;;;;;;;;IAOZ,MAAM;QAEF,MAAM,cAAc,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAAC;QAE/D,OAAO,CACJ,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,CAAC,QAAQ,IAAI,CACd,wEAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAoB,CACvD;YACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CACxB,4DAAK,KAAK,EAAC,gBAAgB;gBACvB,4DAAK,GAAG,EAAE,cAAc,EAAE,GAAG,EAAC,cAAc,GAAG,CAC7C,CACT;YACA,IAAI,CAAC,IAAI,KAAI,QAAQ,IAAI,CACtB,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,iBAAa,OAAO;gBACxD,4DAAK,GAAG,EAAC,+BAA+B,GAAO,CACvC,CACf;YACA,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CACpB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM;gBACtF,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAE,CAC1C,CACT;YACD,6DAAM,KAAK,EAAC,OAAO;gBACf,8DAAa,CACV;YACN,IAAI,CAAC,WAAW,IAAI,CACjB,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB,CACjD;YACA,IAAI,CAAC,KAAK,IAAI,CACX,sEAA6B,CAChC,CACA,CACR,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-tag',\r\n    styleUrl: 'gb-tags.css',\r\n    shadow: true\r\n})\r\n\r\nexport class Tag {\r\n    @Prop() size: 'sm' | 'md' | 'lg';\r\n    @Prop() icon?: 'country' | 'avatar' | 'dot';\r\n    @Prop() checkbox?: boolean;\r\n    @Prop() closeButton?: boolean;\r\n    @Prop() count?: boolean;\r\n\r\n    render() {\r\n\r\n        const countryIconSrc = getAssetPath(`assets/country-icon.svg`);\r\n\r\n        return (\r\n           <div class={this.size}>\r\n                {this.checkbox && (\r\n                    <gb-tag-checkbox size={this.size}></gb-tag-checkbox>\r\n                )}\r\n                {this.icon === 'country' && (\r\n                    <div class=\"icon left-icon\">\r\n                        <img src={countryIconSrc} alt=\"Country Icon\" />\r\n                    </div>\r\n                )}\r\n                {this.icon ==='avatar' && (\r\n                    <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n                        <img src=\"./build/assets/avatar_pic.jpg\"></img>\r\n                    </gb-avatar>\r\n                )}\r\n                {this.icon === 'dot' && (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                        <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\"/>\r\n                    </svg>\r\n                )}\r\n                <span class=\"label\">\r\n                    <slot></slot>\r\n                </span>\r\n                {this.closeButton && (\r\n                    <gb-tag-close size={this.size}></gb-tag-close>\r\n                )}\r\n                {this.count && (\r\n                    <gb-tag-count></gb-tag-count>\r\n                )}\r\n           </div>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-tags.js","sourceRoot":"","sources":["../../../src/components/gb-tags/gb-tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,KAAK;;;;sBAGsC,WAAW;;;;IAI/D,MAAM;QAEF,MAAM,QAAQ,GAAG,YAAY,CAAC,UAAU,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC;QAE7D,OAAO,CACJ,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE;YAC/B,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE;gBAC7B,IAAI,CAAC,QAAQ,IAAI,CACd,wEAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAoB,CACvD;gBACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CACxB,4DAAK,KAAK,EAAC,gBAAgB;oBACvB,4DAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,cAAc,GAAG,CACvC,CACT;gBACA,IAAI,CAAC,IAAI,KAAI,QAAQ,IAAI,CACtB,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,iBAAa,OAAO;oBACxD,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC/B,CACf;gBACA,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CACpB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM;oBACtF,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAE,CAC1C,CACT;gBACD,6DAAM,KAAK,EAAC,OAAO;oBACf,8DAAa,CACV;gBACN,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,CACxB,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB,CACjD,CACC;YACL,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,CAC1B,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB,CACjD,CACA,CACR,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-tag',\r\n    styleUrl: 'gb-tags.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTag {\r\n    @Prop() size: 'sm' | 'md' | 'lg';\r\n    @Prop() icon?: 'country' | 'avatar' | 'dot';\r\n    @Prop() action: 'X_close' | 'text_only' | 'count' = 'text_only';\r\n    @Prop() flagSwap: string;\r\n    @Prop() checkbox?: boolean;\r\n\r\n    render() {\r\n\r\n        const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);\r\n\r\n        return (\r\n           <div class={`container ${this.size}`}>\r\n                <div class={`content ${this.size}`}>\r\n                    {this.checkbox && (\r\n                        <gb-tag-checkbox size={this.size}></gb-tag-checkbox>\r\n                    )}\r\n                    {this.icon === 'country' && (\r\n                        <div class=\"icon left-icon\">\r\n                            <img src={flagSwap} alt=\"Country Icon\" />\r\n                        </div>\r\n                    )}\r\n                    {this.icon ==='avatar' && (\r\n                        <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n                            <slot name='image' slot='image'></slot>\r\n                        </gb-avatar>\r\n                    )}\r\n                    {this.icon === 'dot' && (\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                            <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\"/>\r\n                        </svg>\r\n                    )}\r\n                    <span class=\"label\">\r\n                        <slot></slot>\r\n                    </span>\r\n                    {this.action === 'count' && (\r\n                        <gb-tag-count size={this.size}></gb-tag-count>\r\n                    )}\r\n                </div>\r\n                {this.action === 'X_close' && (\r\n                    <gb-tag-close size={this.size}></gb-tag-close>\r\n                )}\r\n           </div>\r\n        );\r\n    }\r\n}"]}

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

@@ -32,7 +32,7 @@ export class GbToggle {
         }
     }
     render() {
-        return (h("div", { key: '22fa4bcbec885f3b720930f26dc4305dd73d9d26', class: `toggle_div ${this.size}` }, h("div", { key: '8903d4919f180977ae4c01527e68aba4182c326b', class: "toggle_base" }, h("gb-toggle-base", { key: 'a41ce370cb281fda32dc36b3cf66215cef81a586', size: this.size, state: this.state })), h("div", { key: '391ac079ada9cbeeeba1138d17753cd425a75393', class: "text" }, h("slot", { key: '6629bcec0090452f6d10d9229e41a1ec7d53ac6b', name: "main_text" }), this.supportingText && (h("slot", { key: 'f0f0342b8f1c8288183139043c9c5d13efc91fbd', name: "supporting_text" })))));
+        return (h("div", { key: 'cd390461d1c59f802bcae40f516fff594e833014', class: `toggle_div ${this.size}` }, h("div", { key: '8f13adc79337e7b10af4da6c44e0d2487f8fa6d7', class: "toggle_base" }, h("gb-toggle-base", { key: 'a535c94b58af36dcf276aa6719dd5ce490f5e03a', size: this.size, state: this.state })), h("div", { key: 'e96de4aeb44f76d18c76daad4e847a6df4a60b2c', class: "text" }, h("slot", { key: '9dcb97bd80be95168b43bc2624e0f88b17d823e7', name: "main_text" }), this.supportingText && (h("slot", { key: '057ea24d0a65da68eb8c55931a2e7d37c91e7a9a', name: "supporting_text" })))));
     }
     static get is() { return "gb-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -53,7 +53,7 @@ export class GbToggle {
                 "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-toggle-base/gb-toggle-base.js

@@ -6,8 +6,8 @@ export class GbToggleBase {
     }
     render() {
         return [
-            h("input", { key: '572dbe6e7f3c183c075510eb8b6ccea6f81c5a05', type: "checkbox", id: "customCheckbox" }),
-            h("label", { key: 'f2385773f694cf00911478bba60eca3a334e31db', class: `${this.size} ${this.state}`, htmlFor: "customCheckbox" })
+            h("input", { key: '0f899ea654fc60f9fa0e07f620e7a31a0b47ac90', type: "checkbox", id: "customCheckbox" }),
+            h("label", { key: '2baba9a592dda5b13450d8a19c006d6260e98d85', class: `${this.size} ${this.state}`, htmlFor: "customCheckbox" })
         ];
     }
     static get is() { return "gb-toggle-base"; }
@@ -29,7 +29,7 @@ export class GbToggleBase {
                 "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-tooltip/gb-tooltip.css

@@ -1,3 +1,4 @@
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */
@@ -75,10 +76,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 +260,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 +300,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 +324,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 +348,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 +1302,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-tooltip/gb-tooltip.js

@@ -19,7 +19,7 @@ export class GbTooltip {
         return this.showArrow ? `arrow ${this.arrow}` : '';
     }
     render() {
-        return (h("div", { key: 'b48671b8a30be85019abde6f6f13470a30b287f5', class: "tooltip_container" }, h("div", { key: '49569ca7fe0f6391cd36c5bbeb0b0844a83feadd', class: "tooltip" }, h("div", { key: 'b76cd3ed681c5322ca41d760ec9584e9bc31f837', class: this.getArrowClass() }), h("div", { key: '5353b69fbc2809171b29105e4ac7f442b8f7891a', class: "tooltip_content" }, h("slot", { key: '0c0356475d93ca850884aa73d167cad3065974d2', name: "label" }), this.showSupportingText && h("slot", { key: '8a365d4d442da9bada7b3cf948fb8a18fc56680e', name: "supporting_text" })))));
+        return (h("div", { key: 'eb18bf3839499c89affcb3079be128dc998d6c2c', class: "tooltip_container" }, h("div", { key: '8894e19ec7bf245ae98c1191d42d281fde20e0f1', class: "tooltip" }, h("div", { key: '3f88093c9f48a1c5547a5ccc1917f8535dffa723', class: this.getArrowClass() }), h("div", { key: '41704924ee50d51a937db821c242f4bbc7869523', class: "tooltip_content" }, h("slot", { key: '9b87448246641a71ff7b6473b9d918ce5f0a4a9f', name: "label" }), this.showSupportingText && h("slot", { key: '86938582ec7bb693be24357a6ab4bf38c69cfc2d', name: "supporting_text" })))));
     }
     static get is() { return "gb-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/global/global.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/models/reusableModels.js

@@ -10,6 +10,7 @@ export var CheckBoxStates;
 })(CheckBoxStates || (CheckBoxStates = {}));
 export var BorderWeights;
 (function (BorderWeights) {
+    BorderWeights["VeryLight"] = "very_light";
     BorderWeights["Light"] = "light";
     BorderWeights["Regular"] = "regular";
     BorderWeights["Heavy"] = "heavy";