globuswebcomponents 2.10.2 → 2.10.3

package/dist/collection/components/gb-filter-modal/gb-filter-modal.js

@@ -128,13 +128,13 @@ export class GbFilterModal {
         this.close.emit();
     }
     render() {
-        return (h("div", { key: 'b8ae416500035b8dd0925b80aa5d7a5bbaf6fccd', class: "filter_modal_wrapper" }, h("div", { key: '4fe0ae5e76685adf055b8c2b57645736f035929b', class: "filter_modal_header" }, h("div", { key: '63e8bcb103cc371b43192764d9faba84e05a66ce', class: "filter_modal_content" }, h("gb-button-close", { key: 'c6bdd312614ba6ae70feb766d321e40aca777a45', size: "sm", color: "gray", class: "close_button", onClick: () => this.emitCloseEvent() }), h("p", { key: '98439a4975da7e707691dc234caa76f9985a40ac', class: "title display-xs-semi-bold" }, this.filterConfig.title))), h("div", { key: '4075280e3d59587e669fac6f60db3424d6195fba', class: "filter_content_container" }, h("div", { class: "filter_content", key: this.renderKey }, this.filterConfig.additionalFields && (h(Fragment, null, this.filterConfig.additionalFields.map(field => {
+        return (h("div", { key: 'b8ae416500035b8dd0925b80aa5d7a5bbaf6fccd', class: "filter_modal_wrapper" }, h("div", { key: '4fe0ae5e76685adf055b8c2b57645736f035929b', class: "filter_modal_header" }, h("div", { key: '63e8bcb103cc371b43192764d9faba84e05a66ce', class: "filter_modal_content" }, h("gb-button-close", { key: 'c6bdd312614ba6ae70feb766d321e40aca777a45', size: "sm", color: "gray", class: "close_button", onClick: () => this.emitCloseEvent() }), h("p", { key: '98439a4975da7e707691dc234caa76f9985a40ac', class: "title display-xs-semi-bold" }, this.filterConfig.title))), h("div", { key: '4075280e3d59587e669fac6f60db3424d6195fba', class: "filter_content_container" }, h("div", { class: "filter_content", key: this.renderKey }, this.filterConfig.enableDateRange && (h("div", { key: '02edfd964f9090694d8a82a00645daa31bdf44bd', class: "date_range" }, h("p", { key: 'f29469e8b5e6c1f798419637dfc7fd868568e83b', class: "label text-sm-medium" }, this.filterConfig.dateRangeLabel || 'Period'), h("div", { key: '66a13a84b4b146b722e399067aed1119b1b0c7fd', class: "date_pickers" }, h("gb-date-picker", { key: 'da254e4dc82aeb2d1607c9dc28c37e258898d14e', placeholder: "dd-mm-yy", "full-width": "true", "twentyfour-hr": "true", mode: "range", format: "d-m-y" }), h("svg", { key: 'e2ead089456756556cec155b73ff19c61efa3c85', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c4e72cabe93e110f4bd03b64a8b6942bdc9a3705', d: "M2.5 12L21.5002 12", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("gb-date-picker", { key: 'c396230ec19ed1a8727db7fcb7db71dcef0d2d3c', placeholder: "dd-mm-yy", "full-width": "true", "twentyfour-hr": "true", mode: "range", format: "d-m-y" })))), this.filterConfig.additionalFields && (h(Fragment, null, this.filterConfig.additionalFields.map(field => {
             const Tag = field.tag;
             const eventHandler = {
                 [`on${this.capitalize(field.event)}`]: (e) => this.handleFieldChange(field.key, e.detail),
             };
             return (h("div", { class: "field" }, h(Tag, Object.assign({}, field.props, eventHandler))));
-        }))))), h("div", { key: '5f251917c9bad15f9e1533f0885f340983cf0d8a', class: "filter_modal_actions" }, h("div", { key: '204124b6e5744def6209da012602de2cc09d59e4', class: "modal_actions_content" }, h("div", { key: 'd1e1c1367f1d059137a5ab66f970767d1abcaab2', class: "btn" }, h("gb-button", { key: '4c0b69ee5aef72544b2030830f357a128d1593bd', size: "xl", hierarchy: "secondary_gray", icon: "default", onClick: () => this.handleClearClick() }, h("p", { key: '14c9d31b848d99eb564a65a65ac3991b1a681b3f' }, "Clear filter"))), h("div", { key: 'd7e76d0447f175a3b6e27c79a5363d88fb53de4f', class: "btn" }, h("gb-button", { key: '864e5f47acf6c725ac7a98ef9c31a8d2a6039993', size: "xl", hierarchy: "primary", icon: "default", onClick: () => this.handleApplyClick() }, h("p", { key: '39e528a66ece4d40b2bd2a8a03f4a515679b8e03' }, "Apply")))))));
+        }))))), h("div", { key: 'e34fc3132cfd9e27a72e21a221c0f19ef1e6ab62', class: "filter_modal_actions" }, h("div", { key: '2416c8814af6566ce2048efc81a34eef4aee1689', class: "modal_actions_content" }, h("div", { key: '1352090c81f74b1e4792a20bb822e2455ae18efd', class: "btn" }, h("gb-button", { key: '422f66de215152b21217c226fcc19d2abd8870f8', size: "xl", hierarchy: "secondary_gray", icon: "default", onClick: () => this.handleClearClick() }, h("p", { key: 'f3a641052ebd8e8fc46d1653f2d45530d72359e3' }, "Clear filter"))), h("div", { key: '6a2332e423e50dec17d9206e92596713ed5308e9', class: "btn" }, h("gb-button", { key: 'b54372a52aabaf5656595d66921cd47116a7e061', size: "xl", hierarchy: "primary", icon: "default", onClick: () => this.handleApplyClick() }, h("p", { key: '3457129f268039c12c9a9b7f550b8e8f731f300d' }, "Apply")))))));
     }
     static get is() { return "gb-filter-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-filter-modal/gb-filter-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-filter-modal.js","sourceRoot":"","sources":["../../../src/components/gb-filter-modal/gb-filter-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Fragment } from '@stencil/core';\r\nimport { FilterConfig } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-filter-modal',\r\n  styleUrl: 'gb-filter-modal.css',\r\n  shadow: true,\r\n})\r\nexport class GbFilterModal {\r\n  @Prop() filterConfig: FilterConfig = {\r\n    title: 'Filter',\r\n    enableDateRange: true,\r\n    showClearButton: true,\r\n    additionalFields: [\r\n      {\r\n        tag: 'gb-input-dropdown',\r\n        key: 'approvalStatus',\r\n        event: 'dropdownItemSelected',\r\n        props: {\r\n          type: 'tags',\r\n          icon: false,\r\n          showLabel: true,\r\n          label: 'Approval status',\r\n          placeholder: 'Select approval status',\r\n          items: ['Draft', 'Pending', 'Approved', 'Rejected'],\r\n          destructive: false,\r\n        },\r\n        default: {\r\n          value: [],\r\n        },\r\n      },\r\n      {\r\n        tag: 'gb-slider',\r\n        key: 'amountRange',\r\n        event: 'thumbValueChanged',\r\n        props: {\r\n          showHeading: true,\r\n          heading: 'Amount range',\r\n        },\r\n        default: {\r\n          leftControl: 50,\r\n          rightControl: 100,\r\n        },\r\n      },\r\n      {\r\n        tag: 'gb-input-dropdown',\r\n        key: 'disbursementStatus',\r\n        event: 'dropdownItemSelected',\r\n        props: {\r\n          type: 'default',\r\n          showLabel: true,\r\n          label: 'Disbursement status',\r\n          placeholder: 'Select disbursement status',\r\n          items: ['Disbursed', 'Not Disbursed'],\r\n        },\r\n      },\r\n      //   {\r\n      //     tag: 'gb-input-dropdown',\r\n      //     key: 'facilityCategory',\r\n      //     props: {\r\n      //       showLabel: true,\r\n      //       label: 'Facility category',\r\n      //       placeholder: 'Select facility category',\r\n      //       items: ['Retail', 'Commercial', 'Corporate'],\r\n      //     },\r\n      //   },\r\n    ],\r\n    initialValues: {\r\n      pageNumber: 1,\r\n      pageSize: 10,\r\n    },\r\n  };\r\n  @State() formValues: Record<string, any> = {};\r\n  @State() renderKey = 0;\r\n  @Event() applyFilters: EventEmitter<Record<string, any>>;\r\n  @Event() clearFilters: EventEmitter<void>;\r\n  @Event({ bubbles: true, composed: true }) close: EventEmitter<void>;\r\n\r\n  componentWillLoad() {\r\n    this.formValues = {\r\n      ...(this.filterConfig.initialValues || {}),\r\n    };\r\n\r\n    // this.filterConfig.additionalFields?.forEach(field => {\r\n    //   if (this.formValues[field.key] === undefined) {\r\n    //     this.formValues[field.key] = null;\r\n    //   }\r\n    // });\r\n\r\n    if (this.filterConfig.enableDateRange) {\r\n      this.formValues.startDate = null;\r\n      this.formValues.endDate = null;\r\n    }\r\n  }\r\n\r\n  handleFieldChange(key: string, value: any) {\r\n    this.formValues = {\r\n      ...this.formValues,\r\n      [key]: value,\r\n    };\r\n\r\n  }\r\n\r\n  handleClearClick() {\r\n    const resetValues = {\r\n      ...(this.filterConfig.initialValues || {}),\r\n    };\r\n\r\n    this.filterConfig.additionalFields?.forEach(field => {\r\n      resetValues[field.key] = field.default ?? null;\r\n    });\r\n\r\n    this.formValues = resetValues;\r\n    this.renderKey++;\r\n  }\r\n\r\n  handleApplyClick() {\r\n    const { pageNumber, pageSize, ...filters } = this.formValues;\r\n    // console.log({\r\n    //   filters,\r\n    //   pagination: {\r\n    //     pageNumber: pageNumber ?? 1,\r\n    //     pageSize: pageSize ?? 10,\r\n    //   },\r\n    // });\r\n\r\n    this.applyFilters.emit({\r\n      filters,\r\n      pagination: {\r\n        pageNumber: pageNumber ?? 1,\r\n        pageSize: pageSize ?? 10,\r\n      },\r\n    });\r\n  }\r\n\r\n  capitalize(str: string) {\r\n    return str.charAt(0).toUpperCase() + str.slice(1);\r\n  }\r\n\r\n  emitCloseEvent() {\r\n    this.close.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"filter_modal_wrapper\">\r\n        <div class=\"filter_modal_header\">\r\n          <div class=\"filter_modal_content\">\r\n            <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.emitCloseEvent()}></gb-button-close>\r\n            <p class=\"title display-xs-semi-bold\">{this.filterConfig.title}</p>\r\n          </div>\r\n        </div>\r\n        <div class=\"filter_content_container\">\r\n          <div class=\"filter_content\" key={this.renderKey}>\r\n            {this.filterConfig.additionalFields && (\r\n              <>\r\n                {this.filterConfig.additionalFields.map(field => {\r\n                  const Tag = field.tag;\r\n\r\n                  const eventHandler = {\r\n                    [`on${this.capitalize(field.event)}`]: (e: CustomEvent) => this.handleFieldChange(field.key, e.detail),\r\n                  };\r\n\r\n                  return (\r\n                    <div class=\"field\">\r\n                      <Tag {...field.props} {...eventHandler} />\r\n                    </div>\r\n                  );\r\n                })}\r\n              </>\r\n            )}\r\n          </div>\r\n        </div>\r\n        <div class=\"filter_modal_actions\">\r\n          <div class=\"modal_actions_content\">\r\n            <div class=\"btn\">\r\n              <gb-button size=\"xl\" hierarchy=\"secondary_gray\" icon=\"default\" onClick={() => this.handleClearClick()}>\r\n                <p>Clear filter</p>\r\n              </gb-button>\r\n            </div>\r\n            <div class=\"btn\">\r\n              <gb-button size=\"xl\" hierarchy=\"primary\" icon=\"default\" onClick={() => this.handleApplyClick()}>\r\n                <p>Apply</p>\r\n              </gb-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-filter-modal.js","sourceRoot":"","sources":["../../../src/components/gb-filter-modal/gb-filter-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Fragment } from '@stencil/core';\r\nimport { FilterConfig } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-filter-modal',\r\n  styleUrl: 'gb-filter-modal.css',\r\n  shadow: true,\r\n})\r\nexport class GbFilterModal {\r\n  @Prop() filterConfig: FilterConfig = {\r\n    title: 'Filter',\r\n    enableDateRange: true,\r\n    showClearButton: true,\r\n    additionalFields: [\r\n      {\r\n        tag: 'gb-input-dropdown',\r\n        key: 'approvalStatus',\r\n        event: 'dropdownItemSelected',\r\n        props: {\r\n          type: 'tags',\r\n          icon: false,\r\n          showLabel: true,\r\n          label: 'Approval status',\r\n          placeholder: 'Select approval status',\r\n          items: ['Draft', 'Pending', 'Approved', 'Rejected'],\r\n          destructive: false,\r\n        },\r\n        default: {\r\n          value: [],\r\n        },\r\n      },\r\n      {\r\n        tag: 'gb-slider',\r\n        key: 'amountRange',\r\n        event: 'thumbValueChanged',\r\n        props: {\r\n          showHeading: true,\r\n          heading: 'Amount range',\r\n        },\r\n        default: {\r\n          leftControl: 50,\r\n          rightControl: 100,\r\n        },\r\n      },\r\n      {\r\n        tag: 'gb-input-dropdown',\r\n        key: 'disbursementStatus',\r\n        event: 'dropdownItemSelected',\r\n        props: {\r\n          type: 'default',\r\n          showLabel: true,\r\n          label: 'Disbursement status',\r\n          placeholder: 'Select disbursement status',\r\n          items: ['Disbursed', 'Not Disbursed'],\r\n        },\r\n      },\r\n      //   {\r\n      //     tag: 'gb-input-dropdown',\r\n      //     key: 'facilityCategory',\r\n      //     props: {\r\n      //       showLabel: true,\r\n      //       label: 'Facility category',\r\n      //       placeholder: 'Select facility category',\r\n      //       items: ['Retail', 'Commercial', 'Corporate'],\r\n      //     },\r\n      //   },\r\n    ],\r\n    initialValues: {\r\n      pageNumber: 1,\r\n      pageSize: 10,\r\n    },\r\n  };\r\n  @State() formValues: Record<string, any> = {};\r\n  @State() renderKey = 0;\r\n  @Event() applyFilters: EventEmitter<Record<string, any>>;\r\n  @Event() clearFilters: EventEmitter<void>;\r\n  @Event({ bubbles: true, composed: true }) close: EventEmitter<void>;\r\n\r\n  componentWillLoad() {\r\n    this.formValues = {\r\n      ...(this.filterConfig.initialValues || {}),\r\n    };\r\n\r\n    // this.filterConfig.additionalFields?.forEach(field => {\r\n    //   if (this.formValues[field.key] === undefined) {\r\n    //     this.formValues[field.key] = null;\r\n    //   }\r\n    // });\r\n\r\n    if (this.filterConfig.enableDateRange) {\r\n      this.formValues.startDate = null;\r\n      this.formValues.endDate = null;\r\n    }\r\n  }\r\n\r\n  handleFieldChange(key: string, value: any) {\r\n    this.formValues = {\r\n      ...this.formValues,\r\n      [key]: value,\r\n    };\r\n\r\n  }\r\n\r\n  handleClearClick() {\r\n    const resetValues = {\r\n      ...(this.filterConfig.initialValues || {}),\r\n    };\r\n\r\n    this.filterConfig.additionalFields?.forEach(field => {\r\n      resetValues[field.key] = field.default ?? null;\r\n    });\r\n\r\n    this.formValues = resetValues;\r\n    this.renderKey++;\r\n  }\r\n\r\n  handleApplyClick() {\r\n    const { pageNumber, pageSize, ...filters } = this.formValues;\r\n    // console.log({\r\n    //   filters,\r\n    //   pagination: {\r\n    //     pageNumber: pageNumber ?? 1,\r\n    //     pageSize: pageSize ?? 10,\r\n    //   },\r\n    // });\r\n\r\n    this.applyFilters.emit({\r\n      filters,\r\n      pagination: {\r\n        pageNumber: pageNumber ?? 1,\r\n        pageSize: pageSize ?? 10,\r\n      },\r\n    });\r\n  }\r\n\r\n  capitalize(str: string) {\r\n    return str.charAt(0).toUpperCase() + str.slice(1);\r\n  }\r\n\r\n  emitCloseEvent() {\r\n    this.close.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"filter_modal_wrapper\">\r\n        <div class=\"filter_modal_header\">\r\n          <div class=\"filter_modal_content\">\r\n            <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.emitCloseEvent()}></gb-button-close>\r\n            <p class=\"title display-xs-semi-bold\">{this.filterConfig.title}</p>\r\n          </div>\r\n        </div>\r\n        <div class=\"filter_content_container\">\r\n          <div class=\"filter_content\" key={this.renderKey}>\r\n            {this.filterConfig.enableDateRange && (\r\n              <div class=\"date_range\">\r\n                <p class=\"label text-sm-medium\">{this.filterConfig.dateRangeLabel || 'Period'}</p>\r\n                <div class=\"date_pickers\">\r\n                  <gb-date-picker placeholder=\"dd-mm-yy\" full-width=\"true\" twentyfour-hr=\"true\" mode=\"range\" format=\"d-m-y\"></gb-date-picker>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path d=\"M2.5 12L21.5002 12\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  </svg>\r\n                  <gb-date-picker placeholder=\"dd-mm-yy\" full-width=\"true\" twentyfour-hr=\"true\" mode=\"range\" format=\"d-m-y\"></gb-date-picker>\r\n                </div>\r\n              </div>\r\n            )}\r\n            {this.filterConfig.additionalFields && (\r\n              <>\r\n                {this.filterConfig.additionalFields.map(field => {\r\n                  const Tag = field.tag;\r\n\r\n                  const eventHandler = {\r\n                    [`on${this.capitalize(field.event)}`]: (e: CustomEvent) => this.handleFieldChange(field.key, e.detail),\r\n                  };\r\n\r\n                  return (\r\n                    <div class=\"field\">\r\n                      <Tag {...field.props} {...eventHandler} />\r\n                    </div>\r\n                  );\r\n                })}\r\n              </>\r\n            )}\r\n          </div>\r\n        </div>\r\n        <div class=\"filter_modal_actions\">\r\n          <div class=\"modal_actions_content\">\r\n            <div class=\"btn\">\r\n              <gb-button size=\"xl\" hierarchy=\"secondary_gray\" icon=\"default\" onClick={() => this.handleClearClick()}>\r\n                <p>Clear filter</p>\r\n              </gb-button>\r\n            </div>\r\n            <div class=\"btn\">\r\n              <gb-button size=\"xl\" hierarchy=\"primary\" icon=\"default\" onClick={() => this.handleApplyClick()}>\r\n                <p>Apply</p>\r\n              </gb-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -194,10 +194,10 @@ export class GbHeader {
         const helpIconSrc = getAssetPath(`assets/help-circle.svg`);
         const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
         const searchIconSrc = getAssetPath(`assets/search-01.svg`);
-        return (h("div", { key: 'bf46da7ad20335c12657e0fbdd69234507a1bbfa', class: `header_div ${this.showBorder ? 'border' : ''}` }, h("div", { key: 'e742740bea230b657a2be5e7cecf4c8e2c6b1d2b', class: {
+        return (h("div", { key: 'c236de010ca5f65b953ed162cead17563332e3e4', class: `header_div ${this.showBorder ? 'border' : ''}` }, h("div", { key: 'ef4530296edbe866ed5257a4b3c21b19fc0652c9', class: {
                 'full_search_bar_wrapper': true,
                 'is-hidden': !(this.width < 710 && this.searchBarShown),
-            } }, h("gb-button-close", { key: '07baee44d4e50738daf01887936da0a110f350f3', color: "gray", size: "md", onClick: () => this.showAndHideFullSearcBar() }), h("div", { key: 'baeb7d4548c0b37dae50770c532a27463e1bcaac', class: "full_search_bar" }, h("gb-input-field", { key: 'a30028c8c030e42997db175eaca62c4c1b28276a', size: "sm", state: "default", type: "icon_leading", "enable-cancel-button-function": true, placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), !this.searchBarShown && (h("div", { key: '9dc2a1dedac5d29420f55d441b5f8b6d73f972a3', class: "content" }, this.showLogo && this.renderLogo(), h("div", { key: 'c4da1cc9ceaa4941f6f66e204ab0b006c2c3567b', class: "inner_content" }, h("div", { key: '2ee9870b7093e7549ed863b8447e244627fe629b', class: `action` }, this.showSearch && this.width > 710 && (h("div", { key: '3e06b3e76f638e9aea46b67c63054cd321366bb2', class: "search" }, h("gb-input-field", { key: '4c07313ccd72999802129f82e9aee61b5c611a6f', size: "sm", state: "default", type: "icon_leading", "enable-cancel-button-function": true, placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), this.width < 710 && (h("div", { key: '9475ddf4cf9641ad5d3216d92fccce9af0698b99', class: "help" }, h("gb-header-icon", { key: 'fe6e2849deaf1bc731cab4d6ac59c9df6be8953c', state: StateEnum.Default, icon: searchIconSrc, class: "help_button", onClick: () => this.showAndHideFullSearcBar() }))), this.showHelp && (h("div", { key: '3a3d464e6c7f06cc79964684544c9fb3c276db0a', class: "help" }, h("gb-header-icon", { key: '4d5bce8887f79d294def92403734ecb95f73f40a', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.toggleDropdown('help'), class: "help_button" }), this.activeDropdown === 'help' && (h(Fragment, null, this.contactHelpDropdown ? (h("gb-contact-help-dropdown", { class: `contact_help_dropdown`, items: this.contactHelpDropdownItems })) : (h("gb-help-dropdown", { class: "help_dropdown", "show-log-error": this.showLogError, onHelpItemClicked: this.helpDropdownItemClicked.bind(this) })))))), this.showNotification && (h("div", { key: '1a7cd81dc844380036538617b2e75fefedbb6164', class: "notification" }, h("gb-header-icon", { key: 'd5a5c9ed79f8bf2151a6cbbea88bfe907978cd4b', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.toggleDropdown('notifications') }), this.activeDropdown === 'notifications' && (h("gb-notification-pane", { key: 'e7ce6acba3a237e9e3d7208b768428e0dde306d1', state: this.notificationState, class: "notification_dropdown", notifications: this.notifications }, h("p", { key: 'a8a2439b31cb26c960742aa9a7f16d6f21fe7134', slot: "label" }, "No notification"), h("p", { key: 'a3045913b42ffe7cad32189106c496c81902e19d', slot: "supporting_text" }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events")))))), h("gb-avatar", { key: '4a797d60757829f2cb346d05fd636b5a7cc89ea1', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.toggleDropdown('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" })), this.activeDropdown === 'avatar' && (h("gb-avatar-dropdown", { key: '1367e67990db0658e763c492fbb4377efcdad34e', ref: el => (this.avatarDropdown = el), class: "avatar_dropdown", type: this.avatarDropdownType, "show-theme-tab": this.showThemeTab, "show-profile": this.showProfile, "show-log-out": this.showLogOut, listGroupOne: this.listGroupOne, listGroupTwo: this.listGroupTwo, color: this.color, roles: this.roles, "show-roles": this.showRoles, "current-theme": this.currentTheme, onThemeTabClicked: this.onThemeTabClicked.bind(this), onItemClicked: this.onAvatarDropdownItemClicked.bind(this) }, h("slot", { key: '5521ea85ac866d0f57731dd0381a5010e31feff8', slot: "name", name: "name" }), h("slot", { key: '529fc1fbe74787fdfc224720568445196269fde7', slot: "supporting_text", name: "supporting_text" }), h("h1", { key: 'cd3a6e43a31d494f8328307311b42939b6cac951', slot: "initials", class: `text-md-semi-bold` }, this.initials))))))));
+            } }, h("gb-button-close", { key: '678de4233cdcf363afa05bc80283262a5a73c96c', color: "gray", size: "md", onClick: () => this.showAndHideFullSearcBar() }), h("div", { key: '7fdc767a2d0555b2a47f6b2ee6dca2819dcf78cb', class: "full_search_bar" }, h("gb-input-field", { key: '1037af4fef3a27409817c77eab058dcf61438195', size: "sm", state: "default", type: "icon_leading", "enable-cancel-button-function": true, placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), !this.searchBarShown && (h("div", { key: '5032bd9f3accb964d99693c4b1aa726c51c93d76', class: "content" }, this.showLogo && this.renderLogo(), h("div", { key: '10c93accac4e621c0575ccce03af8935b2dff481', class: "inner_content" }, h("div", { key: '653631723298c7204cb7138237f01cc8b3f02d22', class: `action` }, this.showSearch && this.width > 710 && (h("div", { key: '5a4555995c30e93a6e25274535b2c8e1a2635bb7', class: "search" }, h("gb-input-field", { key: '5fd0092f0539c4c37c80bbeb630952a4a1fb5088', size: "sm", state: "default", type: "icon_leading", "enable-cancel-button-function": true, placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), this.width < 710 && (h("div", { key: '671d00e4bbcdc71b615acc4548c77d43f4b0296c', class: "help" }, h("gb-header-icon", { key: 'd7d004eeb5bf96d21c5a947050bf0fe4e36a7409', state: StateEnum.Default, icon: searchIconSrc, class: "help_button", onClick: () => this.showAndHideFullSearcBar() }))), this.showHelp && (h("div", { key: '2575d255acd6d80a088a6f061998dd8abce282f5', class: "help" }, h("gb-header-icon", { key: '480b2bab96c639ceaffb66595c2d7299546f6407', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.toggleDropdown('help'), class: "help_button" }), this.activeDropdown === 'help' && (h(Fragment, null, this.contactHelpDropdown ? (h("gb-contact-help-dropdown", { class: `contact_help_dropdown`, items: this.contactHelpDropdownItems })) : (h("gb-help-dropdown", { class: "help_dropdown", "show-log-error": this.showLogError, onHelpItemClicked: this.helpDropdownItemClicked.bind(this) })))))), this.showNotification && (h("div", { key: '4a93fe12ebc21a3944cf527bc5b46e5f928922d5', class: "notification" }, h("gb-header-icon", { key: '75acd8fc4af4206d10b37c095f91a5c72adac1e0', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.toggleDropdown('notifications') }), this.activeDropdown === 'notifications' && (h("gb-notification-pane", { key: '37f485aa6509647510ba2081abebfb44408e72dd', state: this.notificationState, class: "notification_dropdown", notifications: this.notifications }, h("p", { key: '78cc2f10ba8e27a759bb60cafa311f33b65b2e86', slot: "label" }, "No notification"), h("p", { key: 'a5a11586962f62b5d08a3c18f5e6454db2954616', slot: "supporting_text" }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events")))))), h("gb-avatar", { key: '988a9ce4f692c8d28f141626ee50d691c7c9e991', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.toggleDropdown('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" })), this.activeDropdown === 'avatar' && (h("gb-avatar-dropdown", { key: 'fb453ed227d7748ad53e478c55f10a96396a4cad', ref: el => (this.avatarDropdown = el), class: "avatar_dropdown", type: this.avatarDropdownType, "show-theme-tab": this.showThemeTab, "show-profile": this.showProfile, "show-log-out": this.showLogOut, listGroupOne: this.listGroupOne, listGroupTwo: this.listGroupTwo, color: this.color, roles: this.roles, "show-roles": this.showRoles, "current-theme": this.currentTheme, onThemeTabClicked: this.onThemeTabClicked.bind(this), onItemClicked: this.onAvatarDropdownItemClicked.bind(this) }, h("slot", { key: 'ca8a3ae559ed8bccb0fc14423b2254b2a5727331', slot: "name", name: "name" }), h("slot", { key: '21c18ad02233f84af6a4576b52982098c51041b5', slot: "supporting_text", name: "supporting_text" }), h("h1", { key: '786788e4a6df6034fa5772243e8642fd3acbc880', slot: "initials", class: `text-md-semi-bold` }, this.initials))))))));
     }
     static get is() { return "gb-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-header-icon/gb-header-icon.js

@@ -27,7 +27,7 @@ export class GbHeaderIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'c2b35b94959a73bb8efd23fd35a9d2d8420f52d1', class: `background ${this.state}` }, h("div", { key: '7470944f7aa79113951f0908e5325521406aa5de', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: 'd69db92c26d5148915b75d6b3c9e16e98a923f85', class: "red_dot" }))));
+        return (h("div", { key: '8b2857022d4c3fac3f87bda317db9a237d56a5c0', class: `background ${this.state}` }, h("div", { key: '8dc71f9591a90f94c6486e8972e56411064ab927', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '553bc02dddaac06dfba6f35a50f9a48c85b971ee', class: "red_dot" }))));
     }
     static get is() { return "gb-header-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class GbHelpDropdown {
         this.helpItemClicked.emit(item);
     }
     render() {
-        return (h("div", { key: '61337f91c01ac8f4d4a907cee175a7aa759d2141', class: "dropdown-container" }, h("div", { key: '23cc4a416e7b557fe0d69ff464de2904e102d99b', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: '89be013685b38b598100f356d475b0efa6f941ae', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: 'f5c50f12bc0992a6906adfe56cb9abb2270e1e25', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: '8223227b3f3b303de0274886d5cfde33fb7b2c55', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: 'c1af32fcd03a3c75c53061e5933d42b3b88aa3fb', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: '9491dd497acfa5326a47a2e5a3d42886bfb7bdf6', icon: true, iconSrc: "assets/alert_02.svg", label: "Log a profile error", onClick: () => this.onHelpItemClicked('log_a_profile_error') })))));
+        return (h("div", { key: '0f2d9789ed937440884e6cc1aca90a8c8eed0c3a', class: "dropdown-container" }, h("div", { key: 'dc66fde3cc2984113b2b6c68d67a2573d2eaa212', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: '1613961f24ecab2f4649341a4606660a98909d80', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: '377b81f9a34c3a69fd1c91103ee23a34b5c500d0', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: 'f9e50ca82a77b23de5d3b13df5fe1a0c59381d8f', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: '6c2f919dcfab19faf2b871d08a8befefd5189d6e', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: '12ddcc0da13fc0a03da2a59b1971c656cd377762', icon: true, iconSrc: "assets/alert_02.svg", label: "Log a profile error", onClick: () => this.onHelpItemClicked('log_a_profile_error') })))));
     }
     static get is() { return "gb-help-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class GbHelpTooltip {
         }
     }
     render() {
-        return (h("div", { key: 'ab285a5e74a94ed2857f6bf25506b751a4dbacf9', class: `help_tooltip` }, h("svg", { key: 'a7654f8cee7235fa8c037ad88e6eede6ed9b0e21', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", onMouseEnter: () => (this.showHelpTooltip = true), onMouseLeave: () => (this.showHelpTooltip = false), class: "help_circle" }, h("path", { key: 'fc6b2335f357a68293fe3146e4c461e0ebe87ab2', d: "M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.showHelpTooltip && (h("gb-tooltip", { key: 'dbf88b7dac6ca0337afd2c140d53cbf23fcc81c0', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: 'e3cc5b24c7586fef84522dd95b381d9115f4e434', name: "label", slot: "label" }), h("slot", { key: '57620e1b9df8a6c6f5df2f68c25ddd9044c71593', name: "supporting_text", slot: "supporting_text" })))));
+        return (h("div", { key: '596b85c203b3077d5f58d5c3b957d2de371e51ab', class: `help_tooltip` }, h("svg", { key: '690ec1ecf348fd5d40ee7bbf1497382df0a82f56', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", onMouseEnter: () => (this.showHelpTooltip = true), onMouseLeave: () => (this.showHelpTooltip = false), class: "help_circle" }, h("path", { key: '0467be742e438023b71710e3840d5479d07daa30', d: "M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.showHelpTooltip && (h("gb-tooltip", { key: 'e7e97f94108f3ec37bb7b6d3967e8080f4e76393', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: '5d8123d76dbbbc16b816bcbf28517e8be1e6e7e3', name: "label", slot: "label" }), h("slot", { key: '2588c2f6382ad87e8ef138ccae5626929956e646', name: "supporting_text", slot: "supporting_text" })))));
     }
     static get is() { return "gb-help-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -203,7 +203,7 @@ export class GbHorizontalTabs {
         this.tabItemClicked.emit(index);
     }
     render() {
-        return (h("div", { key: '4aff83589e8f2c9173f74ee9f5cba31e3c5c930c', class: `horizontal_tab_div_wrapper ${this.type}` }, h("div", { key: 'a29d85b579ade73bf6e6e9176569e51e0efcb37f', class: "scroll_button_div left" }, this.showLeftButton && (h("div", { key: 'aca2f2ab05fe0dae5ed390d603ba71a50da7c5e9', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'b5ef036e57df70f4f2cd410b13c885ffddb673d0', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '7f8583eefef4544e5d7317f433574c3fa1cb82c5', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '7184dd6a5883cc048fe53bb89a5916a4062c05b5', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '278defd9b4c32b8fcd30ea4759badcb3f45b3261', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), h("div", { key: 'f212e56576cb3aaa6fad8f0f8c168109ef01c3f8', class: "scroll_button_div right" }, this.showRightButton && (h("div", { key: 'eded2ec6497d721892191942a2f54b7655687636', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '1618181859db054c37f323af2c7910e92af4a72a', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'b6f80ecb308ff34df81ccff50dc08861eda8451c', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h("div", { key: '1bd7ee96b0cf40534883023a73dbee6e3bb9969a', class: `horizontal_tab_div_wrapper ${this.type}` }, h("div", { key: '770f6393b21fcffd14934c14f8563a21ef84887e', class: "scroll_button_div left" }, this.showLeftButton && (h("div", { key: 'f177058f1c1acd07eec894c9308114d569783051', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'c1a96947f81ade03739207947760231cb55b967c', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '376f4576ac733a8057367fe0a1a392c8ce62bf41', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '9442b522f273439f8b2e6d231ecc7b71c2af3ba8', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'b78a5def76b23393caa1d813e626c6869a80b187', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), h("div", { key: 'b4af0d3b221a54ab11e24f9af425a1bff2682375', class: "scroll_button_div right" }, this.showRightButton && (h("div", { key: '8459e856de3e9ff847c9a61987110408f0c36258', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: 'cb17de0c5a0729baf5b219647d90092b48d2d1d8', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '66a168c674bb5beeb57923c94f68167e0d9295a2', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "gb-horizontal-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class GbIconButtonBase {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '3e7e5ab6f46220fc930d19a9dbc30b4ab8fa3968', class: "icon_button_base_container" }, this.showTooltip && (h("gb-tooltip", { key: '920942d655a793c893a06078407a92e51ae43743', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '909c328de8f6219490a57c687022ecb85a8d8f78', slot: "label" }, this.label))), h("div", { key: '5c0078013c0cdef3b0142b0d548112bc53cb942d', class: `icon_button_base_div ${this.current ? 'current' : ''}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '9afa84ae064c2ff7c4da21b8b96ef891b8c7052a', class: `icon ${this.current ? 'current' : ''}`, innerHTML: this.leadingIconSvg }))));
+        return (h("div", { key: '1ef8350a2208822db793c79c0c8271e4751577ee', class: "icon_button_base_container" }, this.showTooltip && (h("gb-tooltip", { key: '4a26d37b8e970b912a8de4fac1f69ae3f42b93d1', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '3c00e6fdcf9e22d93148f898c52123b56df814d6', slot: "label" }, this.label))), h("div", { key: 'f1e5124cf44194bc1407218dc562b7c945a5ef30', class: `icon_button_base_div ${this.current ? 'current' : ''}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '683b9a759ecaac5a2d64a5581f6879dc8ab0f3da', class: `icon ${this.current ? 'current' : ''}`, innerHTML: this.leadingIconSvg }))));
     }
     static get is() { return "gb-icon-button-base"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,35 +34,35 @@ export class GbIllustration {
         this.loadIcon(this.illustrationIcon);
     }
     render() {
-        return (h("div", { key: '55da90f0e25fa91563a1db49f6404c8f22d1c558', class: `illustration_wrapper` }, h("svg", { key: 'd8630d56d752b378fe140e8836aedf8b5377d2ee', 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: '41879240dbb5da64f7991dd14a4b06748b7faa40', 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: '5d301f7b697f1d4a8254008b403590015e8c90e1', 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: '2d6d79d21a040ac4b2c6ae15330214f16a18f204', 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: '068b18403f40cca499d6befcd2d3c2267442135c', 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: 'cc1d970df82a965bbf38b35ac6eb2afb7dbc5b75', 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: '03c9713590a3cb4db7f675fdb669a156e9122c64', 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: 'c614e09bb392d8f803aed26217c8f33bd6db47b6', class: "illustration_div" }, h("div", { key: '6bfd0b420140bc3f0ce06c8be3a738c6e4b7fef0', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: '62c1382c65e887b02bcff1d7c34a778d9d60a3bd', 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: '09e7aadddffaf3b5f0c3767d8dc27ab7dde7f15c', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: 'f284388674dfbfa6cde2f9aca1249bba0320f68b', 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: '28c81e11e471c8480bfed5e6aed4a7d967eff5a3', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: '43de9c4d5aa49df13cb03c30a21ab9c0e2781be7', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '58277acafb854dba05469850376f14a22ca268e5', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: '59112928520adb835420296c78007903008fabbe' }, h("filter", { key: '9187ee8665c5f3a088277cbee2c62209b4c892ba', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'c65ce64f54db1c97f4677b57da8fb5f59e7625e4', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'a88697cbffb7621e47d8826c6e6fe06b2d5bc790', 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: 'd2fce91a1f8036db07807f6f792108134bc2d66b', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: '914d3b6c38dfab8a4e3910affebeea17387d1374', dy: "8" }), h("feGaussianBlur", { key: 'b922d5c0038ff41f9bc5e1b29d21eb9ab266d0d4', stdDeviation: "4" }), h("feColorMatrix", { key: '14f5f1e18a0166dbf533a142bba3f7b2f6435ac1', 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: '6057778af9006759d8ae25aac6a6e9fd65785a3e', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: '4b713ce42543ccf5265d0a33baaa78dc2088fc89', 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: 'd5854c855842fd4eec83f15b508170b11f343da0', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: '7e5a04157551df1836e0c1ad4125f5a72c848880', dy: "20" }), h("feGaussianBlur", { key: '2c0f39e9c80b81aca2f6a72210bf87627d22be6c', stdDeviation: "12" }), h("feColorMatrix", { key: '07b5f5753245aa676816f9312d9d8f80a26e6103', 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: 'e970f0fb80e9e59ffb10918102f5728d6c433b33', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: 'c193a781d08ef6b254ca0e8b98bf57f39190c69a', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: '35c820974b1f0db6b71927f48f7eb875e8939432', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '74d71d198e68994a5a785676cc7f66f9a1e2cf6f', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'bab23f7ac66e620f55f89a65348ab2f5a8a1c981', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '3d10d081f8e351c5960e1958290877a51f352dcd', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '90eb55d849a3e730d33a0c6b87559710b8b2a83f', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'eb95729095e956cf84c27ebfeae88c727accb2aa', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'bda332d8591903643839091e5b749a59de00ff58', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'f0f4f0164c2b8957b395ba47f06772617ee184f3', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'c7f1787d9a973cc280c07908425dbf8b610ab412', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: '38add6007792a2b82eb4151c69bbc508043bcf0f', 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: 'ebde8563047d61a332cb9f71b3466f8dfbeddc41', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: '25b30fb23f3a09f5445801c51235b7d4efb78785', 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: '6795bac941ace378356b3bbe6104cdf43e174f59', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: 'da66b223c0593400012c71a8e92bbf6d253dec44', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: '2a53ee8e44f990d6d2a0be3248b9f8ab9dd6e00f', 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: 'efa6ba278bfd940e35ed33e9fe5b054a551c1704', 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: 'c76b20ed7ae4c92f409ab3640dafed26373b46d4' }, h("filter", { key: 'f0385c2ebdc91e37bced735c1aed69bfd8b41213', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '0e19be75a4faf1c363660d7553aa16b24582a76e', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '597549156bdd130d38f0e9dbb104ea5ccbde4344', 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: 'aa123486cf4edbe6964c6ac78772faa1e94467d5', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: '3fb006edb4eede20d2ef19cb0de96cb6cde8cea0', dy: "8" }), h("feGaussianBlur", { key: '697d04d79290ec289612dbeb3f0f5ea5de4b9773', stdDeviation: "4" }), h("feColorMatrix", { key: '12f7076ea872673d2165a049737c0ca454471b01', 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: 'f1923a5832b124611ea91848963cf507a9f677b8', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: 'fbb101b09066060e5b3d89d8f84d84635efd8d0d', 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: '963a641ab3809a577b05ee7057125bc12e543118', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: 'c0a89614870774a552b8d0824aee5e439ad77fb2', dy: "20" }), h("feGaussianBlur", { key: '2400741b8028e265e7e4c1dc8e4ed675aceda7d8', stdDeviation: "12" }), h("feColorMatrix", { key: 'd3b3e4ad81b02dfeb55c51c56672347d7134c915', 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: '98319961d0cff98b906b393b8dbf57c2ca19a214', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: '8d42a38728d608ce50253e9eeb0e59497bf5f5c7', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '44616301ac7714352a1bd3d217a278bbd2395219', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'f64f6d1e04e9580113923cf108235fa0956d6b9a', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '7c2de7f799eb938797827654db3c0f8a0ea657ed', offset: "1", "stop-color": `${this.color === 'primary'
+        return (h("div", { key: '5b87cb1c7319642116cf47297931e01e1d36f6cc', class: `illustration_wrapper` }, h("svg", { key: '77e9b1250a09a14b05bd76791e432dadfc6d0be6', 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: '88722dde63c8be86e11028f8691b963d798121d3', 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: '109d2e7862590e2be9b09b1c850e9d8f578aea00', 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: '6e4e82e057ca92ed9142a78fd8534a9ecc5b7e54', 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: '348940828a877873ed81b85ca615b444500680e5', 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: 'ca0a67dcae0533cf05ccf494a9dc1193461ccd72', 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: 'b527ebefa1faefd69cb8b37f7949a6b85a833b42', 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: '1b12a6c816ff0f15ea3e0caa2108c64c10af2d2c', class: "illustration_div" }, h("div", { key: '14829e015b99cf6dcf26b9fba90972ec48d4ba01', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: 'd393ca0249126e560e20eefc4e468b1f8611f667', 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: 'd9541f3e54feed50b57343e6aa00b59ccb5dfa41', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: 'f75bf6842ff8b5ce95ed8aaff948ae2051a2e853', 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: 'fcc0100b8fa78d73ac36fe68eb15d5cc70c7350d', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: '70cda89690b08119375271528f3fcf158c0dbfe7', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '740f6a441009f83f23080f8f8778d0268262c231', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: '457047044cf3976cc30093a41261b077ef7386cc' }, h("filter", { key: '8367622f9f704965ecf6358df4c3dd5734dd6155', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'c03f3a7b74b238761b89b4ed5c686f82a25505e0', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '3f30ab9c1dc7e5a77ca15bfbb082d67f6cf717ee', 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: '5632c41512b0508d09e43b31c6523d8fbdf73194', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: '27247768f850f375e8b8a8668e1861583e62b135', dy: "8" }), h("feGaussianBlur", { key: 'dd3db28b30797bffe067642671ae7c3a3d513ff0', stdDeviation: "4" }), h("feColorMatrix", { key: '3759b97306f70d0dd87064c172061eb66f9cc5f8', 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: '3068027e58d55311dc84026a667c1ecb3d50b624', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: 'eed9d107e7d58be9d9797ca4a5ee5c57a01e0723', 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: '5fecd2599a25f21bedad9fea6fa30a6af67e6c1a', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: '9e27ba7ee33b099241b7b5f7191ae938a4476e31', dy: "20" }), h("feGaussianBlur", { key: 'bfe634d99106a4faf83840f93d865659bde504c9', stdDeviation: "12" }), h("feColorMatrix", { key: 'feb7e5d0b47473b454cc55abba96bbdbce5670db', 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: '18dc0da677e000189036c4c7133a864b3be27399', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: 'f28d20b72e81ed536ae51bf0b3f07dd572583778', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: '506415e0e07dddd893636bef57846c0ba0b45a41', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '14f5f7390044b010a0c66fb1416050a8b2e404f1', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'b47c42544f682aa1b9dc6d1fe12fcae928dd6a08', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '9c4df1f139a3ba7d0988a2640de1e6dc2c15ef1b', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'a1571ab0c1bcd955d2b6edf71ff7246b5d0cee8c', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '56ecf91230a117861d195340077268f5101c5a28', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '3f2c657e6dc4ce561f6671ff13e77293820260cf', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '4a2646abdafe5a69cf62e247baf8c04e5d4bc8a9', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'ec5be746f3ecbe49b125e3929cccf2ccfd093d0d', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: '243dcd2458cb97cb65b6e368f6fbb46f235f604e', 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: 'be9905030e9d450590a4e9f2d0686043c5bee2db', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: 'bb986968fb80ade5682c20e9b0a8f35ad51fd47b', 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: '9538117142de0f79bb311a149b4187c2aee09778', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: 'a083ab6ed9289fc14fe0e061f020ddb5d5cf639e', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: 'bd21421f539d705a6b0aa4243a61d82bce0dd335', 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: '60ef0a60490677c4164d51cdaffa851c9eab509b', 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: 'f492056e866b98093554361e1566b565060d32f1' }, h("filter", { key: '1793e840e800d6b1fa58b502a69578790482db98', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '90d32fa40f714dbac98a40f6446688e2233a4cce', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'c40832308fbe2feecdd8cf8c2930b2eb0afab304', 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: 'e0f35f1d44640cb1ef4b8ff23025c2f3e41dc298', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: 'f4a694c1bb9077025ddfa61bc771e2bd6c7770ac', dy: "8" }), h("feGaussianBlur", { key: '75fc402a6d830c7fcac19144defe36e783d50189', stdDeviation: "4" }), h("feColorMatrix", { key: 'fb292f40e0a82bfb8576519718948dd522c8b7b7', 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: 'c877fbcf35a6afa8cbb97a9570239be01cef5454', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '9c013a60f1b7057ef4a103312c5859c70abef434', 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: 'b97d820bbced2177b9303ba6b2b29b1fdd54d513', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: '3eb71148b6a6ea913901f0a9bbd6fc64a14ffcc9', dy: "20" }), h("feGaussianBlur", { key: '9e6ffbed182b935cefb79fb250e123d7dd14c542', stdDeviation: "12" }), h("feColorMatrix", { key: 'f318b305f6adf35c254dcaa216498c1689a2400a', 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: '72e38ce99b0a2bf86bc76826d06db9fe66bfb352', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: '11f00b932bb857cfbde025d8269ccd6149b66d0c', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '77bf77cb4e2f604ea720bb0ff630e220b36fb853', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '7195b938f69a2c58d891b410f9cf639b82e8fb45', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'c4d42502ecb21b3183a27737ec3e51dfa9056cb2', 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: 'd1ec369cbb570279a17de1389d52f901152a8a7b', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '68e841709e44dd55bc0bfc7d6f5a28d0ed35322b', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '0ea60387158907393632a4c456f8a8572cbe89bb', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: '65b05e64ab7292b32e81acdcf23f5188f3992c80', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '12d6a6167310838d9c4e651554e34e351af2d6ec', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '1be11cdb3b917f5a6fa3df3cd0fd27888046f000', 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: '09bff770f9ab391a441491cac11d57967714ca68', 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: 'c19ad6337853e4fee26245a3dae851497acc8b7c', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: '2bb9b96701cdef0ad72d936e80da2cdd537f924a', 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: 'acd2aa0b89fd204214865a62896bb0a01a180108', 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: '6b5d4e15df26fda37b6379beda6f5b79719f2999', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: 'f3531747bb89891ca5ea797ae8ad8bfb21dae4ec', 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: 'd95d388942326af4e26d4b20dcea1339ba330e8c', 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: '6e600edae2c4904a16ddef9e3780171c7809b269', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: '746bf37062d271f6e181a355be94229012a8bc50', 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: '2f6598bf5973d1851b2638ec185475ddfa1830da', 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: '8b2db2d7d7a4d6b1ae70706d9377313999aafb71' }, h("filter", { key: '3ac675a1e5cbe90a2dd55dc54c3cdc98da71d576', 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: '3a7cda0b639f10b18c4442f9f10e7604d627b4e5', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'a4007f1763abccbd796119017ced12613cbcc0f4', 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: '62f14fbf904ffe7623d235527314d453bbc24756', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '0e4fe4e0bf74f579abffffb8514f2be71a4cba0d', dy: "8" }), h("feGaussianBlur", { key: '8e0155e4fafe3a728967ea5064f894819864d5d1', stdDeviation: "4" }), h("feColorMatrix", { key: 'e1a16db1aaf3923a3c71b7001863fd0dd63f6961', 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: 'f312dfbdf7644c629f1c4e57f233f999500eca8d', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '6e8c20718be089b70114bb0b68cda462916ee595', 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: 'aeff68081ac82e6f3ca98ee64c5bf7ff7e735dc3', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'bfa89a22b8067dd80927db834b37ac7eb3f23f38', dy: "20" }), h("feGaussianBlur", { key: '2896eb93d41aeac42c155c25359459315f9dec97', stdDeviation: "12" }), h("feColorMatrix", { key: 'c706821ea8599049b024035c19d09efcc433dfaa', 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: '9ab78fc78ae84f8ba8fcd273a25a6f642853b99d', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '16ef272be308d1da780ad98d17979cc52e7a68d8', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '164e1aaab46ab52d8064f9484c24de6142752c58', 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: '6ee871578c5ed71a9b09ff4e9f0c954e28138e8b', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '6b4dca317e117b34fe5dff644a05950393290a70', 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: '7f5c461fc9485d4182e065433265d6967f603511', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '74737e77702ac27ece68ee26faba68fe32d016da', dy: "8" }), h("feGaussianBlur", { key: '7417dea6ac83d4638a373b5a91f8ef29579f1e8f', stdDeviation: "4" }), h("feColorMatrix", { key: '1e5585702eafae23414d79fc50d4a8ae703a83ec', 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: '56819b44c16ea677873426bdee89a65c5a63e5eb', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'c639118d5ca822a710ab91faedbda2141abe8f89', 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: '3c4a25017b9f6d13e4a3028073299748b4f9984b', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '1b7a6b9f66e2b57bcae16ee56387a439bc277b3a', dy: "20" }), h("feGaussianBlur", { key: '31309e1699ce887085071ad5939f5d880465664c', stdDeviation: "12" }), h("feColorMatrix", { key: '6766f67ae1626b1e99b4042a24296beeaab4c61d', 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: '127111d9566cacfb93260e7a3c672abdbe138897', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '645cec58b2bba9df5578b04204b6d2f7ed65c83f', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: 'a8e3e52c6ff33cf2c19456afe6f250ca00f1a344', 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: '5ae76117fc1582fa15a5ce1e75604ce011a0b7ff', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'd66e76a376c6ecfa297b53a77c4464c3c99c3ae4', 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: 'c85855ce5ecaf56f05df51ab66c3e5d98c592a4d', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '4c27f989ddeafd53a95987f406eeb8ae77a62911', dy: "8" }), h("feGaussianBlur", { key: '486d156dd237db54b73cdec6e79f3dba284e5b54', stdDeviation: "4" }), h("feColorMatrix", { key: '0030f6e8a69cdefd9fb93577ae0cc4a9ab1207f2', 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: '8cda3bf197bfdfd686bc7ead800d2f8b3b47eb66', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'e903ffa2af01b2f145b9cd1b7b352e59999ea563', 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: '7af84344efdedf2d10414f6a60427c094d069827', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '545523525d99385290376fb49d57c87692f4e548', dy: "20" }), h("feGaussianBlur", { key: 'b92fee5077a0d99fa5e37768a5512d05cd6259ab', stdDeviation: "12" }), h("feColorMatrix", { key: 'f8c0fdf19eaf1702ccd4c62e6cd321b7468ada38', 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: '0f547f781b3dae8eca2e9dc43db1500f657d139b', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '7e1afc82fde85b32d48d2cf61df5998e4bb8f0fc', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: 'f7555ba48f0d782dd37c6bdba8ae8a1f937cee8b', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'b8cd0270adb083b0a214d86206e5a0cb4a62cf49', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '82d6e80e17ba152551e54c4a45e01ef20bcb073d', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` }))))), this.illustrationStyle === 'documents' && (h("svg", { key: 'e42020939a58749b57f404e004734d67864eafe7', 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: 'd24df3e624d22e86254cb85e5d52161963612f74', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: 'cd10dd4243265353fe4311e43d1582d0779c781c', 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: 'bac426b042f54a84392382c5ed7507c95ae1887b', 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: 'd4a28390b5f9146a0a93f998903bf698911c133e', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: '4f00967e104d56d50858b87c45463dfb2199a217', 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: 'f264bc88636820aad3bde65a303f275605ca6ef6', 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: 'a02dba6a0f805f51040a7549ed352a83b5168350', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: 'b7320c005fbae42fa3f60e49cd662e0b573084d5', 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: 'b27634a0a7cb950a576dadb19be730f29f868cfd', 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: 'b5c93da8606b08ded79cb66a2aa754f3c3decf55' }, h("filter", { key: 'ca86d51fe7e2033294b7457e0ebdbf3da7301b89', 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: '0f822a5092991ce7356629d62b487b840c1e3b7e', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '17085a91c71157f82933ffd42e5fdcf24f64a405', 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: '945a53ce4563b4e3238c54e7be26b3161436fa23', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: 'fabb067922da17414fad7e5ce5a09e83e05ece04', dy: "8" }), h("feGaussianBlur", { key: 'f0d138818c0ff0863ab4aa7b89aeadabedee337b', stdDeviation: "4" }), h("feColorMatrix", { key: 'c28341d44b4b2ddec5ccb8832438c6d6d36b8781', 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: '5c7da53067cef986fb8bb5972d974310374ee258', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '5435d58a7bd4f1d9f97b0fa43f7afb75c320a86f', 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: '6aef71a3835c02cc70680890899bc141e804a527', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '2366b15fba87660f07322663e3fbefa165f32e0e', dy: "20" }), h("feGaussianBlur", { key: '423c0f35349dc826aca637a9e7922ff1d1bb79e9', stdDeviation: "12" }), h("feColorMatrix", { key: 'f561b660a1000f5c92c4ae55b20a148624ab1b99', 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: 'ca4d0e74fe09ce386aefad2b9cb476fed2237246', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: 'e0902aff57d7b08ccebb0e5a9443dcca960fcd25', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '68b94eb4ccc93809422b57563d91373c632b20e0', 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: '1424aa7a127e259e8f0697c94a94433ebc4d7047', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '1a50995e0dc83642e96b1bccf980aa88883fb447', 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: 'd6c366b3b25857714df656a3199c050169ec3f85', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: 'dd2e1aae9bdf6023e3fe853738e6573f2a1a4cc1', dy: "8" }), h("feGaussianBlur", { key: 'f7be8b53af62f8845e0d0afc825fe0fdf6d845ac', stdDeviation: "4" }), h("feColorMatrix", { key: 'c630d98e4742e824441b0fbddf24fbf25b816795', 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: 'f7f93740ee4abd1071b7a6b1551be7941984a08f', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '87bcc9908270d4e7ed052d7578662bb593dca17b', 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: '3159f268029f8dbba9c3c2a565f81a653d1036f4', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'daea7dfa77b0aff050075f6f44aca0988104387c', dy: "20" }), h("feGaussianBlur", { key: '8f26bb0b00d5d3427277e2256446bd8db7a53fb2', stdDeviation: "12" }), h("feColorMatrix", { key: '84e4b3179cd205655d3946ad737e874060336e1d', 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: '5b0f78b60382dfb8742d9fd3f2562561572bf671', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '51935e2f26fbc3a933bfe41ab4496200d1f1755f', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '44774489e00adcad0d83792262a8de817f979257', 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: 'bc1896a6f3972ef7a7a25bc7545e7c32ae046ffc', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'b84ea21e756455a9792440e4b6eff96b52aa89dd', 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: 'e8f838f416f87f9cf4d7051a688251921f136120', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: 'dbe6550015c5b852d044058016483e805bc4ebf9', dy: "8" }), h("feGaussianBlur", { key: '099a5265c282ad3d9e2fa1a59c3a5cd742ae37dd', stdDeviation: "4" }), h("feColorMatrix", { key: '577127c19cb0987b5debbbc1a4808ad4ca5d0cdf', 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: '42ca0c2e148dd9943f7ab5a5333d12662182c531', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '83141ee8182c20a8b243e7092ba3e731ba07a568', 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: '48ff0f95328bd3114a74a00fcf87e223deed34f2', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '3d86a38c295ce56df837949e535dfd0b8daa2803', dy: "20" }), h("feGaussianBlur", { key: '026fc7caf80b230756fd0e9903f48f2c5a63e805', stdDeviation: "12" }), h("feColorMatrix", { key: '94a156066a2500165acb047b8c046ae9ace35309', 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: '68f0d0896f6afc566ade248c8520ad2393fd3da4', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '85a497256e1f473daa4cffcca1ac144cc1615422', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: 'dfbda7b1c891317b5fe2d69dfc0623be023c706b', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '592e5a51542a816e4d83039d7c1edad0a6013eed', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '69e09334ee510bdaef41331e301d82c363ec0cbc', 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: 'ff142b16f504165af46553c4a9584eac0149cc13', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '686382f9f8722e4015eb6cbd3be8e4660602f495', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'e04abd88faa7d536079da1890490ece3ca42157e', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: '185c78430a16d7e447e87aaf5d345523920eece3', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c0665b612b144004be64789d1ac2386fa1e7dd0f', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '9d265294b4ea315b9e37e69e82761f24fe3fb59a', 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: 'ff0b1806bdcb13410395ae87146cda2c38030da7', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '37a4be55029ca63d84699c60e5a55df2dd484e14', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'f5096928b1518b203bbb05c7608f023ba22debe8', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` })), h("linearGradient", { key: 'cdaa4059e90cc862b8801e18a64c7fe2467c7189', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '43e08b85e27aa99dd3e56c7daab31a3339a86c25', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'c040874f01bf42505ab788fa883f3d1631d6e1b1', 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: '4de4b1c5905be1ce5685349fb588938335de6e54', 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: 'b551dc08e93b44330c6de3d1fd3fdef8619be466', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: '4f46e2f48aa853581f376d41ba054760bc1264d2', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: '9c9e611a9590da2cbab312c9864064ca43eaf657', 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: '136a635db9cd2df562a5f4bc42eab19058690b37', 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: 'fb6f4210a4466234f12657edf41bdd268beb624e', cx: "145.325", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary'
+                    : ''}` }))))), this.illustrationStyle === 'credit_card' && (h("svg", { key: 'd9d69e93a1ed4aef0adc82e17537bf99ee39eec4', 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: '9d774e37bdd91c4eb2791d979f42965f3c1e32f1', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: '1f2126d6a8dbd24994b1564e430af2fa5e8a583a', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: '2c97ad58fed733403ea07071dc61d04844da8936', 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: '54f30f009c0d958f89a5507692795dd3892cc76a', 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: '4e1fc56d723fd73a6af723d5ed806f6d3ff537f7', 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: '80a5f3f211a1d313d76084defc6e28027924d1c8', 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: '094ae492ccbb09d87f80e743b19ea358db75be85', 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: '47043a9391c7027cade401e9af268f17c17c8e47', 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: '717c26b235b95e664443c30dd90798850bc00255', 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: 'dcd52775249f77dc05268652c8ef54d38e82792b' }, h("filter", { key: '5c8c872a9d5749b8537accd015649e67c8950e38', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'c72eea9f4a068ab3862ebbeefce9c47a0d58be54', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'c6f2b48948130c4f18fe447859f6c2ca9ba4532c', 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: 'f025ee72e3a79077549ebcdfef79739a7d51ea95', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: 'f51481cfc09cfff992eb88a88065715238771514', dy: "8" }), h("feGaussianBlur", { key: '74d08baf95824fbd62cfd550d074a0a1cc3cec3b', stdDeviation: "4" }), h("feColorMatrix", { key: '7eaa338c2cb3da345bad0c5f75ac01c3eeea3def', 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: '64e3f4ee4f271b2c43db27a24e6e4694a62bdc39', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: '0d0c7a9d00e94eb29239d2f5f673d36648b081b0', 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: '82d60986ec9215b3f03783653536611034281441', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: '4c3388174bb2b5a426eb1e36a050804466849dd8', dy: "20" }), h("feGaussianBlur", { key: '317d8b9dc7041c5987bc26cc569fb7b5fefe073c', stdDeviation: "12" }), h("feColorMatrix", { key: 'be58b4ad8461cea3467c1abf39210d3e10414013', 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: 'c0766b78257fa1fb3fd58efaa52c8ca56151c8a5', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: 'c283c2f8dcd22efacee5ceb4b27458cf81776bd3', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: 'fc18cf39422380ab41c2fd2b95c324697f1c8b09', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '3c38511d5140470acea15373723cc172940fe6e3', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: '74308dfc9e7d88b154c72724813082e319d1724f', offset: "1", "stop-color": `${this.color === 'primary'
+                    : ''}` }), h("path", { key: '9e4f599ae307f23b30c9d6b0292508b50964b5b7', 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: 'f49a06b9ca5b1ecf3fffd66cacb92e15f2dcd8e3', 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: 'b18831ac704eddb1f849c29fb46999221962a9ef', 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: 'e01c333f1852ebf9d954ddd6496571b55bac9253', 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: '4caaf0292fdcdc4b0ba585375292b99ffea7e6e0' }, h("filter", { key: 'a7ed7176c0f15c77d840d05da2e34b784321831b', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '6c8d84ad46c27bb1609f364e771c3350d8ca4424', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '5e414aaecc327eddce0db4bbb5790a262304f939', 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: '348689e046e5d6e2ce4128e4f47c74a0798448b5', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: '1cf6b98eaee158e716ee5186b60f01016f589231', dy: "8" }), h("feGaussianBlur", { key: 'a63cab059e4f6ed6eb0b390d24e392aebbb63daa', stdDeviation: "4" }), h("feColorMatrix", { key: '77a63bb377be1b8dbf1b02f3318fafb7670e3be7', 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: '6fb64c307cd13603d592e430025a29a1cd74fae4', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: '5da92aca7aafd932cb1d4f73e30acb367d8fdcbe', 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: '15c6b0c09e837dce47e09a4310762b90d0e61184', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: '5d2edd3c84ae480634088978bad65c56fc397ba7', dy: "20" }), h("feGaussianBlur", { key: '7b53e1f5307bc1800156eabc411f534cd5ec4aaf', stdDeviation: "12" }), h("feColorMatrix", { key: 'bf9f32ce07fb3c27375bcdcef68c1346c7bd1631', 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: 'ff8d4475a4b6861637ab5fb3a0b3a9f6565654c7', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: 'c6db23112a4f8e0e2756e11e08b17a308f4a3895', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: 'b9553ab5095ad3b876794702511c3ce1a2aa0c7f', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd7b2e3dcca8ebdcaada36cdfcdc030e75197beac', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: '9f8dc2bcfa4b8bde1587c13dfaa79583d1b4e0bf', 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: '9b6014ba47902abd57933b831928d1e2926caadc', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '3314f4d50766ef476472345cf1edcd2c2617df8c', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
+                    : ''}` })))))), h("div", { key: 'd01848b14d7a216e034a3b7ca8706a41c7ba75ab', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '5d6cc6e05499512c8ec2cbad8c85fe52400a680a', 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

@@ -396,7 +396,7 @@ export class GbInputDropdown {
         const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');
         const illustration = getAssetPath('assets/empty-state-no-data.svg');
         return [
-            h("div", { key: '51a7c262ba29e47a39febcb223ca37ff5d2f0fdb', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: 'c52f9db1c41984823b4958fdf36f845d5a79d70b', 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: 'ffd5bedde3c5e42ae869d5620f6ba2b5c0ab6741', 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: '35e1504399a3d56fbe975cc03faf29881f7b9b57', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '670235585986a00170ba2fa9b18ced97d0293a9b', 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: '589ab39ea69ff5dbe1e2e92ce560c224f851d025', 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: 'ed9fdf405e4865b1886fcb46d2d067ec8aa2a6a4', 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: 'f06a53c11d3fcb11b922c2c11ebbb86b143de62a', 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: 'aeb98737222140b2333a9814445100834b524596', 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: '79c0d7ecdbccdc414e8a4846271190b614d0ef51', class: "placeholder" }, h("p", { key: 'd4dc32b234e79d5eeee6963d98d8b2b5371a0e9c', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '60b88bbb68aa63df82ddd1f54da19081db7fb76b', class: "search_input" }, h("input", { key: '9ece5667e97802add2beb281b90ad5f29fb23d30', 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: '2e4b8ea1144a7a8629fa0073c21d527b9437361d', 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: 'ce8fcf4eda14a2145a425ffe7a822d96d1e05684', 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 : 'false', action: "X_close", onClick: (e) => {
+            h("div", { key: '7682befe349780df2e54dbea2c94677099ad205e', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '4661afb77e79c057ae6331fc7420f34ad021e36b', 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: '2da32484b936a18d2018839b5bcc1f5e492593c1', 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: 'c39458480b4c35853b3afb7e13f4826299a83871', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '2da073a0d440d3ab2189f392ae1e4e179042c854', 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: '2ab3ad4a7d05012745bc26a8e3bdcbb11747e0ef', 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: 'a995308e1abe865a72026be7eb3b00d8c3b7bc2b', 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: '9d25cd83bdfb0a354ba33c66253b02b9ae905d00', 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: '5e601e68c11ae5063631aec84acbba3faa9d0d04', 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: 'efbc15c3add0ebf0534888a3d82c4699b35d01ce', class: "placeholder" }, h("p", { key: '964d2d197a3768f800136f2a34ad31ff9e51b63f', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '07d5e405c4c7163df4de18bf89184b09f0f59d0e', class: "search_input" }, h("input", { key: 'a6ba4289d8719f417411199bd4869a8ed12abebd', 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: 'db1bf177aca81411d50c0e0a8810f00b639f30db', 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: 'ef54173d09e6d4ca77e06b0cb4b910c996b66abe', 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 : 'false', action: "X_close", onClick: (e) => {
                     e.stopPropagation();
                     this.handleTagRemove(item);
                 } }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
@@ -414,10 +414,10 @@ export class GbInputDropdown {
                 .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'false', action: "X_close", onClick: (e) => {
                     e.stopPropagation();
                     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: '480e891c3e13741fcc0e3fe1509a18f8410ff881', 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: '6fb27d6b8b7d330722fbc57d98b1b60c026b9539', class: `content` }, h("div", { key: 'ec61c011ad4801df3ce0a1c0fbd7e55b6cbfdc69', 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 : 'false', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+                } }, 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: '4195293d560e6badcb9a31a0e609367cecbaffa8', 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: 'eb3eddfda83566a9db5da497b02c6fad3f453755', class: `content` }, h("div", { key: '77c0bef96b90913e76f3d18205451f1fe889a962', 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 : 'false', 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 : 'false', 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: 'd3a46406f18d8bb1f858c3169bb3905e0380cfba', 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: 'b0bf832167c7894bcad39b2e9af8df3d7a88cf3c', class: `help_icon` }, h("gb-help-tooltip", { key: '0d5a5eeac6f017dd12e8107ac126551c67f8fa9a', "show-supporting-text": true }, h("slot", { key: 'de0939600bcc5ff930760bb47c9aef7a9fc1f4a5', name: "tooltip_label", slot: "label" }), h("slot", { key: 'e5f5b9e47971ff52920f6d9bd00b8f3bbc08bcee', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '74a15706c87bed69a5fd8acb9357dba9b78e36ea', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '1fd3f988b2a3e09853c205a6e62ebe8afa21bb80', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'a6e46e22d9752522ccf615e422e60adc888550e8', 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: '12d0143208559ce12e1fd8ac70263658f119b90e', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'd429f0617ae4901ed74bc0846bd0b6c8d19dc7ce', class: "dropdown_search_field" }, h("gb-input-field", { key: '690daf3614011ab6f9133e0762c5f28f6ab83534', 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: 'fbe7ab8a0eb9d00a2acecda2395e12a1b3ea7245', class: "loader_div" }, h("div", { key: '8ed8204b2968b67653e2faac4ac20709db6c8b8a', 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 : 'false', 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: 'e2729773c0dccc604e66570bcec7e06b2e0da5ad', 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: '36d1f9a0496963efebd96e41948609575ef04ccf', class: `help_icon` }, h("gb-help-tooltip", { key: 'e355fa5a2d3418866b80c68f91a02d110b4036a5', "show-supporting-text": true }, h("slot", { key: 'bd462ab9854ac58f86875e967187049900ff82f2', name: "tooltip_label", slot: "label" }), h("slot", { key: 'bd5afefba75d841e7e583d7f0e9c074caf6c182e', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: 'fcd3436ed76cc1bbbefe0fd2956637c3abe41913', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'ed7dc0e9ac962b67293d10f2ad5b602bf4c3532d', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'a542803d3234cd249ba329e3101f0df876dbff89', 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: 'd74bdfbf4e7b2840c0663c2281476e446864d368', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'a48d99d140a88b541bbbbefa6ac0f13f1649cd44', class: "dropdown_search_field" }, h("gb-input-field", { key: '63b5c5b534174d4274ec5e89a2d20fa3675c2382', 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: '10f24d43b76bfcedd30c9f6bf28e7d233d56074f', class: "loader_div" }, h("div", { key: '73801a51bf5cb00a981a7a35053e30487d217752', 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.js

@@ -51,13 +51,13 @@ export class GbInputDropdownMenuItem {
     render() {
         return (
         // <div class="dropdown-container" onClick={() => (this.selected = !this.selected)}>
-        h("div", { key: '2de33ec0d27a91ec027951e2a8b0f4ff1e4d26d7', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: '0e015d184f26cce9560105178d7699559590924d', class: {
+        h("div", { key: '41751b269cb7ae7bdae7a9b9452ab1823174ac42', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: '0b32d4cd402136b75c0b8819a8d628acb2590c97', 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: '5454b6d0126c4ac4c03a6f91d8b8b706d38e9c90', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: '487572e8182581eb9b0f83c0320e8495a9e8f4ca', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: 'd5eccba22bd6a01e3895ea7be11d223f1166bdaa', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: 'acdf8105f09d9978d83b4094b7c79a4b44b70d6f', 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: '91c2e1e4c518a072f5bfcefb91b24d9d7d9466ba', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '4b7d68f510c23691fbd7a11b302ac7e35f0386c3', name: "name" }), this.supportingText && (h("span", { key: '72b20ec4640004662553335c9d346a4eae87c375' }, h("slot", { key: '2266cc770ec98bfab960335dafbe60c6c4eab234', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: 'c767ad58437df6c7cfebd01b4eb90716fa4221ae', 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: 'b3a6486c6ca05804942d687cecdfbab0adfa7cae', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: '89650c1ba20e53232b9210c7009b8096490b7c84', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: 'dec7ee16c4a2dfb55cdba00f9d119583392ecb7d', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: '57bac5444c177486f2608fbf85093ff86466f542', 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: 'b71a954150054abd903ea1adba26af196d5e2f14', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '30df06aa9161308547cd3e69b066757effbe31ff', name: "name" }), this.supportingText && (h("span", { key: '64ef7652968c6c42a99d274ed5e402244ee0323c' }, h("slot", { key: 'c5128eace0423af2b72681b8a7ff8ba4cf2b638e', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: '915af3621a7c75f80c10d5abf00b6417009e01e6', 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"; }