npm - globuswebcomponents - Versions diffs - 2.8.0 → 2.8.2 - Mend

globuswebcomponents 2.8.0 → 2.8.2

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 (513) 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: '0aa7ab924ea2671465ec9fda501f7b43662b0d5d', class: `illustration_wrapper` }, h("svg", { key: 'a5f81a980acccc012d0db1b37fd5f50f3dfa2335', 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: '256ebf6e16d9e0c2c94493e2566db80af70a5dbe', 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: '8cdcbb06cd90d1329c753223477c0f6d1276276d', 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: 'c7046a29293cca40ab583628786a5dd912106aaa', 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: 'b556db761f7c2b7e4f93323d8d7c498f7d4d0088', 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: '7eddfbec497b596c7b30f0ae3082b6d24e55159c', 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: '6a18a9aa66e5c8ca7bae2563e0c799e3bda64f7a', 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: 'df9cb479f8b852ab81113c4b3ae8411e4b2074f3', class: "illustration_div" }, h("div", { key: 'd9bb62c309d67d4636aaac6388015c82fb6cee84', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: '9e04b77e9c7a22595c1f7da17b19e395b29869cf', 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: '578f012e6ae13beabeae0dd86b78810e839b127d', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: 'edcf0eb1f621186a03be11334b564922c56fe804', 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: 'f453c8848b4ae2fb4b76c47a8892d429d94e4a43', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: 'fd29ee6ae804c3e2f23565ba6eede09c84750641', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '49cff94a7539bdb4755c7f32d207af8c40b3c20e', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: '7bd57f5998db489349f9858f50b70e130ddf9871' }, h("filter", { key: '82f6cdb637ecb9b84ad4d19fa8bd515603a2b488', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '1c0a02761873d16fdda38ce0cfa1dfc81f2eabf7', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '725c61bc3b3ffeaf10679a1495cc2968d0268539', 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: 'bb04dc069ba3a268eb5d6cfa30f31095896b642f', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: '7030c459c30d82e47f016f50ae2f2cf1054721ec', dy: "8" }), h("feGaussianBlur", { key: 'd27c9bf127a1eab0bf1ed9086c3b0e71a50bc0c0', stdDeviation: "4" }), h("feColorMatrix", { key: '49867a4bccfb32e8963e1ee7dc7aa2bcabacae1d', 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: '5a659ed40c294d360d7df16751ba6e871d45c7c1', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: 'cd9b9154a6da7c1ed1cd1f7d36fbc7e4a87e9987', 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: '03bc62bb5847c0c1b5b05fab52f04a3dba5d969c', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: '2350faeb836bbcee3826ef4076a4d9be86dfc59a', dy: "20" }), h("feGaussianBlur", { key: '375d288d85a4dd3f806c85349b8ba97a92e02340', stdDeviation: "12" }), h("feColorMatrix", { key: '4694e820739c49bbdfb8482aef20d6c69dd14c46', 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: '875cbd43bcf0f5f651bbea28842ff5d71ec069a2', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: '5ff823c301db866928bd13f760510b0a4a43735c', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: '2f591ce1342a3fd49d1e0a13e1d7b4b1d8bd04d1', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'a9bcbd67d3868237c3e2f24c72e62c2013e02b86', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'ed6f6f9e29a29ea567c369260428de89edf90874', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'a64c064c85554819abe398933effff72604f7bbf', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'fccd6fc945ec6936cec153940451065c91b3c488', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '52464b26902b12b9ae1324c834d2bf6c2f9a7845', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '09185b46aa2a08ade209e74c16db8aea8ef402d3', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'f180847ab3b7e946483252d3d7b0a64a1b4033b4', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '3cce60fb614b866300fd6f807bbb0fdd0196a0d8', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: 'dca4de7d5d94dc13e123cb188d01edb3e53a614e', 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: 'c97e88b501907beaca690fd104bebca1d7053fc8', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: 'cdccbca6851aded24005e3710759d112962d8a64', 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: '5116adc15d775361c1c8a6c7c1d59371ff2520c9', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: '97c6d2a3de54fa8a1c0a626e83f6d024548f1528', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: '12056d45c75750f64546a6f2f3a130e96516620a', 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: 'f0dca69c0b4064c6742ee0ba474a659cc52ffc45', 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: '7ead84ca9f71c13d5d6d821edd3686d75478a579' }, h("filter", { key: 'c2e28570d2ba1fd26e1bda1f7823c9c4e4b10299', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '28fd81f3e087a89036054ecd357ce3e4ab844647', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'd0c418642e477dc5cfcbef999f3c77c5ea4d832c', 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: '0f86dd4bb948e01f88f06ba697ec83000b616ba1', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: 'a8411b665e556faf229f17bc6ae97322cc051757', dy: "8" }), h("feGaussianBlur", { key: 'c26be7f2a7242e217023a3addec82eab161b133a', stdDeviation: "4" }), h("feColorMatrix", { key: '37a3bd352712ec6c5b086ceb5ee6369464407d2b', 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: 'a5b2e388123c5d71980d540cd1e2c6c3474f9114', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '8f6b0eece9aebd5035592fe32334e56f80b57c44', 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: 'deba63010788a115c2f0b310e86780bec89613f7', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: '1fa0b4195aeeb3a020652f827d66734299340fe3', dy: "20" }), h("feGaussianBlur", { key: '6745abff04ac8a00d62551e6384dd77859c8a703', stdDeviation: "12" }), h("feColorMatrix", { key: '23a14e649ecb81169548a362be89e1b03b96d8db', 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: '9c596ee4807ec268a74c439b68dc515d0c7408e9', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: 'b03b50362d09fd50bc53eba0870ec21b90fcead8', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '6a618f48d1a83046658fa290fea7db4c98f267d9', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'e1be34ad5239d64d7660122f9cd869e20caba22a', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'd1bc318fa62f8503faddc61e861ac59446caf15f', offset: "1", "stop-color": `${this.color === 'primary'
+        return (h("div", { key: '120412ff979d4246fa30e9644367abf404455d8c', class: `illustration_wrapper` }, h("svg", { key: 'f6c358b47e469c388acb7b40f7107644d2cfa38a', 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: '199d6017ce3c807c895862bad555995342f5da47', 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: 'ae398c42ad50610646ce68bcda5b99a4b2d93eca', 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: '01eda05e7329efa82e24ac273e8ab428dee6e1f4', 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: 'e0bc0266638b20b60d28e55b7750d6aab5d714ed', 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: '2285cbe3e70b50c0b2f45b5fe1a7d5ec51b93b1b', 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: 'e687dc161d9d2c9a967b64cf6cc97a29d8067df1', 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: '511349d2e0113a804fbe2801ca024c077db54ec0', class: "illustration_div" }, h("div", { key: 'a3bd094847d474bb5e037c3446fb2d76322bf69e', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: 'f0d80c6712e8cadc01b5a255e4eef0bccd6b0c3f', 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: 'e3d1f6141e6c67f243b8fa9176dfed18ac23a89a', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: '4cf3a6681e782c728f35ca9cbce1820b13c28faa', 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: 'ea3fe8f3122eb6aa9d2a36569cae82bcb0cf730c', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: '5261a29554f3d3ada7b330339c2367b86f847b59', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '32c8c3f7a54616d7b04511f20ef9a277bd3fa131', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: 'a8624dd1bdebe8500a0a29b94a7a8bd2b88d4536' }, h("filter", { key: '59d5c3c58167483cf80283e091ccaee1e3c52dd6', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'ff415cb6e247d53ddfde01ab9a88aaf55c134b74', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'e300cbe648bb3dc287ee25e4691dbd206e310268', 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: '5a79597ae96a78bf75c618b9a047879766f2c06b', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: 'ca9ca4d3387edbf1ce399327389b957824ba795f', dy: "8" }), h("feGaussianBlur", { key: '2105805a48eb397fee759375b686bec4e0b42302', stdDeviation: "4" }), h("feColorMatrix", { key: '4c2605cf12591b2f6b5ea91ca789832ee8acfd18', 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: '4784d66bd383b2521951916b161f9b6f14fad258', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: '31470b4a2f9df321914b28da2679c235313eaa06', 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: '3612bd1ecbd41022b3317474a1470047ad975f75', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: 'c0d5ac80ada651c77aecbd0d1b892243fbd83a7a', dy: "20" }), h("feGaussianBlur", { key: '6e59b4d5b8f0bf76e5b0867461a1a1de7a35ed12', stdDeviation: "12" }), h("feColorMatrix", { key: '6d151dd995427b2e915c6f0e988ac17b63d296cb', 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: '786ad51a4b25ff9a11de8e551dbeb16f04353ecc', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: 'd58c33e013b9e3816723fea921316f77727d347b', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: '8282a5363c1977456b83d48274b2bffdc2d53666', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '8f7ac10a940159134fd8134112fac92215108b2a', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '70371bf7b701e6daf0968f9a45e52cf44d505bff', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '63305cc526b3d3e7399b441356fcc72326767dfe', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'a827bc247042c27b3780dd9b18d6e5f1c9eea95c', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '8765acc251a149b0fcfff0c408822eb06f09c321', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'a9a75225fea84480f4c456f249d334566f5962c0', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'f025e8dc1a2166d3ce13ccbf10657aa868eeecbc', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '9d846e895d9bbc1d9106b93e99e1ce35257a222d', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: 'fa1e01c6ba80fa070ef26f9f8ea05c1c99a21bf3', 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: 'dc48b3cafab9cf4699259e223e8eb1e4f37676fc', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: 'c95c0610cc0a0fd6806f5db3526c3fca46a5fb41', 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: '1cbbf352ddbb9131b797f4dfdb5948608276f7bc', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: '66dfdabe4b25ac1cfb10a3396696857cd3f8aee7', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: 'cf41e2361cda08a70c1bb5c18740ded1acc9b77a', 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: 'b97d6962c64c81876b1de825e995f00a947fac03', 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: 'c1e32bebd22f5ac08966ffeb6f87f81d7e93551e' }, h("filter", { key: 'b00c87ac03a27f108b7f9cf15813f78f69133ef2', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'ca61ccaf011e297d4aa2bf413b3c432bf9b80e04', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '8be508d3b2a2709a05638acc22811b1666cb8712', 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: '65c39285b5165f3ce8806f55a83da0b05b49bfb0', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: 'a5627ab8dc830d2ec56526cce9f7615862ff7c94', dy: "8" }), h("feGaussianBlur", { key: 'f454f42ddea2a63b432fdfe7338ceecc8a9e1c35', stdDeviation: "4" }), h("feColorMatrix", { key: '09f485c4562857347b33c032f8bf5c585c2a5ab6', 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: '1829c18b22f306b16e83f7eca213dfaf915fe226', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '85a78ab28d40003d6b2955269aaec8883d6df8ae', 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: 'e17a0112b3b0b22a96ba4b146320106ca8458b4f', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: '7971836d32707a7fd0811764879b88257410165c', dy: "20" }), h("feGaussianBlur", { key: '629779d31e52f55652b3ece090d90f521c29f419', stdDeviation: "12" }), h("feColorMatrix", { key: 'b2c27d74fe3a9c3b4022cc20f4eaf24fd38304b5', 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: '208f2c9eae06a1be3a03db8ae86ae67930b2f08c', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: 'fdca243cfa9061098b960bdb66ef8005b7924785', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '0d9a30b6ec70b24746bfb93136cbf330fe866e6a', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '4d18b7b4ae0606629a3eca9b2a6e725d22939dec', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '45b3f3456e0adc26dcaa52e96a95d55f4d098669', 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: 'd5fceb1d13a5aebea9adff45620bfc43240ecceb', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'ecfb2de34592c7d2f316e573645e686fec9e89d7', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'aee1d8f44019ee75c788ffe52200d93045fd5445', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: '491db9ac38fe7e17ecd9f2dd2d893457d22fe34f', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'f40c5b458a8c828d4a48e7bff9c8e6744ae0bd53', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '4d47b3afa1c18b3c51628f1c18ac5bf2f21d04eb', 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: '254611455cfa8bd1f0a645c482ecf18a0c538325', 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: '99a219a9c982f3740b39e62c1939e8dba1645d39', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: '9be2983bac2e7ba545b3d57858637e13e8d9aabc', 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: '6c06ab3c554e38472f7f766dc1d1d25882617886', 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: '8a012ec7171d81922800d1bf7b76d1c3d5957f88', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: 'c11b5a7b73400a518129953fa495312d73e2e251', 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: '682a38e87206d2005b5acd99e36bbe194556b763', 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: '6a700846932e0e574ed07a7857c346c77bbee457', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: 'c0664f2e2d960f739ec823d0e8c642b54637389d', 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: '92aaff290dac5e32502760b40a64d290b5127093', 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: '73201a156956eb4ead3b7141e8a62b8d1bd144ef' }, h("filter", { key: '4f5dc35ea281c3730700afbceb0af710f0da240a', 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: '5017147d586771ce10cf693fc464eeb7c510b1bb', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '0830b6065b2b86ab8ca55908c4fae533503170c8', 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: 'f3e576c2029c8a55ad0f10e1c72bd2380c2d92ab', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: 'd04ec50a4ee01fb04b97ec3a3b2a903a63eb0e44', dy: "8" }), h("feGaussianBlur", { key: '4a9e8601416e4b1f4424a549ad1732986afd048d', stdDeviation: "4" }), h("feColorMatrix", { key: '01f1272f4ffad5b19b9ce644167453fa9acfdc6d', 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: 'd0fc12c12bc1d68854e226be0fb9e355fc2c245f', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '5f625b0ee9983ff0874c932608f3dc734b27f722', 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: '7f407a32f96ec5786480c0e0057a9942964d75b9', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'd4ba8d7ef900051cec4db1fddbff63e0044c1de6', dy: "20" }), h("feGaussianBlur", { key: '3e9e5b5b63f9bc9f1c9553b5fe1d14d583d26bff', stdDeviation: "12" }), h("feColorMatrix", { key: '4841079dc3df5980e21c6c0da728afaafee31dc9', 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: '6015d7ba792b674fd3c9c211174f7f469a68b973', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '973a6abda87ca95427d494b90c6fa5e3f6ec947b', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: 'ad01d01bda29b321b0761dc022be1ebed27634f4', 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: '48a342f214ebd893362ea1421f5fee299b58f19b', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'f18da4d6c6ab98c8be31b4327ed36028683acdbf', 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: '668102b8d98c8c678ee2d1a6df3760aea09b068f', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '4d0405da06355eeb59b50f4f8a01ae4e5d79e922', dy: "8" }), h("feGaussianBlur", { key: '31853b92c3b6c95c4b3139099fb94ee92bf8d39a', stdDeviation: "4" }), h("feColorMatrix", { key: '981334fa94f543b0feab262bf069ee3a94ab7374', 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: '3cf6dc743ce91a47f5bf0aa47ae1da19f11602b4', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'ca4b0ce61ed22f2256f188cfe7ef5a588d3bb0f4', 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: 'a97f6fdb12725c0897009a27f72640beef6f8894', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '9c14a997b38f2781624660c30ca82f6dba99e81b', dy: "20" }), h("feGaussianBlur", { key: 'ac36a32cd12cd7e6d84e4a1cebf5d434c7847550', stdDeviation: "12" }), h("feColorMatrix", { key: '0d4096c48ba22d0a6dc5dc1b2041a01c83c30c44', 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: '2434c840b36ab62164d3e2de1ea2a4249310c6d2', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '867da3e917e6c06c3fc91013b580cddcd4737c06', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '2f94f2555ce3f8d5909b32f3dea174dcde1c9520', 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: 'ab6ac93f110c6354f1252e91eb3250f476b73071', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'f04278ad7c49677757a2ca08195b4a19dd96cdf0', 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: '809c50a503675bb8b07dd44c495e7660229d6041', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '90ed9ad7be200be2c51294331685e85ef90b7f24', dy: "8" }), h("feGaussianBlur", { key: '4017472db8706e2a05efcc0868519ad1d898d6c8', stdDeviation: "4" }), h("feColorMatrix", { key: 'd235aff2b0cb23a3296b33803a47babd25c302aa', 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: 'd8c57c37916e98d8ec463a31c4782304e1c3f854', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'a2edf12ec7066a84e262ba14c9f265ad300cb15b', 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: 'd70005d6c5ccac0b04c8d185c60d8433913b595c', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '059308b98fd734a7f581f5e6bca12320961b5d0f', dy: "20" }), h("feGaussianBlur", { key: '5d35bc158e59f4e560f907fdea841a2c044d691f', stdDeviation: "12" }), h("feColorMatrix", { key: '6858adbc7f29d354138c2c01305a71e9c4184224', 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: '7350f2f23aa87b936c4560f5d5f5b30be4904e55', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '8b80508ad36204edbe47552354c0b6cf56d69cbb', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: '9e3b932de2e7183e3e43fb8d771eae0a41783eba', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '8ac42079a4973edf097dba3dfee150c406466bee', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'a613f0f63771fb30f9521de2c00b40ffc2a985b4', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` }))))), this.illustrationStyle === 'documents' && (h("svg", { key: '7d8640c7b82c46bf87d86c4f140e367373760f37', 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: '8225fcdb79f651c10fc4cc8c5ad35cd88bda58d0', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: 'fefe57e28b22d7f6433cb378384b03d2bc3fc0b9', 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: 'fe663ad415cc28cbb19347df22bfd8c962daa975', 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: 'b37fa3c9ad55398ecf2709d281fa5369f369d4e9', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: '8ff6b6ea42a8b850041f2093167498c89821ffb3', 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: '915e52b06218a52f129b936f2e42bbe8afe8bb42', 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: '3afcac9286fc78978f23860be9de313b2f8dba6e', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: 'd15897f038e7d215009a120d46094638136d9be5', 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: 'cf8eefb8536b105f1f918447b044a96d2ac79c49', 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: '80a3b551a6de4d7c12c6708cc4334319c35265ff' }, h("filter", { key: 'e35c2fa1af0e9a3af405aa32c3d8375d664bc001', 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: '4108266d8afe182fec7d15c22503052172d40b93', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '05f241cc1fbd08b0b46e96bfcdb9184cd470092f', 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: '3ba9cd9160241a9b2abe6c5b7c8abc8f541267cd', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '2025bc709ac08df9b555bf41d1e0655298f8b3dc', dy: "8" }), h("feGaussianBlur", { key: '4c80b0bc1cb4184062d899de072726886f0b96c9', stdDeviation: "4" }), h("feColorMatrix", { key: '69fd70594cdec29a3868965b33e5b1b513131f79', 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: '47a3a52e0379ed96f207316ce432d4ca210d13a5', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'd6334d05da0eb66c8360aae4adaba53cfc499b94', 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: 'bb0abecd2ab80442b4ef67100856bb84188c053f', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '6b8f64b238555f209382b244568d5ecdf277255f', dy: "20" }), h("feGaussianBlur", { key: '1c2bd1125802d4d08470430ed5a05b1f1b27aa42', stdDeviation: "12" }), h("feColorMatrix", { key: '20e02d19a834f12fa1e79addad68572ad3b3cda8', 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: 'f1f71bd2aa5fcf2d3f1a2e947f098f41567096ec', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: 'fd3f19990b4895d3e6949fac765716266600a23b', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: 'fdd2efcd7a83c824043bd2ff0720b3f9fda8f6e6', 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: 'a426f815054a8df72a4ba3819a8c90b69899914a', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '492cb0afafef07136e1104adff2b01816ca45682', 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: '1846ca103e77913c39b96ac5fb110b2c08c308b0', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '6c5614286e24fcca35d331971927580bc514f9ea', dy: "8" }), h("feGaussianBlur", { key: 'e5c3256afbde23d359018715d169f31738f13f21', stdDeviation: "4" }), h("feColorMatrix", { key: '20c9dc04540187f4e75b86fd28e193d036a13bab', 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: '935b406f984ada228dea72347fe3f8194d57e9ae', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'd365704dec849d015d55ef9ba2b5b3c707919881', 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: '94b0df4c2d44f1bc28208f61bc145de5754e2518', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'f23de6e084fc586cf784a053e48b190f1246970f', dy: "20" }), h("feGaussianBlur", { key: '72b4d59a2795eb07a502a243aa5fd2f6bfc4e154', stdDeviation: "12" }), h("feColorMatrix", { key: 'c522db2121e508cda731ed3708af08f676a88c77', 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: '475023a9b8d82061eb69b797aea46f76275caa20', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '6ffea20502133db45b83110e41d2ad7e850d078b', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '7c961d91bcc2d3ba232dc5d031c746e99ba3939a', 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: '5a329eb357fea253283128a9e7ec7f53f23c4573', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'f35c4fd7c17e3a63a62df7601483caebe16e2020', 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: 'b58fcd9bfd8b2dbfa499d4187d4fce8cfb93f080', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '12263dff7a77e90aa9d62ba2cdb522755f61456d', dy: "8" }), h("feGaussianBlur", { key: '49850e0e0b50565a23777a6a2a870b81596e1968', stdDeviation: "4" }), h("feColorMatrix", { key: '3eaf21760c2ad08fc9839cde270443aee116ed4f', 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: '8bced956c6bde6d45b6c25637e738a511c87a6b9', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'cdeb3ed76af3aac7bcad000efc30957f2bacf78a', 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: 'fe6d566bf9f845724e6d9796d1ab845b711c62fe', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'b9e67fd4051d7d51dae7416c22cedb69bc8e7d60', dy: "20" }), h("feGaussianBlur", { key: 'bfa4e27a107b1cb92c110c3981803e60190f1da8', stdDeviation: "12" }), h("feColorMatrix", { key: '0a09cebc7e0c50bc6e44187dc475d8ed6a65276c', 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: '40088479afe65662674c2a35327bb05c5d7d41fa', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '9f441a100d9b45da1ef56b18d7373f5fccd2bbf6', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: '49a400b4ab6073e8430077b7063d447ed8a67025', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '00e0893fb822892ff792b3c08fc91874e5c12dad', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '29f50c9e1f2c124929557bd7dd3656ee4873bea1', 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: 'f86a84df30f8d193c2ef24548928d5d14a50fa63', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '13db83a4bfd18a680e352a5cc7fae4cdd91e7870', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'c2e80e07de09783b2c003878ce9452208d9ec4d7', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: '7cccdf9637f057925ab0d728c12953cb32623ecc', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '4d663274b967a14996b3b5614ec38c5918bd3df0', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '602a9002f148cbc8dbd5b1a860271622b2ba7445', 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: '7ac43b77320437de3d29588c4a22b4a49146a865', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '8280c11fe6289ce3b03c76d211e9831b30e906ee', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'd9cdd624044d9d7fd7d87e2b0d651426c557646c', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: '1b066d1b289a720985bb45a7e2f105a0531aa4c2', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '7286086df6f8b50bd749cf250f46ddeddcf8fe5d', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '14e0f871146e5523b0a54f0b07435848497f8bb6', 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: '8b43b48305f11d0b9b98707497222c94c9d7a77a', 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: '7865b87111917c1b6c1370ebbb2ee8b3b1a42af2', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: 'e8e713f1b7c75e43b72d3b4f0785c5e6d83caeea', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: '276e066f4dcb13e2265664e48638b2c4a86e5ff9', 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: 'd770f2882deb3a6f33c1f9c889ea258fbc3390ed', 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: '451780219339eb65ee3dd33c5d46285815c55900', cx: "145.325", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary'
+                    : ''}` }))))), this.illustrationStyle === 'credit_card' && (h("svg", { key: '88efbcd3a31266db88f0a373a662142e49805525', 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: 'e7ac79351f33721a6d09bf6644f952602761e8c4', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: 'd10fe05fd167c83ad77a979cd3f0ee096ae8bccf', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: '235b7bb611365e4b9eabf8063fb8ac940c76773c', 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: '93b9b0da28f1ed697b9b7d30a6fcacbf01330374', 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: 'f14292b7b574310409f828a4b2403503761d34d1', 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: '8746139fe8804618d107a38e1377a111ae374597', 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: 'ffa93b794b54a8a5d41784769921d7310e7e10dd', 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: '8c38626437f50d706818c2bca6193fe8006369b4', 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: '66390d4163e79f62c818d6352ef3dcf4a9b0ddb7', 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: 'b755726c3c0df4345b846503b39130106d99cbec' }, h("filter", { key: '84b4728f9e37ac4a314f8ac357fba69267c53a38', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '7d75060686cdcd6538af22213197b5f2bdb082cc', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'e51fd8eebcf9a029f3f518534ed9b3f464098a72', 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: '71a5d907360433b1d1505551bb66977c2e0c09a3', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: '5aeb1bbb3c76be453d98f1b0f1bbba42267379c5', dy: "8" }), h("feGaussianBlur", { key: '88d124814af00ba9d8f012f964e2b0c26b4633f6', stdDeviation: "4" }), h("feColorMatrix", { key: '47fd2211fd206e05808a1c989be45ada5c5b8cf4', 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: 'fe279c0347394c3365fe70c35a8a0f6bfcbc7f15', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: 'bf3c8feda34df35b8df8c9cff74dc0ca38f7cd38', 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: '7244f5f92206df396920369fb9203ba2f8a07d4d', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: '23022d8b3dad7dd559c1dcc3c32941ab6dd17a24', dy: "20" }), h("feGaussianBlur", { key: '0aa58bc4354ad54ee7090f9c05e1e3a13fb7e532', stdDeviation: "12" }), h("feColorMatrix", { key: 'b40b8bf648b7f8eee0c0ba9e4032ac471e62c0e6', 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: '2d09a5b90c3b7170dba917477b7c4aabd4e57464', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: 'b5e43a1076b41a7937e45610d5ff293dc70216b6', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: '348887ebe32cd0e20581e39ec561844bf581b98e', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'b82824152bfc6f1e26a2fe214875ba3b04940db5', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: '3856223af49dce2413354aa1eae85dd34b82fb9a', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` }), h("path", { key: '8ad5ccbe8c70a35910fabb9e4b57816e9a738ae9', 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: 'be4fa2f3e3d64c144dbe1fbdcbb9721c238a7202', 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: '6fcda684aa613600005f2da2715b9f6a58b58192', 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: 'a9434896f0a6d155b6f56dd986111cf45977b4cf', 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: 'db099d5df219670ea919128c7b26165062c8f577' }, h("filter", { key: 'e19dcb18721e34e4d14c1d518a283c0177cfc6a3', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '49f96d013425d7442a3f1b70b7456bed4584af24', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '2be972e3b7727d547e6ee31073e9b3a16b903811', 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: '705a3a46af03dac8de9895a2a55ee908e9ad0e4f', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: 'b9dcb0d7b69530f1f211b32f0b409387be2a408f', dy: "8" }), h("feGaussianBlur", { key: '278a4a4b82e476328fd465221d9b39727e25f9f5', stdDeviation: "4" }), h("feColorMatrix", { key: '8ec9ea156ec7003b8b2c6917e75002237837ba24', 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: 'b51fb62d267c021cb24f82877ee83c3e962da296', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: 'ada6cbc1868d50e9d480b569b56e7cdd45fd8d66', 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: 'a28fc8a2923accbd90e78f224c0d469c74ffada6', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: 'a1092e617fbe2ecf26a2fb7da72b2a0a18f68577', dy: "20" }), h("feGaussianBlur", { key: '4991795c8772fc202989d21c620c88e6a135a066', stdDeviation: "12" }), h("feColorMatrix", { key: 'c977a43e9adaafe34c23ff138c2fd2be749d74d3', 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: '3560df056a5abd3b0283095fcaabf68a811b6d30', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: '1dfe1ab65dbda97e5812da90380ebe571ca33c1b', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: '3ab5019aafc3fc32cd45324c9af6b6de62ba84af', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '9d7fcd8efdd11d266c1ff82ac6f4d4bd09ae1b16', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: 'cf825a6e654d7663a88b6e8b94afeb8e2733c2a5', 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: 'f7b791714d603761f6480f066c0f821401c91a00', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '35dfad515f56d4c93158096b3c439ad3059a7fcc', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
+                    : ''}` })))))), h("div", { key: 'b072543984b5e39767711242af7f7c0e9c2b4bae', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '91aa76ed3dc801a807041c6c0d180ab784d2478a', 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

@@ -11,23 +11,23 @@ export class GbInputDropdown {
         this.text = false;
         this.leadingIcon = '';
         this.items = [
-            { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },
-            { name: 'Mock Item B', username: 3 },
-            { name: 'Mock Item C', username: 3 },
-            { name: 'Mock Item D', username: 3 },
-            { name: 'Mock Item E', username: 3 },
-            45,
-            50,
-            20,
-            25,
-            90,
-            92,
-            53,
-            'Activated',
-            'Deactivated',
-            'John Doe',
-            'John smith',
-            'Jane leo'
+        // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },
+        // { name: 'Mock Item B', username: 3 },
+        // { name: 'Mock Item C', username: 3 },
+        // { name: 'Mock Item D', username: 3 },
+        // { name: 'Mock Item E', username: 3 },
+        // 45,
+        // 50,
+        // 20,
+        // 25,
+        // 90,
+        // 92,
+        // 53,
+        // 'Activated',
+        // 'Deactivated',
+        // 'John Doe',
+        // 'John smith',
+        // 'Jane leo',
         ];
         this.value = [
         // { name: 'Mock Item A', username: 1, selected: false },
@@ -223,7 +223,7 @@ export class GbInputDropdown {
         this.selectedItems = [item]; // Ensure only one item in selectedItems
         // Close the dropdown after selection for single selection types
         this.dropdownOpen = false;
-        // console.log(this.selectedItems);
+        console.log(this.selectedItem);
         this.dropdownItemSelected.emit(this.selectedItem);
     }
     selectMultipleItems(item) {
@@ -235,12 +235,14 @@ export class GbInputDropdown {
             if (!this.unselectedItems.some(i => (isObject ? i.name === item.name : i === item))) {
                 this.unselectedItems = [...this.unselectedItems, item];
             }
+            console.log(this.selectedItems);
             this.dropdownItemSelected.emit(this.selectedItems);
         }
         else {
             // Select item: Move it from unselectedItems to selectedItems
             this.selectedItems = [...this.selectedItems, item];
             this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.name !== item.name : i !== item));
+            console.log(this.selectedItems);
             this.dropdownItemSelected.emit(this.selectedItems);
         }
     }
@@ -271,6 +273,34 @@ export class GbInputDropdown {
             this.state = this.selectedItems.length > 0 ? 'filled' : 'default';
         }
     }
+    syncSelectedItems() {
+        if (!Array.isArray(this.items))
+            return;
+        // Guard: wait until both props are ready
+        if (!this.value) {
+            this.selectedItems = [];
+            this.unselectedItems = [...this.items];
+            return;
+        }
+        const objectValues = this.value.filter(val => typeof val === 'object' && val !== null);
+        const primitiveValues = this.value.filter(val => typeof val !== 'object');
+        this.selectedItems = this.items.filter(item => {
+            if (typeof item === 'object' && item !== null) {
+                return objectValues.some(val => val.name === item.name);
+            }
+            else {
+                return primitiveValues.includes(item);
+            }
+        });
+        this.unselectedItems = this.items.filter(item => {
+            if (typeof item === 'object' && item !== null) {
+                return !objectValues.some(val => val.name === item.name);
+            }
+            else {
+                return !primitiveValues.includes(item);
+            }
+        });
+    }
     componentWillRender() {
         if (this.value.length > 0 && this.state === 'default') {
             this.state = 'filled';
@@ -362,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: '7d1a8121ce5ac3e36ce3397da88c1ca6877c7bd4', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '04064ed0109bf3177aee0c4b1fc832ce034cd51b', 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: 'e5648afa3e6894a61f72998fe0fc8c2b0ddae7cc', 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: '0b22ce329984073bc490430d224c64ab95a993e9', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '22260417a0c4603974649229abf32f224709729c', 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: '0b81501380ad591d48fee731929ee467b5a5e77a', 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: '6b869c4c42e30358a63a7644721bb2dcaae976bf', 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: 'fb9485cd264b75db13882e8ce420a7e63f31d20b', 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: '5889b399a74d5508bc9585437c544a584812cc5c', 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: '31f6d9d32e40ca4293816efbf853061c2f1b59c7', class: "placeholder" }, h("p", { key: '7c7ce9c37804a257be2756e4c06bc9d4a54e7dcf', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '1148f34d09ea3ab02f827699abb12011664c5654', class: "search_input" }, h("input", { key: 'f2765281bcfcb0e3ce98b934202d2bf411b505b7', 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: '575c8617e7398d7a173f237fb4f2fa428ca38736', 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: 'ef9d0aa94ba44b5f682efa1991becaf4f79ee6d6', 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: '90c9b379a5c1cbb200122595397cecf963650d68', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: 'e0d6e3bed0d4040a35876b47a346507d9343ca87', 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: 'ca635fabadfea14fbc2440d07f032ebe96aa6f03', 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: 'c1ae22c5e26b5a3f2aa831cda7ab7fa7bb15a77e', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'f211a9ec94c260c4676f7626e62ec155cc1afe88', 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: 'd56f9e451c0cf75d97194906e071f2241f559acd', 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: 'af1dceb45198245be108603c6d2c4bcc3341de02', 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: '7cbbd97c671c660d8fdb0f0da33f05be469c1ba3', 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: 'a82ec43480bc4a1c268dc3e5f1200cba57e16452', 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: '8b5defa12c166b77603d628aa7090f5691799e44', class: "placeholder" }, h("p", { key: 'd071a834f82ba4b606864f254e3fd76773bc516d', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '1d50281dc762da55b8a7be2b6ae0d9d37c86fd19', class: "search_input" }, h("input", { key: 'c9c395746f024f4608a2c6d8b7c124108f191baf', 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: '2cd11282e8ba081c8d977654cc3c4480ebb88dfe', 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: '7d5703a238bb6dfd89df0fab626139a629019966', 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: 'd07465830cb284a06d08719e1232681d048a53f3', 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: '5e8d4db63c08974c07e2d9b8b4fcb74b9a7757ec', class: `content` }, h("div", { key: '69748c31e8238c6f8ba759627fa0dbf845cdebfa', 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: '1d9d5cc8bb1f9d43d740c9af37a0c19f12b786d5', 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: '8b61515fba824e523624d35bf21fbcc69aac9907', class: `content` }, h("div", { key: '1a172643d106b9622290aa9f582693278d1a98d3', 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: '0e25c6da19c0c6b52b85d13de7890702c08c6fc3', 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: '4b992f43cc71a6cae3c6601c32ac7f862ad9878b', class: `help_icon` }, h("gb-help-tooltip", { key: '71146254c7a8cd1ce220d009315d5dccfe49d7bd', "show-supporting-text": true }, h("slot", { key: '7bdcf9edf5ea307231b8ca0181a6d465755476ee', name: "tooltip_label", slot: "label" }), h("slot", { key: '7e6a551727cf8f49cef1570913fe0151e2a0675c', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '5f078ae103896c8a55dc0c1767103e15800c1a06', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '2436435ee8c3d64a5a8025538c45d11cad1a2ed4', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '0419b3cffb0e97c6986e520b72562c7f90d969da', 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: '9309d2e1e572c613906276ff8e1430058a987e43', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: '5e4d5f1b002a43e4bf5beebb21441c9d9ed66760', class: "dropdown_search_field" }, h("gb-input-field", { key: '8cf84d2ac3746cc7c41862fae5e9ad1f1bc7e5d9', 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: '7149f0dc7cc034c5b147ba40fd74424024d7d46e', class: "loader_div" }, h("div", { key: 'b1d8153709aa0ee7d973bd4ea32ba989d1a5ab5f', 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: '24a9c2bdb2da4e2cb47f8744452b68a3090fe869', 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: '3da495cedc43ed123ff911e57283406294e815cc', class: `help_icon` }, h("gb-help-tooltip", { key: '779a34fc36b13752783718271b436d86747e1bf5', "show-supporting-text": true }, h("slot", { key: '12e30aac298f669c40272f58b5acb5c4661ce7f2', name: "tooltip_label", slot: "label" }), h("slot", { key: '152d0b2899242b3a142e7b33cb0fffd911d6aff0', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '54f7c603608f75c6e29ee2d2a53a2aab2222ca95', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '02a6ddd61957a61e14314e1e6598ca46ac1b9cd3', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '8942eb79b0db6ff4dc5169909e1f5854175db0ee', 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: '011b4d5dfa31d16a3ae814a6bfbc8f5b113313c6', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'ca3e698abf011e8f4f7d5f608bfcfb7060aa2080', class: "dropdown_search_field" }, h("gb-input-field", { key: '6d570f1856231796897d9ee6961f785a2e714ce3', 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: 'b028bb36c6f53a64770bdd0b400032f336828dd8', class: "loader_div" }, h("div", { key: '7d6b1b4fcc8a2413e5906bef8c5a17e3e9f76441', 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
@@ -700,7 +730,7 @@ export class GbInputDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n    { name: 'Mock Item B', username: 3 },\r\n    { name: 'Mock Item C', username: 3 },\r\n    { name: 'Mock Item D', username: 3 },\r\n    { name: 'Mock Item E', username: 3 },\r\n    45,\r\n    50,\r\n    20,\r\n    25,\r\n    90,\r\n    92,\r\n    53,\r\n    'Activated',\r\n    'Deactivated',\r\n    'John Doe',\r\n    'John smith',\r\n    'Jane leo'\r\n  ]"
+                "defaultValue": "[\r\n    // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n    // { name: 'Mock Item B', username: 3 },\r\n    // { name: 'Mock Item C', username: 3 },\r\n    // { name: 'Mock Item D', username: 3 },\r\n    // { name: 'Mock Item E', username: 3 },\r\n    // 45,\r\n    // 50,\r\n    // 20,\r\n    // 25,\r\n    // 90,\r\n    // 92,\r\n    // 53,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n    // 'John Doe',\r\n    // 'John smith',\r\n    // 'Jane leo',\r\n  ]"
             },
             "value": {
                 "type": "unknown",
@@ -1038,6 +1068,12 @@ export class GbInputDropdown {
             }, {
                 "propName": "destructive",
                 "methodName": "watchDestructive"
+            }, {
+                "propName": "items",
+                "methodName": "syncSelectedItems"
+            }, {
+                "propName": "value",
+                "methodName": "syncSelectedItems"
             }];
     }
     static get listeners() {