globuswebcomponents 2.8.0 → 2.8.2

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

@@ -2788,6 +2788,12 @@
   --icon-color: var(--primary-color);
   display: flex;
   align-items: center;
+  /* width: 100%; */
+}
+
+.button_wrapper{
+  position: relative;
+  width: 100%;
 }
 
 button {
@@ -2856,6 +2862,10 @@ button.sm {
   gap: var(--spacing-2);
 }
 
+button.only{
+  padding: 0;
+}
+
 button.only.xl2 {
   width: 3.5rem;
   height: 3.5rem;
@@ -2874,6 +2884,7 @@ button.only.lg {
 button.only.md {
   width: 2.5rem;
   height: 2.5rem;
+  /* padding: 0; */
 }
 
 button.only.sm {
@@ -2898,47 +2909,32 @@ button.sm .icon svg {
 button.primary {
   background-color: var(--color-background-brandRed, #e21b2e);
   --icon-color: var(--color-icon-inverse, #ffffff);
-}
-
-.slotted_button_text.primary {
-  color: var(--color-text-inverse, #ffffff) !important;
+  color: var(--color-text-inverse, #ffffff);
 }
 
 button.secondary_gray {
   background-color: transparent;
   border: 1px solid var(--color-border, #9aa4b2);
   --icon-color: var(--color-icon, #4b5565);
-}
-
-.slotted_button_text.secondary_gray {
   color: var(--color-text, #4b5565) !important;
 }
 
 button.secondary_color {
   background-color: transparent;
   border: 1px solid var(--color-border-brandRed, #e21b2e);
-  --icon-color: var(--color-icon-brandRed, #e21b2e);
-}
-
-.slotted_button_text.secondary_color {
   color: var(--color-text-brandRed, #e21b2e) !important;
+  --icon-color: var(--color-icon-brandRed, #e21b2e);
 }
 
 button.tertiary_gray {
   background-color: transparent;
   --icon-color: var(--color-icon, #4b5565);
-}
-
-.slotted_button_text.tertiary_gray {
   color: var(--color-text, #4b5565) !important;
 }
 
 button.tertiary_color {
   background-color: transparent;
   --icon-color: var(--color-icon-brandRed, #e21b2e);
-}
-
-.slotted_button_text.tertiary_color {
   color: var(--color-text-brandRed, #e21b2e) !important;
 }
 
@@ -2948,9 +2944,6 @@ button.link_gray {
   padding: var(--spacing-none);
   height: fit-content;
   justify-content: flex-start;
-}
-
-.slotted_button_text.link_gray {
   color: var(--color-text, #4b5565) !important;
 }
 
@@ -2960,22 +2953,16 @@ button.link_color {
   padding: var(--spacing-none);
   height: fit-content;
   justify-content: flex-start;
-}
-
-.slotted_button_text.link_color {
   color: var(--color-link, #075db2) !important;
 }
 
 /* Button Destructive Styles */
 button.primary.destructive {
   background-color: var(--color-background-danger, #b51726);
+  color: var(--color-text-inverse, #ffffff);
   --icon-color: var(--color-icon-danger-inverse, #ffffff);
 }
 
-.slotted_button_text.primary.destructive {
-  color: var(--color-text-inverse, #ffffff) !important;
-}
-
 button.secondary_gray.destructive,
 button.secondary_color.destructive {
   border: 1px solid var(--color-border-danger, #b51726);
@@ -2992,12 +2979,12 @@ button.link_color.destructive {
   --icon-color: var(--color-icon-danger, #b51726);
 }
 
-.slotted_button_text.secondary_gray.destructive,
-.slotted_button_text.secondary_color.destructive,
-.slotted_button_text.tertiary_gray.destructive,
-.slotted_button_text.tertiary_color.destructive,
-.slotted_button_text.link_gray.destructive,
-.slotted_button_text.link_color.destructive {
+button.secondary_gray.destructive,
+button.secondary_color.destructive,
+button.tertiary_gray.destructive,
+button.tertiary_color.destructive,
+button.link_gray.destructive,
+button.link_color.destructive {
   color: var(--color-text-danger, #b51726) !important;
 }
 
@@ -3102,6 +3089,7 @@ button.disabled {
 button.primary.disabled {
   background-color: var(--color-background-btn-disabled, #eef2f6);
   --icon-color: var(--color-icon-disabled, #9aa4b2);
+  color: var(--color-text-disabled, #9aa4b2) !important;
 }
 
 button.secondary_gray.disabled,
@@ -3116,7 +3104,7 @@ button.tertiary_color.disabled,
 button.link_gray.disabled,
 button.link_color.disabled {
   --icon-color: var(--color-icon-disabled, #9aa4b2);
-  color: var(--color-text-disabled, #9aa4b2);
+  color: var(--color-text-disabled, #9aa4b2) !important;
 }
 
 .btn_text {
@@ -3130,13 +3118,14 @@ button.link_color.disabled {
 }
 
 .loader {
+  --loader-thickness: 4px;
   aspect-ratio: 1;
   border-radius: 50%;
   -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
   animation: l13 1s infinite linear;
+  mask: radial-gradient(farthest-side, rgba(0,0,0,0) calc(100% - var(--loader-thickness)), #000 0);
 }
 
-/* Loader Sizes */
 .loader.default.sm,
 .loader.default.md,
 .loader.default.lg,
@@ -3159,19 +3148,30 @@ button.link_color.disabled {
   width: 1.7rem;
 }
 
-/* Loader Colors */
-.loader.primary {
-  background: radial-gradient(farthest-side, var(--color-text-inverse, #ffffff) 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--color-text-inverse, #ffffff));
+.loader.primary,
+.loader.primary.destructive {
+  background: radial-gradient(farthest-side, var(--color-text-inverse, #ffffff) 94%, #0000) top/var(--loader-thickness) var(--loader-thickness) no-repeat,
+    conic-gradient(#0000 30%, var(--color-text-inverse, #ffffff));
 }
 
 .loader.secondary_gray,
-.loader.tertiary_gray {
-  background: radial-gradient(farthest-side, var(--color-text, #4b5565) 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--color-text, #4b5565));
+.loader.tertiary_gray{
+  background:
+    radial-gradient(farthest-side, var(--color-text, #4b5565) 94%, #0000) top/var(--loader-thickness) var(--loader-thickness) no-repeat,
+    conic-gradient(#0000 30%, var(--color-text, #4b5565));
 }
 
 .loader.secondary_color,
-.loader.tertiary_color {
-  background: radial-gradient(farthest-side, var(--color-text-brandRed, #e21b2e) 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--color-text-brandRed, #e21b2e));
+.loader.tertiary_color{
+  background:
+    radial-gradient(farthest-side, var(--color-text-brandRed, #e21b2e) 94%, #0000) top/var(--loader-thickness) var(--loader-thickness) no-repeat,
+    conic-gradient(#0000 30%, var(--color-text-brandRed, #e21b2e));
+}
+
+.loader.destructive {
+  background:
+    radial-gradient(farthest-side, var(--color-text-danger-bold, #8c121d) 94%, #0000) top/var(--loader-thickness) var(--loader-thickness) no-repeat,
+    conic-gradient(#0000 30%, var(--color-text-danger-bold, #8c121d));
 }
 
 @keyframes l13 {
@@ -3179,3 +3179,28 @@ button.link_color.disabled {
     transform: rotate(1turn);
   }
 }
+
+.tooltip{
+  position: absolute;
+  left: 0;
+}
+
+.tooltip.sm{
+  top: -120%;
+}
+
+.tooltip.md{
+  top: -110%;
+}
+
+.tooltip.lg{
+  top: -100%;
+}
+
+.tooltip.xl{
+  top: -90%;
+}
+
+.tooltip.xl2{
+  top: -75%;
+}

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

@@ -1,11 +1,20 @@
 import { getAssetPath, h, Fragment } from "@stencil/core";
 export class GbButton {
     constructor() {
+        this.size = 'xl';
+        this.hierarchy = 'primary';
         this.destructive = false;
+        this.state = 'default';
         this.iconLeading = false;
         this.iconTrailing = false;
+        this.tooltipText = '';
+        this.arrow = 'bottom_center';
         this.leadingIconSvg = '';
         this.trailingIconSvg = '';
+        this.internalButtonState = '';
+        this.internalIconLeadingState = '';
+        this.internalIconTrailingState = '';
+        this.tooltipShown = false;
     }
     componentWillLoad() {
         if (this.iconLeading && this.iconLeadingSwap) {
@@ -21,11 +30,6 @@ export class GbButton {
         if (buttonSlot) {
             buttonSlot.classList.add(this.getButtonTextClasses());
             buttonSlot.classList.add('nowrap');
-            buttonSlot.id = 'slotted_button_text';
-            buttonSlot.classList.add('slotted_button_text');
-            buttonSlot.classList.add(`${this.hierarchy}`);
-            buttonSlot.classList.add(`${this.destructive ? 'destructive' : ''}`);
-            buttonSlot.classList.add(`${this.state === 'disabled' ? 'disabled' : ''}`);
         }
     }
     async loadIcon(iconName, type) {
@@ -47,7 +51,6 @@ export class GbButton {
             [this.hierarchy]: true,
             destructive: this.destructive,
             disabled: this.state === 'disabled',
-            loading: this.state === 'loading',
             only: this.icon === 'only',
         };
     }
@@ -72,7 +75,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: '5e7d4bc8987c56d9ea4ac2ff9cecb64da9d47f38', class: this.getButtonClasses() }, this.state === 'loading' && h("div", { key: '892e2223069df68822dccb076408846c509f6a7e', class: `loader ${this.hierarchy} ${this.size} ${this.icon}` }), this.state !== 'loading' && (h(Fragment, null, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: '93e5a9ac408fda70072f51124c7065dcad8d7524', class: `btn_text` }, h("slot", { key: '66b4d5867217dab779864314af3e48a9f023c30c' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()))));
+        return (h("div", { key: '5974279873d85165551e848ba6e5df545299d362', class: "button_wrapper" }, h("button", { key: '35ded83872e1ae6098ce79d0af6c63b5550eb801', disabled: this.state === 'disabled', class: this.getButtonClasses(), onMouseEnter: () => (this.tooltipShown = true), onMouseLeave: () => (this.tooltipShown = false) }, this.state === 'loading' && h("div", { key: '0ae36a67479896f6f8dea1ab2af243995d9069a6', class: `loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}` }), this.state !== 'loading' && (h(Fragment, null, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: '5ee8aff376c438b3128b3a398cae036dba4a13e2', class: `btn_text` }, h("slot", { key: 'c16d23af7ee68f18bab93067150d90a068bc87a4' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()))), this.tooltipText && this.icon === 'only' && this.tooltipShown && (h("gb-tooltip", { key: '75b67003b8a3faacf7454dc547cbea334cb7791b', "show-arrow": true, arrow: this.arrow, class: `tooltip ${this.size}` }, h("p", { key: 'e36063072c57570f5f6974f665ef1cf16f9865f9', slot: "label" }, this.tooltipText)))));
     }
     static get is() { return "gb-btn"; }
     static get originalStyleUrls() {
@@ -110,7 +113,8 @@ export class GbButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "size"
+                "attribute": "size",
+                "defaultValue": "'xl'"
             },
             "hierarchy": {
                 "type": "string",
@@ -135,7 +139,8 @@ export class GbButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "hierarchy"
+                "attribute": "hierarchy",
+                "defaultValue": "'primary'"
             },
             "icon": {
                 "type": "string",
@@ -145,7 +150,7 @@ export class GbButton {
                     "resolved": "\"default\" | \"only\"",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -199,7 +204,8 @@ export class GbButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "state"
+                "attribute": "state",
+                "defaultValue": "'default'"
             },
             "iconLeading": {
                 "type": "boolean",
@@ -278,13 +284,63 @@ export class GbButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon-trailing-swap"
+            },
+            "tooltipText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-text",
+                "defaultValue": "''"
+            },
+            "arrow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ArrowPositions",
+                    "resolved": "\"bottom_center\" | \"bottom_left\" | \"bottom_right\" | \"center\" | \"left\" | \"none\" | \"right\" | \"top_center\"",
+                    "references": {
+                        "ArrowPositions": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ArrowPositions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow",
+                "defaultValue": "'bottom_center'"
             }
         };
     }
     static get states() {
         return {
             "leadingIconSvg": {},
-            "trailingIconSvg": {}
+            "trailingIconSvg": {},
+            "internalButtonState": {},
+            "internalIconLeadingState": {},
+            "internalIconTrailingState": {},
+            "tooltipShown": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-btn.js","sourceRoot":"","sources":["../../../src/components/gb-btn/gb-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State, Fragment } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes, StateType } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-btn',\r\n  styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() hierarchy: GeneralHierarchies;\r\n  @Prop() icon: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: StateType;\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if(this.state === 'loading') {\r\n      buttonSlot.style.display = 'none';\r\n    }\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n      buttonSlot.id = 'slotted_button_text'\r\n      buttonSlot.classList.add('slotted_button_text');\r\n      buttonSlot.classList.add(`${this.hierarchy}`);\r\n      buttonSlot.classList.add(`${this.destructive ? 'destructive' : ''}`);\r\n      buttonSlot.classList.add(`${this.state === 'disabled' ? 'disabled' : ''}`);\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      loading: this.state === 'loading',\r\n      only: this.icon === 'only',\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.state === 'loading' && <div class={`loader ${this.hierarchy} ${this.size} ${this.icon}`}></div>}\r\n        {this.state !== 'loading' && (\r\n          <>\r\n            {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n            {this.icon === 'default' && (\r\n              <div class={`btn_text`}>\r\n                <slot></slot>\r\n              </div>\r\n            )}\r\n            {this.iconTrailing && this.renderTrailingIcon()}\r\n            {this.icon === 'only' && this.renderLeadingIcon()}\r\n          </>\r\n        )}\r\n      </button>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-btn.js","sourceRoot":"","sources":["../../../src/components/gb-btn/gb-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State, Fragment } from '@stencil/core';\r\nimport { ArrowPositions, GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-btn',\r\n  styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes = 'xl';\r\n  @Prop() hierarchy: GeneralHierarchies = 'primary';\r\n  @Prop() icon!: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: StateType = 'default';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Prop() tooltipText: string = '';\r\n  @Prop() arrow: ArrowPositions = 'bottom_center';\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n  @State() internalButtonState: string = '';\r\n  @State() internalIconLeadingState: string = '';\r\n  @State() internalIconTrailingState: string = '';\r\n  @State() tooltipShown: boolean = false;\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (this.state === 'loading') {\r\n      buttonSlot.style.display = 'none';\r\n    }\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      only: this.icon === 'only',\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"button_wrapper\">\r\n        <button\r\n          disabled={this.state === 'disabled'}\r\n          class={this.getButtonClasses()}\r\n          onMouseEnter={() => (this.tooltipShown = true)}\r\n          onMouseLeave={() => (this.tooltipShown = false)}\r\n        >\r\n          {this.state === 'loading' && <div class={`loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}`}></div>}\r\n          {this.state !== 'loading' && (\r\n            <>\r\n              {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n              {this.icon === 'default' && (\r\n                <div class={`btn_text`}>\r\n                  <slot></slot>\r\n                </div>\r\n              )}\r\n              {this.iconTrailing && this.renderTrailingIcon()}\r\n              {this.icon === 'only' && this.renderLeadingIcon()}\r\n            </>\r\n          )}\r\n        </button>\r\n        {this.tooltipText && this.icon === 'only' && this.tooltipShown && (\r\n          <gb-tooltip show-arrow={true} arrow={this.arrow} class={`tooltip ${this.size}`}>\r\n            <p slot=\"label\">{this.tooltipText}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -75,7 +75,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("div", { key: '8533c79da90c53397d7c86c077d3bd6098230075', class: "button_wrapper" }, h("button", { key: '3d459c1336f2e8b8ea9090e522ad2e067e745bb6', disabled: this.state === 'disabled', class: this.getButtonClasses(), onMouseEnter: () => this.tooltipShown = true, onMouseLeave: () => this.tooltipShown = false }, this.state === 'loading' && h("div", { key: '5411ed82301bab1d143d08cebd4adcc4935503d0', class: `loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}` }), this.state !== 'loading' && (h(Fragment, null, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: '8e84ef3b84434a2c7225561d737f858682db5543', class: `btn_text` }, h("slot", { key: 'e287771b49cd946d8ec765cb6cccda840a855671' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()))), this.tooltipText && this.icon === 'only' && this.tooltipShown && (h("gb-tooltip", { key: '4bf844c762310bc37ea165c1f4169b6f05500f3a', "show-arrow": true, arrow: this.arrow, class: `tooltip ${this.size}` }, h("p", { key: '2c9baf09ab8ee5c1cb812af0922bf90cc0a167bb', slot: "label" }, this.tooltipText)))));
+        return (h("div", { key: 'e73578ed6c44c1088cfd3c1f79a6ba4ab56a0bb4', class: "button_wrapper" }, h("button", { key: '9600c03a6a0fc3ec276f7456b4f5bd3d0c17bd29', disabled: this.state === 'disabled', class: this.getButtonClasses(), onMouseEnter: () => this.tooltipShown = true, onMouseLeave: () => this.tooltipShown = false }, this.state === 'loading' && h("div", { key: '8e91ef2760cd64157faa55d02f326063026a6784', class: `loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}` }), this.state !== 'loading' && (h(Fragment, null, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: 'b35e79253084dc15e224e62349439ecac11b526e', class: `btn_text` }, h("slot", { key: 'a2bbb2f18d5bb3373e4e23de9b8ae65cf0cf2fda' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()))), this.tooltipText && this.icon === 'only' && this.tooltipShown && (h("gb-tooltip", { key: '7ee7cdd05d7a32f61f50f7f3966fbc57dd9999cf', "show-arrow": true, arrow: this.arrow, class: `tooltip ${this.size}` }, h("p", { key: '0cda8d3a9086d5724ce448f6d8c6b16cff9ad2a5', slot: "label" }, this.tooltipText)))));
     }
     static get is() { return "gb-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-button-close/gb-button-close.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbButtonClose {
     render() {
-        return (h("div", { key: 'a926a646e79aab7d0c96bf80c88a9f5cf9378fd5', class: `${this.size} ${this.color}` }, h("svg", { key: '935c91aab97c50512f92fce785e6bfc334613379', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: '257b0a8c546ca0c3c31f6ab765db031ef6baa1f6', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: '738a4fc4885b33fd01cb17e7d00958008a5bb7f1', class: `${this.size} ${this.color}` }, h("svg", { key: '9ad0f993085b04ec8a2e259ce5d94eab1de403b9', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: '344fe30c0dda833d455270e8eb75efd3a82321fd', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-button-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class GbButtonGroup {
         // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });
     }
     render() {
-        return (h("div", { key: 'f4df618e528e354ea5ee05af27d4197443dc506f', class: "button_group_container" }, this.showLabel && h("p", { key: 'e24d0772b378ef808bc67ef6b5c9b69c7a24245a', class: "dropdown_label text-sm-regular" }, this.label), h("div", { key: '75285f6b029ac03b6a3974be3269ebbb1c7bd19a', class: "button_group_wrapper" }, this.internalItems.map((item, index) => (h("gb-button-group-base", { key: index, state: "default", icon: this.icon, label: item.label, current: item.current, onClick: () => this.handleSelect(index), "icon-src": item.icon }))))));
+        return (h("div", { key: 'eee8d36896df16f3a303aae8e1e5b14ba1035eca', class: "button_group_container" }, this.showLabel && h("p", { key: 'e92e4015de28d11feb17df832f740d9395b3b04c', class: "dropdown_label text-sm-regular" }, this.label), h("div", { key: 'ccbb6c61d25f6c50b92a97c987092798b9ce6618', class: "button_group_wrapper" }, this.internalItems.map((item, index) => (h("gb-button-group-base", { key: index, state: "default", icon: this.icon, label: item.label, current: item.current, onClick: () => this.handleSelect(index), "icon-src": item.icon }))))));
     }
     static get is() { return "gb-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class GbButtonGroupBase {
         this.loadIcon(this.iconSrc);
     }
     render() {
-        return (h("div", { key: 'dc8dc4dd01ad0a05ca0ede71b4c9684e93d8eed3', class: `button_group_base_div ${this.current ? 'current' : ''} ${this.icon} ${this.state}` }, this.icon === 'leading' && h("div", { key: '7a7f9583650a2b5b0164cabde7e3b25d2bbd4dcf', class: `icon ${this.current ? 'current' : ''} ${this.state}`, innerHTML: this.leadingIconSvg }), this.icon === 'only' && h("div", { key: '8a27a5dd48f654e7bc866658d4e6a06dea0be679', class: `icon ${this.current ? 'current' : ''} ${this.state}`, innerHTML: this.leadingIconSvg }), this.icon === 'checkbox' && (h("gb-checkbox", { key: 'a4a3b696e90970ac89fc43b042120e204f6cc2f2', checked: this.current, indeterminate: false, size: "sm", type: "radio", state: this.state, text: true, "supporting-text": false }, h("p", { key: '651d5c2d18311b2f5feb4c290a49894c30671b04', slot: "label" }, this.label))), this.icon === 'dot' && (h("div", { key: '37be27fafcd262f8b620c68dc8f9d6f005deec04', class: "dot_div" }, h("div", { key: '9de817c91c5c567a93d4de821608c64291c552e8', class: `dott ${this.state}` }))), this.icon !== 'only' && this.icon !== 'checkbox' && h("p", { key: '44a78bd116bf16825bd9d1fb8807fbfdafe385b7', class: "text-sm-semi-bold" }, this.label)));
+        return (h("div", { key: '5b772891a5a03e8827dd3bace325b2044cecc297', class: `button_group_base_div ${this.current ? 'current' : ''} ${this.icon} ${this.state}` }, this.icon === 'leading' && h("div", { key: '48e10a836f752eb9736adf152cccf86250184a2b', class: `icon ${this.current ? 'current' : ''} ${this.state}`, innerHTML: this.leadingIconSvg }), this.icon === 'only' && h("div", { key: 'f5266500b872813ffee73c2665ea54d31abfa00f', class: `icon ${this.current ? 'current' : ''} ${this.state}`, innerHTML: this.leadingIconSvg }), this.icon === 'checkbox' && (h("gb-checkbox", { key: '5b907619703ffccf259f90fddbee720d70955b88', checked: this.current, indeterminate: false, size: "sm", type: "radio", state: this.state, text: true, "supporting-text": false }, h("p", { key: 'cf05feb8157854241303b0ec10df0513a1c81df0', slot: "label" }, this.label))), this.icon === 'dot' && (h("div", { key: 'da9fabfacc7a55bdb11928de92c19e9ef01ee2bd', class: "dot_div" }, h("div", { key: '0d5ae1a5cc2cf1f9d70e5c00413ce4ac2bfb12a0', class: `dott ${this.state}` }))), this.icon !== 'only' && this.icon !== 'checkbox' && h("p", { key: 'a2f76f45097a7773a6fdbcae390635f55e791147', class: "text-sm-semi-bold" }, this.label)));
     }
     static get is() { return "gb-button-group-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-card-icon/gb-card-icon.js

@@ -14,7 +14,7 @@ export class GbCardIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '77fb94a66ca3f8912cbc1ef74a907ffc468b877d', class: `card_icon_div ${this.color} ${this.size}` }, h("div", { key: '8b3972cf5d6bd86a7a66b57a1dab518af79dc915', class: `icon_svg ${this.size}`, innerHTML: this.leadingIconSvg })));
+        return (h("div", { key: 'dd8f6c525363f52bcb406675e85fab006dac6b6b', class: `card_icon_div ${this.color} ${this.size}` }, h("div", { key: '03e1d3164e676670a0cb3014912dc339f935d754', class: `icon_svg ${this.size}`, innerHTML: this.leadingIconSvg })));
     }
     static get is() { return "gb-card-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-carousel-arrow/gb-carousel-arrow.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbCarouselArrow {
     render() {
-        return (h("div", { key: '9a3b1130a90efebcd3cb43e3d39ae1d332e1936e', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: '431dedb3a9c7f33f61c47c16da281053c80ac28e', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'dbe4bc254fa784c9c7227e66c7b8301fca5fa7bb', d: "M15 5.99989C15 5.99989 9.00001 10.4188 9 11.9999C8.99999 13.5811 15 17.9999 15 17.9999", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.chevron === 'right' && (h("svg", { key: '8c558cd8d678d07d13270ca8079aaf66b8454eeb', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '77a6c4844fed80e2428d62ab890ddb15f53ffda9', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("div", { key: 'e9e842f534d00a76621d8634b29f64982b2ed203', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: '892af6f3ba0cbd6881ada2c7f200a1b082974df5', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '6bebe1e14968ddefff3b9c730f4a7186b5898764', d: "M15 5.99989C15 5.99989 9.00001 10.4188 9 11.9999C8.99999 13.5811 15 17.9999 15 17.9999", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.chevron === 'right' && (h("svg", { key: '3b613c62746364c953df7d3da68b1fa497f37833', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '4e11ea957520dc2e9b81846621db763bb7b0bb17', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "gb-carousel-arrow"; }
     static get originalStyleUrls() {

package/dist/collection/components/gb-category-card/gb-category-card.js

@@ -17,7 +17,7 @@ export class GbCategoryCard {
         this.setBackgroundImage();
     }
     render() {
-        return (h("div", { key: 'fd8f40b46f34af20536710a391803ec2a5520e7e', class: "card shadow-xs" }, h("div", { key: '920a120025601c97f005107e53fb3e94e40bf723', class: "image_container" }, h("div", { key: 'f8d8115a341bc30a6aebda78c9768df211a7bc11', class: "image", ref: el => (this.imageContainerEl = el) })), h("div", { key: '6e0564bfb082801c84545fc09d48225af5ed6395', class: "Globus-pattern" }, h("div", { key: 'b0712e0922e6c19c4fbda909f230d7937f6d7438', class: "red" }), h("div", { key: 'bd5255ee5a5635c9280c2302cef909ba0a6ae45f', class: "blue" })), h("div", { key: 'e5d8737f5f636b3b419b0b96fce9c3ad735118d7', class: "card-content" }, h("h2", { key: '6e3c7c748a207540b061203c33f25ed7555f7b28', class: "text-xl-semi-bold card-title" }, this.label), this.showSupportingText && this.supportingText && h("p", { key: '31797e5cc0340caf34aa9f03fd2ba2a417e03f43', class: "text-sm-regular supporting-text" }, this.supportingText))));
+        return (h("div", { key: '3fcfecf45974968c17a19c9afa853a194e79cf1a', class: "card shadow-xs" }, h("div", { key: 'c093e7a9f8d994257ff836505eddcafef5d97889', class: "image_container" }, h("div", { key: '9df9b8ca65c7c5ee545787a94319f7e54c88d2f2', class: "image", ref: el => (this.imageContainerEl = el) })), h("div", { key: '92c96ed779bafc5c46e80ef446e5934e36e37abb', class: "Globus-pattern" }, h("div", { key: 'b59054592774b6d4f12b8768613f8d485ed82043', class: "red" }), h("div", { key: 'b73dfaa7f91b102b510771fa1b689d79392c2ade', class: "blue" })), h("div", { key: 'fd0875d9120160fa107faedb6780233ed8546fa7', class: "card-content" }, h("h2", { key: '75e1b6785689f6221b1af449ddd3a387dbe495d2', class: "text-xl-semi-bold card-title" }, this.label), this.showSupportingText && this.supportingText && h("p", { key: '3184dcde515b8882ba90e985fad4e376c863f065', class: "text-sm-regular supporting-text" }, this.supportingText))));
     }
     static get is() { return "gb-category-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class GbCheckbox {
         this.checkboxClicked.emit(event.detail);
     }
     render() {
-        return (h("div", { key: 'dda4282d86c15ab322c0fb8632fa1f307915e557', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: 'c9e41db358794232f8af0e546c13d41352110cf5', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: '151141f94efa8599a6f6cbc5fe3224a5ef1b72c7', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this), checked: this.checked })), this.text && (h("div", { key: '13942e203f0291547990da4ce097a75d606bc5d5', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: 'e545a91756b571b001324d92b9ea9ccd73d35044', name: "label" }), this.supportingText && h("slot", { key: '72e74777bccec3c8cf646b0304e1d2b0be67a514', name: "supporting_text" })))));
+        return (h("div", { key: '078bb6091648d6df562f9774339a179a2c472e9c', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: '3e94b1f17f6167c239b60e8d8ebd4b6fcd36696b', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: '78b2c2879eaa74bab13e41775fa8250c4b426e78', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this), checked: this.checked })), this.text && (h("div", { key: 'a266ff7ac233117f63731229cc0bda878bf1101d', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: '13b5eea135668c3a1751cebbb5c2b9b8cb9c110b', name: "label" }), this.supportingText && h("slot", { key: '6b81ad1d9e677a43c5df36ee6bf549b19e5744b9', name: "supporting_text" })))));
     }
     static get is() { return "gb-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-checkbox-base/gb-checkbox-base.js

@@ -99,7 +99,7 @@ export class GbCheckboxBase {
         }
     }
     render() {
-        return (h("div", { key: '19017c2c3691a55a91a5fa376754373481fff764', class: `checkbox_container ${this.size}`, onClick: () => {
+        return (h("div", { key: '7dec1e1607b5293f210beec19ef567d008f585af', class: `checkbox_container ${this.size}`, onClick: () => {
                 if (this.type === 'checkbox') {
                     return this.toggleCheckboxState();
                 }

package/dist/collection/components/gb-checkbox-group/gb-checkbox-group.js

@@ -5,7 +5,7 @@ export class GbCheckboxGroup {
         this.selected = false;
     }
     render() {
-        return (h("div", { key: '982e6406a5e7fa68814bcc77639d51aab88421a8', class: `checkbox_group` }, h("gb-checkbox-group-item", { key: '4d62269a376819604975b747ca70903a2e3d2153', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '1aeb883b8ff96f2b65b8e0edb2fd1be665352a61', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'd7e21a8d0dcd6c733e83f6143d961cf5f706992a', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'b4ce80a46e6110dc9b6905839a60e6e3580d66e8', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '641e1f59a330278ac4b6135d10bf0669dbaaf3f1', size: this.size, type: this.type, breakpoint: this.breakpoint })));
+        return (h("div", { key: '4064bab0732c0f21d64acc45acfd2fba5fbb8de1', class: `checkbox_group` }, h("gb-checkbox-group-item", { key: 'a5c9a388a9a7847a044949d8d1bbb8ff2a9f9ffd', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '564e7cf5d17d15102cfb156430fc2cfd708469c7', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '7ac85d6aa26445b96c4121631bf81e52f0998524', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'af42ef6158d43e55cff6d9d409526994aabdff30', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '35480c69054ecd85f48dacf7a0e10eaa7b22c602', size: this.size, type: this.type, breakpoint: this.breakpoint })));
     }
     static get is() { return "gb-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-checkbox-group-item/gb-checkbox-group-item.js

@@ -124,10 +124,10 @@ export class GbCheckboxGroupItem {
     }
     render() {
         return [
-            h("div", { key: '92c1793432e54f167b4a000410fb5304406a0b2d', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, h("div", { key: '905f3b86964861f246a575a7084873b52411102b', class: "item-content" }, this.renderIcon(), h("div", { key: 'e7600f26d86800b40b82200445ff4a6ebf47aa03', class: "text-container" }, h("div", { key: '8843aa5e16f6d0374d20e15ba34bbfeb955899db', class: `label-cost ${this.type}` }, h("slot", { key: 'ae185237b9ea344df4e3b9fc5d316677d49040c1', name: "label" }), this.showCost && h("slot", { key: 'a094978ab9f80f9d3655f13fbb3f51f205299a77', name: "cost" })), this.type === 'payment_icon' ? (h("div", { class: "buttons" }, h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "Set as default")), h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, h("p", null, "Edit")))) : (h("slot", { name: "supporting_text" })), h("gb-button", { key: 'c8d5145ba9f62121559b93c98011ad4935788a73', class: "button", size: "lg", state: this.state, hierarchy: this.selected ? 'link_color' : 'link_gray', icon: "default", onClick: e => {
+            h("div", { key: '8a56d9461f62ed1b7268073f7b829baa6247e814', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, h("div", { key: '43eda36670d097ca277904a9b675647fd931b0ec', class: "item-content" }, this.renderIcon(), h("div", { key: '05439ed0c6a3c4bb3159011a3440ff9958e26ed5', class: "text-container" }, h("div", { key: '50b94e4e9ca3177a84bc6f133b7dfd05cf1b4062', class: `label-cost ${this.type}` }, h("slot", { key: 'ff4674924d44f2afce85337a77009e1a7637f8f2', name: "label" }), this.showCost && h("slot", { key: 'acfaa6f472157b9778dc9b9bccd35214a88d0694', name: "cost" })), this.type === 'payment_icon' ? (h("div", { class: "buttons" }, h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "Set as default")), h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, h("p", null, "Edit")))) : (h("slot", { name: "supporting_text" })), h("gb-button", { key: '29dbdf04939c0af97310e985225853c88bf0477a', class: "button", size: "lg", state: this.state, hierarchy: this.selected ? 'link_color' : 'link_gray', icon: "default", onClick: e => {
                     this.onButtonClicked();
                     e.stopPropagation();
-                } }, h("p", { key: 'd0c0370c4258f09bb30e2a5d3449211789f5bed0' }, this.buttonText)))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (h("div", { class: `checkbox_container` }, h("gb-checkbox", { type: this.checkboxType, size: this.size, state: this.state, checked: this.selected }))) : null),
+                } }, h("p", { key: '7959cf46e6a5f8f74c2931c501c1547449500232' }, this.buttonText)))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (h("div", { class: `checkbox_container` }, h("gb-checkbox", { type: this.checkboxType, size: this.size, state: this.state, checked: this.selected }))) : null),
         ];
     }
     static get is() { return "gb-checkbox-group-item"; }

package/dist/collection/components/gb-collapse-button/gb-collapse-button.js

@@ -35,7 +35,7 @@ export class GbCollapseButton {
     }
     render() {
         return [
-            h(Fragment, null, h("div", { key: '83193308a28f0a1e0736103de0fa9aa1033cfbce', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseOver: () => (this.isHovered = true), onMouseOut: () => (this.isHovered = false) }, h("div", { key: '7f4e48702adcd443591a7f5182c7a96184971e0f', class: `icon ${this.color} ${this.direction} ${this.action}`, innerHTML: this.leadingIconSvg })), this.isHovered && this.action === 'collapse' ? (h("gb-tooltip", { class: `tooltip ${this.direction}`, "show-arrow": true, arrow: this.direction === 'horizontal' ? 'left' : this.direction === 'vertical' ? 'bottom_left' : null }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.action === 'expand' ? (h("gb-tooltip", { class: `tooltip ${this.direction}`, "show-arrow": true, arrow: this.direction === 'horizontal' ? 'left' : this.direction === 'vertical' ? 'bottom_left' : null }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Expand"))) : null),
+            h(Fragment, null, h("div", { key: '4b509015e7dc60520c34a29cfd36a139cfb47694', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseOver: () => (this.isHovered = true), onMouseOut: () => (this.isHovered = false) }, h("div", { key: '6191b33529788b0e4cfede733d33fe3747e83ef5', class: `icon ${this.color} ${this.direction} ${this.action}`, innerHTML: this.leadingIconSvg })), this.isHovered && this.action === 'collapse' ? (h("gb-tooltip", { class: `tooltip ${this.direction}`, "show-arrow": true, arrow: this.direction === 'horizontal' ? 'left' : this.direction === 'vertical' ? 'bottom_left' : null }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.action === 'expand' ? (h("gb-tooltip", { class: `tooltip ${this.direction}`, "show-arrow": true, arrow: this.direction === 'horizontal' ? 'left' : this.direction === 'vertical' ? 'bottom_left' : null }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Expand"))) : null),
         ];
     }
     static get is() { return "gb-collapse-button"; }

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

@@ -66,7 +66,7 @@ export class GbComment {
         const patternSrcDarkMode = getAssetPath(`assets/background_pattern_dark_mode.svg`);
         const illustrationSrcLightMode = getAssetPath(`assets/illustration.svg`);
         const illustrationSrcDarkMode = getAssetPath(`assets/illustration_dark_mode.svg`);
-        return (h("div", { key: '18ddda042563ef988079460c5b0b5d31ad6c481b', class: `comments-container ${!hasComments ? 'no-comments-state' : ''}` }, h("div", { key: '935ce359008881960c2874b8543e847a6453dcfb', class: `header ${this.state}` }, h("div", { key: '822f3c2eb6f17dce8d9bfabf1e77782eb860ba02', class: "title-section" }, h("svg", { key: 'f429a4ddbfcdfa00a3bb9be4ce92b0813d984177', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "info-icon" }, h("path", { key: '84444085f7444c8622553d62e82368ff8c8c5aac', opacity: "0.4", d: "M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z", fill: "var(--color-icon-information, #064E94)" }), h("path", { key: 'cc6c679c2dff9d867d69bfd639e4ebccb5e1bfc6', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z", fill: "var(--color-icon-information, #064E94)" }), h("path", { key: 'ac7f289ef1027d32c1747ea84ccff1b86116756a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z", fill: "var(--color-icon-information, #064E94)" })), h("h2", { key: 'c463fabd02e0e160f06485dee5df39382ce3a38b', class: "text-md-semi-bold heading" }, this.heading)), h("gb-button", { key: 'b91c5ade53a2ee2bf59cb9c439263cc90cf98fbe', size: "sm", hierarchy: "link_color", icon: "default", onClick: () => this.toggleComments() }, this.state === 'expanded' ? h("p", null, "Hide Comments") : h("p", null, "Show Comments"))), this.state === 'expanded' &&
+        return (h("div", { key: '2b2ad83aca1880553c0f32dec8463762550f8771', class: `comments-container ${!hasComments ? 'no-comments-state' : ''}` }, h("div", { key: 'abcda384d2f90ed69ffa0844e2ee3c62ebaf57a6', class: `header ${this.state}` }, h("div", { key: '79be0873b23975766795db5107f5463cbe3750d1', class: "title-section" }, h("svg", { key: '6e657591cfcda854fe86f7cb70686af578bb3458', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "info-icon" }, h("path", { key: '13aefd3087378527811586672f47150d0cb8849c', opacity: "0.4", d: "M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z", fill: "var(--color-icon-information, #064E94)" }), h("path", { key: '593645e98ba539c18c0c25779fb6254ace1dfee9', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z", fill: "var(--color-icon-information, #064E94)" }), h("path", { key: 'bec5e6502b6737b60265f7abc4478da06bc96828', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z", fill: "var(--color-icon-information, #064E94)" })), h("h2", { key: 'd0b370fa4083626fbe9d6a7333043dcb2c2e62da', class: "text-md-semi-bold heading" }, this.heading)), h("gb-button", { key: '80ae35bc35ea87e744f5e33f01020d5125f1f161', size: "sm", hierarchy: "link_color", icon: "default", onClick: () => this.toggleComments() }, this.state === 'expanded' ? h("p", null, "Hide Comments") : h("p", null, "Show Comments"))), this.state === 'expanded' &&
             (hasComments ? (h("div", { class: "comments-wrapper" }, this.comments.map((comment, index) => (h("gb-comment-item", { key: index, name: comment.name, duty: comment.role, comment: comment.comment, "time-stamp": comment.timeStamp, connector: this.comments.length > 1 && index < this.comments.length - 1 ? true : false }))))) : (h("div", { class: "container" }, h("div", { class: "frame" }, this.isDarkTheme ? h("img", { src: patternSrcDarkMode, alt: "", class: "empty_state_pattern" }) : h("img", { src: patternSrcLightMode, alt: "", class: "empty_state_pattern" }), h("div", { class: "empty_state" }, h("div", { class: "content" }, this.isDarkTheme ? (h("img", { src: illustrationSrcDarkMode, alt: "bell-icon", class: "bell_icon" })) : (h("img", { src: illustrationSrcLightMode, alt: "bell-icon", class: "bell_icon" })), h("div", { class: "text" }, h("p", { class: "main-text text-lg-semi-bold" }, this.noCommentText), h("p", { class: "sub-text text-sm-regular" }, this.noCommentTextSub))))))))));
     }
     static get is() { return "gb-comment"; }