globuswebcomponents 0.7.9 → 0.8.1

package/dist/collection/components/{gb-badges/gb-badges.css → gb-badge/gb-badge.css}

@@ -2780,49 +2780,76 @@ div.pill_color.gray,
     align-items: center;
 }
 
-.gray svg path {
-    fill: var(--color-text, #4B5565);
-    stroke:  var(--color-text, #4B5565) /*var(--color-icon)*/;
+.gray svg path[stroke] {
+    stroke:  var(--color-icon, #4B5565) /*var(--color-icon)*/;
 }
 
-.primary svg path {
-    fill: var(--color-text-brandDarkBlue, #212C65);
-    stroke: var(--color-text-brandDarkBlue, #212C65);
+.gray svg path[fill] {
+    fill: var(--color-icon, #4B5565);
 }
 
-.error svg path {
-    fill: var(--color-text-danger, #B51726);
-    stroke: var(--color-text-danger, #B51726);
+.primary svg path[stroke] {
+    stroke: var(--color-icon-brandDarkBlue, #212C65);
 }
 
-.warning svg path {
-    fill: var(--color-text-warning, #DC6803);
-    stroke: var(--color-text-warning, #DC6803);
+.primary svg path[fill] {
+    fill: var(--color-icon-brandDarkBlue, #212C65);
 }
 
-.success svg path{
-    fill: var(--color-text-success, #079455);
-    stroke: var(--color-text-success, #079455);
+.error svg path[stroke] {
+    stroke: var(--color-icon-danger, #B51726);
 }
 
-.discovery svg path {
-    fill: #0BA5EC;
-    stroke: #0BA5EC/*Blue light/500*/; /**/
+.error svg path[fill] {
+    fill: var(--color-icon-danger, #B51726);
 }
 
-.information svg path {
-    fill: var(--color-text-information, #064E94);
-    stroke: var(--color-text-information, #064E94);
+.warning svg path[stroke] {
+    stroke: var(--color-icon-warning, #DC6803);
 }
 
-.pink svg path{
-    fill: var(--color-text-pink, #DD2590);
-    stroke: var(--color-text-pink, #DD2590);
+.warning svg path[fill] {
+    fill: var(--color-icon-warning, #DC6803);
 }
 
-.purple svg path {
-    fill: var(--color-text-purple, #6938EF);
-    stroke: var(--color-text-purple, #6938EF);
+.icon.success svg path[stroke] {
+    stroke: var(--color-icon-success, #079455);
+}
+
+.success svg path[fill] {
+    fill: var(--color-icon-success, #079455);
+}
+
+.discovery svg path[stroke] {
+    stroke: var(--color-icon-discovery, #0086C9);
+}
+
+.discovery svg path[fill] {
+    fill: var(--color-icon-discovery, #0086C9);
+}
+
+.information svg path[stroke] {
+    stroke: var(--color-icon-information, #064E94);
+}
+
+.information svg path[fill] {
+    fill: var(--color-icon-information, #064E94);
+}
+
+.pink svg path[stroke] {
+    stroke: var(--color-icon-pink, #DD2590);
+}
+
+.pink svg path[fill] {
+    fill: var(--color-icon-pink, #DD2590);
+}
+
+.purple svg path[stroke] {
+    stroke: var(--color-icon-purple, #6938EF);
+}
+
+.purple svg path[fill] {
+    fill: var(--color-icon-purple, #6938EF);
 }
 
 .pill_outline {
@@ -2894,14 +2921,16 @@ div.pill_color.gray,
     width: var(--spacing-4);
     height: var(--spacing-4);
     margin-top: -2px;
-    fill: currentColor;
 }
 
-.icon svg path {
-    fill: currentColor;
+.icon svg path[stroke] {
     stroke: currentColor;
 }
 
+.icon svg path[fill] {
+    fill: currentColor;
+}
+
 #icon-only svg {
     width: var(--spacing-3);
     height: var(--spacing-3);

package/dist/collection/components/{gb-badges/gb-badges.js → gb-badge/gb-badge.js}

@@ -72,20 +72,20 @@ export class GbBadges {
             [this.color]: true,
             [this.size]: true
         };
-        const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);
+        const flagSwap = getAssetPath(`${this.flagSwap}`);
         const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';
-        return (h("div", { key: '45af5d2f8b7c78e5e237e4ec4771b4441e15b999', class: classes }, this.icon === 'dot' && (h("svg", { key: 'fba45c432a7bb3190749998720b7b8f1abb2954d', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: dotColor }, h("circle", { key: 'c3f9ce8cb0bcad1a39ac8e15e17791f13dbed873', cx: "4", cy: "4", r: "3" }))), this.icon === 'icon_leading' && this.iconLeadingSwap && (h("div", { key: 'd70a64412590e83b9c16e7f840a1ae49c6f7457e', class: "icon left-icon", innerHTML: this.leadingIconContent, style: { color: this.color } })), this.icon === 'country' && (h("div", { key: '4bcb7f6b78253798479ac9cd6e7b9c88202d7cfa', class: "icon left-icon" }, h("img", { key: '0d40cca9830b5df802a9d420bc485b3c42cc952c', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '67c5be2a265e102ff3c513b0d63c3aa8db0100af', class: "avatar-icon", size: "xxs", "status-icon": "false" }, h("slot", { key: 'fa6da772e76c5e4bbc750973cc535f812ccd72a8', name: 'image', slot: 'image' }))), this.icon !== 'only' && (h("slot", { key: '44c7a0ef932029d7fe049618dd626c5003a4ee2f' })), this.icon === 'icon_trailing' && this.iconTrailingSwap && (h("div", { key: '8f06af2f78c728435b0afddfa32034ecc5e356bf', class: "icon right-icon", innerHTML: this.trailingIconContent, style: { color: this.color } })), this.icon === 'only' && (h("div", { key: '5d4c9551182accd07664e4b823a06759d43a901d', id: "icon-only" }, h("svg", { key: 'efef2c9c7616288bb61340df2c69eb74c4765777', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", stroke: dotColor }, h("path", { key: '9a1a90e2809cb7a6389e318c4b5d39d426955289', d: "M6 2L6 10M10 6L2 6", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.closeButton && this.icon !== 'only' && h("gb-badge-close", { key: 'b3255ce45fd36c910491fef7393bd92fd3e8940c', color: this.color, type: 'rounded' })));
+        return (h("div", { key: '81fb13b8fd3e732ff53e491799562b4bd8ab0dee', class: classes }, this.icon === 'dot' && (h("svg", { key: 'a0d1deb8968d72c0b6e8feaaa75290e89ffd145d', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: dotColor }, h("circle", { key: '1e50ef5db437e600ab9534de2935b35d958a02d4', cx: "4", cy: "4", r: "3" }))), this.icon === 'icon_leading' && this.iconLeadingSwap && (h("div", { key: '992a0ee8e196f0198b700eff5be1b3a743c56425', class: `icon left-icon`, innerHTML: this.leadingIconContent })), this.icon === 'country' && (h("img", { key: '160ce9f76b01a03683029c3672e8949ccef8b54c', src: flagSwap, alt: "Country Icon" })), this.icon === 'avatar' && (h("gb-avatar", { key: 'b24c02926bbe2af5ace25a0f7f1dc95d526ebfbb', class: "avatar-icon", size: "xxs", "status-icon": "false" }, h("slot", { key: '1562f07322453d1fe4aeba1b754d1992a1dcc574', name: 'image', slot: 'image' }))), this.icon !== 'only' && (h("slot", { key: '6091211c7d1eca6f13fe1704db6d2f60bd2bca02' })), this.icon === 'icon_trailing' && this.iconTrailingSwap && (h("div", { key: 'a0f93d07919aaa8276c7d1545ae4f1884dce7b6a', class: `icon right-icon`, innerHTML: this.trailingIconContent })), this.icon === 'only' && (h("div", { key: '4e5b265d6d17fb26885f2379acca088374be9281', id: "icon-only" }, h("svg", { key: 'b9fc2220e7c007aa9095e0bc9adc86b010b9f931', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", stroke: dotColor }, h("path", { key: '47f574062afb332133bf8f9c30404bb10e2c20e8', d: "M6 2L6 10M10 6L2 6", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.closeButton && this.icon !== 'only' && h("gb-badge-close", { key: '99257134d312f5ccb9134c0fe590f7a6af58eb3e', color: this.color, type: 'rounded' })));
     }
     static get is() { return "gb-badge"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["gb-badges.css"]
+            "$": ["gb-badge.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["gb-badges.css"]
+            "$": ["gb-badge.css"]
         };
     }
     static get assetsDirs() { return ["assets"]; }
@@ -250,4 +250,4 @@ export class GbBadges {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=gb-badges.js.map
+//# sourceMappingURL=gb-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-badge.js","sourceRoot":"","sources":["../../../src/components/gb-badge/gb-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, getAssetPath, h, State, Element } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-badge',\r\n  styleUrl: 'gb-badge.css',\r\n  shadow: true,\r\n  assetsDirs: ['assets']\r\n})\r\nexport class GbBadges {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() icon: 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only';\r\n  @Prop() iconLeadingSwap?: string; \r\n  @Prop() iconTrailingSwap?: string;\r\n  @Prop() flagSwap: string;\r\n  @Prop() color: GeneralColors;\r\n  @Prop() type: 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n  @Prop() closeButton?: boolean = false;\r\n\r\n  @State() leadingIconContent: string;\r\n  @State() trailingIconContent: string;\r\n  @Element() el: HTMLElement;\r\n\r\n  private getDotColor(color: GeneralColors): string {\r\n    const colorMap = {\r\n      'gray': '#4B5565',\r\n      'primary': '#212C65',\r\n      'error': '#B51726',\r\n      'warning': '#DC6803',\r\n      'success': '#079455',\r\n      'discovery': '#0BA5EC',\r\n      'information': '#064E94',\r\n      'pink': '#DD2590',\r\n      'purple': '#6938EF',\r\n    };\r\n    \r\n    if (this.type === 'badge_modern') {\r\n      return colorMap[color] || color;\r\n    }\r\n    \r\n    return 'currentColor';\r\n  }\r\n  \r\n\r\n  async componentWillLoad() {\r\n    if (this.iconLeadingSwap) {\r\n      const iconLeadingSrc = getAssetPath(`${this.iconLeadingSwap}`);\r\n      this.leadingIconContent = await this.fetchSvgContent(iconLeadingSrc);\r\n    }\r\n    \r\n    if (this.iconTrailingSwap) {\r\n      const iconTrailingSrc = getAssetPath(`${this.iconTrailingSwap}`);\r\n      this.trailingIconContent = await this.fetchSvgContent(iconTrailingSrc);\r\n    }\r\n  }\r\n\r\n  private async fetchSvgContent(src: string): Promise<string> {\r\n    try {\r\n      const response = await fetch(src);\r\n      if (response.ok) {\r\n        return await response.text();\r\n      }\r\n      return '';\r\n    } catch (error) {\r\n      console.error('Error fetching SVG:', error);\r\n      return '';\r\n    }\r\n  }\r\n\r\n  getTextClass() {\r\n    switch (this.size) {\r\n      case 'sm' : return 'text-xs-medium';\r\n      case 'md' : return 'text-sm-medium';\r\n      case 'lg' : return 'text-sm-medium';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedContent = this.el.querySelector('p');\r\n\r\n    if(slottedContent) {\r\n      slottedContent.classList.add(this.getTextClass());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const classes = {\r\n      'badge': true,\r\n      [this.type]: true,\r\n      [this.color]: true,\r\n      [this.size]: true\r\n    };\r\n\r\n    const flagSwap = getAssetPath(`${this.flagSwap}`);\r\n    const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';\r\n\r\n    return (\r\n      <div class={classes}>\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={dotColor}>\r\n            <circle cx=\"4\" cy=\"4\" r=\"3\" />\r\n          </svg>\r\n        )}\r\n        {this.icon === 'icon_leading' && this.iconLeadingSwap && (\r\n          <div class={`icon left-icon`} innerHTML={this.leadingIconContent}></div>\r\n        )}\r\n        {this.icon === 'country' && (\r\n            <img src={flagSwap} alt=\"Country Icon\" />\r\n        )}\r\n        {this.icon === 'avatar' && (\r\n          <gb-avatar class=\"avatar-icon\" size=\"xxs\" status-icon=\"false\">\r\n            <slot name='image' slot='image'></slot>\r\n          </gb-avatar>\r\n        )}\r\n        {this.icon !== 'only' && (\r\n            <slot></slot>\r\n        )}\r\n        {this.icon === 'icon_trailing' && this.iconTrailingSwap && (\r\n          <div class={`icon right-icon`} innerHTML={this.trailingIconContent}></div>\r\n        )}\r\n        {this.icon === 'only' && (\r\n          <div id=\"icon-only\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" stroke={dotColor}>\r\n              <path d=\"M6 2L6 10M10 6L2 6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          </div>\r\n        )}\r\n        {this.closeButton && this.icon !== 'only' && <gb-badge-close color={this.color} type='rounded'></gb-badge-close>}\r\n      </div>\r\n    );    \r\n  }    \r\n}\r\n"]}

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

@@ -5,7 +5,7 @@ export class BadgeClose {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: 'edc7820b2ccecd2b27b536498160c9db2a4453e2', class: `${this.color} ${this.type}` }, h("svg", { key: '4e7f4d55a30af348792187e2e69a788c08b131ba', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '06e5ff64fdf938b69818273388b3e7ec963b94f0', d: "M9.50024 2.5L2.50024 9.5M2.50024 2.5L9.50024 9.5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: '0d65a0dc57365e35cc9d7e241845dbb071ca7e26', class: `${this.color} ${this.type}` }, h("svg", { key: 'd5ac75414cae6926e6063925133db54d80627a81', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'd25915b5aa6254fd5c3c74ea251423766ddf6137', d: "M9.50024 2.5L2.50024 9.5M2.50024 2.5L9.50024 9.5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-badge-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2962,4 +2962,8 @@ button.link_color.disabled{
 
 .btn_text{
   white-space: nowrap;
+}
+
+.btn_text::first-letter{
+  text-transform: uppercase;
 }

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

@@ -71,7 +71,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: '866fc36d6ea5b6d2197db52c6b1254b29cef3330', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: '67993701f680d5979b246ea423404dcbc57c29a7', class: `btn_text` }, h("slot", { key: '50d7acd905fda1f90a8f902bea3bd92917c8eb8d' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: '6acd825a3450b118296c229bc9a9e72109579dc6', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: '37e59f2ab56eb21b1efb24636ae46c38dae31333', class: `btn_text` }, h("slot", { key: '711f4beda3081cdd403334ce20aef7874bf0bbaa' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
     }
     static get is() { return "gb-btn"; }
     static get originalStyleUrls() {

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

@@ -69,7 +69,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: '2a4640380395e3fe7787fbdd71dbcc199eb6c282', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '81b4c1064ccc0248b592c9adc850a4b437bf3f24' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: '8c24b1b61fe7d01658b045b636afb664cdcfa581', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: 'fa3a3a465a0b6dbacebfa400dc36523d8c7539a5' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
     }
     static get is() { return "gb-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-button/readme.md

@@ -25,6 +25,7 @@
 ### Used by
 
  - [gb-checkbox-group-item](../gb-checkbox-group-item)
+ - [gb-file-upload](../gb-file-upload)
  - [gb-file-upload-item-base](../gb-file-upload-item-base)
  - [gb-input-field](../gb-input-field)
  - [gb-notification-pane](../gb-notification-pane)
@@ -36,6 +37,7 @@
 ```mermaid
 graph TD;
   gb-checkbox-group-item --> gb-button
+  gb-file-upload --> gb-button
   gb-file-upload-item-base --> gb-button
   gb-input-field --> gb-button
   gb-notification-pane --> gb-button

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

@@ -5,7 +5,7 @@ export class GbButtonClose {
         this.color = undefined;
     }
     render() {
-        return (h("div", { key: 'ef3157a4b2af08e6b2ebf9d9a6ed15043e858bad', class: `${this.size} ${this.color}` }, h("svg", { key: 'c85a6e8766f352a491146ad4e3da695f069a8ca8', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: 'a321a4b10a2c4cf91f1aa3a599eb9e39b153181e', 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: '2b569311650f8e7f8df9bf5023d4efdfb808e909', class: `${this.size} ${this.color}` }, h("svg", { key: 'b9266ed3ec3581337fbbf9a442458a431388adae', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: 'cdab476fc4339c6aaaca95f2776d0d80b98ce439', 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-carousel-arrow/gb-carousel-arrow.js

@@ -5,7 +5,7 @@ export class GbCarouselArrow {
         this.chevron = undefined;
     }
     render() {
-        return (h("div", { key: '1ab086b598f6dcc7bde3581e77eb5ffd3fd21a0b', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: 'b87968f1956583d57836d30f80d802e73335b7ff', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '37be7a87d819279562ca536827d8697f722dcde3', 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: '66f8295f86ed1c84edd90a2f70778f1de26e4f0a', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '1bd1a4435380451d10c2e1e105c3e746d1299c7c', 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: '1eac32ced38a6572dbfaf8a6bdadaa4ec622e1b4', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: 'baa15d36d98f71149c9305e42d77314b29fa9963', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '275a3f83ef7d81b9a93aaa6d20bfd09b39281874', 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: 'df9e874437bfdb4e7f97af63c7384d377e2e9229', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c766615cdb5c84ac967f504f03e2310b01abcf04', 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-checkbox/gb-checkbox.js

@@ -32,7 +32,7 @@ export class GbCheckbox {
         }
     }
     render() {
-        return (h("div", { key: '323d7ecf21e91bc08833b4ed37045888529c5b71', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: 'cb75524f0e3a4644da9196ee2590404414d47a71', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: '860fcd355c5e700c60f561eecb86087cf405869b', size: this.size, type: this.type, checked: this.checked, state: this.state, indeterminate: this.indeterminate })), this.text && (h("div", { key: '84ca77d4165516969d01fd20ad3d316c7b57fd80', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: 'a3b4614ef4ee6e29ea26254b3fbfc2bb77371212', name: "label" }), this.supportingText && h("slot", { key: '0dc557109f1782204446568f555471b08481fddf', name: "supporting_text" })))));
+        return (h("div", { key: '79b9203ec7b61931a6599c3a340f23b3443c247a', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: 'ee11e192285219e6c0410088171a5a1f8481150d', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: '4acd129ce70e21ae3e825a69adc1f18095e74d28', size: this.size, type: this.type, checked: this.checked, state: this.state, indeterminate: this.indeterminate })), this.text && (h("div", { key: '708fcdb1a6b1a24db60130059c9a5f510d0fd30f', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: '6129d5b937caa8d6aa6abcf98c99ff1b770a8e6d', name: "label" }), this.supportingText && h("slot", { key: '617ad8dcd069c6ae06be0573247c10883fde27ef', 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

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

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

@@ -8,7 +8,7 @@ export class GbCheckboxGroup {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: 'f8d8bc00b8d362331561d102e09214fcaca7e5b5', class: `checkbox_group` }, h("gb-checkbox-group-item", { key: 'f78f4441f08805d5e3b0a7c81cef240a15c95c18', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '41a2192c389db8d080fd8f9b5d8a024b07fc0d92', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '0c7eae7defbd9182bb32534aa405bedd2a178aac', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '9a8a345bbd0989fdd818cf080cc967ef48a2ea23', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'db19546ac95a7682cd6feeb5b47148be3f87cad5', size: this.size, type: this.type, breakpoint: this.breakpoint })));
+        return (h("div", { key: '98fbe6df16267cf92ea165627ece6873463104af', class: `checkbox_group` }, h("gb-checkbox-group-item", { key: '05a95a79fee66c230bf69b542ea5de15a724ac43', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'f4ed5d3c4b35a4bdaa24e4abdde35f9391164b82', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '1028e2cfb3c35c1afd3378ee4c138c64f0d3a08b', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '077fc796a425fba664b3857569a0c324de8256d8', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'd0b584f30a5580d10a601f098b5073b9b6eb94ea', 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

@@ -86,7 +86,7 @@ export class GbCheckboxGroupItem {
     }
     render() {
         return [
-            h("div", { key: 'f427435fb4e9383880edea401f3b43b12dc73072', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, h("div", { key: '9511f4880d82dda1bc99748fb3474b7089ab198b', class: "item-content" }, this.renderIcon(), h("div", { key: '962259818d4749b5bfd8343064e105d4f81bed06', class: "text-container" }, h("div", { key: '16f9efd07f249f003c39deaff229b8033849b897', class: `label-cost ${this.type}` }, h("slot", { key: '7bf1d277f29244e984d14c2ce8a0be82f653f0b5', name: "label" }), this.showCost && h("slot", { key: 'ee9d31387ec60eb721ee187b1e7477984f53feb8', 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" })))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (h("div", { class: `checkbox_container` }, h("gb-checkbox", { type: 'check_circle', size: this.size, state: this.state, checked: this.selected }))) : null),
+            h("div", { key: 'ad5c5aabd140a42847b69586322cd5aa30060b82', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, h("div", { key: 'cd06927c898582750b1ffae9b0ae638535c3ab5e', class: "item-content" }, this.renderIcon(), h("div", { key: '0b4be9e2deb8ca6dee1f98b3472a22366760884b', class: "text-container" }, h("div", { key: '56481c355f9e5fed227476a33f8b3de586940b9c', class: `label-cost ${this.type}` }, h("slot", { key: '98205334e1d2044381d93528174d23e54528ffba', name: "label" }), this.showCost && h("slot", { key: '5b12a6410d6e6e7f939245a8d18acc1a222214f8', 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" })))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (h("div", { class: `checkbox_container` }, h("gb-checkbox", { type: 'check_circle', 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

@@ -24,9 +24,9 @@ export class GbCollapseButton {
     }
     render() {
         return [
-            h("div", { key: 'b5d6db9e07c86c3b16e4aac10656c12e4c6b3363' }, h("div", { key: 'ca8b970950b0ce19cd7372b1e4f099b99129fa7e', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseOver: () => (this.isHovered = true), onMouseOut: () => (this.isHovered = false) }, this.action === 'collapse' && [
-                h("svg", { key: 'b6cc7af0daea32e83c724f612659c72e744cd3c1', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'a15de8a50d7f76d3c4a039bac93f8ce9ef518972', d: "M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })),
-            ], this.action === 'expand' && (h("svg", { key: '0469af2f0cc94b813f8e594f48c91c545c2bdc22', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: '1b1dc72a7548e0287d480ee19d7f8b1a00bae767', d: "M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.isHovered && this.action === 'collapse' ? (h("gb-tooltip", { class: "tooltip", arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.action === 'expand' ? (h("gb-tooltip", { class: "tooltip", arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Expand"))) : null),
+            h("div", { key: '0af7d8483414b0d246e254799880e233a8aad5b9' }, h("div", { key: 'b60d62b092e57d5c38ce6b273d2b12f5ae4d4f77', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseOver: () => (this.isHovered = true), onMouseOut: () => (this.isHovered = false) }, this.action === 'collapse' && [
+                h("svg", { key: '7ee8813ea604f91d2a6d7b3b50ab2985c98b0232', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: '64875fada3f606a625fd3ee43de390c0839a8c77', d: "M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })),
+            ], this.action === 'expand' && (h("svg", { key: '163da0983f087566e3ebdf1fe0519b63b02c707a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'c76b46e29049702eca506f29c48fcbfbcd5047f8', d: "M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.isHovered && this.action === 'collapse' ? (h("gb-tooltip", { class: "tooltip", arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.action === 'expand' ? (h("gb-tooltip", { class: "tooltip", arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Expand"))) : null),
         ];
     }
     static get is() { return "gb-collapse-button"; }

package/dist/collection/components/{gb-slider-control-handle/slider-control-handle.css → gb-control-handle/gb-control-handle.css}

@@ -2668,20 +2668,20 @@
     justify-content: center;
     border-radius: var(--rounded-md); 
     border: 1.5px solid #075DB2;
-    background: #FFFFFF;
+    background: var(--color-background-card, #FFFFFF);
     box-sizing: border-box; 
     z-index: 1; 
 }
 
 .thumb-container.focused {
-    border: 1.5px solid #075DB2;
+    border: 1.5px solid var(--color-border-selected, #075DB2);
     box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10),
                 0px 1px 2px 0px rgba(16, 24, 40, 0.06),
                 0px 0px 0px 4px #F4EBFF;
 }
 
 .thumb-label {
-    color: var(--color-text-bold);
+    color: var(--color-text-bold, #202939);
     text-align: center;
     position: absolute;
     bottom: -20px; 
@@ -2706,11 +2706,11 @@ gb-tooltip p {
 }
 
 .thumb-container.hover {
-    border-color: #003E7E;
+    border-color: var(--color-border-selected, #075DB2);
 }
 
 .thumb-label {
-    color: #202939;
+    color: var(--color-text-bold, #202939);
     text-align: center;
 }
   

package/dist/collection/components/{gb-slider-control-handle/slider-control-handle.js → gb-control-handle/gb-control-handle.js}

@@ -19,18 +19,18 @@ export class SliderControlHandle {
         this.isFocused = false;
     }
     render() {
-        return (h("div", { key: 'bdc8087fdcb6f0115c6abcfa2b167dfd9fc259d3', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: 'e8ca1103aaf8cb7d92db55528919e5d1a2395e80', class: "tooltip-container" }, h("gb-tooltip", { key: '28028915ee3e0d97ca6ac9e2187da95dbf4b5848', arrow: 'none' }, h("p", { key: '34f323117268f955c77a4b5f7cbce8e00668306c', class: "text-xs-semi-bold", slot: "main_text" }, this.value, "%")))), this.type === 'text' && (h("div", { key: '34b661941c8fcce9114f7396842416e7e01cebcd', class: "thumb-label" }, this.value, "%"))));
+        return (h("div", { key: '1eea33e0d2151b11f5be6626355b71bc2059df1c', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: '55985c24dd52bcc60189d299d82aa38463326a0f', class: "tooltip-container" }, h("gb-tooltip", { key: '0b742241bef092949efb0c73b32ed7f45585d3d2', arrow: 'none' }, h("p", { key: 'eae1eb9ebc5be01df34f979aec171f74909dcafa', class: "text-xs-semi-bold", slot: "main_text" }, this.value, "%")))), this.type === 'text' && (h("div", { key: '1500bc27f0c9fb75015461c7bd0655866691db9c', class: "thumb-label" }, this.value, "%"))));
     }
-    static get is() { return "gb-slider-control-handle"; }
+    static get is() { return "gb-control-handle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["slider-control-handle.css"]
+            "$": ["gb-control-handle.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["slider-control-handle.css"]
+            "$": ["gb-control-handle.css"]
         };
     }
     static get properties() {
@@ -79,4 +79,4 @@ export class SliderControlHandle {
         };
     }
 }
-//# sourceMappingURL=slider-control-handle.js.map
+//# sourceMappingURL=gb-control-handle.js.map

package/dist/collection/components/gb-control-handle/gb-control-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-control-handle.js","sourceRoot":"","sources":["../../../src/components/gb-control-handle/gb-control-handle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,mBAAmB;;qBACN,CAAC;;yBAGK,KAAK;yBACL,KAAK;;IAEnC,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,mBAAmB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EACzG,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAC/B,QAAQ,EAAC,GAAG;YAET,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,mEAAY,KAAK,EAAC,MAAM;oBACtB,0DAAG,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,WAAW;wBAAE,IAAI,CAAC,KAAK;4BAAM,CACpD,CACT,CACP;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,4DAAK,KAAK,EAAC,aAAa;gBACrB,IAAI,CAAC,KAAK;oBACP,CACP,CACG,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-control-handle',\r\n  styleUrl: 'gb-control-handle.css',\r\n  shadow: true,\r\n})\r\nexport class SliderControlHandle {\r\n  @Prop() value: number = 0;\r\n  @Prop() type?: 'text' | 'tooltip'; \r\n  \r\n  @State() isHovered: boolean = false; \r\n  @State() isFocused: boolean = false; \r\n\r\n  handleMouseEnter() {\r\n    this.isHovered = true;\r\n  }\r\n\r\n  handleMouseLeave() {\r\n    this.isHovered = false;\r\n  }\r\n\r\n  handleFocus() {\r\n    this.isFocused = true;\r\n  }\r\n\r\n  handleBlur() {\r\n    this.isFocused = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class={`thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`}\r\n        onMouseEnter={() => this.handleMouseEnter()}\r\n        onMouseLeave={() => this.handleMouseLeave()}\r\n        onFocus={() => this.handleFocus()}\r\n        onBlur={() => this.handleBlur()}\r\n        tabindex=\"0\"\r\n      >\r\n          {this.type === 'tooltip' && (\r\n            <div class=\"tooltip-container\">\r\n              <gb-tooltip arrow='none'>\r\n                <p class=\"text-xs-semi-bold\" slot=\"main_text\">{this.value}%</p>\r\n              </gb-tooltip>\r\n            </div>\r\n          )}\r\n          {this.type === 'text' && (\r\n            <div class=\"thumb-label\">\r\n              {this.value}%\r\n            </div>\r\n          )}\r\n        </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.css

@@ -2681,7 +2681,7 @@
 
 .label {
     flex-grow: 1;
-    color: #4B5565;
+    color: var(--color-text, #4B5565);
     font-family: var(--Font-Family-Body, Sora);
     font-size: var(--Font-Size-T-sm, 12px);
     font-style: normal;
@@ -2693,7 +2693,7 @@
 .shortcut-icon {
     display: flex;
     justify-content: flex-end;
-    color: #4B5565;
+    color: var(--color-text, #4B5565);
     font-family: var(--Font-Family-Body, Sora);
     font-size: var(--Font-Size-T-xs, 12px);
     font-style: normal;
@@ -2714,27 +2714,27 @@ gb-checkbox {
 }
 
 .shortcut:hover {
-    background-color: #EEF2F6;
+    background-color: var(--color-background-gray-subtler, #EEF2F6);
 }
 .shortcut:active {
-    background: #E3E8EF;
+    background: var(--color-background-gray-subtle, #E3E8EF);
 }
 
 .shortcut.disabled {
-    background-color: #ffffff;
-    color: #CDD5DF;
+    background-color: var(---color-background-card, #ffffff);
+    color: var(--color-text-disabled, #CDD5DF);
     pointer-events: none;
 }
 
 .shortcut.disabled .label,
 .shortcut.disabled .shortcut-icon,
 .shortcut.disabled gb-checkbox {
-    color: #CDD5DF; /* Ensures all text/icons use the disabled color */
+    color: var(--color-text-disabled, #CDD5DF); /* Ensures all text/icons use the disabled color */
 }
 
 .shortcut.disabled .icon img {
     opacity: 0.5;
-    stroke: #CDD5DF; /* Reduce opacity for the icon in disabled state */
+    stroke: var(--color-icon-disabled, #CDD5DF); /* Reduce opacity for the icon in disabled state */
 }
 
 /* Optional: You can also change the checkbox appearance */

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.js

@@ -12,7 +12,7 @@ export class GbDropdownShortcut {
     }
     render() {
         const iconSrc = this.iconSrc ? getAssetPath(`${this.iconSrc}`) : '';
-        return (h("div", { key: 'ffc76244eb167fa040f3bf07c9dc0ad0d91dbc7c', class: "shortcut-container" }, h("div", { key: '6a4c0bf22f32d6b0d26520f2fc4cf71d2860a2af', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''}` }, this.icon && (h("div", { key: '1c9ceda3fa7b419013d0317d292da5bc4b35e8cf', class: "icon" }, h("img", { key: '5b2f0a5d1e9db9ca3d3d9086cd23c84c5e4e4181', src: iconSrc, alt: "Icon" }))), this.checkbox && !this.icon && (h("gb-checkbox", { key: 'd8916c0644829d6b6eed287fac04384be8388749', class: "checkbox", size: "sm", type: 'checkbox', state: StateEnum.Default })), h("span", { key: '60d5f9cd9b91028ca2af7b55cec554f9a57d6cfb', class: "label" }, h("p", { key: '1ee98b5cea850312e35032d019c603e1dfde933d', class: `text-sm-medium` }, this.label)), this.shortcut && (h("span", { key: 'b76cde37a96caa8cdd0b9df55ea39ca527907aa3', class: "shortcut-icon" }, h("slot", { key: 'c43e8939bf477e7d70b7ad5a530dd0bd0ba68346' }, "\u2318", this.shortcutIcon))))));
+        return (h("div", { key: '1eb376334a2832b6c346b178dfc7934d82255ff8', class: "shortcut-container" }, h("div", { key: '31d389f56ff3c99b9624e9e51808ac541fe1fe2d', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''}` }, this.icon && (h("div", { key: '34a6f4e26e807a23d9e5bae40be7c9d8bfc6a10a', class: "icon" }, h("img", { key: 'bc3818ddf8406231f1f5745dc1c6ac9f713293c6', src: iconSrc, alt: "Icon" }))), this.checkbox && !this.icon && (h("gb-checkbox", { key: 'eefdd61bd50b3f7d5801b6e6ebf53e312a97cbbe', class: "checkbox", size: "sm", type: 'checkbox', state: StateEnum.Default })), h("span", { key: '0e423735cb9548612c4e4aba51b5bea57cd2d2f9', class: "label" }, h("p", { key: '4c2b671e3a05a493660181ee6f0f7b8e445019d3', class: `text-sm-medium` }, this.label)), this.shortcut && (h("span", { key: '5f3aa39f2eaf383f7e9757bf774424849f6e45dd', class: "shortcut-icon" }, h("slot", { key: 'cc6e73c3f63e1e69eec16fb24fc125ac5737786b' }, "\u2318", this.shortcutIcon))))));
     }
     static get is() { return "gb-dropdown-items-with-shortcut"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-export-dropdown/gb-export-dropdown.css

@@ -2675,6 +2675,12 @@
 
 .first_dropdown{
     position: absolute;
-    top: 0;
-    left: -0.5rem;
+    top: 6rem;
+    left: -9.8rem;
+}
+
+.second_dropdown{
+    position: absolute;
+    top: 9rem;
+    left: -9.8rem;
 }

package/dist/collection/components/gb-export-dropdown/gb-export-dropdown.js

@@ -6,11 +6,12 @@ export class GbExportDropdown {
         this.showFirstSubDropdown = false;
         this.showSecondSubDropdown = false;
     }
-    async onExportClicked(index) {
-        this.exportClicked.emit(index);
+    async onExportClicked(exportType, dataType) {
+        // this.exportClicked.emit({exportType, dataType});
+        console.log({ exportType, dataType });
     }
     render() {
-        return (h(Fragment, null, h("div", { key: '9459bea1a3f3b9ffbcc29faaee104a7b478bc7a9', class: `export_dropdown` }, h("gb-export-dropdown-item", { key: 'abfb3b985dc44b9ff259176c77452836c6b1e38e', type: "pdf", state: StateEnum.Default, onClick: () => this.onExportClicked(0), onMouseOver: () => this.showFirstSubDropdown = true, onMouseOut: () => this.showFirstSubDropdown = false }), h("gb-export-dropdown-item", { key: 'e09ad2efec7d2c5529e981d303338fc9e0686d9a', type: "csv", state: StateEnum.Default, onClick: () => this.onExportClicked(1) })), this.showFirstSubDropdown && h("gb-export-sub-dropdown", { key: '686f6ccb340b66260e15b5a00b4b5da55fc79531', class: `first_dropdown`, onMouseOver: () => this.showFirstSubDropdown = true, onMouseOut: () => this.showFirstSubDropdown = false }), this.showSecondSubDropdown && h("gb-export-sub-dropdown", { key: 'bf7b345cebb2cf23f23911d6061e7985300dd2b8', class: `second_dropdown` })));
+        return (h(Fragment, null, h("div", { key: '5b6edb70cd2833e1f0094937961cc51aa6ea3674', class: `export_dropdown` }, h("gb-export-dropdown-item", { key: '01cfe9c46858c82f878a049d1717b4f25b404645', type: "pdf", state: StateEnum.Default, onMouseOver: () => (this.showFirstSubDropdown = true), onMouseOut: () => (this.showFirstSubDropdown = false) }), h("gb-export-dropdown-item", { key: '480396dc6b26857a06cf81eeb3b88fda583b5cec', type: "csv", state: StateEnum.Default, onMouseOver: () => (this.showSecondSubDropdown = true), onMouseOut: () => (this.showSecondSubDropdown = false) })), this.showFirstSubDropdown && (h("gb-export-sub-dropdown", { key: 'df2ab81437fbfdc56a59cc235598bba22462331b', class: `first_dropdown`, onMouseOver: () => (this.showFirstSubDropdown = true), onMouseOut: () => (this.showFirstSubDropdown = false) }, h("p", { key: '313961557824387f13117795e2c4395b7e959486', slot: "label_one", onClick: () => this.onExportClicked('pdf', 'entire_data') }, "Entire Data"), h("p", { key: 'faa90a6c75c2bb49be4c65bcfa34a7b251c3b213', slot: "label_two", onClick: () => this.onExportClicked('pdf', 'data_on_view') }, "Data on view"), h("p", { key: '7904c980ac67f49deb2dcf9c77c1d65d4de4e71d', slot: "label_three", onClick: () => this.onExportClicked('pdf', 'filtered_data') }, "Filtered Data"))), this.showSecondSubDropdown && (h("gb-export-sub-dropdown", { key: 'ab2cbfbc77e2e74e3e22b86f61c5ad062a1975e0', class: `second_dropdown`, onMouseOver: () => (this.showSecondSubDropdown = true), onMouseOut: () => (this.showSecondSubDropdown = false) }, h("p", { key: '74ce977c8be6f7d91f7e5aa4cbbaad6e2a28c598', slot: "label_one", onClick: () => this.onExportClicked('csv', 'entire_data') }, "Entire Data"), h("p", { key: 'abb58d29b9e6e73749e6cc56cc07926d9158b10a', slot: "label_two", onClick: () => this.onExportClicked('csv', 'data_on_view') }, "Data on view"), h("p", { key: 'ce718a87d24efaf9c6be5d1c667f7fad4727d51b', slot: "label_three", onClick: () => this.onExportClicked('csv', 'filtered_data') }, "Filtered Data")))));
     }
     static get is() { return "gb-export-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -69,11 +70,12 @@ export class GbExportDropdown {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "{exportType: string, dataType: string}",
+                    "resolved": "{ exportType: string; dataType: string; }",
                     "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-export-dropdown.js.map

package/dist/collection/components/gb-export-dropdown/gb-export-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-export-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-export-dropdown/gb-export-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,OAAO,gBAAgB;;;oCAEc,KAAK;qCACJ,KAAK;;IAG/C,KAAK,CAAC,eAAe,CAAC,KAAa;QACjC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAE,iBAAiB;gBAC3B,gFACA,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EACtC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,GAAG,IAAI,EACnD,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,GAAG,KAAK,GACxB;gBAC3B,gFAAyB,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAA4B,CAC5H;YACL,IAAI,CAAC,oBAAoB,IAAI,+EAAwB,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,GAAG,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,GAAG,KAAK,GAA2B;YACjN,IAAI,CAAC,qBAAqB,IAAI,+EAAwB,KAAK,EAAE,iBAAiB,GAA2B,CACzG,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Fragment } from \"@stencil/core\";\r\nimport { StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-export-dropdown',\r\n  styleUrl: 'gb-export-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbExportDropdown {\r\n  @Prop() state: StateEnum;\r\n  @State() showFirstSubDropdown: boolean = false;\r\n  @State() showSecondSubDropdown: boolean = false;\r\n  @Event() exportClicked: EventEmitter<number>;\r\n\r\n  async onExportClicked(index: number) {\r\n    this.exportClicked.emit(index);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <div class={`export_dropdown`}>\r\n          <gb-export-dropdown-item \r\n          type=\"pdf\" state={StateEnum.Default} \r\n          onClick={() => this.onExportClicked(0)} \r\n          onMouseOver={() => this.showFirstSubDropdown = true} \r\n          onMouseOut={() => this.showFirstSubDropdown = false}\r\n          ></gb-export-dropdown-item>\r\n          <gb-export-dropdown-item type=\"csv\" state={StateEnum.Default} onClick={() => this.onExportClicked(1)}></gb-export-dropdown-item>\r\n        </div>\r\n        {this.showFirstSubDropdown && <gb-export-sub-dropdown class={`first_dropdown`} onMouseOver={() => this.showFirstSubDropdown = true} onMouseOut={() => this.showFirstSubDropdown = false}></gb-export-sub-dropdown>}\r\n        {this.showSecondSubDropdown && <gb-export-sub-dropdown class={`second_dropdown`}></gb-export-sub-dropdown>}\r\n      </>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-export-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-export-dropdown/gb-export-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,OAAO,gBAAgB;;;oCAEc,KAAK;qCACJ,KAAK;;IAI/C,KAAK,CAAC,eAAe,CAAC,UAAkB,EAAE,QAAgB;QACxD,mDAAmD;QACnD,OAAO,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAE,iBAAiB;gBAC3B,gFACE,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,SAAS,CAAC,OAAO,EACxB,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,EACrD,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,GAC5B;gBAC3B,gFACE,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,SAAS,CAAC,OAAO,EACxB,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,EACtD,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,GAC7B,CACvB;YACL,IAAI,CAAC,oBAAoB,IAAI,CAC5B,+EAAwB,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;gBAC3J,0DAAG,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,aAAa,CAAC,kBAEzE;gBACJ,0DAAG,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,mBAE1E;gBACJ,0DAAG,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,eAAe,CAAC,oBAE7E,CACmB,CAC1B;YACA,IAAI,CAAC,qBAAqB,IAAI,CAC7B,+EAAwB,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;gBAC9J,0DAAG,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,aAAa,CAAC,kBAEzE;gBACJ,0DAAG,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,mBAE1E;gBACJ,0DAAG,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,eAAe,CAAC,oBAE7E,CACmB,CAC1B,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Fragment, Element } from \"@stencil/core\";\r\nimport { StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-export-dropdown',\r\n  styleUrl: 'gb-export-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbExportDropdown {\r\n  @Prop() state: StateEnum;\r\n  @State() showFirstSubDropdown: boolean = false;\r\n  @State() showSecondSubDropdown: boolean = false;\r\n  @Event() exportClicked: EventEmitter<{exportType: string, dataType: string}>;\r\n  @Element() el: HTMLElement;\r\n\r\n  async onExportClicked(exportType: string, dataType: string) {\r\n    // this.exportClicked.emit({exportType, dataType});\r\n    console.log({ exportType, dataType });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <div class={`export_dropdown`}>\r\n          <gb-export-dropdown-item\r\n            type=\"pdf\"\r\n            state={StateEnum.Default}\r\n            onMouseOver={() => (this.showFirstSubDropdown = true)}\r\n            onMouseOut={() => (this.showFirstSubDropdown = false)}\r\n          ></gb-export-dropdown-item>\r\n          <gb-export-dropdown-item\r\n            type=\"csv\"\r\n            state={StateEnum.Default}\r\n            onMouseOver={() => (this.showSecondSubDropdown = true)}\r\n            onMouseOut={() => (this.showSecondSubDropdown = false)}\r\n          ></gb-export-dropdown-item>\r\n        </div>\r\n        {this.showFirstSubDropdown && (\r\n          <gb-export-sub-dropdown class={`first_dropdown`} onMouseOver={() => (this.showFirstSubDropdown = true)} onMouseOut={() => (this.showFirstSubDropdown = false)}>\r\n            <p slot=\"label_one\" onClick={() => this.onExportClicked('pdf', 'entire_data')}>\r\n              Entire Data\r\n            </p>\r\n            <p slot=\"label_two\" onClick={() => this.onExportClicked('pdf', 'data_on_view')}>\r\n              Data on view\r\n            </p>\r\n            <p slot=\"label_three\" onClick={() => this.onExportClicked('pdf', 'filtered_data')}>\r\n              Filtered Data\r\n            </p>\r\n          </gb-export-sub-dropdown>\r\n        )}\r\n        {this.showSecondSubDropdown && (\r\n          <gb-export-sub-dropdown class={`second_dropdown`} onMouseOver={() => (this.showSecondSubDropdown = true)} onMouseOut={() => (this.showSecondSubDropdown = false)}>\r\n            <p slot=\"label_one\" onClick={() => this.onExportClicked('csv', 'entire_data')}>\r\n              Entire Data\r\n            </p>\r\n            <p slot=\"label_two\" onClick={() => this.onExportClicked('csv', 'data_on_view')}>\r\n              Data on view\r\n            </p>\r\n            <p slot=\"label_three\" onClick={() => this.onExportClicked('csv', 'filtered_data')}>\r\n              Filtered Data\r\n            </p>\r\n          </gb-export-sub-dropdown>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}"]}