npm - globuswebcomponents - Versions diffs - 2.8.7 → 2.8.9 - Mend

globuswebcomponents 2.8.7 → 2.8.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (463) hide show

package/dist/collection/components/gb-illustration/gb-illustration.js CHANGED Viewed

@@ -34,35 +34,35 @@ export class GbIllustration {
         this.loadIcon(this.illustrationIcon);
     }
     render() {
-        return (h("div", { key: 'ce970874ae11100961ed2f12d9586f9df2479056', class: `illustration_wrapper` }, h("svg", { key: '3c8ab29d382dd4dffb875677f1ad8832ba744580', xmlns: "http://www.w3.org/2000/svg", width: "220", height: "168", viewBox: "0 0 220 168", fill: "none", class: `illustration_background ${this.size}` }, h("circle", { key: 'caac5fe5bc82108c02ca324baee79b7545f4c5a7', cx: "110", cy: "88", r: "80", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : this.color === 'gray' ? 'var(--color-background-gray-subtlest, #F6F8FA)' : ''}` }), h("circle", { key: '7c470c82dcae7780f41cc64f4a522688c8743285', cx: "26", cy: "28", r: "8", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'bb9f19e1fb47dd1b7c63c3a1a03022ff1f5f2fd9', cx: "198", cy: "134", r: "6", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '1b4da1857c75a1114cd206791f8b3fc194f8a41d', cx: "25", cy: "146", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '4cf1f62c244089fa7098fb2b052f504986f581cf', cx: "210", cy: "54", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'e7e36cd29cea8ae222300cd23f7aca13033ae03a', cx: "191", cy: "19", r: "7", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` })), h("div", { key: '668c695c74e8161df93057f0594b7fbba3117f5c', class: "illustration_div" }, h("div", { key: 'd8bf19ecf371d239d5d1608dd8053cc6a048f8db', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: '394aed299d2c5d1929506927e8df084d3ac18d4f', xmlns: "http://www.w3.org/2000/svg", width: "214", height: "140", viewBox: "0 0 214 140", fill: "none", class: `cloud ${this.size}` }, h("g", { key: '995eda5a1c870afbc679e75e6ce41940ce35e759', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: '7743e1ca01972b81166cd93d33195121679efce4', d: "M109.485 0C129.961 0 147.543 12.3802 155.161 30.0625C156.486 29.9093 157.834 29.8281 159.2 29.8281C178.42 29.8282 194 45.4095 194 64.6289C194 83.5478 178.903 98.9404 160.099 99.417L159.2 99.4287H59.7715L58.7451 99.416C37.2543 98.8717 20 81.2792 20 59.6572C20 37.6921 37.8063 19.8857 59.7715 19.8857C62.9248 19.8857 65.992 20.2546 68.9336 20.9482C77.9428 8.27072 92.7484 0.000119405 109.485 0Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : 'var(--color-background-disabled, #F9FAFB)'}` }), h("circle", { key: 'bae7a09e8cf415eb2a524dd00c147a446b6cf85d', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: 'f1f554990e7239c93bb91d96df5b69e9046c28d7', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: 'a869db0abdcc062ee684e72ef0aad9e89e38e716', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: '3332d95e9ca101ced8b703490836f5b8c75b3676' }, h("filter", { key: 'c5afd69366a2c91a1b6288214e71fe28ecff13b6', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '80fab91ca589385843fa3c53e037cbb19db4d494', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '2b0eb9be1f1cf3d3e1bdbc457aa46585411857ce', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '4166383e0a452784c3d34775bdeab708e5794942', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: '99d8e43849f68e9014be631531780b07e844264a', dy: "8" }), h("feGaussianBlur", { key: 'fa485e05548bd80febadba3b4c6c2a300805ce8e', stdDeviation: "4" }), h("feColorMatrix", { key: 'd6c422d86c72cf73d30c3f927fa51d46021bfda3', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '97b2a455504adbebb62798f0352b85f335f28fd9', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: '31b320c446adab8991aa65d52b02e6148d4d2c8f', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'fe13d68c8521c7bfb9c8398a1d88670e30f6ea65', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: 'e497f19f5db1b08e4fd34b9a8c5586c2903a39a2', dy: "20" }), h("feGaussianBlur", { key: '6c352bef60bbdb81de59b511900287177b99600b', stdDeviation: "12" }), h("feColorMatrix", { key: 'ca618c5a3199aeca1ab9ac42cce33189ed0c5f23', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '54cd57984a0721591cac9c716833feada2c455d0', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: 'd04aae3feea685245d9023d84795ca2ccefba1b3', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: '72001f5735d0c37e6a2df2951c94f8674e99210d', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '718b0910a4dc4edfb235cec820425483899dcbd5', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '408b36b8ed89a86bfe44dcf3d8f9e9df8d6a38eb', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '6b4340e04a603d711c569c431dffc3a7d206fc0b', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'eb81a9904fc6e81cdee122cfde544167411ecba2', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '5c1f0a05c383a503ea8dad9ff8de9b7d7e54c3a4', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'c7d04d9feaf05a2bfbede663a2792b737ee01aa8', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'cbd3e9c50130816d09a2bacfec3814c32bfa2847', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '318d755b110f6627beff3ee89aa80cecd74862da', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: 'b63e62b966bf96a7db652d2318e52189e7a510aa', xmlns: "http://www.w3.org/2000/svg", width: "168", height: "178", viewBox: "0 0 168 178", fill: "none", class: `box ${this.size}` }, h("g", { key: '5b9092aa944e89e5445c0abfb66c5af893cd3165', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: 'c27947a88eb08a9f26904d85a2f768d8453c18ff', d: "M84 54.9529L90.9121 52.0578L84.0009 55.002V137.432L147.69 110.743V28.2767L148 28.1466L147.69 28.009V27.8705L147.53 27.9384L84.5026 0L20 27.4765L20.3053 27.6076L20 109.74L84 137.383L84 54.9529Z", fill: "#F9FAFB" }), h("path", { key: 'f34a207948c80f25c9be3ecfa1a2582c4b420813', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: 'e2c44d3f5e39b29c08ce76ce42bf5edee8b74729', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: 'a5ed2021f384051f5c3b9b05d493046a07798f06', d: "M84 54.9529L148 28.1466L84.5026 0L20 27.4765L84 54.9529Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : 'var(--color-background-gray-subtler, #EEF2F6)'}` }), h("path", { key: '37f9594e16f1f439969dd4c7d263bd745298974a', d: "M44.1255 17.1998L107.881 44.9503L108.461 65.173L126.299 57.8126L125.759 37.4622L60.1172 10.3877L44.1255 17.1998Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : 'var(--color-background-gray, #CDD5DF)'}` })), h("defs", { key: 'fec57231472adefb7c43dace8468c179e7a7692c' }, h("filter", { key: 'f5a5c08aa0f9f60f7c0c6c3fda30bcf626ea5f6c', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'd3889e5c0905729aa3a26ab55c20f339c90b31bf', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '12d7d6897995e6f536ea414e5300c569e22d2df7', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '0a503b388d5eff10dd126fa99cd4e3c24ca065e1', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: '1a7646094f314f50d9e61e45f43178d43c085cdc', dy: "8" }), h("feGaussianBlur", { key: '48d8918aa81df536ec19679d555071bd012a45cc', stdDeviation: "4" }), h("feColorMatrix", { key: '614b7416adddabfbbe5986e4802734259d7f5393', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '7d58a85750d754278fc99debe7c66cf1bea86f2f', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '50db5646b47a17a0b624482fba5e8abced1ad016', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '6acec813a82321c89056ec63b508f5d0fc7f5225', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: '6bf514954b142bc4c79c8486b441e66138f1fc20', dy: "20" }), h("feGaussianBlur", { key: '3bfa62f7deaea75e3ad877fb05cf0ca8a56f731e', stdDeviation: "12" }), h("feColorMatrix", { key: '3b821256ed1e8f74ad8ab2c4970bc9c3b38ca0a2', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'c5f561c444fd05f9731d7fe7646ce9a5cde4f52b', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: '2bc673d63e1d05edf5d18ee4ea3e964a3dddb7bd', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '2da8a3048f1f80683e089722a818728a2c14c196', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '70177091fa4f643095e80a5524da74d59b4ecf9b', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '19d7b7d0564b6b9f8420961282a91ecc177d5894', offset: "1", "stop-color": `${this.color === 'primary'
+        return (h("div", { key: 'db8b93d07fe44c85cbd152c30cc1702912cf6bd6', class: `illustration_wrapper` }, h("svg", { key: 'e3064ba23525b3556e92f1cc64f5e50145f2c665', xmlns: "http://www.w3.org/2000/svg", width: "220", height: "168", viewBox: "0 0 220 168", fill: "none", class: `illustration_background ${this.size}` }, h("circle", { key: '5f68935adf778ea3a6ce27445c72554283e7b6e1', cx: "110", cy: "88", r: "80", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : this.color === 'gray' ? 'var(--color-background-gray-subtlest, #F6F8FA)' : ''}` }), h("circle", { key: 'da8e43c2807cfcfa60ff3ff85a5e18556355b219', cx: "26", cy: "28", r: "8", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '24c05fab7d1a3c5ad463a1afb13607b34a6b9c98', cx: "198", cy: "134", r: "6", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '8eca34ba69983ca6d2f48faabb540f966d099ef9', cx: "25", cy: "146", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'fd967e32218522d0b825c119969455a70092eff6', cx: "210", cy: "54", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'c3ddbd1cd1375d5717355e956d2d925f7f675b4f', cx: "191", cy: "19", r: "7", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` })), h("div", { key: 'd64fb9fbc4d7e2d38475a5bf80693abc29aeddf5', class: "illustration_div" }, h("div", { key: 'b20963b4c8d7af6d4cc9683fbad680594e10ef99', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: '25073b046c1fbb2bf174aca58d91ced8bf1ebbfd', xmlns: "http://www.w3.org/2000/svg", width: "214", height: "140", viewBox: "0 0 214 140", fill: "none", class: `cloud ${this.size}` }, h("g", { key: '3fbd4e091172fb9203b1e03600a909a3208e8a0b', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: '680e518e1bd6d726b4f1f1cc763df3f4624b19c5', d: "M109.485 0C129.961 0 147.543 12.3802 155.161 30.0625C156.486 29.9093 157.834 29.8281 159.2 29.8281C178.42 29.8282 194 45.4095 194 64.6289C194 83.5478 178.903 98.9404 160.099 99.417L159.2 99.4287H59.7715L58.7451 99.416C37.2543 98.8717 20 81.2792 20 59.6572C20 37.6921 37.8063 19.8857 59.7715 19.8857C62.9248 19.8857 65.992 20.2546 68.9336 20.9482C77.9428 8.27072 92.7484 0.000119405 109.485 0Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : 'var(--color-background-disabled, #F9FAFB)'}` }), h("circle", { key: '1684c57657d573d59ae19e5e6b434359f695bfc7', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: '70d1c47e838588a592c90c5a713a99da8a836808', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '44a2cb21cc2d594b12ee2af8efb31563bef92cc8', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: 'e6f4b61a1b2568312f6c832e4364c4626639b038' }, h("filter", { key: 'ff0754dc80fb06c3060c8ca1726cc59ecbcd572f', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '79a5b5bddf6785f518922ae94086440dcbedd366', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'ee47425cc6fee487fa244bb95cf3c56e127e0b1d', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'b51a75546a3563e6a07a1178cd5091bbc77973b5', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: 'ba4e714220508eb447f0b237904f87362bc71264', dy: "8" }), h("feGaussianBlur", { key: '0b7f5ecb5e58dc9789583b65aacb27e9867d9cb8', stdDeviation: "4" }), h("feColorMatrix", { key: '0895bb0160c12e3b9abcbb1779129004e5f1e067', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: 'c7313b596c914c3b4c27f60813aabc87f31135f3', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: 'd466c7814c46fd9cac5501142846a9875d6660b4', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '916113835c220c638790211c8bc9827e9ffef70d', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: '367014af9902d7aea9431d2a5d0f015c7d60d93e', dy: "20" }), h("feGaussianBlur", { key: '14060c637cd8c009a87e9a5b3ee5edbfbb325790', stdDeviation: "12" }), h("feColorMatrix", { key: 'e3c27afca66fe6a7d00eb17d7db06827ee66982e', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'f938e72dbe193fca9630da0e90cc9df072fa4dd7', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: 'd44c6fcdee95b71cb8e1720adbe4fc321268cfbf', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: 'b8bd8a57f69ced5cc988476c3770727907414f86', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c808dd945b3e22a1bb5c3f2a765f212ecebaf066', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'f07135275fb49b3338cd04b372560df422d92753', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '44b240ca9467b7d66a322b65c734b413d712bd94', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '514cf17c745d7419e8590fcdc56f5e516f38f0b4', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '8d8bbd4f14353dd349a0afe16112b6f14c16c9de', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'a06d5a686b9625ba8dd009d5f8eaa33ae953beda', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '2329ba5f4f7307ee3a8fd202ce32eb8393aace7a', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'f4d10b33ceb076831314a03d0873d74151c7a4ea', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: 'f58c9dfd00ae01e6bdf62a843113a0c564e85e46', xmlns: "http://www.w3.org/2000/svg", width: "168", height: "178", viewBox: "0 0 168 178", fill: "none", class: `box ${this.size}` }, h("g", { key: '504096e66fd563ab8dd587f41b597127ffd531fb', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: 'b4bf06c88d416e87b48acea53586934be83efe4f', d: "M84 54.9529L90.9121 52.0578L84.0009 55.002V137.432L147.69 110.743V28.2767L148 28.1466L147.69 28.009V27.8705L147.53 27.9384L84.5026 0L20 27.4765L20.3053 27.6076L20 109.74L84 137.383L84 54.9529Z", fill: "#F9FAFB" }), h("path", { key: 'df15891ebf948983d46be89f27faec3f1f2e03fb', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: '5ef7b0d9a5c4b2332110a8a1afd5b808142323b0', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: '86a10382408cf7611aa073c49b62e9ac006b0f4a', d: "M84 54.9529L148 28.1466L84.5026 0L20 27.4765L84 54.9529Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : 'var(--color-background-gray-subtler, #EEF2F6)'}` }), h("path", { key: 'f36313ebe2ea6542464ecfb82c9e99084e108d82', d: "M44.1255 17.1998L107.881 44.9503L108.461 65.173L126.299 57.8126L125.759 37.4622L60.1172 10.3877L44.1255 17.1998Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : 'var(--color-background-gray, #CDD5DF)'}` })), h("defs", { key: 'd7a56236723b2eadbe1efc448fd2c395306b518a' }, h("filter", { key: 'ab223f3557af179168c68b1eb14369102077e119', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '3a52765dfa93fb9bddbf5bbe8f11b8cde72158f2', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '08b794f4c4bd9d3ed5563c371d440a3debdba41b', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '28d40112ce2a117c88bf4dd71fb7dfb0d80da601', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: '7bc3432611dc44969b489bf562c4325cacc46c80', dy: "8" }), h("feGaussianBlur", { key: 'e6a27339e9a7dc99feba11c3adc95610a73eda40', stdDeviation: "4" }), h("feColorMatrix", { key: '17f272fa6130611924ff8dc06ba07dbc545a5e78', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '2091a238e19d18788b47969e035d7c0512b8784d', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '4240e0a979afb451bdcdfb09ff83604d5ad02886', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'e96cac4ba6327f0e181f8edc1916f84035e1505a', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: 'ad4cb4e241725556819a0eb6dab176829e268e61', dy: "20" }), h("feGaussianBlur", { key: 'f88dabfe792089a4349848cfb0a54ffd29d42e2f', stdDeviation: "12" }), h("feColorMatrix", { key: '5bd7c2cc50958352cd69fc7738e31145c5e5ff82', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'ff75645818198e0735014736638f75c16067b2e0', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: 'ec5eac87a07524f825e42840356b97ad929fa0d8', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '76c4dbfc8702dce5ba1c22c870779165578eed93', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '3fc20c6c81e80f5090eb51473d23cac32266f1bb', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '8b735d8c6a41689e61161418dc46aac32b2931b1', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` })), h("linearGradient", { key: '8f9720ef3b4c98f8fa20d0a9319a046efe143c16', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'e0d100271c526e0d92e24711d3a94ded38d7ddbc', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '7d9285de8882cb10b53e13ed68982ea82b21c137', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: 'edee9948e74a3c49401636e094859ffdecd5d0da', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '74acd4b41f58119f1210358df7f734e885771971', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '7654e34ee4c3c1c243721ece3726ef11b203eee1', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` }))))), this.illustrationStyle === 'documents' && (h("svg", { key: '56c81b16598e1a56ac8b83e7dd3d9f0d4b8f862f', xmlns: "http://www.w3.org/2000/svg", width: "229", height: "153", viewBox: "0 0 229 153", fill: "none", class: `documents ${this.size}` }, h("g", { key: '57f5ed4df154ba9edd7dafc1d30b6cfcad9fecb9', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: 'accb35c70e9554edd4438e85ec10fbf5297219c5', d: "M63.6376 112.214L116.089 87.7552C118.722 86.5272 119.862 83.3969 118.634 80.7634L87.6581 14.3361L66.6827 6.7017L23.7681 26.7132C21.1346 27.9412 19.9952 31.0715 21.2233 33.7049L56.6458 109.669C57.8738 112.302 61.0041 113.442 63.6376 112.214Z", fill: "url(#paint0_linear_7590_657)" })), h("path", { key: '5ecaf5b5ed962d6ae17baf47add955a920f4883b', d: "M66.6826 6.70166L87.658 14.3361L73.3531 21.0066L66.6826 6.70166Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("g", { key: '3be676e0bdbe18329a01e65dc4167b8b5c4f58ca', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: 'c7a2a3297950e527e684a4c0ae96a6059908d0d2', d: "M88.7112 94.3394H146.585C149.49 94.3394 151.846 91.9838 151.846 89.0781V15.7837L136.062 0H88.7112C85.8055 0 83.45 2.35554 83.45 5.26124V89.0782C83.45 91.9839 85.8055 94.3394 88.7112 94.3394Z", fill: "url(#paint1_linear_7590_657)" })), h("path", { key: '444c2c1c6ab32cdd3a2394b89454939e2a63e413', d: "M136.062 -0.00012207L151.846 15.7836H136.062V-0.00012207Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("g", { key: '29d9e8165d66f3b3bcef663f8425e5a89fe066b2', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: '30445530a449b1bd8f78be69dd5e8755cc3ef82e', d: "M118.471 87.724L170.922 112.182C173.555 113.41 176.686 112.271 177.914 109.638L208.889 43.2103L201.255 22.2349L158.34 2.22349C155.707 0.995492 152.576 2.13484 151.348 4.7683L115.926 80.7322C114.698 83.3657 115.837 86.496 118.471 87.724Z", fill: "url(#paint2_linear_7590_657)" })), h("path", { key: '934b4d31b95d7156326dbb9b7d5240152889c1ee', d: "M201.255 22.2349L208.889 43.2102L194.584 36.5398L201.255 22.2349Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("defs", { key: 'c7b3e07836f2e00a9291276b69ae787482a96075' }, h("filter", { key: 'dcaec5a150e3ebb832f4e823f876acd91254fe9d', id: "filter0_dd_7590_657", x: "0.729004", y: "6.70166", width: "138.399", height: "146.006", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'a15c7eec63251f34842e128759f51c125b8e1d77', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '96494f6ea34f67520abe0e02b0be82883e33d853', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '00c6ce3bb3bc61d8601fc603c2c2ed1dc0ac386f', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: 'bbf20d4f8a438f6510c7d93e1f2a176eabfa8b62', dy: "8" }), h("feGaussianBlur", { key: 'c194bb29a30c6c06f0b370fdc7d7a42c1c108974', stdDeviation: "4" }), h("feColorMatrix", { key: 'a2b2da10748d4870167c53fdae0881aa693f8a12', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '439342a690f8854ac54ea66c39de20b9860e633b', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'b78d1c0072dc7782dc2e0c5dcfa2279f3e496f20', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '8e2c085266f6b9bc8bb8d32f5954d2c6732fecb8', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'a5901c754d02a8f6bf7fbcb128686581963de2d2', dy: "20" }), h("feGaussianBlur", { key: '86386ea232bafc31535b7abb1478220adde9b984', stdDeviation: "12" }), h("feColorMatrix", { key: '00b6639f89d0b5a1714c326d3b1468f4eb0ec20b', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'cd116673f935e11b0ad31754c8b49aa6adfedaba', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '93b384cea159b4cc981911b8d4601cad28854eb3', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: 'b6cd0cb75736460b65fe509b172ca458aba5ec7f', id: "filter1_dd_7590_657", x: "63.45", y: "0", width: "108.396", height: "134.339", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'c0340eecc3dd99764e11242b768fc2b889027711', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'dfcbc050dc3abcae9bca6a6c03455045c03fb3ed', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '6a0585e2cd2577eec070a58f663b632322b6e4af', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '4d8439fbc1b3b2957f419c7cb1c4acc13c53042c', dy: "8" }), h("feGaussianBlur", { key: '68cd1cc35119f239f44cf0fd4b5670004bca8eee', stdDeviation: "4" }), h("feColorMatrix", { key: 'ad741c0fcf0c6a68a707de55280a3c63ed979b91', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: 'a1943189a58ace4fb251e82f79123a3c82d3c5b6', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '3fcccb3f0c04b49844c63d27b82a63b1d0e3c2f2', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '20c37e650a20434a91f846a9c21438b60d1965a0', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '4e94e783cc718a70fc62d3655ba4736e8c4e8307', dy: "20" }), h("feGaussianBlur", { key: '62c5acaa2598650d42145c74a88778bb150990b5', stdDeviation: "12" }), h("feColorMatrix", { key: 'c2a4d9e7124152f98dca6836784d298ff80095a7', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'f27c9147b32acaa4a2e0b7e7d0c05697af0cc1c2', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '0aeabf57ec62c63eee5fe243be0067607a5e601f', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '88bac91ce3ad973cd933badb657b5907c7fdc98c', id: "filter2_dd_7590_657", x: "95.4316", y: "1.72925", width: "133.458", height: "150.947", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '46b96a30be4679de843e1f83499ca2f30926e206', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '31464f9548ce32f3042a8f005b662effed71788c', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '9a44c0d649555123a5f588fab9dc8a94f292313a', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '97239faf90883a0f57ac20575b8ca405db7a3c67', dy: "8" }), h("feGaussianBlur", { key: 'aa98b70981469519ecdabb83a04600dd55cb0062', stdDeviation: "4" }), h("feColorMatrix", { key: '5dab95d947fa77445962c7b5b6e5ef6cae245dff', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '2ef8eaa4711aa2fbada3695f2c23d07125bcf69e', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '90b086673af19b96099964da37eaeb1183c4010a', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '1b0175c791fc5e437957142ed59037c1db59d2d7', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '2a647389246c387b2a5495652324535c5e9eb34a', dy: "20" }), h("feGaussianBlur", { key: '927171be7d7f6bb975a273a2cb906f3225893de8', stdDeviation: "12" }), h("feColorMatrix", { key: 'd89bf6dbe0beb33ef252f046bd620814192ea614', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '0d044963d99e51a334b407865f6a6e2a28b97dd5', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '9a164da8bce51af55ad99ee5604e6cd9de4bc556', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: 'a6f8ee59c4772c837bddae4e9c17eeec349703d5', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'aea2cfe1bbbbd5c307c5b0fea34ab603f8b75986', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '2fe34dec728921f144fdbed53433926a1851bf1b', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` }))))), this.illustrationStyle === 'documents' && (h("svg", { key: '5cd2ba4a4209148795c254b88f37782b470a1737', xmlns: "http://www.w3.org/2000/svg", width: "229", height: "153", viewBox: "0 0 229 153", fill: "none", class: `documents ${this.size}` }, h("g", { key: '79399d142b92cc997085a7fbcc3219ab026101b2', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: '6b2454dfca9f8e6025cf22436d6878c55d1b475e', d: "M63.6376 112.214L116.089 87.7552C118.722 86.5272 119.862 83.3969 118.634 80.7634L87.6581 14.3361L66.6827 6.7017L23.7681 26.7132C21.1346 27.9412 19.9952 31.0715 21.2233 33.7049L56.6458 109.669C57.8738 112.302 61.0041 113.442 63.6376 112.214Z", fill: "url(#paint0_linear_7590_657)" })), h("path", { key: 'bc89f3d97fbf19e29edb1c2cb1bf79d15b192654', d: "M66.6826 6.70166L87.658 14.3361L73.3531 21.0066L66.6826 6.70166Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("g", { key: 'c226c4d2a9e465650a478326dac4340144a1d5f6', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: 'ba69a4c8ab26c9ca1235ddc76884f46d2cb41aa2', d: "M88.7112 94.3394H146.585C149.49 94.3394 151.846 91.9838 151.846 89.0781V15.7837L136.062 0H88.7112C85.8055 0 83.45 2.35554 83.45 5.26124V89.0782C83.45 91.9839 85.8055 94.3394 88.7112 94.3394Z", fill: "url(#paint1_linear_7590_657)" })), h("path", { key: 'f5f7df7e39ef5b6933507319092faaa217ea5da4', d: "M136.062 -0.00012207L151.846 15.7836H136.062V-0.00012207Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("g", { key: '4fe414f4d4f9ab755bdbed70e2fff122a4e847cb', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: '50ae4545ca4a7f7a5d882cc6784f9fc4dc690b09', d: "M118.471 87.724L170.922 112.182C173.555 113.41 176.686 112.271 177.914 109.638L208.889 43.2103L201.255 22.2349L158.34 2.22349C155.707 0.995492 152.576 2.13484 151.348 4.7683L115.926 80.7322C114.698 83.3657 115.837 86.496 118.471 87.724Z", fill: "url(#paint2_linear_7590_657)" })), h("path", { key: '14a17ec5bdc0e72caf03ded6dcddf6d464dd4491', d: "M201.255 22.2349L208.889 43.2102L194.584 36.5398L201.255 22.2349Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("defs", { key: '213a204efe095b7596a2c263850e880e2431339b' }, h("filter", { key: '9fcae188cac77ac49f1ab348a6eae91aaf6ebcc3', id: "filter0_dd_7590_657", x: "0.729004", y: "6.70166", width: "138.399", height: "146.006", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '088cceb3dc4d8d9ffe8c4144de39d9188935e311', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '6db7a30164f645df59ece706cb37626515915447', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'f2aacaec8cde856250d72e867c5246235a5acfbc', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '249b98163fce9d2727a1cb7866d80d6a107ef5e9', dy: "8" }), h("feGaussianBlur", { key: 'de548fbc032fcc709f28c1fca1e33bb367819530', stdDeviation: "4" }), h("feColorMatrix", { key: '779bccdd3f5c5c0b45d2ba2561f3beb92117a9a1', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '6dc57735312f92d4950dcd6aeb3dd4f6ff95a5ef', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '1634a436ac30eb9baf6a16656e46495460767021', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '025709a8fefd2d8157946ed9180c21a199dcbbb3', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '61a49324029670c498947f410df259dc19db16c0', dy: "20" }), h("feGaussianBlur", { key: '02110cef95a3533fc8bc9955e731c9ea4c2feb07', stdDeviation: "12" }), h("feColorMatrix", { key: '4ba165e7224ad61bc2d83305840183108d5e371b', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '198ba55162ced59811518bac3e985843035adac7', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: 'ff7af17eed3ecb3e07a46034cc3619b5a5da65ba', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '73005c8bc4f442715cec5a91652dfde5eeb35740', id: "filter1_dd_7590_657", x: "63.45", y: "0", width: "108.396", height: "134.339", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '7e84cf37fe52ca7758b785895dc49df8292be3f2', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '2535e158206ef8fea5487eab7b94d622fd78727b', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'ffc7b326a429d588b1ec1a98eb4d1b83a76b8c11', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '75b6e8d13a53d088a6f1a08b8173c93f116f6393', dy: "8" }), h("feGaussianBlur", { key: '283aacbac20d9efe73b1a0325893c201c1c694c6', stdDeviation: "4" }), h("feColorMatrix", { key: '5b4db07eb2adaf09a3de408a6e0075c52a1d0784', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '4b5ff6e76be21ead53dea7e2ba3e10d8c2571615', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'd51fbb1e95cc4ee4991f0e498bccb3e21b15be13', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'b02aff44841e161bfd95d1722729b9f4b3f0b097', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'e156956e478a043748177ea7bd97f93a49fa0609', dy: "20" }), h("feGaussianBlur", { key: 'c4263b884f51f4d2b0f79c2a06629f8552e31cc6', stdDeviation: "12" }), h("feColorMatrix", { key: 'c34a1c2f46720bea5702d245096b6eb1b8f2c311', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '13deec659f9faf0b15d1ba65fb27b0c0dd32ee04', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '0f22c866f2a0acf50473f9e42a486fe847426beb', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: 'cfb06ed44a2644ac5080071d1f63bc8e056d245e', id: "filter2_dd_7590_657", x: "95.4316", y: "1.72925", width: "133.458", height: "150.947", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '88ba5f5d1510e190f0ecfefa36f4f5de4fc1063c', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'bd7b650e3031136437e718af5b954d24c37ab41e', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '38e29de009cb602de5c88bc2fa5fbbfb17ebd32c', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '815b7f84d6693f064d1bc7f94c9fd9d5bfb9fba2', dy: "8" }), h("feGaussianBlur", { key: '74ee1f26ed50195fa86813065953e1ca06058ead', stdDeviation: "4" }), h("feColorMatrix", { key: '4b5bb16275a7a1b7940bfd9a21b3fd2316044693', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '86a22a438daab2ee288f92abf03db1a082511f8f', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'd06638933f5ae4d07002957146d5343d359321d2', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '6645ade079ba34ca84c199e84ebd6563a33a2541', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'a8884ea11bd18de230ee7d9578e87eab85350c57', dy: "20" }), h("feGaussianBlur", { key: '61c39751d686b5e8a9f628f20a07a9c68a593938', stdDeviation: "12" }), h("feColorMatrix", { key: '6942aaf7e22bbc1be8db24bd3d0e5fff7eab06dc', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '423abf684d3058cd047b878f6c21913c2b85bfe7', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '7b16fc21ceaf001b831ec1d8b50f3b20d7c5e6cf', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: '91522087e889ef6c2015fa8c556bc9cfdbecadad', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'b3a16becabc98e99c1f3bb83a57acc4da8eb33a0', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '657c1f33a6eabbcb94fd45dcf2763ed1449afefe', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtlest, #F6F8FA)'
-                    : ''}` })), h("linearGradient", { key: 'a47bacb70c4103380281ce785b2338faaa96b1fb', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'a4512079c8cc83b1d91edc81e1141a3b2de01254', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '80a8bc9d02bd32b9d839acc092cafe28995232a2', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: '81e4b80c07dbc5a6542d3f41f8d65e9961d2da74', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '08bc1cab18c3bd45fbdfdbccd5cfb61a0d6057f4', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'a44ecd87816a3d6b4f2f69351992ea5d47166790', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtlest, #F6F8FA)'
-                    : ''}` })), h("linearGradient", { key: '6afae9dd6f2eb8190305925e4583bc87c515fe6e', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '0d807ab0bc164baa6dbd0d3301ecc39e8dae53c0', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '27256cd396a026e584173ce08127e08e27851d58', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: 'b72cfbc04ddb4578ca4139087838e3ba17230e86', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '63918ae54d5fa201f956e3d85f97160488d5dc03', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '8b70323ce32a4551c217054bf0cfea6264440aab', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtlest, #F6F8FA)'
-                    : ''}` }))))), this.illustrationStyle === 'credit_card' && (h("svg", { key: '4fd4b7b3f17e5e4f6ab9d1659a0a737715a2302d', xmlns: "http://www.w3.org/2000/svg", width: "206", height: "144", viewBox: "0 0 206 144", fill: "none", class: `credit_card ${this.size}` }, h("g", { key: '2bd2ca8500e594ea5a183a20c9889fc7f7d2ad50', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: 'd4dcd8b05fc181e4879b7154ae81b4e3e3f0eaeb', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: 'e1065fd55da0a4c5c9c8d3b5e8be9fdb446a0c1a', x: "34.0698", y: "24.186", width: "29.0233", height: "21.7674", rx: "2.4186", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("circle", { key: '24df7abd32c2b940ccb1059ffa9328faa3a2e724', cx: "159.837", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("circle", { key: '0979b06ad821482fc7b7a2bd5171c3488fba46b0', cx: "145.325", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary'
+                    : ''}` }))))), this.illustrationStyle === 'credit_card' && (h("svg", { key: '1b357b50fcf8db5d22f5c7a7ae552db4301715e7', xmlns: "http://www.w3.org/2000/svg", width: "206", height: "144", viewBox: "0 0 206 144", fill: "none", class: `credit_card ${this.size}` }, h("g", { key: 'df01f296cfe24d3858b044fcb6bb16b8840bdb9a', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: 'c643b41906ce2ddb1655f425a50baf18018af5f7', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: 'e62f549791570a49c34129f425b66b7b6b421948', x: "34.0698", y: "24.186", width: "29.0233", height: "21.7674", rx: "2.4186", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("circle", { key: '7fda09aa3c5c27ec894197ae8ecd9b0ec57a596e', cx: "159.837", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("circle", { key: 'b64cd7aa1ff936a96048ac1bd06b2f0fdc52237d', cx: "145.325", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtle, #E3E8EF)'
-                    : ''}` }), h("path", { key: '5395905c7d20baf8ef448129a730ce04cc4febf5', d: "M34.0698 88.279C34.0698 86.9432 35.1527 85.8604 36.4884 85.8604H60.6745C62.0102 85.8604 63.0931 86.9432 63.0931 88.279C63.0931 89.6147 62.0102 90.6976 60.6745 90.6976H36.4884C35.1527 90.6976 34.0698 89.6147 34.0698 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: '8ade2c34c0ccfd528ebb94b168805009c1c95464', d: "M70.3489 88.279C70.3489 86.9432 71.4317 85.8604 72.7675 85.8604H96.9535C98.2893 85.8604 99.3721 86.9432 99.3721 88.279C99.3721 89.6147 98.2893 90.6976 96.9535 90.6976H72.7675C71.4317 90.6976 70.3489 89.6147 70.3489 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: '1cd5e9c4ef306dbebf88ea76be61494ff90453f5', d: "M106.628 88.279C106.628 86.9432 107.711 85.8604 109.047 85.8604H133.233C134.568 85.8604 135.651 86.9432 135.651 88.279C135.651 89.6147 134.568 90.6976 133.233 90.6976H109.047C107.711 90.6976 106.628 89.6147 106.628 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: 'e534ffef8f696fc2318d59cea738c98c42fef418', d: "M142.907 88.279C142.907 86.9432 143.99 85.8604 145.326 85.8604H169.512C170.847 85.8604 171.93 86.9432 171.93 88.279C171.93 89.6147 170.847 90.6976 169.512 90.6976H145.326C143.99 90.6976 142.907 89.6147 142.907 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` })), h("defs", { key: 'aa723717ae6958d936374e8265b2b9d6ab02bff4' }, h("filter", { key: 'e5e4c90d1f3b15a9ded8905290b52925e14988f4', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '5c030ef7d56ac11cf55e90faecb15de98c069e8b', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'de8d6909e48eb260ac69a3c83932d11002ea08d6', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'd3cd477a40d1950e42724176016e917310b7773c', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: '871592f3f204a9d42a80f07c1faa0e5e54ef9e63', dy: "8" }), h("feGaussianBlur", { key: 'b568a99fc0fb812d1cb2dd47e363edc334527429', stdDeviation: "4" }), h("feColorMatrix", { key: '889d6987358b8cdbcd5321cf05905a4234d1a177', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '953ea02b1a017ab2c460b7280e476b474902ca79', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: '4bfe8c586bb7ba2afc8d002eaad067555568efeb', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'bf02db6cc8aa9a0e009a1237b3d2a855d1a4fc18', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: 'de6f2c1a90e374f961771b1ead4d537183f8eb5c', dy: "20" }), h("feGaussianBlur", { key: '79cfa60eec50cfdbd676084dd8f34d484b78823f', stdDeviation: "12" }), h("feColorMatrix", { key: 'd311cb5c42b75e31a8c02fc0c3b5d8f3ae969fd3', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '6e73e86cfb68d862a3a1c8e795c88ae1ab8e7517', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: '0224c0405020f56c520b67ef8e566f96703239ed', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: 'bd13c07d23845257effed8faf64184dffac72da5', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '3635d23607a8c486a2bc98902bf3ac181cd737c9', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: '445efb3aad60e9b79bc19be09677dac7a4619ceb', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` }), h("path", { key: 'f93a090baefb3503a066fd8a14dcca5c8d182105', d: "M34.0698 88.279C34.0698 86.9432 35.1527 85.8604 36.4884 85.8604H60.6745C62.0102 85.8604 63.0931 86.9432 63.0931 88.279C63.0931 89.6147 62.0102 90.6976 60.6745 90.6976H36.4884C35.1527 90.6976 34.0698 89.6147 34.0698 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: 'bfbf6c4cb4751751eb77da43ff15948056d442b2', d: "M70.3489 88.279C70.3489 86.9432 71.4317 85.8604 72.7675 85.8604H96.9535C98.2893 85.8604 99.3721 86.9432 99.3721 88.279C99.3721 89.6147 98.2893 90.6976 96.9535 90.6976H72.7675C71.4317 90.6976 70.3489 89.6147 70.3489 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: '744f96fe1615004cae49123df798b4a8fdbfb49d', d: "M106.628 88.279C106.628 86.9432 107.711 85.8604 109.047 85.8604H133.233C134.568 85.8604 135.651 86.9432 135.651 88.279C135.651 89.6147 134.568 90.6976 133.233 90.6976H109.047C107.711 90.6976 106.628 89.6147 106.628 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: 'bd9b8dd82edd4c569df7b81da2143a1a1ab89dc0', d: "M142.907 88.279C142.907 86.9432 143.99 85.8604 145.326 85.8604H169.512C170.847 85.8604 171.93 86.9432 171.93 88.279C171.93 89.6147 170.847 90.6976 169.512 90.6976H145.326C143.99 90.6976 142.907 89.6147 142.907 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` })), h("defs", { key: '6b8d8174ceadc3c9cf03e9863a7cbf82c3294086' }, h("filter", { key: '25d43ca1be9000d03dd6357f8ca3f499d0dcf4f9', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '7f8e7a02c837e2a68fee23fc1c01ae65300db6f1', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'e4588f8ccba78c76a7f971ad381614fe85a4a016', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '1f762cd215368c1333dabb6868c18d2d997b76c2', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: 'ee1c3ec0cd7fcd4c1e040a2342c239101ac13f01', dy: "8" }), h("feGaussianBlur", { key: '99b860639b911278a8286ff8379bc119082a8ae7', stdDeviation: "4" }), h("feColorMatrix", { key: '24a23d69bd3ffb500e40e4db6c6fde1820a36477', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '56f3342a29dea54ddc9d124711f29bf6d7329d7c', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: '10aaaf29c11fb0a3aae95f1e53aafb497fc0f35f', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '50474f62898940be0e12de91c74476deadf9e288', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: 'cdb07441690fea65ffc7ee8457bbc26ddd97e7a3', dy: "20" }), h("feGaussianBlur", { key: '7d54591d5fa49d256319d450647a4dce0e930d9a', stdDeviation: "12" }), h("feColorMatrix", { key: '0cb47c9ace4c7c8c20800cb8d1457df8925d1e5a', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'a291974f8a4581c9ed269ed62eeeac6dcc26c385', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: '90c6482245e79014e9f7b22b6c4998e9bf1b7ffd', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: 'b8f0927c41b4e751a3aa3e6702e02b9e57a7fb49', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd9d69057a66e319b0566da615e04567331fb031c', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: '5932da226df5c065a8c18d694e9d653c9db68652', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtlest, #F6F8FA)'
-                    : ''}` })))))), h("div", { key: '871acd245982100ffb96e8e1d2b45bd96332def5', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: 'b9207c77f235abe2faadf461176af1dfcd5e8848', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
+                    : ''}` })))))), h("div", { key: '2dcc49867cd347df59349927e30efe5cbe5e6357', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: 'c7d48b9529388ead5fb6471aef5a8284d7f380c4', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
     }
     static get is() { return "gb-illustration"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js CHANGED Viewed

@@ -392,16 +392,16 @@ export class GbInputDropdown {
         const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');
         const illustration = getAssetPath('assets/empty-state-no-data.svg');
         return [
-            h("div", { key: 'e39da2f6c0aeb35cfca1ad976afb506cdf368b8e', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '9c9189f48ba0115c8ad4360e3e97f4c3174b7297', class: `input_with_label` }, this.showLabel && (h(Fragment, null, this.formatLabel ? (h("p", { class: "dropdown_label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())) : (h("p", { class: "dropdown_label text-sm-medium" }, this.label)))), h("div", { key: '7abc16f0a76e87249f6d4802734a13a2aacd1b89', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: '170683b725e58d6c432ef0e28bc9bfc67a688f57', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '24a62a86f09b08d997654daa3a4962eb93bfa0c4', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: 'c99d46ecb7422f6a3c8bff3a7816a5649c244ac0', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: 'ba32cec6f177fbcc4e8e69be215e12a87b8abf06', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (h(Fragment, null, typeof item === 'object' ? (h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : (h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase())))))))))), this.showLeadingIcon && (h(Fragment, null, this.type === 'search' || this.type === 'tags' || this.type === 'icon_leading' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null)), this.type === 'dot_leading' && (h("svg", { key: '09551835853ad90329f30bf3c45087c5498206c2', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: 'df082c04a6153fa7a4964b8067b9159cfebc5fe6', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && this.type !== 'search' && (h(Fragment, null, this.placeholder && (h("div", { key: '822699cb70b9c29041b9471d0e4519b434cf78f1', class: "placeholder" }, h("p", { key: '16a461196d152e06bed68c6df31b34c650c2cba8', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '4232fb4ea6a87eea10fc6d9dd9cebe9eddc39abd', class: "search_input" }, h("input", { key: '206fe1ab94ccb7f2f0649503136f9cbc2672713e', type: "text", placeholder: this.placeholder, class: `text-${this.size}-regular`, ref: el => (this.inputRef = el), onInput: this.emitInputValueToUseForSearch.bind(this) }), this.showCloseButton && (h("gb-button", { key: '5e22b0562f1ff7fe36c4d86972fceac5d2bd0200', class: `close_button ${this.size}`, size: this.size, hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))), this.state === 'filled' && (h(Fragment, null, h("div", { key: 'b67eb7a33109e3f1aa23e503c3d900bcca92d225', class: `content` }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => 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(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+            h("div", { key: 'e7640132a84d592e04d8d641e238d1ca9cd2d00b', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '4d5e11935fdc28d53b78cbec5f3f6825682a7bf3', class: `input_with_label` }, this.showLabel && (h(Fragment, null, this.formatLabel ? (h("p", { class: "dropdown_label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())) : (h("p", { class: "dropdown_label text-sm-medium" }, this.label)))), h("div", { key: 'ebe86fce7c29947256e1e4874bacff51ca8ac661', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: '9af68c6265ca0eb49e13ea26d6593dae696dc067', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'f119b1610cb43974d8c79ffd7499b6af90a8435a', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: '70e2f8ed52c2092a86cbae0d98c539643afe9cc5', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: 'ca18b04221fa9403c6c4d8a5d8e0b032b367ecef', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (h(Fragment, null, typeof item === 'object' ? (h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : (h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase())))))))))), this.showLeadingIcon && (h(Fragment, null, this.type === 'search' || this.type === 'tags' || this.type === 'icon_leading' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null)), this.type === 'dot_leading' && (h("svg", { key: 'a5212f027cce748029d9b0699152de9c65b09e94', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: 'b7ce59909af50bad47d6389d2cc72ffd904c924e', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && this.type !== 'search' && (h(Fragment, null, this.placeholder && (h("div", { key: '49456864f26fb0f79ac462d7333e965ac1b1bbff', class: "placeholder" }, h("p", { key: 'afbdc0369a262639af3048bca53fc165a73abe6e', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '2743afa5cdbeb0d69306d7addc2c394715471ede', class: "search_input" }, h("input", { key: '5bd086fc4652f8031230ccd4fc3e6c2b55591199', type: "text", placeholder: this.placeholder, class: `text-${this.size}-regular`, ref: el => (this.inputRef = el), onInput: this.emitInputValueToUseForSearch.bind(this) }), this.showCloseButton && (h("gb-button", { key: 'ff2783bb6db4f493a648567ced82fb182b068f64', class: `close_button ${this.size}`, size: this.size, hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '8cdbe5497998661dca2e0f61140b2ed76f59b81c', class: `content` }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => 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(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .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(item) }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, this.value.map((item, index) => 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(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .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(item) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h("p", { class: `selected_text text-${this.size}-regular` }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item))))), this.supportingText && (h("div", { key: 'bf1de0674f8b39971c778e4c9890a68e36ec12a4', class: `supporting_text text-${this.size}-regular`, style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && item.username))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: '8372dbc26f20cd8b2f8c445ce18bfadcd6398283', class: `content` }, h("div", { key: 'b34d26589e661ef3a94480f321a0e81272478085', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+                .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(item) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h("p", { class: `selected_text text-${this.size}-regular` }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item))))), this.supportingText && (h("div", { key: 'fdbb0599b9a6aea5119d9f0777a049624e540952', class: `supporting_text text-${this.size}-regular`, style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && item.username))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: '4170345f7149bdaab2b37023c87452f694507f41', class: `content` }, h("div", { key: '131fc1cb76053140d6b890bb3816c53120aafed3', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .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" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '4f0941ac6a782a8d626cb8540778fb0bb9182d12', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && h(Fragment, null, item.username))))))))))), this.showHelpIcon && (h("div", { key: '761afcc2d5ededc13ada1a13b9e382b7e949abd6', class: `help_icon` }, h("gb-help-tooltip", { key: '6e8fcbb47644a2ad109d6a7d9be893333a5567a8', "show-supporting-text": true }, h("slot", { key: '91ed72a5a6a15503b3034c60c4c8f7e87497dec1', name: "tooltip_label", slot: "label" }), h("slot", { key: '21bcd51fd3a866b237f54a9bbc8641770da848af', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '51d76949e6d68055568dd508b4e443f9a0d348ce', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'f2bde0dbc4a6e3205670b684095c970cc93933f5', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'fde7e6f84b4051965d0decd2e35474788c812061', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: '6e201cd894a0cdac5824e48d9a6339766a1648f5', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: '79b88459d9f5b38f3327c1c7423b39d0a4a5c4ab', class: "dropdown_search_field" }, h("gb-input-field", { key: 'aac7e5a40c909bc9e06db1c326dd1493af6fcb5d', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.bind(this) }))), this.loading && (h("div", { key: '34277ccb2d32a78cc6f24b2ceae09a4b2115aa83', class: "loader_div" }, h("div", { key: '6fe4160d68386f6e7a8e0930eda77e8e4cd8f348', class: "loader" }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '1bf266714451ca3d3536443aa8dad96b5134b1e6', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && h(Fragment, null, item.username))))))))))), this.showHelpIcon && (h("div", { key: 'ea6e0fe26d6676b42b44addd2d457e7700e50c2d', class: `help_icon` }, h("gb-help-tooltip", { key: '51d0cd14df58b41272959fc05a679d6479b3a512', "show-supporting-text": true }, h("slot", { key: 'd0e8a02b7a77bd777f3f662dd620fc0046753562', name: "tooltip_label", slot: "label" }), h("slot", { key: '7d5fab4871da7963ca2c3b26b5fcf23221f680f9', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: 'fb0da42d665aa417f1111492d45ce23232012a6e', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '6474ff4912b0b24c18c96a90261f0df4be87c5e6', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'd741b9e4f3f9ed14de32d0fb0ba53c5169ec4347', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: 'fe6bc6a43ce3a3dd8856bdcb3a5eff0dd93d6b5a', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: '2eca901f77047347541059bd6c3d420671622ea3', class: "dropdown_search_field" }, h("gb-input-field", { key: '049ee0a1cd02e0b02087b068db543e0500f3da28', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.bind(this) }))), this.loading && (h("div", { key: 'ddb29edfcbb8b006b92f492b7b874ee448d62c51', class: "loader_div" }, h("div", { key: '9dcacd6c012d5cc3e9fcca73d15e47e0254e9d59', class: "loader" }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
             //Empty state for when there are no search results
             h("div", { class: "empty_state" }, h("img", { src: emptyStateBackground, class: "background", alt: "" }), h("div", { class: "message_background" }, h("img", { src: illustration, alt: "", class: "illustration" }), h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (h(Fragment, null, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username), h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())))) : typeof item === 'string' ? (h(Fragment, null, h("p", { slot: "name" }, item), h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase())))) : (h(Fragment, null, h("p", { slot: "name" }, item), h("h1", { slot: "initials" }, item)))))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : (h(Fragment, null, h("gb-input-dropdown-menu-item", { state: StateEnum.Default, "supporting-text": this.supportingText, color: this.color, onClick: () => this.handleItemSelect() }, h("p", { slot: "name" }, "--", this.placeholder, "--")), this.items.map(item => [
                 h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("h1", { slot: "initials" }, item.name

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.css CHANGED Viewed

@@ -2819,13 +2819,19 @@
   min-width: 0; /* ❗ critical for ellipsis to work */
 }
+::slotted([slot='name'].ellipsed) {
+  width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  color: var(--color-text, #4b5565) !important;
+}
 ::slotted([slot='name']) {
   width: 100%;
   /* max-width: 15rem; */
-  overflow: hidden;
-  text-overflow: ellipsis;
   flex: 1 1 auto;
-  white-space: nowrap;
   color: var(--color-text, #4b5565) !important;
 }

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js CHANGED Viewed

@@ -5,6 +5,7 @@ export class GbInputDropdownMenuItem {
         this.selected = false;
         this.iconLeading = false;
         this.iconLeadingSwap = '';
+        this.ellipsed = true;
         this.leadingIconSvg = '';
     }
     async loadIcon(iconName) {
@@ -33,7 +34,9 @@ export class GbInputDropdownMenuItem {
         const initialsSlot = this.el.querySelector('[slot="initials"]');
         if (nameSlot) {
             nameSlot.classList.add('text-md-medium');
-            nameSlot.classList.add('no_wrap');
+            if (this.ellipsed) {
+                nameSlot.classList.add('ellipsed');
+            }
         }
         if (initialsSlot) {
             initialsSlot.classList.add('text-xs-semi-bold');
@@ -48,13 +51,13 @@ export class GbInputDropdownMenuItem {
     render() {
         return (
         // <div class="dropdown-container" onClick={() => (this.selected = !this.selected)}>
-        h("div", { key: '991dc12f0e73c1a9663dbdc64f2d3d434805b361', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: 'c1f9dce883af03caec6f0449ab33a1dba9a66d11', class: {
+        h("div", { key: '6fdd9e4ac1a5136123f539b0b285b1e303a9498f', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: 'a4247caadb9b0e12dc74a36855c372a2507a29a2', class: {
                 'dropdown-item': true,
                 'selected': this.selected,
                 'disabled': this.state === 'disabled',
                 'checkbox': this.type === 'checkbox',
                 [this.type]: true,
-            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '9451182d541839fa922d45501d3bce2857ab507a', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: '18e7594cacdcb9c2df6033aa339335b2fdf2337c', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: 'ba42209c8adfb6e88d4480fdf331f46a15bf3b92', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: '7791320fbeedb90920b91fdb537567b8d3a89968', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h(Fragment, null, this.state === 'default' ? (h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && h("gb-checkbox", { key: '2a1cca14e3ea78f92d30dc71abdf748d284b7ad3', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: 'fe0c777ad7c3695de32bb5382df7df7be1d42c72', name: "name" }), this.supportingText && (h("span", { key: 'c02769308a10a3b584c823d2bf79dd049244c260' }, h("slot", { key: '13878b001ac02a8bdbc0e94b0897875637cb24fd', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: '73c30becdfb39b77e3c4ae9e199e37076ba8d537', class: `tick` }, this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '2871a16f66dca9b348c80d389383dbbf0c36e388', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: '1143e15f1ed1b0b0ce7517f139255ceea7502219', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: '948eb15b9117e4f86cea3ef4387ab7e43991083f', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: '777297537da9a7acdf7efb303123d89b98e24223', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h(Fragment, null, this.state === 'default' ? (h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && h("gb-checkbox", { key: '0657f8a46bbd60ee312f21984a156b530c2484f3', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: 'b28af4fa61dc48799e2a3775f4deef84103b4284', name: "name" }), this.supportingText && (h("span", { key: '4a92b965b0c2f10e9a221b8d8854616b7556fc2c' }, h("slot", { key: '0d4868ac839e27f7e103481c4c5d69b75b4b9395', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: '9220d480465b59e2f89224964a08090c6c837f14', class: `tick` }, this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "gb-input-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -224,6 +227,26 @@ export class GbInputDropdownMenuItem {
                 "reflect": false,
                 "attribute": "icon-leading-swap",
                 "defaultValue": "''"
+            },
+            "ellipsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ellipsed",
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-input-dropdown-menu-item.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Fragment, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\r\nimport { ColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-input-dropdown-menu-item',\r\n styleUrl: 'gb-input-dropdown-menu-item.css',\r\n shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n @Prop() type: DropdownTypes;\r\n @Prop() supportingText: boolean = false;\r\n @Prop({ mutable: true }) selected: boolean = false;\r\n @Prop() state: StateEnum;\r\n @Prop() color: ColorTypes;\r\n @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string = '';\r\n @State() leadingIconSvg: string = '';\r\n @Event() dropdownItemClicked: EventEmitter<void>;\r\n\r\n @Element() el: HTMLElement;\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\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.iconLeadingSwap);\r\n }\r\n\r\n componentDidLoad() {\r\n const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n if (nameSlot) {\r\n nameSlot.classList.add('text-md-medium');\r\n nameSlot.classList.add('no_wrap');\r\n }\r\n\r\n if (initialsSlot) {\r\n initialsSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-sm-regular');\r\n }\r\n }\r\n\r\n async handleClick() {\r\n this.dropdownItemClicked.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n <div\r\n class={{\r\n 'dropdown-item': true,\r\n 'selected': this.selected,\r\n 'disabled': this.state === 'disabled',\r\n 'checkbox': this.type === 'checkbox',\r\n [this.type]: true,\r\n }}\r\n role=\"option\"\r\n aria-selected={this.selected ? 'true' : 'false'}\r\n aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n >\r\n <div class=\"content\">\r\n {this.type === 'icon_leading' && this.iconLeading && <div class={`icon_leading ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n {this.type === 'avatar_leading' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n </gb-avatar>\r\n )}\r\n {this.type === 'dot_leading' && (\r\n <>\r\n {this.state === 'default' ? (\r\n <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n <slot name=\"name\"></slot>\r\n {this.supportingText && (\r\n <span>\r\n <slot name=\"supporting_text\"></slot>\r\n </span>\r\n )}\r\n </div>\r\n {this.selected && this.type !== 'checkbox' && (\r\n <div class={`tick`}>\r\n {this.state !== 'disabled' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"gb-input-dropdown-menu-item.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Fragment, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\r\nimport { ColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-input-dropdown-menu-item',\r\n styleUrl: 'gb-input-dropdown-menu-item.css',\r\n shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n @Prop() type: DropdownTypes;\r\n @Prop() supportingText: boolean = false;\r\n @Prop({ mutable: true }) selected: boolean = false;\r\n @Prop() state: StateEnum;\r\n @Prop() color: ColorTypes;\r\n @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string = '';\r\n @Prop() ellipsed: boolean = true;\r\n @State() leadingIconSvg: string = '';\r\n @Event() dropdownItemClicked: EventEmitter<void>;\r\n\r\n @Element() el: HTMLElement;\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\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.iconLeadingSwap);\r\n }\r\n\r\n componentDidLoad() {\r\n const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n if (nameSlot) {\r\n nameSlot.classList.add('text-md-medium');\r\n\r\n if(this.ellipsed) {\r\n nameSlot.classList.add('ellipsed');\r\n }\r\n }\r\n\r\n if (initialsSlot) {\r\n initialsSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-sm-regular');\r\n }\r\n }\r\n\r\n async handleClick() {\r\n this.dropdownItemClicked.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n <div\r\n class={{\r\n 'dropdown-item': true,\r\n 'selected': this.selected,\r\n 'disabled': this.state === 'disabled',\r\n 'checkbox': this.type === 'checkbox',\r\n [this.type]: true,\r\n }}\r\n role=\"option\"\r\n aria-selected={this.selected ? 'true' : 'false'}\r\n aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n >\r\n <div class=\"content\">\r\n {this.type === 'icon_leading' && this.iconLeading && <div class={`icon_leading ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n {this.type === 'avatar_leading' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n </gb-avatar>\r\n )}\r\n {this.type === 'dot_leading' && (\r\n <>\r\n {this.state === 'default' ? (\r\n <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n <slot name=\"name\"></slot>\r\n {this.supportingText && (\r\n <span>\r\n <slot name=\"supporting_text\"></slot>\r\n </span>\r\n )}\r\n </div>\r\n {this.selected && this.type !== 'checkbox' && (\r\n <div class={`tick`}>\r\n {this.state !== 'disabled' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}