globuswebcomponents 1.7.3 → 1.7.4

package/dist/collection/components/gb-stepper-horizontal-icons-centered/gb-stepper-horizontal-icons-centered.js

@@ -17,7 +17,7 @@ export class GbStepperVerticalIconsCentered {
         this.seventhStepSupportingText = '';
     }
     render() {
-        return (h(Fragment, null, this.type === 'icon' && (h("div", { key: '4db95511f9f7d4226fa5f63f4dcccc4e4f4ba6d8', class: "icons_centered_div" }, this.breakpoint === 'mobile' && (h(Fragment, null, this.steps === 2 && (h(Fragment, null, h("gb-step-base", { key: '9990dca001c5595662e93c81462c6597d1d8b912', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: '10a2a80acccf9048fd922e7235e828b42d9d4e39', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: false, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }))), this.steps === 3 && (h(Fragment, null, h("gb-step-base", { key: '52cb37b10fdc7d2f30dca51ce663401159dd5978', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: 'bed46e5dbdbfc3e2bd8c4320f935cd17ec9b5848', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: '7e42a2c8bb9e8f826e775c5356bea2a16e8b772e', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: false, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }))), this.steps === 4 && (h(Fragment, null, h("gb-step-base", { key: 'c008057e9fc1b0cc171f6387002191b86819cd4f', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: 'ebbb632593ac652c8abf1165d5c3dcbb1a212a34', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: 'a775eb95362fc60a4c405d24bc038a1cc6569e92', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: true, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }), h("gb-step-base", { key: '10c444cfe2ce33552dd05b5466816e9351628c64', size: this.size, type: "icon_left", state: this.fourthStepState, status: this.fourthStepStatus, connector: false, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText }))), this.steps === 5 && (h(Fragment, null, h("gb-step-base", { key: 'd57bb2ee72e59196da0d7ad0b54be5b6bd146458', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: '9de23258786d2da27e4a1b9cb028221d488a1587', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: '37893e4492404ea13e673b479c6f732bc66f6745', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: true, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }), h("gb-step-base", { key: '878a69c8b6443cd1e65a80efed98622ab74c54fc', size: this.size, type: "icon_left", state: this.fourthStepState, status: this.fourthStepStatus, connector: true, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText }), h("gb-step-base", { key: 'c610a6f7c3224c3400edfd4b92ded65bc5cb2082', size: this.size, type: "icon_left", state: this.fifthStepState, status: this.fifthStepStatus, connector: false, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText }))), this.steps === 6 && (h(Fragment, null, h("gb-step-base", { key: '9c6ca4c21c0b3f00cc1aff000e8e2450650d8645', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: 'ad06803f120bba43406f970330d9fb0ff865e0a8', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: 'ec41d74cdd733f410e836cfd46abc82b7a78ee52', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: true, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }), h("gb-step-base", { key: '204b7c243395a212527555bc19ee7e4e132053cf', size: this.size, type: "icon_left", state: this.fourthStepState, status: this.fourthStepStatus, connector: true, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText }), h("gb-step-base", { key: 'ebc98ddef9462d694465df4d1c742c6dafd5f19d', size: this.size, type: "icon_left", state: this.fifthStepState, status: this.fifthStepStatus, connector: true, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText }), h("gb-step-base", { key: '82e63e6b3f7b27c380d631c207f564e64850d516', size: this.size, type: "icon_left", state: this.sixthStepState, status: this.sixthStepStatus, connector: false, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText }))), this.steps === 7 && (h(Fragment, null, h("gb-step-base", { key: '5a2a966cfb95ecfa5dac771a13f5618e1253c1b4', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: 'f90bc78cff2d2d80040ad1da2c83bd3f250c13fb', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: '8dee82b5ee997a554c6f3b0e3f8a01c35f08b751', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: true, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }), h("gb-step-base", { key: 'b9a0aaea4eb46c25988f4f6c01f7baf5e6c8b989', size: this.size, type: "icon_left", state: this.fourthStepState, status: this.fourthStepStatus, connector: true, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText }), h("gb-step-base", { key: '0c38a767330be6fbfa854cada240788c4f5868b2', size: this.size, type: "icon_left", state: this.fifthStepState, status: this.fifthStepStatus, connector: true, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText }), h("gb-step-base", { key: '64c1095e4b9d981e975f3011025ddb826d62dc00', size: this.size, type: "icon_left", state: this.sixthStepState, status: this.sixthStepStatus, connector: true, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText }), h("gb-step-base", { key: 'c1166c0553d0e0e9528110a791734ea58374e5e6', size: this.size, type: "icon_left", state: this.seventhStepState, status: this.seventhStepStatus, connector: false, label: this.seventhStepLabel, "supporting-text": this.seventhStepSupportingText })))))))));
+        return (h(Fragment, null, this.type === 'icon' && (h("div", { key: '63246478011b60f2a618064ce5a10daea4d9dff5', class: "icons_centered_div" }, this.breakpoint === 'mobile' && (h(Fragment, null, this.steps === 2 && (h(Fragment, null, h("gb-step-base", { key: '4a5ce4acabfe6aa4c35ec49b02da164daed60add', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: 'a82c66a5faf40effac081b013a3ef6ba661d94ec', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: false, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }))), this.steps === 3 && (h(Fragment, null, h("gb-step-base", { key: '2a20ce869151c9f0e7b136dd47d386a8c82a186c', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: '6b673c75f9c854b4a9dbe1a449783ff0723c731c', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: '01fec1bab928f4f0b7ec155ea78a0db0049eea36', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: false, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }))), this.steps === 4 && (h(Fragment, null, h("gb-step-base", { key: '9be89717191711509c3f8b541fc92b8b160c9da7', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: '6f58f0952ec4e0c07e619669af596a74e008195b', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: '51e4cb7451a375e32ed94acec5e03c4b26ef2491', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: true, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }), h("gb-step-base", { key: '34e4824522d34d9bf516baa7c6105bcdb7367633', size: this.size, type: "icon_left", state: this.fourthStepState, status: this.fourthStepStatus, connector: false, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText }))), this.steps === 5 && (h(Fragment, null, h("gb-step-base", { key: '64b53caddf399a08b6ccfcd18746e625b31d745b', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: '89ebc89ba6f9d6c906e5cd4b65e0c3f6d020a3af', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: '0c7a1b26e6aa17508eb8d8cea614136f44327e52', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: true, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }), h("gb-step-base", { key: '66bb5a3ac3d15529bdf1bb21b619b30b73d4baf5', size: this.size, type: "icon_left", state: this.fourthStepState, status: this.fourthStepStatus, connector: true, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText }), h("gb-step-base", { key: 'c15ba93874045e5010252447f76ccbc5d4e2b285', size: this.size, type: "icon_left", state: this.fifthStepState, status: this.fifthStepStatus, connector: false, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText }))), this.steps === 6 && (h(Fragment, null, h("gb-step-base", { key: '9da78fa98391288282c6fea5b6181ede7c92d89a', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: 'edc0179c728102b23fbc84f0ab96c68cfdfe5a08', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: 'dbdc69fa49ca1b58d632ccd837d25cba1414af39', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: true, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }), h("gb-step-base", { key: '008fcf789b542af1d18281235d55a69a22f41409', size: this.size, type: "icon_left", state: this.fourthStepState, status: this.fourthStepStatus, connector: true, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText }), h("gb-step-base", { key: 'fc454ad5ba56d765c7d6b234cde7bc3042735ff3', size: this.size, type: "icon_left", state: this.fifthStepState, status: this.fifthStepStatus, connector: true, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText }), h("gb-step-base", { key: '5c407e5390785ff6570c8a4f13b4039f4715fbbd', size: this.size, type: "icon_left", state: this.sixthStepState, status: this.sixthStepStatus, connector: false, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText }))), this.steps === 7 && (h(Fragment, null, h("gb-step-base", { key: '57cff11b70651a88d62b22b87456649b9ebba832', size: this.size, type: "icon_left", state: this.firstStepState, status: this.firstStepStatus, connector: true, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText }), h("gb-step-base", { key: 'be3cad8faa3a4a8a1d7e75c9d62f06df4b8de868', size: this.size, type: "icon_left", state: this.secondStepState, status: this.secondStepStatus, connector: true, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText }), h("gb-step-base", { key: 'ea47634eaa95a37c0c9942b76ce734492a3c1178', size: this.size, type: "icon_left", state: this.thirdStepState, status: this.thirdStepStatus, connector: true, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText }), h("gb-step-base", { key: '9983a1e3788960f111d4d73187fa89852e470e58', size: this.size, type: "icon_left", state: this.fourthStepState, status: this.fourthStepStatus, connector: true, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText }), h("gb-step-base", { key: 'c6262031b6e6e7937db24072881513ed731d4530', size: this.size, type: "icon_left", state: this.fifthStepState, status: this.fifthStepStatus, connector: true, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText }), h("gb-step-base", { key: '4e8bb986b3a41cdc0114109d0340d8c0b8b4f978', size: this.size, type: "icon_left", state: this.sixthStepState, status: this.sixthStepStatus, connector: true, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText }), h("gb-step-base", { key: 'bd2bc2c8b0f1edb84b956b9b739bda026a94fc3e', size: this.size, type: "icon_left", state: this.seventhStepState, status: this.seventhStepStatus, connector: false, label: this.seventhStepLabel, "supporting-text": this.seventhStepSupportingText })))))))));
     }
     static get is() { return "gb-stepper-horizontal-icons-centered"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.js

@@ -31,7 +31,7 @@ export class GbStepperHorizontalLineWithText {
         this.showSupportingText = this.width < 768 ? false : true;
     }
     render() {
-        return (h("div", { key: '683edd2084b735ddc6d62ab8651c48d03b133d39', class: "text_with_line" }, h("gb-step-base", { key: '8feb47e785836c9e253d59faeed29a66f50595ad', size: this.size, type: "text_line", state: this.firstStepState, status: this.firstStepStatus, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), h("gb-step-base", { key: '3b66b2360c030ffb4e6c87cf6df4fbc52dcd3d09', size: this.size, type: "text_line", state: this.secondStepState, status: this.secondStepStatus, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), this.thirdStepLabel && (h("gb-step-base", { key: '8ab228739b57ca3a6f0a0b4d8b490dbfe27919a7', size: this.size, type: "text_line", state: this.thirdStepState, status: this.thirdStepStatus, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fourthStepLabel && (h("gb-step-base", { key: 'a11d69c97cf3125d7ab71162fe7a971e11bc153d', size: this.size, type: "text_line", state: this.fourthStepState, status: this.fourthStepStatus, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fifthStepLabel && (h("gb-step-base", { key: 'c58205611db672eeef7467236e1f0314326d7d89', size: this.size, type: "text_line", state: this.fifthStepState, status: this.fifthStepStatus, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.sixthStepLabel && (h("gb-step-base", { key: '0e87c3acf712edfdea90def16c50bff50847361f', size: this.size, type: "text_line", state: this.sixthStepState, status: this.sixthStepStatus, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.seventhStepLabel && (h("gb-step-base", { key: 'af8baec265eb893a32f364edc4ab84354320d7f8', size: this.size, type: "text_line", state: this.seventhStepState, status: this.seventhStepStatus, label: this.seventhStepLabel, "supporting-text": this.seventhStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }))));
+        return (h("div", { key: '0d5471bbd7dc370b3e82c6742e24f2eb4594dc61', class: "text_with_line" }, h("gb-step-base", { key: '8d73a70ae338dcbcf3c7b4c3cf37ad3dcc911fe2', size: this.size, type: "text_line", state: this.firstStepState, status: this.firstStepStatus, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), h("gb-step-base", { key: '1d2c6e2359f7625752eab7b48b0690de5f891d3d', size: this.size, type: "text_line", state: this.secondStepState, status: this.secondStepStatus, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), this.thirdStepLabel && (h("gb-step-base", { key: 'b8afc3c93400ab6fdebb013e45c95562034670d0', size: this.size, type: "text_line", state: this.thirdStepState, status: this.thirdStepStatus, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fourthStepLabel && (h("gb-step-base", { key: '2657d9df1a64f8f53b13d095848064b1584f244d', size: this.size, type: "text_line", state: this.fourthStepState, status: this.fourthStepStatus, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fifthStepLabel && (h("gb-step-base", { key: 'ce6b88572396ab96e89bfdc4cf699ee456f44eb2', size: this.size, type: "text_line", state: this.fifthStepState, status: this.fifthStepStatus, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.sixthStepLabel && (h("gb-step-base", { key: 'c4343068edb59f99425a7b41e6f343a631a94b04', size: this.size, type: "text_line", state: this.sixthStepState, status: this.sixthStepStatus, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.seventhStepLabel && (h("gb-step-base", { key: '23f39f65b41278edf51e9d24005b68bff57998b0', size: this.size, type: "text_line", state: this.seventhStepState, status: this.seventhStepStatus, label: this.seventhStepLabel, "supporting-text": this.seventhStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }))));
     }
     static get is() { return "gb-stepper-horizontal-line-with-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.js

@@ -31,6 +31,7 @@ export class GbstepperVerticalIconsWithText {
                 label: this.firstStepLabel,
                 supportingText: this.firstStepSupportingText,
                 show: true, // Always show the first step
+                event: () => this.stepClicked.emit(0),
             },
             {
                 state: this.secondStepState,
@@ -38,6 +39,7 @@ export class GbstepperVerticalIconsWithText {
                 label: this.secondStepLabel,
                 supportingText: this.secondStepSupportingText,
                 show: this.showSecondStep,
+                event: () => this.stepClicked.emit(1),
             },
             {
                 state: this.thirdStepState,
@@ -45,6 +47,7 @@ export class GbstepperVerticalIconsWithText {
                 label: this.thirdStepLabel,
                 supportingText: this.thirdStepSupportingText,
                 show: this.showThirdStep,
+                event: () => this.stepClicked.emit(2),
             },
             {
                 state: this.fourthStepState,
@@ -52,6 +55,7 @@ export class GbstepperVerticalIconsWithText {
                 label: this.fourthStepLabel,
                 supportingText: this.fourthStepSupportingText,
                 show: this.showFourthStep,
+                event: () => this.stepClicked.emit(3),
             },
             {
                 state: this.fifthStepState,
@@ -59,6 +63,7 @@ export class GbstepperVerticalIconsWithText {
                 label: this.fifthStepLabel,
                 supportingText: this.fifthStepSupportingText,
                 show: this.showFifthStep,
+                event: () => this.stepClicked.emit(4),
             },
             {
                 state: this.sixthStepState,
@@ -66,6 +71,7 @@ export class GbstepperVerticalIconsWithText {
                 label: this.sixthStepLabel,
                 supportingText: this.sixthStepSupportingText,
                 show: this.showSixthStep,
+                event: () => this.stepClicked.emit(5),
             },
             {
                 state: this.seventhStepState,
@@ -73,11 +79,12 @@ export class GbstepperVerticalIconsWithText {
                 label: this.seventhStepLabel,
                 supportingText: this.seventhStepSupportingText,
                 show: this.showSeventhStep,
+                event: () => this.stepClicked.emit(6),
             },
         ];
         // Filter out steps that should be displayed
         const visibleSteps = steps.filter(step => step.show);
-        return (h("div", { key: '0f26c17617ec96e860adcc235facc00f6d4378cc', class: "vertical_stepper_div" }, this.type === 'icon' && (h(Fragment, null, visibleSteps.map((step, index) => (h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index === visibleSteps.length - 1 ? false : this.connector, label: step.label, "supporting-text": step.supportingText })))))));
+        return (h("div", { key: 'e6029a2d9d4d5bab5a264ac8ef4f35f34f9e6cb8', class: "vertical_stepper_div" }, this.type === 'icon' && (h(Fragment, null, visibleSteps.map((step, index) => (h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index === visibleSteps.length - 1 ? false : this.connector, label: step.label, "supporting-text": step.supportingText, onClick: () => step.event() })))))));
     }
     static get is() { return "gb-stepper-vertical-icons-with-text"; }
     static get encapsulation() { return "shadow"; }
@@ -909,5 +916,23 @@ export class GbstepperVerticalIconsWithText {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "stepClicked",
+                "name": "stepClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=gb-stepper-vertical-icons-with-text.js.map

package/dist/collection/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-stepper-vertical-icons-with-text.js","sourceRoot":"","sources":["../../../src/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Fragment } from '@stencil/core';\r\nimport { GeneralSizes, ProgressStepStates, ProgressStepStatus } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-stepper-vertical-icons-with-text',\r\n  styleUrl: 'gb-stepper-vertical-icons-with-text.css',\r\n  shadow: true,\r\n})\r\nexport class GbstepperVerticalIconsWithText {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() connector: boolean = false;\r\n  @Prop() type: 'icon' | 'featured_icon';\r\n  @Prop() showSecondStep: boolean = false;\r\n  @Prop() showThirdStep: boolean = false;\r\n  @Prop() showFourthStep: boolean = false;\r\n  @Prop() showFifthStep: boolean = false;\r\n  @Prop() showSixthStep: boolean = false;\r\n  @Prop() showSeventhStep: boolean = false;\r\n  @Prop() firstStepState: ProgressStepStates;\r\n  @Prop() secondStepState: ProgressStepStates;\r\n  @Prop() thirdStepState: ProgressStepStates;\r\n  @Prop() fourthStepState: ProgressStepStates;\r\n  @Prop() fifthStepState: ProgressStepStates;\r\n  @Prop() sixthStepState: ProgressStepStates;\r\n  @Prop() seventhStepState: ProgressStepStates;\r\n  @Prop() firstStepStatus: ProgressStepStatus;\r\n  @Prop() secondStepStatus: ProgressStepStatus;\r\n  @Prop() thirdStepStatus: ProgressStepStatus;\r\n  @Prop() fourthStepStatus: ProgressStepStatus;\r\n  @Prop() fifthStepStatus: ProgressStepStatus;\r\n  @Prop() sixthStepStatus: ProgressStepStatus;\r\n  @Prop() seventhStepStatus: ProgressStepStatus;\r\n  @Prop() firstStepLabel: string = '';\r\n  @Prop() secondStepLabel: string = '';\r\n  @Prop() thirdStepLabel: string = '';\r\n  @Prop() fourthStepLabel: string = '';\r\n  @Prop() fifthStepLabel: string = '';\r\n  @Prop() sixthStepLabel: string = '';\r\n  @Prop() seventhStepLabel: string = '';\r\n  @Prop() firstStepSupportingText: string = '';\r\n  @Prop() secondStepSupportingText: string = '';\r\n  @Prop() thirdStepSupportingText: string = '';\r\n  @Prop() fourthStepSupportingText: string = '';\r\n  @Prop() fifthStepSupportingText: string = '';\r\n  @Prop() sixthStepSupportingText: string = '';\r\n  @Prop() seventhStepSupportingText: string = '';\r\n\r\n  render() {\r\n    const steps = [\r\n      {\r\n        state: this.firstStepState,\r\n        status: this.firstStepStatus,\r\n        label: this.firstStepLabel,\r\n        supportingText: this.firstStepSupportingText,\r\n        show: true, // Always show the first step\r\n      },\r\n      {\r\n        state: this.secondStepState,\r\n        status: this.secondStepStatus,\r\n        label: this.secondStepLabel,\r\n        supportingText: this.secondStepSupportingText,\r\n        show: this.showSecondStep,\r\n      },\r\n      {\r\n        state: this.thirdStepState,\r\n        status: this.thirdStepStatus,\r\n        label: this.thirdStepLabel,\r\n        supportingText: this.thirdStepSupportingText,\r\n        show: this.showThirdStep,\r\n      },\r\n      {\r\n        state: this.fourthStepState,\r\n        status: this.fourthStepStatus,\r\n        label: this.fourthStepLabel,\r\n        supportingText: this.fourthStepSupportingText,\r\n        show: this.showFourthStep,\r\n      },\r\n      {\r\n        state: this.fifthStepState,\r\n        status: this.fifthStepStatus,\r\n        label: this.fifthStepLabel,\r\n        supportingText: this.fifthStepSupportingText,\r\n        show: this.showFifthStep,\r\n      },\r\n      {\r\n        state: this.sixthStepState,\r\n        status: this.sixthStepStatus,\r\n        label: this.sixthStepLabel,\r\n        supportingText: this.sixthStepSupportingText,\r\n        show: this.showSixthStep,\r\n      },\r\n      {\r\n        state: this.seventhStepState,\r\n        status: this.seventhStepStatus,\r\n        label: this.seventhStepLabel,\r\n        supportingText: this.seventhStepSupportingText,\r\n        show: this.showSeventhStep,\r\n      },\r\n    ];\r\n\r\n    // Filter out steps that should be displayed\r\n    const visibleSteps = steps.filter(step => step.show);\r\n\r\n    return (\r\n      <div class=\"vertical_stepper_div\">\r\n        {this.type === 'icon' && (\r\n          <>\r\n            {visibleSteps.map((step, index) => (\r\n              <gb-step-base\r\n                size={this.size}\r\n                type=\"icon_left\"\r\n                state={step.state}\r\n                status={step.status}\r\n                connector={index === visibleSteps.length - 1 ? false : this.connector}\r\n                label={step.label}\r\n                supporting-text={step.supportingText}\r\n              ></gb-step-base>\r\n            ))}\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-stepper-vertical-icons-with-text.js","sourceRoot":"","sources":["../../../src/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Fragment, Event, EventEmitter } from '@stencil/core';\r\nimport { GeneralSizes, ProgressStepStates, ProgressStepStatus } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-stepper-vertical-icons-with-text',\r\n  styleUrl: 'gb-stepper-vertical-icons-with-text.css',\r\n  shadow: true,\r\n})\r\nexport class GbstepperVerticalIconsWithText {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() connector: boolean = false;\r\n  @Prop() type: 'icon' | 'featured_icon';\r\n  @Prop() showSecondStep: boolean = false;\r\n  @Prop() showThirdStep: boolean = false;\r\n  @Prop() showFourthStep: boolean = false;\r\n  @Prop() showFifthStep: boolean = false;\r\n  @Prop() showSixthStep: boolean = false;\r\n  @Prop() showSeventhStep: boolean = false;\r\n  @Prop() firstStepState: ProgressStepStates;\r\n  @Prop() secondStepState: ProgressStepStates;\r\n  @Prop() thirdStepState: ProgressStepStates;\r\n  @Prop() fourthStepState: ProgressStepStates;\r\n  @Prop() fifthStepState: ProgressStepStates;\r\n  @Prop() sixthStepState: ProgressStepStates;\r\n  @Prop() seventhStepState: ProgressStepStates;\r\n  @Prop() firstStepStatus: ProgressStepStatus;\r\n  @Prop() secondStepStatus: ProgressStepStatus;\r\n  @Prop() thirdStepStatus: ProgressStepStatus;\r\n  @Prop() fourthStepStatus: ProgressStepStatus;\r\n  @Prop() fifthStepStatus: ProgressStepStatus;\r\n  @Prop() sixthStepStatus: ProgressStepStatus;\r\n  @Prop() seventhStepStatus: ProgressStepStatus;\r\n  @Prop() firstStepLabel: string = '';\r\n  @Prop() secondStepLabel: string = '';\r\n  @Prop() thirdStepLabel: string = '';\r\n  @Prop() fourthStepLabel: string = '';\r\n  @Prop() fifthStepLabel: string = '';\r\n  @Prop() sixthStepLabel: string = '';\r\n  @Prop() seventhStepLabel: string = '';\r\n  @Prop() firstStepSupportingText: string = '';\r\n  @Prop() secondStepSupportingText: string = '';\r\n  @Prop() thirdStepSupportingText: string = '';\r\n  @Prop() fourthStepSupportingText: string = '';\r\n  @Prop() fifthStepSupportingText: string = '';\r\n  @Prop() sixthStepSupportingText: string = '';\r\n  @Prop() seventhStepSupportingText: string = '';\r\n  @Event() stepClicked: EventEmitter<number>;\r\n\r\n  render() {\r\n    const steps = [\r\n      {\r\n        state: this.firstStepState,\r\n        status: this.firstStepStatus,\r\n        label: this.firstStepLabel,\r\n        supportingText: this.firstStepSupportingText,\r\n        show: true, // Always show the first step\r\n        event: () => this.stepClicked.emit(0),\r\n      },\r\n      {\r\n        state: this.secondStepState,\r\n        status: this.secondStepStatus,\r\n        label: this.secondStepLabel,\r\n        supportingText: this.secondStepSupportingText,\r\n        show: this.showSecondStep,\r\n        event: () => this.stepClicked.emit(1),\r\n      },\r\n      {\r\n        state: this.thirdStepState,\r\n        status: this.thirdStepStatus,\r\n        label: this.thirdStepLabel,\r\n        supportingText: this.thirdStepSupportingText,\r\n        show: this.showThirdStep,\r\n        event: () => this.stepClicked.emit(2),\r\n      },\r\n      {\r\n        state: this.fourthStepState,\r\n        status: this.fourthStepStatus,\r\n        label: this.fourthStepLabel,\r\n        supportingText: this.fourthStepSupportingText,\r\n        show: this.showFourthStep,\r\n        event: () => this.stepClicked.emit(3),\r\n      },\r\n      {\r\n        state: this.fifthStepState,\r\n        status: this.fifthStepStatus,\r\n        label: this.fifthStepLabel,\r\n        supportingText: this.fifthStepSupportingText,\r\n        show: this.showFifthStep,\r\n        event: () => this.stepClicked.emit(4),\r\n      },\r\n      {\r\n        state: this.sixthStepState,\r\n        status: this.sixthStepStatus,\r\n        label: this.sixthStepLabel,\r\n        supportingText: this.sixthStepSupportingText,\r\n        show: this.showSixthStep,\r\n        event: () => this.stepClicked.emit(5),\r\n      },\r\n      {\r\n        state: this.seventhStepState,\r\n        status: this.seventhStepStatus,\r\n        label: this.seventhStepLabel,\r\n        supportingText: this.seventhStepSupportingText,\r\n        show: this.showSeventhStep,\r\n        event: () => this.stepClicked.emit(6),\r\n      },\r\n    ];\r\n\r\n    // Filter out steps that should be displayed\r\n    const visibleSteps = steps.filter(step => step.show);\r\n\r\n    return (\r\n      <div class=\"vertical_stepper_div\">\r\n        {this.type === 'icon' && (\r\n          <>\r\n            {visibleSteps.map((step, index) => (\r\n              <gb-step-base\r\n                size={this.size}\r\n                type=\"icon_left\"\r\n                state={step.state}\r\n                status={step.status}\r\n                connector={index === visibleSteps.length - 1 ? false : this.connector}\r\n                label={step.label}\r\n                supporting-text={step.supportingText}\r\n                onClick={() => step.event()}\r\n              ></gb-step-base>\r\n            ))}\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -40,11 +40,11 @@ export class GbTabButtonBase {
         this.tabClicked.emit();
     }
     render() {
-        return (h("div", { key: '01faa6ecc32a0b5f41ed038e587941a14af48f85', class: `tab_button_div ${this.type}
+        return (h("div", { key: 'b8ece7d0d185b7ac80fa360b40c36cf51fa371af', class: `tab_button_div ${this.type}
       ${this.current ? 'current' : ''} 
       ${this.fullWidth ? 'full_width' : ''} 
       ${this.size}
-      ${this.alignment}`, onClick: () => this.handleClick() }, h("p", { key: 'd9153322c75a15bcf6a7172d18b34b858eb2522d', class: `${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (h("gb-badge", { key: '2eb91e8e5109b9f3316b1fa9e9d60b566d7dba02', size: "sm", type: "pill_color", color: this.current && this.type === 'button_primary'
+      ${this.alignment}`, onClick: () => this.handleClick() }, h("p", { key: '4834bff379dbd2053428b9458ddb2988f6c76344', class: `${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (h("gb-badge", { key: '4437051fda10a039330723cc83416051fd11e8be', size: "sm", type: "pill_color", color: this.current && this.type === 'button_primary'
                 ? 'information'
                 : this.current && this.type === 'underline'
                     ? 'information'
@@ -53,7 +53,7 @@ export class GbTabButtonBase {
                         :
                             this.current && this.type === 'line'
                                 ? 'information'
-                                : 'gray' }, h("slot", { key: 'd3f85149cf6f22f4e7ea3f87d7b2ed57dec8ff28', name: "count" })))));
+                                : 'gray' }, h("slot", { key: 'e6e68c7dda43d8f6f7bb4d87ca048b33b7d94856', name: "count" })))));
     }
     static get is() { return "gb-tab-button-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-table-cell/gb-table-cell.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbTableCell {
     render() {
-        return (h("div", { key: '0ee4b853131a5ec67df022a4696586d278238783', class: "table_cell_div" }));
+        return (h("div", { key: '06c31b5980807c03cfc13f745272144a31657279', class: "table_cell_div" }));
     }
     static get is() { return "gb-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ export class GbTag {
     }
     render() {
         const flagSwap = getAssetPath(`${this.flagSwap}`);
-        return (h("div", { key: '86eeef38a9152530c0c07a03734fa1de88a2a4e4', class: `container ${this.size}` }, h("div", { key: '9ce84b197ec4705481cb2824bbb674a989ba0330', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: 'c507b09de13bd7b73986752c04aae4ee781ce820', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: '61b040e08c160c34dfc461e131007856d08658e8', class: "icon left-icon" }, h("img", { key: 'c13a0db75047f882ee98b0d6b21ddce1750fef68', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: 'c788e1802da416cc02d6277ef7a7f9c41b06299d', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, h("slot", { key: 'f0c0ba98261ef1b57f63f6235def29495e3e899b', name: "initials", slot: "initials" }))), this.icon === 'dot' && (h("svg", { key: 'f9a15da9bc8d1ac375d877261516e766c7f2cb71', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: '5f877d88092d6525889f241d3f44223818c1d10b', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("div", { key: '4dbb4773a073974b32089d4eb293fee4b2a4cefb', class: "label" }, h("slot", { key: 'c0bd54dc6ff3d1bb802dfa6ac08490c386d858a6' })), this.action === 'count' && (h("gb-tag-count", { key: '96b6f8707db749100af0795e0f72fa8571f18f9b', size: this.size }, h("slot", { key: 'f1ee2fc8686589dab0785b1b5f06b7a7b447096f', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: '1447bb11b56ffed48cfd9c561573a007ef78bc32', size: this.size, onClick: () => this.onTagClose() })));
+        return (h("div", { key: '944ef5c03c471056d3b7e3d20102a946d3f79449', class: `container ${this.size}` }, h("div", { key: '37670750696b44552c0b51d2607c90909a20aae9', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: '1f55e8795ad69aa66748320b7726654397623177', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: 'efdce9ac06eb025828695fd765607e9ec4d33887', class: "icon left-icon" }, h("img", { key: 'fd16004e1ccd7aca3fd4fbe325126fe9641b0f9a', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '7e38a26f1bdda07a6c95a3a19592f2fc982646b0', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, h("slot", { key: '682b6ac6c55717a98bfb8084c3b690b5c33eb9c8', name: "initials", slot: "initials" }))), this.icon === 'dot' && (h("svg", { key: 'bbd2c83ccde1ce367172e60c164bf173ac38d734', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: '92fed2179331beca3ae3f222fae1e067e76b5401', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("div", { key: '8886875440ae10e82595c7fe4d26c2b117204e23', class: "label" }, h("slot", { key: '6e9c8ef9e46ea22f81a08918d07dbf63b7e6130a' })), this.action === 'count' && (h("gb-tag-count", { key: '93d4af4c65239c6b43fa07b1e07cb0cf31f2f667', size: this.size }, h("slot", { key: '009cc1895040432a09c9b016ea321f27a0959c35', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: 'b32fccefafec59d6dfc17df144b7600d59d5c494', size: this.size, onClick: () => this.onTagClose() })));
     }
     static get is() { return "gb-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class GbTagCheckbox {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: 'dbae484e9133cff256a46ffe7fbc48fcd84ce9ec', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'f93ad7a8a6025fb83d452e2c866777a1db65ebd7', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: 'cac715082dbe047bb042ad4761192bd9618a69a4', class: `custom-checkbox ${this.size}` }, h("svg", { key: '33e7ea818cbe6669ba8668776a33718a1e1ae1b9', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'd3507ad72e763f8b57db8a6cb4f4a87c00beb69a', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("label", { key: '6d997f9093ed83ad5eebfc39d20012712a7809ce', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '6a0b2655aa1167dc93e46e0f4e166b3af688229e', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: '1a481c13a15a56169b8d0f8bb6fea974dc91ff72', class: `custom-checkbox ${this.size}` }, h("svg", { key: '67e84a3837206287adce80e5044425fa6ad906c3', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'e77c2a0219526e315059e2fe423b14d466ba2611', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "gb-tag-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbTagClose {
     render() {
-        return (h("div", { key: '8bda09390f09d9bfcb94040cc4201c9a30a3137b', class: this.size }, h("svg", { key: '11d7605a8780a6aa91374ca4b532023e3d6a099f', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: '6c1e6c6b18b7d410f26883a5eee2dbfec5787acd', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: 'def3824d1a4626e0a3b593f7688bcb8f48efeead', class: this.size }, h("svg", { key: '616c2905696186e08fe3895f9f3705bae961692b', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: 'cfded1eea0613a51d2dd776755411c5820b78ed6', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-tag-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbTagCount {
     render() {
-        return (h("div", { key: 'a71bf17ac17c6d0a56e1d497b43495efe496adcb', class: this.size }, h("slot", { key: 'a6a9451b2fe04b6df78e2180ce9dfb2f705e0fa8', name: "count" })));
+        return (h("div", { key: 'b2729c95b16d28ee4b9a126a29a75a9139b1d614', class: this.size }, h("slot", { key: 'e88f4ba5cf7fc68e586c9d7a0fc9d0bfff5745d4', name: "count" })));
     }
     static get is() { return "gb-tag-count"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js

@@ -184,14 +184,14 @@ export class GbTextareaInputField {
         }
     }
     render() {
-        return (h("div", { key: '6053b9ab9b703f7274ca3a6ae3ae9004588a3701', class: "textarea_container" }, h("div", { key: '6bd452d1c4cab43d7dba7c61e926db12defc8750', class: "input_with_label" }, this.showLabel && h("p", { key: '2dad528a217f51ffe2e898cb7bfefdf984a91300', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: '06f54bd2faa34522ed6bb491fc3dcd7b7cc15b94', ref: el => (this.textarea = el), onInput: () => this.handleInput(), class: `textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText, value: this.inputValue })), this.type === 'tags' && (h("div", { key: '078210c5b18d33e56497abb013bac03deec77521', class: "textarea_tags" }, h("div", { key: '3421b030cfcac1d45170e74c75ac19c3ab3d8854', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: 'd0505f56fae5d2f804ee3ed976fc6dfd1e604211', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
+        return (h("div", { key: '46bc5837787a533a7e7e978a7a4489895cadfe25', class: "textarea_container" }, h("div", { key: '0a7c4043120cbc295ccf347b6d1fb8dc6739bbd6', class: "input_with_label" }, this.showLabel && h("p", { key: '01ee6eff457b7464972439fb4a6f7832e2d52b0a', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: '0dbfa6fbfafc778773130dfb65266a2d7924265f', ref: el => (this.textarea = el), onInput: () => this.handleInput(), class: `textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText, value: this.inputValue })), this.type === 'tags' && (h("div", { key: '6d96ed9d2570725543627012d85655023b43bdb1', class: "textarea_tags" }, h("div", { key: '9209621cbe1a27bdba6639c35b470fac80fa49d9', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: '81c60ab96eaabc5eb7124c55d8144ed700c9b776', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
             .split(' ')
             .map(part => part.charAt(0).toUpperCase())
-            .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: 'e120448879b44df93b90625f52ea8ac6d4438b6b', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || '  '), h("div", { key: 'a513b334880e6cc630081c46de87bd683cc6699e', class: "input_field" }, h("input", { key: '1e6ce0858ba5dd6b0c88f287a3f26d4160ee4757', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
+            .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: '258e2fc47fb669e2cf8e9c75cebe11ec45d9db0c', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || '  '), h("div", { key: '06345e55db1b531713e2fe24252247e8d01560a1', class: "input_field" }, h("input", { key: '7e8eab2c2072b35c6bf5d02229a4dcca2072a754', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
             // placeholder={this.placeholderText}
-            value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: '325a148aa77050beec05c8a16c9f3d4858623337', class: "help_icon" }, h("svg", { key: '9c95127ebe02cfdb5876ebd68d6b552219e376cc', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '41b2a824ab9b6e6ad3c281e918cb31124c1396d5', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: '7cd3101402e8950829634fc4e326d2094d9d4c04', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
+            value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: '7d8a3f84daa09fbc0360c6ae5814d414f99d8919', class: "help_icon" }, h("svg", { key: 'bab64a5962380b664ce84c1fc5142aad92b792b7', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'e2a237c1885d08a253b92dc6f83a0bb1cf215bf4', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: 'b7d7a268f7af36d69f780028313b13c0cad4947f', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
             ? [h("p", { slot: "name" }, item.objectName), h("p", { slot: "supporting_text" }, item.objectValue)]
-            : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h("p", { key: '6b78228ad77ee1851e26d01d5fb3f2fa85593da0', class: `hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
+            : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h("p", { key: 'eb02cd520c73a819af0140a1f5c9401f535f8516', class: `hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
     }
     static get is() { return "gb-textarea-input-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-theme-tab/gb-theme-tab.css

@@ -0,0 +1,15 @@
+.theme_tab_div {
+  display: flex;
+  padding: 0.375rem;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border-subtler, #E3E8EF);
+  background: var(--color-background-gray-subtler, #EEF2F6);
+  flex-grow: 1;
+}
+
+.tab{
+    width: 100%;
+}

package/dist/collection/components/gb-theme-tab/gb-theme-tab.js

@@ -1,6 +1,17 @@
+import { getAssetPath, h } from "@stencil/core";
 export class GbThemeTab {
+    constructor() {
+        this.currentActiveTab = 'System';
+    }
+    tabClicked(mode) {
+        this.currentActiveTab = mode;
+        this.themetabClicked.emit(mode);
+    }
     render() {
-        return;
+        const systemIconSrc = getAssetPath(`assets/computer.svg`);
+        const sunSrc = getAssetPath(`assets/sun-02.svg`);
+        const moonSrc = getAssetPath(`assets/moon-02.svg`);
+        return (h("div", { key: 'b006e9345f20557ae754cd68784c03262de09493', class: `theme_tab_div` }, h("div", { key: '24d373000fd21d5ec1664483f327ca6039176692', class: "tab" }, h("gb-icon-button-base", { key: '83bfcdc240ff0c4b102218780c00f3f343b96c08', current: this.currentActiveTab === 'System' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('System') })), h("div", { key: 'b15ad0722f8297dfa36337c13f96a460f44e6e06', class: "tab" }, h("gb-icon-button-base", { key: '491e23da5589232341cf149d55f2adb90455f466', current: this.currentActiveTab === 'Light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('Light') })), h("div", { key: 'bb9c651aa194e436f9c2d95cadaa88cfb7b3c186', class: "tab" }, h("gb-icon-button-base", { key: 'daae6cfddade0c592329bc783954f4202c385dc3', current: this.currentActiveTab === 'Dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('Dark') }))));
     }
     static get is() { return "gb-theme-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -14,5 +25,57 @@ export class GbThemeTab {
             "$": ["gb-theme-tab.css"]
         };
     }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeTypes",
+                    "resolved": "\"dark\" | \"light\" | \"system\"",
+                    "references": {
+                        "ThemeTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ThemeTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentActiveTab": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "themetabClicked",
+                "name": "themetabClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=gb-theme-tab.js.map

package/dist/collection/components/gb-theme-tab/gb-theme-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-theme-tab.js","sourceRoot":"","sources":["../../../src/components/gb-theme-tab/gb-theme-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ1C,MAAM,OAAO,UAAU;IACnB,MAAM;QACF,OAAM;IACV,CAAC;;;;;;;;;CACJ","sourcesContent":["import { Component } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'gb-theme-tab',\r\n    styleUrl: 'gb-theme-tab.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbThemeTab {\r\n    render() {\r\n        return\r\n    }\r\n}"]}
+{"version":3,"file":"gb-theme-tab.js","sourceRoot":"","sources":["../../../src/components/gb-theme-tab/gb-theme-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7F,MAAM,OAAO,UAAU;IALvB;QAQW,qBAAgB,GAAW,QAAQ,CAAC;KAyC9C;IAvCC,UAAU,CAAC,IAAY;QACrB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,YAAY,CAAC,qBAAqB,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;QAEnD,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe;YACzB,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACxD,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GACjB,CACnB,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-theme-tab',\r\n  styleUrl: 'gb-theme-tab.css',\r\n  shadow: true,\r\n})\r\nexport class GbThemeTab {\r\n  @Prop() theme: ThemeTypes;\r\n  @Event() themetabClicked: EventEmitter<string>;\r\n  @State() currentActiveTab: string = 'System';\r\n\r\n  tabClicked(mode: string) {\r\n    this.currentActiveTab = mode;\r\n    this.themetabClicked.emit(mode);\r\n  }\r\n\r\n  render() {\r\n    const systemIconSrc = getAssetPath(`assets/computer.svg`);\r\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\r\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\r\n\r\n    return (\r\n      <div class={`theme_tab_div`}>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'System' ? true : false}\r\n            icon={systemIconSrc}\r\n            label=\"System\"\r\n            onClick={() => this.tabClicked('System')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'Light' ? true : false}\r\n            icon={sunSrc}\r\n            label=\"Light\"\r\n            onClick={() => this.tabClicked('Light')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'Dark' ? true : false}\r\n            icon={moonSrc}\r\n            label=\"Dark\"\r\n            onClick={() => this.tabClicked('Dark')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -54,7 +54,7 @@ export class GbToast {
         }
     }
     render() {
-        return (h("div", { key: 'f02d01b7585a22480ee80fc28a772c7295fd55f3', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: 'f456c92d6c1a440665c35d1f4431e4df8cea8496', class: `icon_container` }, h("svg", { key: '6cb4e2829b7e031231c7a16bf9d6d9bc9c5567e4', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '5ad180ea17d0cf3219c0514659e80a28abb43fda', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '9dd79a57b9c745b4fe9141f4a0c32a0bc0779fe6', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'c433c2c634b61dc6015232e43a79c148ad91bad5', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: 'ec029a7260cc39577070174b78482eb43c02687e', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: 'bfda53bd8943c767aaaf944f3636e22ffa4e5f09', class: `text ${this.size}` }, h("slot", { key: '637e42f881a8f5a3d342d666f5d85d138886ee76', name: "main_text" }), this.showSupportingText && h("slot", { key: 'b563371a20c64f3eb3a324ef1a3e4a33b7a7be69', name: "supporting_text" })), this.actions && (h("div", { key: 'c09220e2660644cbf711e5f9b4c438cde887f3df', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes"))))))), h("gb-button-close", { key: '8224db41234905f33f43bb016482cfa36dcd6448', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (h("div", { key: '5c79b2113357385d9a31b4f893e57d7c0e282fae', class: `container ${this.breakpoint}` }, h("div", { key: '3fb4994473d7b29383b59cdd61e88c0d31ecd041', class: `full_width_content ${this.breakpoint}` }, h("div", { key: 'ad721c10d1f452c5bb17a15797319aa99ea19012', class: `inner_content ${this.breakpoint}` }, h("div", { key: 'd03d58e453158b20b7bdc537b992812d25a0ea2c', class: `icon_container` }, h("svg", { key: '15237368e1af891231f8452a11c356e4d09e51d6', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '66667b3a06ce6f2fc03f722fe03fe8a10f287203', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '6ab94664966d69092c6853aa617aa4fb2cc6d3f8', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: '63a43278e868b46f189a733320478d7643dba6e7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '989e760d1ef3af1cf81faad2d750a766bdd4236e', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: 'daec49de7773b711a5e709e4a02330b82a70ca9e', name: "main_text" }), this.showSupportingText && h("slot", { key: '748d7d04db518bd728df0e92ce61d1b8fca7c8d8', name: "supporting_text" }))), this.actions && (h("div", { key: 'befff61f9a8554fac87ae733c5899087bdeded2f', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes")))))), h("gb-button-close", { key: 'a62701f1ec64a436f5e4d15b36642044ef2aeb55', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}`, onClick: () => this.closeToast() }))))));
+        return (h("div", { key: '013713b0a00ea3d139d9d78b4f455019690fc4ea', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: 'fa28297e53acdf982d4ce289d99c5c6b1e44ead1', class: `icon_container` }, h("svg", { key: 'b398c56f93337a6b313a0a24150b537d7430df8c', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: 'cd046f7fe9604184569ee3db68a107b185241b4f', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: 'd33a07881cc5c42cb1b3ffa5901852011e045ab2', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: '849cfb84f85b4a83fe98f04fe6dfa47b6a1c8ff7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '84359dea26036467879480cee3efa42daddcdf86', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: '03f1192e6bcdb13e99ac1b3a2f83dfa1c8ac2ae3', class: `text ${this.size}` }, h("slot", { key: '7776583e414a894a4110321054133bfab430e28f', name: "main_text" }), this.showSupportingText && h("slot", { key: '198771468567c5bf82750558cb63e4f7976f739c', name: "supporting_text" })), this.actions && (h("div", { key: '70d3f0250c31504d66c692d0265826304610d40a', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes"))))))), h("gb-button-close", { key: '10006e1bd77409989ff6a08d95fd51a2f605d09b', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (h("div", { key: 'b5f195b13ea5feac2c7f06e2ac4c020819994a9a', class: `container ${this.breakpoint}` }, h("div", { key: 'fdc87c38afa5cecb3a62d02146fb7d5f0573c78e', class: `full_width_content ${this.breakpoint}` }, h("div", { key: 'ff1a7b9fdc8b0f8e30e4acf242925357c00f61f9', class: `inner_content ${this.breakpoint}` }, h("div", { key: '6844874bc12d57e8f52b9014a5c6f1367e9d9220', class: `icon_container` }, h("svg", { key: 'bb03fde445e3bd94564039c7958eb949dddd70e4', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: 'ab702e8b13670f03a3efaea638d661de695f6c92', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '1ae5c4cacc5d7bb14146bf83ab9f9bbdd08c8737', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'dbe589c309d3f355dec0c62e311339eb4996adb3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '94178a54e23b7f5a6d3f71f62cd4ec2fb0e6d29a', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: '0a3c12e032e821bfba577cd64f3f011f4be0f09e', name: "main_text" }), this.showSupportingText && h("slot", { key: '36dcc9290a1be687b1b19a53064a7a7e9b05c340', name: "supporting_text" }))), this.actions && (h("div", { key: '3615542dd39c9c43fe80ef599ca2ff5bc9743d8a', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes")))))), h("gb-button-close", { key: 'fb8146475f5d05a17551430c88b86cef1448f775', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}`, onClick: () => this.closeToast() }))))));
     }
     static get is() { return "gb-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class GbToastButton {
         slottedContent.classList.add('text-sm-semi-bold');
     }
     render() {
-        return (h("div", { key: 'e557d4035fcf551de72d41f18777a85a57511d66', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: '67538d3be984f83384d5517c7b54732e67fbfd48' })));
+        return (h("div", { key: '1fe83dac6ed24c65d94da19dc15149dd9d34edd8', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: '72c3a4e29c0bada05ed66d85f272f971ba761ecd' })));
     }
     static get is() { return "gb-toast-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,7 +34,7 @@ export class GbToggle {
         }
     }
     render() {
-        return (h("div", { key: '22939043f504149284362fab19135f523108e247', class: `toggle_div ${this.size}` }, h("div", { key: '636e11bbf00b7d13d97cbe67ade49fa8c9ced8cb', class: "toggle_base" }, h("gb-toggle-base", { key: '016be63cefc0034104dd9130e39d55d35aec631f', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: '222074822ead76c821e78b7d836bf1277f24ef7b', class: "text" }, h("slot", { key: '94acdb830aeafcbb432e7a8f79a6191dc7a5b5d3', name: "main_text" }), this.supportingText && (h("slot", { key: 'c2cf15bb0f2a08305f05cefd6ec9565681f43be1', name: "supporting_text" }))))));
+        return (h("div", { key: '49662ad67f7bb3d90f46596bc810a5ba162d9ccc', class: `toggle_div ${this.size}` }, h("div", { key: '9b9e033ea77ea6c6fbd48eb247e69fbbd3410323', class: "toggle_base" }, h("gb-toggle-base", { key: '081cf6c880d708223d14213149e9375ce0b70c41', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: '1afbea9fdd489583a873f763c73b08d838aaff93', class: "text" }, h("slot", { key: 'd2461e51e2d102655034cc15f4407ea46c0c2cc8', name: "main_text" }), this.supportingText && (h("slot", { key: '7104c221bd7f734c4fb50ec8f6d6287c9826412b', name: "supporting_text" }))))));
     }
     static get is() { return "gb-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,8 +11,8 @@ export class GbToggleBase {
     }
     render() {
         return [
-            h("input", { key: '9fa4a1a7ebd828e86353fd791fc9437db38c03d7', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
-            h("label", { key: '4d9166f43a333d2e26c19cb160b96fb67a82293e', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
+            h("input", { key: 'f9595e1fea6296f017ade457df41959c0df4252f', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
+            h("label", { key: '893c843d1a24b70bfd31c07b86875bc84323a64d', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
         ];
     }
     static get is() { return "gb-toggle-base"; }

package/dist/collection/components/gb-token-field-compact/gb-token-field-compact.js

@@ -5,7 +5,7 @@ export class GbTokenFieldCompact {
         this.supportingText = '';
     }
     render() {
-        return (h("div", { key: 'ce3b55683df0acbda10348f80d81b7556f2b5bed', class: this.size }, h("div", { key: '4a3c15998b25f58415e9b9a7b95326c85e3239bc', class: "input-with-label" }, this.showLabel && (h("label", { key: 'eba469e6703885440bfbbc2d498d5b918e7c237e' }, this.label)), this.digits === 4 && (h("div", { key: '00eb7d9bada6ed7c524e19976ef4f98049e23cec', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '2e70c259c8778e814aea99ad35c1ff5545b9021d', size: this.size }), h("gb-mega-input-field-base", { key: 'e2b4d3e7ff5a5b3d7d022fee67dcf02ec0f8717a', size: this.size }), h("gb-mega-input-field-base", { key: '30c2f365fcb684483a88b4ad0984e2e461d2952d', size: this.size }), h("gb-mega-input-field-base", { key: 'f5c7ea2d8b22296a1fc75c7456addb2b71d18576', size: this.size }))), this.digits === 6 && (h("div", { key: 'c6663d932e9be3420ab5d1c112f1105e613700c3', class: "input-wrapper" }, h("div", { key: '7f6181ff42e48666ccf031d90ec6ae8def54895d', class: "first=section" }, h("gb-mega-input-field-base", { key: '7a4c6ae5a5899b77f4e24dd9e1086c6daaa18648', size: this.size }), h("gb-mega-input-field-base", { key: '48e69a4101ff53838477c957bf77ac13ef53621c', size: this.size }), h("gb-mega-input-field-base", { key: '03c8548203638953fd43ceadbfd388acce295c1f', size: this.size })), h("div", { key: '4fff79e5ae923c655e8f40462078a9d2a11fff26', class: "second=section" }, h("gb-mega-input-field-base", { key: '396f44241569f8050966169db1d33ae8a618726d', size: this.size }), h("gb-mega-input-field-base", { key: '23851775ff1dfe26c383be2a19dd69a165acd660', size: this.size }), h("gb-mega-input-field-base", { key: '14f0c4101d2ab4865293ca8efea1e6ee281ef5d2', size: this.size })))), this.digits === 8 && (h("div", { key: '7cd22e7e229af76a1f978595f54dc4150f4c22eb', class: "input-wrapper" }, h("div", { key: '2a14216dfd68e583378ee88cdb8370400d00a55a', class: "first=section" }, h("gb-mega-input-field-base", { key: '153ec6244a2cfa5d6e24ee559007d1bb87fb937c', size: this.size }), h("gb-mega-input-field-base", { key: '7647ac7e79557bec209316bbaff025d66f25fcb9', size: this.size }), h("gb-mega-input-field-base", { key: '8d6b93f14558497deac66bba06a8bd3aec7c0bbb', size: this.size }), h("gb-mega-input-field-base", { key: '9283046e4ae73316fd9e01a62afe4fc4a099c5c2', size: this.size })), h("div", { key: '4a12b2fe505438110df4b31dfddb0f57ec3807a4', class: "second=section" }, h("gb-mega-input-field-base", { key: 'bea575744c11b57f624b87bc26ce8fb7cee7bdf2', size: this.size }), h("gb-mega-input-field-base", { key: '392a542d40de7db59a9557255f910d10d94ddcb2', size: this.size }), h("gb-mega-input-field-base", { key: '21bf7bf89241e86a68e007c550a7ed934e1755ae', size: this.size }), h("gb-mega-input-field-base", { key: 'a79946cc41f5430387c3a06a1a4131c24e8ccb8b', size: this.size }))))), h("p", { key: '4bb359fa3c8d2671d56f276816695ceee2e8c43c' }, this.supportingText)));
+        return (h("div", { key: 'ee44aed7aa4368118014b4639e7626d805dc3857', class: this.size }, h("div", { key: '3e0a4806b2efc73d3ae03674bd6a23ab89d3eb70', class: "input-with-label" }, this.showLabel && (h("label", { key: '6c5fe9a7a3f0492bcd11751732e82dac0ced2f88' }, this.label)), this.digits === 4 && (h("div", { key: 'fb158eb806ff0edf84f0da55e9d337b9d6de21ab', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '35accdaec4e1fa3f67740ba4d7ed3c51614fb7f4', size: this.size }), h("gb-mega-input-field-base", { key: 'd7e2a990511c21fadd3e853073f470a79d8b63a7', size: this.size }), h("gb-mega-input-field-base", { key: '23dbcb64f9988c34b7583686d446e6481031c415', size: this.size }), h("gb-mega-input-field-base", { key: 'c66928af7d049a51eeec54d994ba4d9a6f2e5b73', size: this.size }))), this.digits === 6 && (h("div", { key: '82a16aeb566f155f7e604d331c3b92f93252c44d', class: "input-wrapper" }, h("div", { key: 'da23b759bc06079717b95653c2b9545cb068c9aa', class: "first=section" }, h("gb-mega-input-field-base", { key: '28fc68912a7ed6beaced99814495c050b8706a14', size: this.size }), h("gb-mega-input-field-base", { key: 'ab9e3f052ce86c1e32a5509ca6c34e9e0e090062', size: this.size }), h("gb-mega-input-field-base", { key: '9c052dfc90c6e8abba1de1e9277e8e519f21e0e3', size: this.size })), h("div", { key: 'ca102e73cabe4bda6f55399edb075b8e792fee02', class: "second=section" }, h("gb-mega-input-field-base", { key: '2fd62da83adf71874321b8c78a0816a14df71f39', size: this.size }), h("gb-mega-input-field-base", { key: '392c40608b7e3496e368623672d2fb76c27a20e1', size: this.size }), h("gb-mega-input-field-base", { key: '2e1ff211ae287072bd70499847242f4f75a4d690', size: this.size })))), this.digits === 8 && (h("div", { key: '0cf4038808b721aeef435c3cf7509ed77ddd0630', class: "input-wrapper" }, h("div", { key: '3729fa412e897dbced218acd25863545ee7fbca4', class: "first=section" }, h("gb-mega-input-field-base", { key: '56682c58e8975bbd4d2d1e1b5bfb6eb79b0972e8', size: this.size }), h("gb-mega-input-field-base", { key: 'bfc0ccee8e6cc67a21f513fd3d494e1ac9575f8d', size: this.size }), h("gb-mega-input-field-base", { key: '9deca03312f8f2e74f2a1ca5d012c9f0b489c909', size: this.size }), h("gb-mega-input-field-base", { key: '8fa4e8cd07e59785465c917911c89481b20af083', size: this.size })), h("div", { key: 'c35a98d1030bc386a18495d5ff6d1e2276d6cdc8', class: "second=section" }, h("gb-mega-input-field-base", { key: '63e1454711ea2a06232f2f7f12a34ceaf9457d91', size: this.size }), h("gb-mega-input-field-base", { key: 'a8be8161c1ad590f3d8b30e64b4a666be3f4608d', size: this.size }), h("gb-mega-input-field-base", { key: '144750b2459fa5bbd2ab27aeda3ac861b50e8925', size: this.size }), h("gb-mega-input-field-base", { key: '6ea961e4a9443cc01eefed609e76f1f89cc79525', size: this.size }))))), h("p", { key: 'bea1c0a42c4bd411e4c530c70fb01709fd67ccc8' }, this.supportingText)));
     }
     static get is() { return "gb-token-field-compact"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-token-field-compressed/gb-token-field-compressed.js

@@ -5,11 +5,11 @@ export class GbTokenFieldCompressed {
         this.hintText = '';
     }
     render() {
-        return (h("div", { key: '4f1f7c1e84fbe85117576207c9ba39293c31e33c', class: {
+        return (h("div", { key: '23f812bc93b588df71077674ccf922bdb10b7cc2', class: {
                 container: true,
                 [this.size]: true,
                 [this.digits]: true,
-            } }, h("div", { key: '18c83675622cecc719a71c2e62a6fd5a9b038d39', class: "input-with-label" }, this.showLabel && (h("label", { key: 'faac5fe279649ab8068b651e319c14c5202d7ee4', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (h("div", { key: 'fdd2e6e1d93310de2e99565f3522139cccab4915', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'c25ffe33723a4479fe5b4edf4feaee0d02578772', size: this.size }), h("gb-mega-input-field-base", { key: 'e56be3893376d0fc4f2eab242a11a51d376f1d5e', size: this.size }), h("gb-mega-input-field-base", { key: '2ef9ff2b1aed2663ed0bec54eb6ceebe28c05f06', size: this.size }), h("gb-mega-input-field-base", { key: 'fc4503fcde5941734cae18a841eb89f1f81e659c', size: this.size }))), this.digits === 6 && (h("div", { key: 'd9c4a2f3cc10913b12502c88d08183daab736dfb', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'e4e4fd9d6597a7c11177f6b5214bbe5e2cc31d9d', size: this.size }), h("gb-mega-input-field-base", { key: '0bcf94a72bd5f33fe6fdeee4563db3496f44ee21', size: this.size }), h("gb-mega-input-field-base", { key: 'ca915e490669aad75202ce8d7b46a17a5b34216e', size: this.size }), h("p", { key: '7005a890a44fb20e1a2ba3469762657977ef9cd6', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: '6710d70190490e06fe2b39747930a0674d951395', size: this.size }), h("gb-mega-input-field-base", { key: '69aaafcb2bf4444d94e0568bd546b53325215951', size: this.size }), h("gb-mega-input-field-base", { key: '66a59cbd996eb66bfee748ef2575146eaf9c14d8', size: this.size }))), this.digits === 8 && (h("div", { key: 'e0f51b24578e5f36b208c64043b65f26afccbbb2', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '01b972c5502a60591b7696bbf011820f1abd438e', size: this.size }), h("gb-mega-input-field-base", { key: '8c4b87acc686ee289045e10480ef34be3d57525c', size: this.size }), h("gb-mega-input-field-base", { key: '03a3dabbf8636949eb1c0ce68101a6f4ce843272', size: this.size }), h("gb-mega-input-field-base", { key: '1702a5592fd45d808069dc75e8985ae7e15ea367', size: this.size }), h("p", { key: '78ee67c8a58b803b93037ab34ecf95a6499d3e11', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: 'ce8e250c4cfab5bbe46f3edae62f5f7d4416e4e4', size: this.size }), h("gb-mega-input-field-base", { key: '35964afcbe01f0290d8696c9bedefdd274b8561d', size: this.size }), h("gb-mega-input-field-base", { key: 'eccb902b45cb10ea94ea73f63adef773f09bd6f7', size: this.size }), h("gb-mega-input-field-base", { key: '249fdeb0999bcfa3ec414386edf1677ce3a8380b', size: this.size })))), this.showHintText && (h("div", { key: '4072c598038459a617a0b972e5d37587691cd356', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
+            } }, h("div", { key: 'b6a7ff07bc8d640e18223157178b716f9c57377f', class: "input-with-label" }, this.showLabel && (h("label", { key: '1f594254ef2c66d04e77d67c702f88a5cb2a02a2', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (h("div", { key: 'a8e7fb672f8a64104d0b762a9397fbb393219e04', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '88b78b50e9a8fa31baf3eceba48680cb7bc2d488', size: this.size }), h("gb-mega-input-field-base", { key: 'f9db9d159cfe0dae68eecc7c83f4121f2c4e555a', size: this.size }), h("gb-mega-input-field-base", { key: 'ba7d42c1e32dc04c9cd71eb63d4322a26f1f9f22', size: this.size }), h("gb-mega-input-field-base", { key: 'c47ffe0421f1b6168353d39f23e5859b5ce4e44e', size: this.size }))), this.digits === 6 && (h("div", { key: 'ef545f28c3f10756b0f79695d9f8f43ae1abfbe1', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '8a9ec0f983b4f49c4da514d2da6422d2d8e8b060', size: this.size }), h("gb-mega-input-field-base", { key: '0e894598923c1f9eba398ba15fe957258dbb9ef4', size: this.size }), h("gb-mega-input-field-base", { key: '2cf394d98bae0fbc0bdcf7e217af523022db397c', size: this.size }), h("p", { key: 'fc6c14abbbe723dfbfa09793bc63162c7f7a14b0', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: '6ee1a8679398dfcadf8edbc4d4382ef0fbd1c0f6', size: this.size }), h("gb-mega-input-field-base", { key: 'ba2030d7da06ced4c1c3766d8200b87de1ba8586', size: this.size }), h("gb-mega-input-field-base", { key: '920ad01df56a9f5dae2e0f845c7c760ec41b0275', size: this.size }))), this.digits === 8 && (h("div", { key: '7300395c3778f9917285e8af1770baafc444e7d8', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'b3c9242c91e96562fcd1236fea9e88a8281f9803', size: this.size }), h("gb-mega-input-field-base", { key: '4d0978bd516f3b6fef4eb886359fc2fbdc7ad6a9', size: this.size }), h("gb-mega-input-field-base", { key: '112713ec155b6059e93e015bc5594768ca834880', size: this.size }), h("gb-mega-input-field-base", { key: '921a779e783394a8edaa8519cca96fe519cf10a6', size: this.size }), h("p", { key: '48de02dbc92a70a624eebe10f1795af6d4fe45de', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: '169dea9476984e41c746f9953b3c7d988a39f458', size: this.size }), h("gb-mega-input-field-base", { key: 'f8e2c2b50225d9cc11b2a993fec79b745fb1843a', size: this.size }), h("gb-mega-input-field-base", { key: 'd9eaace4d658abd34bb31300f29f73738016047d', size: this.size }), h("gb-mega-input-field-base", { key: 'f069f6ea411606fa7a137f3778470c384881ac7a', size: this.size })))), this.showHintText && (h("div", { key: '3207fa344cba1e0c74d33a32977a3b2adccb957a', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
     }
     static get is() { return "gb-token-field-compressed"; }
     static get encapsulation() { return "shadow"; }