globuswebcomponents 1.3.5 → 1.3.7

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

@@ -56,7 +56,7 @@ export class GbToast {
         }
     }
     render() {
-        return (h("div", { key: '46c0c363e36a418aaab9f2501cc3f87de334015b', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: 'd46ca988bf5b5d0576b6405e9cc8fd7d6970dde2', class: `icon_container` }, h("svg", { key: '1065b3a90aa8dd958da6e31b0694b946725b6edd', 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: 'a86eeee9d8d620f5f37b3b197c5c6c4297655910', 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: '19373ccd1c654506ece0fb8acef96ee28389e1c4', "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: '6abcebb850eb8af4cee81c1c02c96d0402977d74', "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: 'ef395a21ff2df93c7dfa504cc6eda44906f5785d', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: '2cf4ca66e342e8eac89320f7678166f906cbbcc2', class: `text ${this.size}` }, h("slot", { key: '8dba7e713e9d4b4def750cc951e5d000b01de6bc', name: "main_text" }), this.showSupportingText && h("slot", { key: '927263ea408b0a9ce972f6d2d18ea41f882c5034', name: "supporting_text" })), this.actions && (h("div", { key: 'a2531df496cfe3f042566881244da3700bbe0a9e', 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: '5c58872b4d1e50252e113fb3f97a8cc6d1e974c6', 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: 'bfc597b84d8a49f41967d64edbefa5eb96d73a7f', class: `container ${this.breakpoint}` }, h("div", { key: '32b9cddfd6a1831470e7e984d822331bc3718e20', class: `full_width_content ${this.breakpoint}` }, h("div", { key: 'cad7184853ea6beded095f16db7ac5f834cec3bb', class: `inner_content ${this.breakpoint}` }, h("div", { key: '08cd5ac9387cb11fc7fe23bb12a2fa0223c42ede', class: `icon_container` }, h("svg", { key: 'cf20ea8e2748c165d61803add32fd89e9f3a86d1', 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: '1de516618e106d20ce99cca83f22548a0cf31a5f', 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: '64a4ae382e58762b7664b11f34a1d347032ce605', "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: '4d3ba0e1310d41f07eeb98a7dec77cdd8de0311f', "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: 'f1fee0faa0ada100967b73e58eee6d5ae0dfab40', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: '505a02bb1178920a264a88527185c312ff9d2fe5', name: "main_text" }), this.showSupportingText && h("slot", { key: 'c7e1289f33155f7fe81875c08e2517e9c9dc0e39', name: "supporting_text" }))), this.actions && (h("div", { key: 'd90bb3ec8ceb80d4307d0929e894877846e7a0ce', 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: 'edd27809d147fd832c1df5772cd90b719c7ec24e', 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: '4aced25f1992508377cac4a3a4342a8cd7dc6511', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: '624c518cfec251e80a114d981e74d9d26edcef1f', class: `icon_container` }, h("svg", { key: 'ebaae51091b8a908aba08e51c8c4ef7f072d3fac', 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: 'a6bcf3aa174cac2745db6e21b5f6ed73931f1806', 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: '8aa55037312efae8d11e6f6da04d7bd4a374cec5', "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: '714d4cba309d36bf68c516fd365c9aa3be19c2e1', "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: 'd5f4c33b1ad399e64227f40dbdddc76dd11bfd6d', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: 'eb090367ffa22730ce426ca421858761521c2ec2', class: `text ${this.size}` }, h("slot", { key: '24a076469ce14ec9fbcae0d9f2bd0994b3059a58', name: "main_text" }), this.showSupportingText && h("slot", { key: 'ac03edda2eb8b03323b626c95c8aa1b7f9cad9a2', name: "supporting_text" })), this.actions && (h("div", { key: '152e04092ac80c050a7ef2868bd2a789fe271531', 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: '5f541697d3c3abf02c774b555d2c33ad7648213e', 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: '74a79da4d32ef01d907ee99166944bf7af6a6079', class: `container ${this.breakpoint}` }, h("div", { key: 'e39588ecef7f40790db69305638094ba9e83136a', class: `full_width_content ${this.breakpoint}` }, h("div", { key: '47555b085e512e1ab1ea234c26332a117313f938', class: `inner_content ${this.breakpoint}` }, h("div", { key: 'a9ce00a66b6ef853897d31831ddae2984d771935', class: `icon_container` }, h("svg", { key: 'e132113caa914f54f887a37546f58567cbf52dde', 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: '764975f0058bb10dd7c1d50736594636b621148f', 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: '33887b4b4c3750025897268cdfa87c0cf3cb9712', "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: '0ec0b03460fd6119a29bc676803493d0e5cb5ed2', "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: '39df2cd94a516117d45d9cb66e0f4157129cc770', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: 'd9e4825891f60d62290db5ba66244904363628bb', name: "main_text" }), this.showSupportingText && h("slot", { key: '71f4e8ee2a00964a3891fc3a672473dd34fa2310', name: "supporting_text" }))), this.actions && (h("div", { key: '0bd49868787014819b43b8e028cbcf2e54611cec', 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: '6bc3d4a9a20a976fc21d58f74095931073e8e0b6', 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

@@ -9,7 +9,7 @@ export class GbToastButton {
         slottedContent.classList.add('text-sm-semi-bold');
     }
     render() {
-        return (h("div", { key: 'a72a828d879ca45296c9c4582f953f8b259633fc', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: 'b3b37568eed2725990733792ee7619e7ec182cd8' })));
+        return (h("div", { key: '8eae1030a5195a0dc7d72c4baaa4155048292c6a', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: '7d7841ed27a9391405970cb2eb773b8568893307' })));
     }
     static get is() { return "gb-toast-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class GbToggle {
         }
     }
     render() {
-        return (h("div", { key: 'bb774758a9c9f722743f399af076bc75da6ca4fc', class: `toggle_div ${this.size}` }, h("div", { key: 'aea4fc951b526ad038a713f52fbc83b99fe28787', class: "toggle_base" }, h("gb-toggle-base", { key: '02e6d64f5e78028e19d5613df4b24b0bfeef8251', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: 'a6ec0f5777b38597c88267f9df4bea09a04256c2', class: "text" }, h("slot", { key: 'df258c8a422cd1100f99af1a0cd82d4f6a33c150', name: "main_text" }), this.supportingText && (h("slot", { key: '461870d9e952fa22594ed76183534213e6cb824d', name: "supporting_text" }))))));
+        return (h("div", { key: 'b842fd4496365c16dc27cfea8796ce9a3ae08852', class: `toggle_div ${this.size}` }, h("div", { key: 'dd369f6e04349fed0db7df6d252fb3cd8b76c524', class: "toggle_base" }, h("gb-toggle-base", { key: '5aaf5253b34f44365031dd1c27a1ed915bd10a48', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: '4738f0166dd0ffc7341229dda9a4210f61f42a17', class: "text" }, h("slot", { key: '419f086d4060208ed8ce93306316d444799f7052', name: "main_text" }), this.supportingText && (h("slot", { key: '12a8396ff87a649494857b587a0fc4d11d2f8d65', 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

@@ -13,8 +13,8 @@ export class GbToggleBase {
     }
     render() {
         return [
-            h("input", { key: '44747c6bbea5a8c698074171d885b275517ed4be', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
-            h("label", { key: '1bd2b5811929a2f484dec0f8db737a862aa3c6d8', 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: '78ac613ef3145c8ba0233e98065a17605e793508', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
+            h("label", { key: '5cf3ee71aeb6900df940d87237eb67ab0feade4c', 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

@@ -9,7 +9,7 @@ export class GbTokenFieldCompact {
         this.supportingText = '';
     }
     render() {
-        return (h("div", { key: 'e9f3ea5897974d57c73f397e7df2eb9aeddeafe0', class: this.size }, h("div", { key: '70706f3a0ab029ed23952daf270dd5cc5fbd64bc', class: "input-with-label" }, this.showLabel && (h("label", { key: 'd232bd2aaa8eee9201c0ba030f4a7a917a431e3e' }, this.label)), this.digits === 4 && (h("div", { key: '5e9d3f5b3546bc0ad25da485bf8809ce54a48915', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '5d3f62f6a9169d92da3cc45a6f064cce86ac4399', size: this.size }), h("gb-mega-input-field-base", { key: '82193d1ce3e079fe2ba7d03c5b8ba2e41db0879c', size: this.size }), h("gb-mega-input-field-base", { key: '9ce971f833705a8d56813d4e0cf31c3d722e2b48', size: this.size }), h("gb-mega-input-field-base", { key: 'd6e131fabeae934b8bd2f33e0c46d22918f0ad8e', size: this.size }))), this.digits === 6 && (h("div", { key: '871f35c9639da8c7a0d4e4ceea9cb8469c7b0a68', class: "input-wrapper" }, h("div", { key: '20c30e712d7711e9916c79bedb99c079f9113ae7', class: "first=section" }, h("gb-mega-input-field-base", { key: '2183f0279c57d012a6539c4a34513fc07b7adfe6', size: this.size }), h("gb-mega-input-field-base", { key: '8b39b3a61c8efd586a776572ca916d061db5eb9d', size: this.size }), h("gb-mega-input-field-base", { key: 'c10eb5cf2d887e879ddf24adadf8fc4479ab9569', size: this.size })), h("div", { key: '51122e6de2a97b19e97ac83478a89045a1830e9e', class: "second=section" }, h("gb-mega-input-field-base", { key: 'f67fa9446ebbde79b5709dd36b86a11942b51f20', size: this.size }), h("gb-mega-input-field-base", { key: '7c13eb4fb7f89935aca1cb1464f604b3cc40242a', size: this.size }), h("gb-mega-input-field-base", { key: '5af996219ab12a909c581e9f6606543618aa3c53', size: this.size })))), this.digits === 8 && (h("div", { key: 'c823ef0a8b2610a59137a623bbba4d8631e6ea75', class: "input-wrapper" }, h("div", { key: '068b9f4b4e2638055964019b24557458a1d4a2b0', class: "first=section" }, h("gb-mega-input-field-base", { key: 'bf90c9c92affd77799fe2e619777b78d1608f76e', size: this.size }), h("gb-mega-input-field-base", { key: 'a1308f4efe709a922481b0e781fb4c4da293b9ab', size: this.size }), h("gb-mega-input-field-base", { key: 'b6a609dac743e7277706e61b3b879b2cb4e4a949', size: this.size }), h("gb-mega-input-field-base", { key: '1d3ba45b141320f92ecf18db1c6fb697d0f74366', size: this.size })), h("div", { key: 'b8cb6e02e3b42792c63f89efe0354514f735d08b', class: "second=section" }, h("gb-mega-input-field-base", { key: 'f5de3d9711049e6c8922a185c9d0afeeef66ffba', size: this.size }), h("gb-mega-input-field-base", { key: '83f789fc3b7d8a8cabe7af13065c3378ea7fdaf2', size: this.size }), h("gb-mega-input-field-base", { key: '06f2a72eb247b84d96a45d4a0af095aed9e0e2f8', size: this.size }), h("gb-mega-input-field-base", { key: '719e87b8b57fe50c5c5c41ef47731b2a24b12c3d', size: this.size }))))), h("p", { key: '3a4944f4481c2d33b03d5a1d940cb3bc7fb2a821' }, this.supportingText)));
+        return (h("div", { key: '096fbcc0f35e2770e8a2a465729271340d67ae85', class: this.size }, h("div", { key: '5c53f600084292be89fc4a7ac635193302630989', class: "input-with-label" }, this.showLabel && (h("label", { key: 'a455703744b1ebb0611399e9e916d3aac67943f9' }, this.label)), this.digits === 4 && (h("div", { key: '03540782d94d84674f7a5ac3f4c0e04eba0bdcc3', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'ec413037ce7d7c2ffd8e192b8274a0c79e333898', size: this.size }), h("gb-mega-input-field-base", { key: 'fde45888b346e41d67d34672ef42e3f7da19762f', size: this.size }), h("gb-mega-input-field-base", { key: '58f0427373006d8bc7570d6d513b9bf6b25edf7f', size: this.size }), h("gb-mega-input-field-base", { key: 'acfe32c9d8556c0504074b5f3668caf3e4f76ea0', size: this.size }))), this.digits === 6 && (h("div", { key: '67b2ca7e0396062551b6f5d184d9cd5f1c42c4c1', class: "input-wrapper" }, h("div", { key: '9ac47d23c8b097af26b2c8d8ec7ec970870c98df', class: "first=section" }, h("gb-mega-input-field-base", { key: 'f95766cad112de4c9cd53b16570377b7c80d7ab1', size: this.size }), h("gb-mega-input-field-base", { key: 'eb4244750a53d5faaa58c2f95e5efa01eda7e780', size: this.size }), h("gb-mega-input-field-base", { key: '7fcf29ddd2cf39f2b9587db7add0c2e2b1fd7add', size: this.size })), h("div", { key: 'b1deb019a5d5c0dcaf7efcb76a396f9a242023b8', class: "second=section" }, h("gb-mega-input-field-base", { key: '3b76dc96366a7543f3bcdb279ddf028070eaa7bd', size: this.size }), h("gb-mega-input-field-base", { key: '02d84e400d304732310eaa06980f36980ca1d8f8', size: this.size }), h("gb-mega-input-field-base", { key: '204fbd3fd443a2358d89728517bcbafcf3458ae9', size: this.size })))), this.digits === 8 && (h("div", { key: '65b3541d64d56f1fff4d4c57711e3ad2d92ed762', class: "input-wrapper" }, h("div", { key: '8f094104a60b048f38b32f3be0e98b80fa251fdf', class: "first=section" }, h("gb-mega-input-field-base", { key: 'a190be73553a5ff1840e42ad0c065dfa22774964', size: this.size }), h("gb-mega-input-field-base", { key: '25dbb9e678e4b4d499ed38fc22a3644e152a0db1', size: this.size }), h("gb-mega-input-field-base", { key: '63bb746571e8ffe90e1565862fc95714fb452022', size: this.size }), h("gb-mega-input-field-base", { key: '8f7f63ba79ec3933400ac02c3360845881ac85fd', size: this.size })), h("div", { key: '2a9b1849669f70c8153d6685d87b04d1476f3c92', class: "second=section" }, h("gb-mega-input-field-base", { key: '10baf5007d328412266e9d6474d5738a01f8375e', size: this.size }), h("gb-mega-input-field-base", { key: '4ce27e25a02736fbbfed900dd4870e8b1b163240', size: this.size }), h("gb-mega-input-field-base", { key: 'b4f500d7157430c50060eea83f600afb84f09729', size: this.size }), h("gb-mega-input-field-base", { key: 'dec3f2ce5100c4540e74cdaa37f1245ef0175782', size: this.size }))))), h("p", { key: '440aed40dd5961e55e853b1e2f0c713ad056f95f' }, 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

@@ -9,11 +9,11 @@ export class GbTokenFieldCompressed {
         this.hintText = '';
     }
     render() {
-        return (h("div", { key: '60f9700bc18d21cd0b616dee2bfc42b73ea6934f', class: {
+        return (h("div", { key: 'e7296bf4e3adc771588da82d287ba1c365f02791', class: {
                 container: true,
                 [this.size]: true,
                 [this.digits]: true,
-            } }, h("div", { key: '6cb8848f71eb85d3eb0fb4d6eb1341352deb35b2', class: "input-with-label" }, this.showLabel && (h("label", { key: 'c8b1332b1bf03e45bab4e7eb92080223255e1ee6', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (h("div", { key: '3b9b28b85fb6540b22464675127876a6c94f08f5', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'a69c4bf8d0726f17af2472a0919d53d86ecd2d15', size: this.size }), h("gb-mega-input-field-base", { key: 'b390b0a1c1c8d86765c3cf21a21e1f56eccad8d1', size: this.size }), h("gb-mega-input-field-base", { key: 'c9769413a12b4392c9be49e5e114c23620bc1527', size: this.size }), h("gb-mega-input-field-base", { key: '8b255d7b20eb8f36c88aa78e381d29f496787aab', size: this.size }))), this.digits === 6 && (h("div", { key: '16fd16b51be2d69ddfecbc060e806d2f2b1c7496', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '3ad69a88fde3b1fdb5377ad3d09e1eef5e5d71e0', size: this.size }), h("gb-mega-input-field-base", { key: '3bef1c43123fba16657df17d7cb73578a26b324b', size: this.size }), h("gb-mega-input-field-base", { key: '47ae3cc78f9ac5c6f0ac64416a1b111ffb953377', size: this.size }), h("p", { key: '84839582df3a3a354a76309e6052e2a7dff01c3d', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: '1db018eac2def9faa01accf38a4411bf9d97ed48', size: this.size }), h("gb-mega-input-field-base", { key: '3f43d77e6b85cc0819871ace879f08dae5956dc0', size: this.size }), h("gb-mega-input-field-base", { key: 'c8ec490990e96753716ec2b05b67f446c2a3ab99', size: this.size }))), this.digits === 8 && (h("div", { key: '2494e3388577688319087ad4fba0bfe5da2a67b7', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '822f883a266a5d6bdb013f2e82ff2f9c973a832e', size: this.size }), h("gb-mega-input-field-base", { key: '7f02e9f8063db67bbaf86eaa2af904700fa08925', size: this.size }), h("gb-mega-input-field-base", { key: 'f480bebb6ce97878dd153ccbb2ba03f78974fe69', size: this.size }), h("gb-mega-input-field-base", { key: 'ebc093b2e8ec597e063fa95c4b8d2c30d51018a0', size: this.size }), h("p", { key: '9a82f58483d3ae0aaf9a605c14062eba81fa9cb7', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: '11877db36e9d6fa05df79775f01f4d63d81ebec1', size: this.size }), h("gb-mega-input-field-base", { key: '249ed8d0fce566435911d966d252b9500ba580bf', size: this.size }), h("gb-mega-input-field-base", { key: 'bcf125edc796b5ac993ab95f8727bfbb232b22c4', size: this.size }), h("gb-mega-input-field-base", { key: '85c4e26aba3b1ba0e150d3b1fda409a0b9b64232', size: this.size })))), this.showHintText && (h("div", { key: '7ddd2c3cb0552d6ec672000571daeb3e642877b0', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
+            } }, h("div", { key: 'e8913b8948540ab8fd3987eb5f9bbb8fda9db163', class: "input-with-label" }, this.showLabel && (h("label", { key: '8026ef3406f112f9d6b7a68a90ff4e3948ddceb8', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (h("div", { key: 'c660cdd5beeb35b3a9cc8755300c3b6061c12787', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '928aef3c73cb5d006837f0d205485fa870101df9', size: this.size }), h("gb-mega-input-field-base", { key: 'fcc6f315d5f18d35ae9b82b85f3c5644e76eefd6', size: this.size }), h("gb-mega-input-field-base", { key: 'dbf7d419558cc5b2adf3267732595b38fea1cb91', size: this.size }), h("gb-mega-input-field-base", { key: '2a4a6c88507aae11f3318cf33463ab7f8effb5c3', size: this.size }))), this.digits === 6 && (h("div", { key: '611fe9ea96a11ad3011346dad947e7e7eb6ebea2', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '49ed707ebf66292e67b1c06e6e549c0b560da3ba', size: this.size }), h("gb-mega-input-field-base", { key: 'd12f2b96ba8a0ac62d2b0898fdaa3de59f97e1f7', size: this.size }), h("gb-mega-input-field-base", { key: '64fca25bd5d4e9ad6a8dda26cd780ae7ef28e32d', size: this.size }), h("p", { key: 'f6e01013aae845020678a6357c182a9d706b004b', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: 'd8645e89e21b99043f760f85c4189c2edea9ae62', size: this.size }), h("gb-mega-input-field-base", { key: 'f378a2a14a70c0990e81fb6048af32d64703a769', size: this.size }), h("gb-mega-input-field-base", { key: '47605101ef85fa7bd4344fc6e88c5d5faf953d0b', size: this.size }))), this.digits === 8 && (h("div", { key: '4cd5c7b1fd77e720752e34d4630f922272dfac0f', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '373849dc7f99de88cf3951f2c82f535128b108ab', size: this.size }), h("gb-mega-input-field-base", { key: 'cd2b437e1aa250dd1acfb3878e11fa4b4b92866c', size: this.size }), h("gb-mega-input-field-base", { key: '91dda752b9ee414a405918a85e583e57dbea81bc', size: this.size }), h("gb-mega-input-field-base", { key: '1f6c3049a0f45d79de97a033a57ea6c8bbf08c87', size: this.size }), h("p", { key: '789509e3f04023936591e3c1fa2cf2cf4a758dba', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: 'c4ee07116e08aee4409b7c70f68b290fc238443f', size: this.size }), h("gb-mega-input-field-base", { key: '3ebb434e4b4d475243445bc4a8196d6a2788cb6c', size: this.size }), h("gb-mega-input-field-base", { key: '30ab78027b56483683e678a184ad9944e791e7a6', size: this.size }), h("gb-mega-input-field-base", { key: 'b86b728cd6b38095a529953414f4966da78f27b7', size: this.size })))), this.showHintText && (h("div", { key: '6a9ed450e3a16f9d516232debcfe502c47025a92', 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"; }

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

@@ -19,7 +19,7 @@ export class GbTooltip {
         return this.showArrow ? `arrow ${this.arrow}` : '';
     }
     render() {
-        return (h("div", { key: '7844211d14aca60f434ce10f92f8117f641a145e', class: "tooltip_container" }, h("div", { key: '6e95b9cb9da5d038a88e7a7f7a242fdef0651da8', class: "tooltip" }, this.showArrow && h("div", { key: '0525d1060bfc342e64f57b156be34a218b2c0a2f', class: this.getArrowClass() }), h("div", { key: '7ad9faaf6f8346b2e76b4b33376129bbf31bac8e', class: "tooltip_content" }, h("slot", { key: 'fb26ed9ce55665f1864852d6c35b4b8f274e5011', name: "label" }), this.showSupportingText && h("slot", { key: 'a6872fb402c7daf31f440c0e793b4f6e39da02c1', name: "supporting_text" })))));
+        return (h("div", { key: '5a2f7f5fe6a423a7f65173f942b6b539b6524b20', class: "tooltip_container" }, h("div", { key: '0e0df70c4e0c2f2d89e9171a38210046c95318df', class: "tooltip" }, this.showArrow && h("div", { key: '3bda35ee3040f0ac0a9b6d53019388c9db867e39', class: this.getArrowClass() }), h("div", { key: 'cacd34bb01b68df2196f641d5c03f5480d580844', class: "tooltip_content" }, h("slot", { key: '59c66a75668f85ae3e15c532f0fbdbf3d44f60eb', name: "label" }), this.showSupportingText && h("slot", { key: '5c0f8241fd0a2c13b97925d50baef012723e3faa', name: "supporting_text" })))));
     }
     static get is() { return "gb-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-top-bar/gb-top-bar.js

@@ -31,7 +31,7 @@ export class GbTopBar {
     }
     render() {
         const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
-        return (h("div", { key: 'd3b0314c7c5a1173beb135a7e7827b8154238fc7', class: `top_bar_div ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '200516b1a593216099ec2a30a924f411507e607b', class: "pattern" }, h("img", { key: 'ad89725150f65d29ee61b2c78fb5ce276c1c10c8', src: patternSrc, alt: "" }))), h("div", { key: 'dd5874774cce280eeabc069dc66f860fc5432de7', class: "top_bar_content" }, h("div", { key: 'cd10d197d211f80e262ccdbd46ab0ae78cb19899', class: "content" }, this.firstTabLabel && (h("gb-top-bar-item", { key: '7a4daa6b66b1d65eb6add52bd827411344d2dc6d', state: this.activeIndex === 0 ? 'active' : 'default', "icon-only": this.firstTabIconOnly, category: this.category, icon: this.firstTabIcon, label: this.firstTabLabel, onClick: () => this.onTabItemClicked(0) })), this.secondTabLabel && (h("gb-top-bar-item", { key: 'a3338869ec8751f0b089d20cf0f4c67d6a9b8e5e', state: this.activeIndex === 1 ? 'active' : 'default', "icon-only": this.secondTabIconOnly, category: this.category, icon: this.secondTabIcon, label: this.secondTabLabel, onClick: () => this.onTabItemClicked(1) })), this.thirdTabLabel && (h("gb-top-bar-item", { key: '3e41efa5b25b0ae5f2c333de004c40de61dbb081', state: this.activeIndex === 2 ? 'active' : 'default', "icon-only": this.thirdTabIconOnly, category: this.category, icon: this.thirdTabIcon, label: this.thirdTabLabel, onClick: () => this.onTabItemClicked(2) })), this.fourthTabLabel && (h("gb-top-bar-item", { key: '7fa62a025c84f9283776feb7a36d49d854cde1bf', state: this.activeIndex === 3 ? 'active' : 'default', "icon-only": this.fourthTabIconOnly, category: this.category, icon: this.fourthTabIcon, label: this.fourthTabLabel, onClick: () => this.onTabItemClicked(3) })), this.fifthTabLabel && (h("gb-top-bar-item", { key: '7e7c421aaa31d9cd60c14117bd87968801090f1a', state: this.activeIndex === 4 ? 'active' : 'default', "icon-only": this.fifthTabIconOnly, category: this.category, icon: this.fifthTabIcon, label: this.fifthTabLabel, onClick: () => this.onTabItemClicked(4) })), this.sixthTabLabel && (h("gb-top-bar-item", { key: '1e419316f1da79e12c2723c0541d1a34f12ed9aa', state: this.activeIndex === 5 ? 'active' : 'default', "icon-only": this.sixthTabIconOnly, category: this.category, icon: this.sixthTabIcon, label: this.sixthTabLabel, onClick: () => this.onTabItemClicked(5) })), this.seventhTabLabel && (h("gb-top-bar-item", { key: '9ec5ac6297f8dc223dc6d94460c950b06e9072f7', state: this.activeIndex === 6 ? 'active' : 'default', "icon-only": this.seventhTabIconOnly, category: this.category, icon: this.seventhTabIcon, label: this.seventhTabLabel, onClick: () => this.onTabItemClicked(6) }))))));
+        return (h("div", { key: '783922d8f974b2cd3fd3c7d17e8706d9221b7252', class: `top_bar_div ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '8dfce9099f9fb93fa6f97798c6690545ad072cdb', class: "pattern" }, h("img", { key: '2ac7f62df7d8cdb43934013764cbd5fc8ba478c3', src: patternSrc, alt: "" }))), h("div", { key: 'c4276f978571743ff8dd02ccdf370bceaab4826d', class: "top_bar_content" }, h("div", { key: '22ac194b1197fd7fdc72dae045b313308144b615', class: "content" }, this.firstTabLabel && (h("gb-top-bar-item", { key: 'c3944cea7d91e00e8ddf46153a7a6579d3442023', state: this.activeIndex === 0 ? 'active' : 'default', "icon-only": this.firstTabIconOnly, category: this.category, icon: this.firstTabIcon, label: this.firstTabLabel, onClick: () => this.onTabItemClicked(0) })), this.secondTabLabel && (h("gb-top-bar-item", { key: 'c3904d6277c87c950a7b20dd9fbfbb6fad73a241', state: this.activeIndex === 1 ? 'active' : 'default', "icon-only": this.secondTabIconOnly, category: this.category, icon: this.secondTabIcon, label: this.secondTabLabel, onClick: () => this.onTabItemClicked(1) })), this.thirdTabLabel && (h("gb-top-bar-item", { key: 'fe119761bea4b3e43a61804e0c3e31336d79da2c', state: this.activeIndex === 2 ? 'active' : 'default', "icon-only": this.thirdTabIconOnly, category: this.category, icon: this.thirdTabIcon, label: this.thirdTabLabel, onClick: () => this.onTabItemClicked(2) })), this.fourthTabLabel && (h("gb-top-bar-item", { key: '66cb88c46b3613357d3931010e5bcd69ed9fa0dd', state: this.activeIndex === 3 ? 'active' : 'default', "icon-only": this.fourthTabIconOnly, category: this.category, icon: this.fourthTabIcon, label: this.fourthTabLabel, onClick: () => this.onTabItemClicked(3) })), this.fifthTabLabel && (h("gb-top-bar-item", { key: 'a34ae6c6f27e55d32657d25a820066db1ba257ac', state: this.activeIndex === 4 ? 'active' : 'default', "icon-only": this.fifthTabIconOnly, category: this.category, icon: this.fifthTabIcon, label: this.fifthTabLabel, onClick: () => this.onTabItemClicked(4) })), this.sixthTabLabel && (h("gb-top-bar-item", { key: '425a931f01e149708280743aac0bb61a30729b66', state: this.activeIndex === 5 ? 'active' : 'default', "icon-only": this.sixthTabIconOnly, category: this.category, icon: this.sixthTabIcon, label: this.sixthTabLabel, onClick: () => this.onTabItemClicked(5) })), this.seventhTabLabel && (h("gb-top-bar-item", { key: 'cd7f27c4ea677a2cf44b01563616d9a2698fc2b0', state: this.activeIndex === 6 ? 'active' : 'default', "icon-only": this.seventhTabIconOnly, category: this.category, icon: this.seventhTabIcon, label: this.seventhTabLabel, onClick: () => this.onTabItemClicked(6) }))))));
     }
     static get is() { return "gb-top-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-top-bar-item/gb-top-bar-item.js

@@ -19,7 +19,7 @@ export class GbTopBarItem {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '35050724b0f7a926ae7377f519f34ba8e254fc2a', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '5308d4ec8ce7060a6d3c01e7d42db39765d7b60c', class: `top_bar_content` }, h("div", { key: 'd2ca2c61c9984ca1d5ce471f3c2596606489b3cc', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: 'f0ca86a5735178180699b068407134a08e60d8df', class: "label" }, h("p", { key: 'ad15a631d6531c991b0ac503f042d8b0a5391e55', class: `label_text text-md-medium ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '802692bb2106cfe6356b566c367106d7e9385ef3', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: '3f2c4e82e8c11b0aa27087ed8696a7ecb01e199f', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: '93bc231fa29d7791760b041d9348e9a50915a79b', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '82a2604792663620f5300c6642d491dbb51a129a', slot: "label" }, this.label)))));
+        return (h("div", { key: 'f0f623c45148624375ef59eeb5ef928434a8722e', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'cb27dff03217f1db18e193e43edf83e7887ab5d0', class: `top_bar_content` }, h("div", { key: 'cdb2e1edac0751b03b8284f8793184a3db8359a4', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: '96c5fa36c874efa72cedbf71358d742fd91f6921', class: "label" }, h("p", { key: '3c1bfba1628672e7cba2b66c40b6fe5138506df8', class: `label_text text-md-medium ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: 'c517a279979136176613e837c9eb8f2f6698e39f', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: 'ceda9addebe03eb31be4965e24a54a2e84f3dd4c', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: '8bfd449e45851fcc457d75e2d02a16736dfa4ab9', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '0602e9c4f0467a5e29446484222a5e35afd46b39', slot: "label" }, this.label)))));
     }
     static get is() { return "gb-top-bar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-top-bar-sidemenu/gb-top-bar-sidemenu.css

@@ -0,0 +1,48 @@
+.top_bar_sidemenu_div{
+    display: flex;
+width: 17.5rem;
+height: 100vh;
+padding: var(--spacing-6) var(--spacing-7);
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+border-right: 1px solid var(--color-border-subtler, #E3E8EF);
+background: var(--color-surface, #ffffff);
+}
+
+.vertical_tabs_div{
+    width: 100%;
+}
+
+.wrapper{
+    display: flex;
+padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);
+flex-direction: column;
+justify-content: center;
+align-items: flex-start;
+gap: var(--spacing-4);
+align-self: stretch;
+border-radius: var(--rounded-sm);
+border: 1px solid var(--color-border-subtler, #E3E8EF);
+background: var(--color-background-gray-subtlest, #F6F8FA);
+position: relative;
+    height: auto;
+    overflow: hidden;
+}
+
+.wrapper_pattern{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    mix-blend-mode: multiply;
+}
+
+.wrapper_pattern img{
+    width: 100%;
+    height: 100%;
+}
+
+::slotted([slot="application_name"]){
+    color: var(--color-text-information-bold, #042F59);
+}

package/dist/collection/components/gb-top-bar-sidemenu/gb-top-bar-sidemenu.js

@@ -0,0 +1,222 @@
+import { getAssetPath, h } from "@stencil/core";
+export class GbTopBarSidemenu {
+    constructor() {
+        this.applicationName = '';
+        this.applicationIcon = '';
+        this.activeIndex = 0;
+        this.firstTabName = '';
+        this.secondTabName = '';
+        this.thirdTabName = '';
+        this.fourthTabName = '';
+        this.fifthTabName = '';
+        this.leadingIconSvg = '';
+    }
+    async loadIcon(iconName) {
+        const iconPath = getAssetPath(`${iconName}`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        this.leadingIconSvg = svg;
+    }
+    onTabItemClicked(event) {
+        console.log(event.detail);
+        this.tabItemClicked.emit(event.detail);
+    }
+    componentWillLoad() {
+        this.loadIcon(this.applicationIcon);
+    }
+    componentDidLoad() {
+        const applicationName = this.el.querySelector('[slot="application_name"]');
+        if (applicationName) {
+            applicationName.classList.add('text-lg-bold');
+        }
+    }
+    render() {
+        const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);
+        return (h("div", { key: '8b9575fd7f86ee172e19aca2b5dd1a16799fece7', class: "top_bar_sidemenu_div" }, h("div", { key: 'edeedeecf42d418f0713633efa173b4ecf2348a6', class: "vertical_tabs_div" }, h("gb-vertical-tabs", { key: '68e3747b1611c938c58ac9f656632a1bbdcc463a', size: "md", "first-tab-name": this.firstTabName, "second-tab-name": this.secondTabName, "third-tab-name": this.thirdTabName, "fourth-tab-name": this.fourthTabName, "fifth-tab-name": this.fifthTabName, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) })), h("div", { key: '24a204c6135029f0a8c91a88ab59abfe58962957', class: "wrapper" }, h("div", { key: '8267814d0624acd606cc8fb2555a19246676f9fe', class: "wrapper_pattern" }, h("img", { key: '77e9d382c157b983eff16e4f7634d10909244cf7', src: patternSrc, alt: "" })), h("div", { key: '1238669c0967e875e8cf04e6c594853147c84f66', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("div", { key: 'fe1c5390ac98b3d3a45b6bba575f225f47ad902b', class: "application_name" }, h("slot", { key: '7a71c3242edf4c1878b96c815fa651eac35e5222', name: "application_name" })))));
+    }
+    static get is() { return "gb-top-bar-sidemenu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-top-bar-sidemenu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-top-bar-sidemenu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "applicationName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "application-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "applicationIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "application-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "activeIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active-index",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "firstTabName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "first-tab-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondTabName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "second-tab-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "thirdTabName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "third-tab-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fourthTabName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fourth-tab-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fifthTabName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fifth-tab-name",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "leadingIconSvg": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabItemClicked",
+                "name": "tabItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-top-bar-sidemenu.js.map

package/dist/collection/components/gb-top-bar-sidemenu/gb-top-bar-sidemenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-top-bar-sidemenu.js","sourceRoot":"","sources":["../../../src/components/gb-top-bar-sidemenu/gb-top-bar-sidemenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,gBAAgB;;+BACO,EAAE;+BACF,EAAE;2BACN,CAAC;4BACA,EAAE;6BACD,EAAE;4BACH,EAAE;6BACD,EAAE;4BACH,EAAE;8BACC,EAAE;;IAIpC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAED,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QAE3E,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAE9D,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB;YAC/B,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,yEACE,IAAI,EAAC,IAAI,oBACO,IAAI,CAAC,YAAY,qBAChB,IAAI,CAAC,aAAa,oBACnB,IAAI,CAAC,YAAY,qBAChB,IAAI,CAAC,aAAa,oBACnB,IAAI,CAAC,YAAY,EACjC,IAAI,EAAC,gBAAgB,kBACP,IAAI,CAAC,WAAW,EAC9B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAChC,CAChB;YACN,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC3B;gBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ;gBACtE,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-top-bar-sidemenu',\r\n  styleUrl: 'gb-top-bar-sidemenu.css',\r\n  shadow: true,\r\n})\r\nexport class GbTopBarSidemenu {\r\n  @Prop() applicationName: string = '';\r\n  @Prop() applicationIcon: string = '';\r\n  @Prop() activeIndex: number = 0;\r\n  @Prop() firstTabName: string = '';\r\n  @Prop() secondTabName: string = '';\r\n  @Prop() thirdTabName: string = '';\r\n  @Prop() fourthTabName: string = '';\r\n  @Prop() fifthTabName: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() tabItemClicked: EventEmitter<void>;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  onTabItemClicked(event) {\r\n    console.log(event.detail);\r\n    this.tabItemClicked.emit(event.detail);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.applicationIcon);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n    if (applicationName) {\r\n      applicationName.classList.add('text-lg-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n\r\n    return (\r\n      <div class=\"top_bar_sidemenu_div\">\r\n        <div class=\"vertical_tabs_div\">\r\n          <gb-vertical-tabs\r\n            size=\"md\"\r\n            first-tab-name={this.firstTabName}\r\n            second-tab-name={this.secondTabName}\r\n            third-tab-name={this.thirdTabName}\r\n            fourth-tab-name={this.fourthTabName}\r\n            fifth-tab-name={this.fifthTabName}\r\n            type=\"button_primary\"\r\n            active-index={this.activeIndex}\r\n            onTabItemClicked={this.onTabItemClicked.bind(this)}\r\n          ></gb-vertical-tabs>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <div class=\"wrapper_pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n          <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n          <div class=\"application_name\">\r\n            <slot name=\"application_name\"></slot>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-vertical-tabs/gb-vertical-tabs.js

@@ -30,7 +30,7 @@ export class GbVerticalTabs {
         this.tabItemClicked.emit(index);
     }
     render() {
-        return (h("div", { key: 'de4ae0c6fa8fc82bed6d6b92b12fa9178a8b74cf', class: `vertical_tab_div` }, h("gb-tab-button-base", { key: 'd834f7a64a0a823c710081f95cb7a5f9fdc7c828', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.firstTabName, current: this.activeIndex === 0, onClick: () => this.handleTabClick(0), alignment: "vertical" }), h("gb-tab-button-base", { key: '3fad064e81d5eb02b84b972f26ac4ac0ad166572', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.secondTabName, current: this.activeIndex === 1, onClick: () => this.handleTabClick(1), alignment: "vertical" }), this.thirdTabName && (h("gb-tab-button-base", { key: '1359717322a846921e68b7ff11aa4e033cd5646c', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirdTabName, current: this.activeIndex === 2, onClick: () => this.handleTabClick(2), alignment: "vertical" })), this.fourthTabName && (h("gb-tab-button-base", { key: '2a3cdc04fb559c7c63aeb2013c5836f5c5431498', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourthTabName, current: this.activeIndex === 3, onClick: () => this.handleTabClick(3), alignment: "vertical" })), this.fifthTabName && (h("gb-tab-button-base", { key: '658fbc3856b65d1e9d3070d0f9c8479a6943813f', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifthTabName, current: this.activeIndex === 4, onClick: () => this.handleTabClick(4) })), this.sixthTabName && (h("gb-tab-button-base", { key: '8a1dea510448fed6ea68b670ece54e0a9fd6f34f', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixthTabName, current: this.activeIndex === 5, onClick: () => this.handleTabClick(5) })), this.seventhTabName && (h("gb-tab-button-base", { key: '5f64a54f91084b5b9373757ad9daba5a90b5f824', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventhTabName, current: this.activeIndex === 6, onClick: () => this.handleTabClick(6) })), this.eighthTabName && (h("gb-tab-button-base", { key: '7d5167bf5cac0549fa94789de54705f132dfbd59', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighthTabName, current: this.activeIndex === 7, onClick: () => this.handleTabClick(7) })), this.ninthTabName && (h("gb-tab-button-base", { key: '35ce65af0550bd34e7b6ceb19150d6c8d98aa2f9', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.ninthTabName, current: this.activeIndex === 8, onClick: () => this.handleTabClick(8) })), this.tenthTabName && (h("gb-tab-button-base", { key: 'ce0417a60cbb1e6b82a753799cf60e6985fcb137', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.tenthTabName, current: this.activeIndex === 9, onClick: () => this.handleTabClick(9) })), this.eleventhTabName && (h("gb-tab-button-base", { key: '3ea800a195f77ea971cd3a85773d8bb79cd34edb', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eleventhTabName, current: this.activeIndex === 10, onClick: () => this.handleTabClick(10) })), this.twelfthTabName && (h("gb-tab-button-base", { key: 'caa5de283863467f4c9a32350ac37cc626cf8071', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twelfthTabName, current: this.activeIndex === 11, onClick: () => this.handleTabClick(11) })), this.thirteenthTabName && (h("gb-tab-button-base", { key: 'd2c943d97a50f873f8b74124895123d0104b992d', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirteenthTabName, current: this.activeIndex === 12, onClick: () => this.handleTabClick(12) })), this.fourteenthTabName && (h("gb-tab-button-base", { key: '4ce8a544fd2218365f3053b3f4da052615080861', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourteenthTabName, current: this.activeIndex === 13, onClick: () => this.handleTabClick(13) })), this.fifteenthTabName && (h("gb-tab-button-base", { key: 'a766d8f5144dea5bf468f31d3ce1aa5c81410479', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifteenthTabName, current: this.activeIndex === 14, onClick: () => this.handleTabClick(14) })), this.sixteenthTabName && (h("gb-tab-button-base", { key: 'cd0f037e74b3b63b947b20ed8e2563f4cddcc609', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixteenthTabName, current: this.activeIndex === 15, onClick: () => this.handleTabClick(15) })), this.seventeenthTabName && (h("gb-tab-button-base", { key: '6f99f504bf6849d5b0e2b4f7fe9a57553506afd5', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventeenthTabName, current: this.activeIndex === 16, onClick: () => this.handleTabClick(16) })), this.eighteenthTabName && (h("gb-tab-button-base", { key: 'e29366bef6f3eeb76c3401a7271a0d725b72b0d7', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighteenthTabName, current: this.activeIndex === 17, onClick: () => this.handleTabClick(17) })), this.nineteenthTabName && (h("gb-tab-button-base", { key: 'b856d4160dd20896dfc2b0c7d1cdc457e6cfba74', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.nineteenthTabName, current: this.activeIndex === 18, onClick: () => this.handleTabClick(18) })), this.twentiethTabName && (h("gb-tab-button-base", { key: '67378d3db8ba98b1e69528dc30b6d67c911b5f72', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twentiethTabName, current: this.activeIndex === 19, onClick: () => this.handleTabClick(19) }))));
+        return (h("div", { key: 'a811e691d3408f1dc1e5e19beebea92d3d571d00', class: `vertical_tab_div` }, h("gb-tab-button-base", { key: '9fe196869277b77a09c4a4f9c5796e9acaa240b6', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.firstTabName, current: this.activeIndex === 0, onClick: () => this.handleTabClick(0), alignment: "vertical" }), h("gb-tab-button-base", { key: '89b03a6c23594b0b574272cca92ae3afede43e44', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.secondTabName, current: this.activeIndex === 1, onClick: () => this.handleTabClick(1), alignment: "vertical" }), this.thirdTabName && (h("gb-tab-button-base", { key: '454145f8e455eb01301f2ef7d07f10552d743e14', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirdTabName, current: this.activeIndex === 2, onClick: () => this.handleTabClick(2), alignment: "vertical" })), this.fourthTabName && (h("gb-tab-button-base", { key: '73812897e2bb67e04f519a5d291cd6f539984d29', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourthTabName, current: this.activeIndex === 3, onClick: () => this.handleTabClick(3), alignment: "vertical" })), this.fifthTabName && (h("gb-tab-button-base", { key: 'b4cf481bc623094d90c7c4c1b42e263051c4665f', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifthTabName, current: this.activeIndex === 4, onClick: () => this.handleTabClick(4) })), this.sixthTabName && (h("gb-tab-button-base", { key: '17c9468e1f33a42adb5f5917c7b3abfd37c24c84', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixthTabName, current: this.activeIndex === 5, onClick: () => this.handleTabClick(5) })), this.seventhTabName && (h("gb-tab-button-base", { key: 'd0b6b800040ed29ab1618b89cd22d8012cb15a32', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventhTabName, current: this.activeIndex === 6, onClick: () => this.handleTabClick(6) })), this.eighthTabName && (h("gb-tab-button-base", { key: '125d0ad8416ddce07cecfc50fa0adb2578240ce1', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighthTabName, current: this.activeIndex === 7, onClick: () => this.handleTabClick(7) })), this.ninthTabName && (h("gb-tab-button-base", { key: 'e217501637934331c1020652ac84623e4869de70', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.ninthTabName, current: this.activeIndex === 8, onClick: () => this.handleTabClick(8) })), this.tenthTabName && (h("gb-tab-button-base", { key: '7674698b7ee8f05a28245e9e174c7010e305832f', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.tenthTabName, current: this.activeIndex === 9, onClick: () => this.handleTabClick(9) })), this.eleventhTabName && (h("gb-tab-button-base", { key: 'c761404d6f0cca0e949f57598588869244320d23', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eleventhTabName, current: this.activeIndex === 10, onClick: () => this.handleTabClick(10) })), this.twelfthTabName && (h("gb-tab-button-base", { key: '806bd8136a1df19a7981d3b1432b17bf01aec494', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twelfthTabName, current: this.activeIndex === 11, onClick: () => this.handleTabClick(11) })), this.thirteenthTabName && (h("gb-tab-button-base", { key: '5eaa9e7641f4efda959fe504b2c5a04f5d2e637c', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirteenthTabName, current: this.activeIndex === 12, onClick: () => this.handleTabClick(12) })), this.fourteenthTabName && (h("gb-tab-button-base", { key: '49fbbae047986f5d51b29069a28371b3ce3b51aa', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourteenthTabName, current: this.activeIndex === 13, onClick: () => this.handleTabClick(13) })), this.fifteenthTabName && (h("gb-tab-button-base", { key: 'a89b0ad600ece25ada4a7d0f1c8c059c96d567c1', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifteenthTabName, current: this.activeIndex === 14, onClick: () => this.handleTabClick(14) })), this.sixteenthTabName && (h("gb-tab-button-base", { key: 'e3cabfa4d578767494d95d53c0da64a62e053284', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixteenthTabName, current: this.activeIndex === 15, onClick: () => this.handleTabClick(15) })), this.seventeenthTabName && (h("gb-tab-button-base", { key: '121299ba0a5c374b9e022a91505533f641efcb8a', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventeenthTabName, current: this.activeIndex === 16, onClick: () => this.handleTabClick(16) })), this.eighteenthTabName && (h("gb-tab-button-base", { key: '4da7c067a771ccac4a1b6f8c1a9599de02192d65', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighteenthTabName, current: this.activeIndex === 17, onClick: () => this.handleTabClick(17) })), this.nineteenthTabName && (h("gb-tab-button-base", { key: '47729114797318d78f1224428c87051e3f4c4ead', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.nineteenthTabName, current: this.activeIndex === 18, onClick: () => this.handleTabClick(18) })), this.twentiethTabName && (h("gb-tab-button-base", { key: '62fb8ea8e509bf56b7748122dddd604629f92496', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twentiethTabName, current: this.activeIndex === 19, onClick: () => this.handleTabClick(19) }))));
     }
     static get is() { return "gb-vertical-tabs"; }
     static get encapsulation() { return "shadow"; }