globuswebcomponents 2.13.4 → 2.13.5

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  @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    const applied = this.filterConfig.appliedValues || {};\r\n\r\n    this.formValues = {\r\n      ...(this.filterConfig.initialValues || {}),\r\n      ...applied, // applied values win over defaults\r\n    };\r\n\r\n    // console.log(this.formValues);\r\n  }\r\n\r\n  handleFieldChange(key: string, value: any) {\r\n    if (value instanceof CustomEvent) {\r\n      value = value.detail ?? null;\r\n    }\r\n\r\n    const field = this.filterConfig.fields.find(f => f.key === key);\r\n\r\n    if (field && field.tag === 'gb-input-dropdown') {\r\n      value = Array.isArray(value) ? value : value != null ? [value] : [];\r\n    }\r\n\r\n    if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {\r\n      const { [key]: _, ...rest } = this.formValues;\r\n      this.formValues = rest;\r\n      return;\r\n    }\r\n\r\n    this.formValues = {\r\n      ...this.formValues,\r\n      [key]: value,\r\n    };\r\n  }\r\n\r\n  handleClearClick() {\r\n    const resetValues = { ...(this.filterConfig.initialValues || {}) };\r\n    \r\n    this.filterConfig.fields.forEach(field => {\r\n      if (field.tag === 'gb-date-picker') {\r\n        const keys = field.key as { start: string; end: string };\r\n        resetValues[keys.start] = null;\r\n        resetValues[keys.end] = null;\r\n      } else {\r\n        // use field.default if defined, otherwise check if the field expects an array\r\n        const isArrayField = field.props?.type === 'tags' || Array.isArray(field.default);\r\n        resetValues[field.key as string] = field.default ?? (isArrayField ? [] : null);\r\n      }\r\n    });\r\n    \r\n    this.formValues = resetValues;\r\n    this.renderKey++;\r\n    this.clearFilters.emit();\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 || 'Filter'}</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\r\n                    placeholder=\"dd-mm-yy\"\r\n                    full-width=\"true\"\r\n                    twentyfour-hr=\"true\"\r\n                    mode=\"single\"\r\n                    format=\"d-m-y\"\r\n                    show-months=\"1\"\r\n                    onDateChange={e => this.handleFieldChange('startDate', e)}\r\n                  ></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=\"var(--color-icon-subtle ,#697586)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  </svg>\r\n                  <gb-date-picker\r\n                    placeholder=\"dd-mm-yy\"\r\n                    full-width=\"true\"\r\n                    twentyfour-hr=\"true\"\r\n                    mode=\"single\"\r\n                    format=\"d-m-y\"\r\n                    show-months=\"1\"\r\n                    dropdown-alignment=\"right\"\r\n                    onDateChange={e => this.handleFieldChange('endDate', e)}\r\n                  ></gb-date-picker>\r\n                </div>\r\n              </div>\r\n            )} */}\r\n            {this.filterConfig.fields && (\r\n              <>\r\n                {this.filterConfig.fields.map(field => {\r\n                  if (field.tag === 'gb-date-picker') {\r\n                    const keys = field.key as { start: string; end: string };\r\n                    \r\n                    return (\r\n                      <div class=\"date_range\">\r\n                        <p class=\"label text-sm-medium\">{field.label}</p>\r\n                        <div class=\"date_pickers\">\r\n                          <gb-date-picker\r\n                            placeholder=\"dd-mm-yy\"\r\n                            full-width=\"true\"\r\n                            mode=\"single\"\r\n                            format=\"d-m-y\"\r\n                            show-months=\"1\"\r\n                            value={this.formValues[keys.start]}\r\n                            onDateChange={e => this.handleFieldChange(keys.start, e)}\r\n                          ></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=\"var(--color-icon-subtle, #697586)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </svg>\r\n                          <gb-date-picker\r\n                            placeholder=\"dd-mm-yy\"\r\n                            full-width=\"true\"\r\n                            mode=\"single\"\r\n                            format=\"d-m-y\"\r\n                            show-months=\"1\"\r\n                            dropdown-alignment=\"right\"\r\n                            value={this.formValues[keys.end]}\r\n                            onDateChange={e => this.handleFieldChange(keys.end, e)}\r\n                          ></gb-date-picker>\r\n                        </div>\r\n                      </div>\r\n                    );\r\n                  }\r\n\r\n                  const Tag = field.tag;\r\n                  const key = field.key as string;\r\n                  const currentValue = this.formValues[key];\r\n                  const valueProp =\r\n                    currentValue != null\r\n                      ? field.tag === 'gb-slider'\r\n                        ? { leftControl: currentValue.left, rightControl: currentValue.right }\r\n                        : field.tag === 'gb-input-dropdown'\r\n                          ? { value: Array.isArray(currentValue) ? currentValue : [currentValue] } // ← coerce here\r\n                          : { value: currentValue }\r\n                      : {};\r\n\r\n\r\n                  const eventHandler = {\r\n                    [`on${this.capitalize(field.event as string)}`]: (e: CustomEvent) => this.handleFieldChange(key, e.detail),\r\n                  };\r\n\r\n                  return (\r\n                    <div class=\"field\">\r\n                      <Tag {...field.props} {...valueProp} {...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  @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    if (this.filterConfig) {\r\n      const applied = this.filterConfig.appliedValues || {};\r\n\r\n      this.formValues = {\r\n        ...(this.filterConfig.initialValues || {}),\r\n        ...applied, // applied values win over defaults\r\n      };\r\n    }\r\n\r\n    // console.log(this.formValues);\r\n  }\r\n\r\n  handleFieldChange(key: string, value: any) {\r\n    if (value instanceof CustomEvent) {\r\n      value = value.detail ?? null;\r\n    }\r\n\r\n    const field = this.filterConfig.fields.find(f => f.key === key);\r\n\r\n    if (field && field.tag === 'gb-input-dropdown') {\r\n      value = Array.isArray(value) ? value : value != null ? [value] : [];\r\n    }\r\n\r\n    if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {\r\n      const { [key]: _, ...rest } = this.formValues;\r\n      this.formValues = rest;\r\n      return;\r\n    }\r\n\r\n    this.formValues = {\r\n      ...this.formValues,\r\n      [key]: value,\r\n    };\r\n  }\r\n\r\n  handleClearClick() {\r\n    const resetValues = { ...(this.filterConfig.initialValues || {}) };\r\n\r\n    this.filterConfig.fields.forEach(field => {\r\n      if (field.tag === 'gb-date-picker') {\r\n        const keys = field.key as { start: string; end: string };\r\n        resetValues[keys.start] = null;\r\n        resetValues[keys.end] = null;\r\n      } else {\r\n        // use field.default if defined, otherwise check if the field expects an array\r\n        const isArrayField = field.props?.type === 'tags' || Array.isArray(field.default);\r\n        resetValues[field.key as string] = field.default ?? (isArrayField ? [] : null);\r\n      }\r\n    });\r\n\r\n    this.formValues = resetValues;\r\n    this.renderKey++;\r\n    this.clearFilters.emit();\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    if (!this.filterConfig) {\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\">Filter</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      );\r\n    }\r\n    \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 ? this.filterConfig.title : 'Filter'}</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\r\n                    placeholder=\"dd-mm-yy\"\r\n                    full-width=\"true\"\r\n                    twentyfour-hr=\"true\"\r\n                    mode=\"single\"\r\n                    format=\"d-m-y\"\r\n                    show-months=\"1\"\r\n                    onDateChange={e => this.handleFieldChange('startDate', e)}\r\n                  ></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=\"var(--color-icon-subtle ,#697586)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  </svg>\r\n                  <gb-date-picker\r\n                    placeholder=\"dd-mm-yy\"\r\n                    full-width=\"true\"\r\n                    twentyfour-hr=\"true\"\r\n                    mode=\"single\"\r\n                    format=\"d-m-y\"\r\n                    show-months=\"1\"\r\n                    dropdown-alignment=\"right\"\r\n                    onDateChange={e => this.handleFieldChange('endDate', e)}\r\n                  ></gb-date-picker>\r\n                </div>\r\n              </div>\r\n            )} */}\r\n            {this.filterConfig.fields && (\r\n              <>\r\n                {this.filterConfig.fields.map(field => {\r\n                  if (field.tag === 'gb-date-picker') {\r\n                    const keys = field.key as { start: string; end: string };\r\n\r\n                    return (\r\n                      <div class=\"date_range\">\r\n                        <p class=\"label text-sm-medium\">{field.label}</p>\r\n                        <div class=\"date_pickers\">\r\n                          <gb-date-picker\r\n                            placeholder=\"dd-mm-yy\"\r\n                            full-width=\"true\"\r\n                            mode=\"single\"\r\n                            format=\"d-m-y\"\r\n                            show-months=\"1\"\r\n                            value={this.formValues[keys.start]}\r\n                            onDateChange={e => this.handleFieldChange(keys.start, e)}\r\n                          ></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=\"var(--color-icon-subtle, #697586)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                          </svg>\r\n                          <gb-date-picker\r\n                            placeholder=\"dd-mm-yy\"\r\n                            full-width=\"true\"\r\n                            mode=\"single\"\r\n                            format=\"d-m-y\"\r\n                            show-months=\"1\"\r\n                            dropdown-alignment=\"right\"\r\n                            value={this.formValues[keys.end]}\r\n                            onDateChange={e => this.handleFieldChange(keys.end, e)}\r\n                          ></gb-date-picker>\r\n                        </div>\r\n                      </div>\r\n                    );\r\n                  }\r\n\r\n                  const Tag = field.tag;\r\n                  const key = field.key as string;\r\n                  const currentValue = this.formValues[key];\r\n                  const valueProp =\r\n                    currentValue != null\r\n                      ? field.tag === 'gb-slider'\r\n                        ? { leftControl: currentValue.left, rightControl: currentValue.right }\r\n                        : field.tag === 'gb-input-dropdown'\r\n                          ? { value: Array.isArray(currentValue) ? currentValue : [currentValue] } // ← coerce here\r\n                          : { value: currentValue }\r\n                      : {};\r\n\r\n                  const eventHandler = {\r\n                    [`on${this.capitalize(field.event as string)}`]: (e: CustomEvent) => this.handleFieldChange(key, e.detail),\r\n                  };\r\n\r\n                  return (\r\n                    <div class=\"field\">\r\n                      <Tag {...field.props} {...valueProp} {...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: '188731e738131dd17503e19f151990710b4902fd', class: `header_div ${this.showBorder ? 'border' : ''}` }, h("div", { key: '3c7ac88798935a8865b5489b1423d115b6b69ae2', 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: '8f64905e692d43d83d102b31bbea86618970501c', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, 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: '12d317a3eff1c4b2038787d0d02997275eaaedc5', 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: 'fdace498ef0a87639b5d88f7f5e83c82c85287e2', slot: "name", name: "name" }), h("slot", { key: '6ccf06d6f836564a56ea9d38d0b99fd2e39685e0', slot: "supporting_text", name: "supporting_text" }), h("h1", { key: 'be0bdb38db17c3d9784f5c97df3cb4f32d470f67', slot: "initials", class: `text-md-semi-bold` }, this.initials))))))));
+            } }, h("gb-button-close", { key: '54f88d8c5470af62ee925437d27b5de82a7cadc8', color: "gray", size: "md", onClick: () => this.showAndHideFullSearcBar() }), h("div", { key: 'e79398ff56c5325d451e4dbecc9f0a9d0834552b', class: "full_search_bar" }, h("gb-input-field", { key: '1f31314e76629dfb09e985106435b00645c53bf3', 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: '860eb6f859c9d4e76b5e104837a0b1031f07b74a', class: "content" }, this.showLogo && this.renderLogo(), h("div", { key: '660ef891e011293f9194283483a48ad26418b000', class: "inner_content" }, h("div", { key: 'a889405d67ff72aad2edb46fa33e10a097abe1a0', class: `action` }, this.showSearch && this.width > 710 && (h("div", { key: 'd28421baeb47ce0bd1916c8e24119cddfbfb1042', class: "search" }, h("gb-input-field", { key: '105e0ca465a534e05a3aea82c213796f2c4da459', 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: 'e203d631d0ec38b2ad0dc3dab2bdac377e25d749', class: "help" }, h("gb-header-icon", { key: 'f4f0501ea9d50ac3c8b38eed39a7fcfc2ae06b4d', state: StateEnum.Default, icon: searchIconSrc, class: "help_button", onClick: () => this.showAndHideFullSearcBar() }))), this.showHelp && (h("div", { key: '9fd43d23e538ac3b97b014e9ed02695f63fbc52d', class: "help" }, h("gb-header-icon", { key: 'be1d3da2d27700fd2617d2add388a0f7207b3dda', 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: '8fbf80032248f70444d36ae905e065e6aa9adf8f', class: "notification" }, h("gb-header-icon", { key: '1d48fe9a660315c6bf6b964a907449fde179bc50', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.toggleDropdown('notifications') }), this.activeDropdown === 'notifications' && (h("gb-notification-pane", { key: '6edc090e0c09744be5d7da794a9ee693ec3031c1', state: this.notificationState, class: "notification_dropdown", notifications: this.notifications }, h("p", { key: 'c965458f83edd8dcf64a99e6118bcfe1edf16914', slot: "label" }, "No notification"), h("p", { key: '066851f1d9c3ae97cbdf1739834a18f74095cad8', 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: 'cb4dd972b6bbbaeae756d69306847d9e386ed335', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, 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: '7d568832dd7c6b9b80c1ade8201336b91f01a5ad', 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: '9ed3ac3471fb070e3f6e76e086001a6c6466f46c', slot: "name", name: "name" }), h("slot", { key: 'dd551e3bb6cdc7402638f0f35e313b2dc5a97233', slot: "supporting_text", name: "supporting_text" }), h("h1", { key: '263affaa38f8311e8feee6e181002aa44d1144b1', 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: 'cac4c8d28b52de6220b82c6006fc885f2f64b4f9', class: `background ${this.state}` }, h("div", { key: '0f1ef56ff054b32ba18a95f5c0bf90d314c86d30', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '753b40b0644eda7324bb3a8c53f983e959334c15', 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: '2f6820934e0d418e95afc0debe1a009ef9f73954', class: "dropdown-container" }, h("div", { key: '1aedbef5138d6c429778db6086eb85f2b48b4442', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: '28333dec60835aa904385c7bfe0dfeb7088e41e9', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: '8a6530f934fe6d0218a58b4808c31a6326f35559', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: 'f7e84ffe8739aefed53926ec238ea1c598e6aa50', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: '763c8ca455b2d14582c385a64bcbb861241454b4', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: '20b8cc77863e81c28e00c821f278e263876494c8', 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: '96617a0a9032e4c95285a57912ed59a7aa7dd740', class: `help_tooltip` }, h("svg", { key: '56a08247ea661ddc32c0687a950b0117f887eeb3', 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: '5f1c96992a24eab090345e7fce919b9e2ad8bd3f', 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: 'd074f07b825142485cd9cfde6b57087056c84b27', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: 'bb906254c334a7b6aad2a157947fabb295ad1c3b', name: "label", slot: "label" }), h("slot", { key: '0cf0b21b9391848b50b29ea92351a274475a6cb5', 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}` }, this.showLeftButton && (h("div", { key: 'b8997f9bd2e2777fea6dc80920a0f595324a54a1', class: "scroll_button_div left" }, h("div", { key: '8cd875d42796f4cfe202b39f83f26c325b7661cf', 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)))))), this.showRightButton && (h("div", { key: '56ad6b14189e5b13393f1df415b1f4d13c8b0f5c', class: "scroll_button_div right" }, h("div", { key: '7dee4281b68809bd2670e079fbe03a4343bba78e', 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: 'b59dce87b168230fa7f7ecf7790d1801ef35fb31', class: `horizontal_tab_div_wrapper ${this.type}` }, this.showLeftButton && (h("div", { key: 'ac3d6d7c19877b4d53bd8d677f041e8a04956cc8', class: "scroll_button_div left" }, h("div", { key: '4b26a72528e3f8f1cc0e8d48a6442067e6023cad', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: '092e52a9fbf6e061513cc81024a3ff80ee9e5cca', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '51e2c974734f8c5e2fa0bb2cbf43006bfafc4e7f', 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: '6b5885b053d2a2cde46c2060a933b461dc6b1a32', 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: '6c540e0bfed3d5b0ce564bb99e7bf052548eda2c', 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)))))), this.showRightButton && (h("div", { key: '26d2b1afb3276754547b0621017e23be77bc7589', class: "scroll_button_div right" }, h("div", { key: '540664c0cadb617ef43622a66c9e0e868915dd01', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '56b37d27ef790aaaab2ae63237f1f23780f08841', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '14e4925a41de7e7d9959a089144cec6b2afa80e7', 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: 'a2f2d03df704b2e8634c536b1fa2deb119631333', class: "icon_button_base_container" }, this.showTooltip && (h("gb-tooltip", { key: '3378dd42fcf9367f6c6dbdcdb99274904138d67a', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: 'f50ef02976882a77b4dc82d5028f395f64006925', slot: "label" }, this.label))), h("div", { key: 'd48037e20e49bf67959709cec093eab361b8d2fc', class: `icon_button_base_div ${this.current ? 'current' : ''}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '6b609d6376a0a11b26014a926a51933b2c6b95e6', 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: 'db8b93d07fe44c85cbd152c30cc1702912cf6bd6', class: `illustration_wrapper` }, h("svg", { key: 'e3064ba23525b3556e92f1cc64f5e50145f2c665', xmlns: "http://www.w3.org/2000/svg", width: "220", height: "168", viewBox: "0 0 220 168", fill: "none", class: `illustration_background ${this.size}` }, h("circle", { key: '5f68935adf778ea3a6ce27445c72554283e7b6e1', cx: "110", cy: "88", r: "80", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : this.color === 'gray' ? 'var(--color-background-gray-subtlest, #F6F8FA)' : ''}` }), h("circle", { key: 'da8e43c2807cfcfa60ff3ff85a5e18556355b219', cx: "26", cy: "28", r: "8", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '24c05fab7d1a3c5ad463a1afb13607b34a6b9c98', cx: "198", cy: "134", r: "6", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '8eca34ba69983ca6d2f48faabb540f966d099ef9', cx: "25", cy: "146", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'fd967e32218522d0b825c119969455a70092eff6', cx: "210", cy: "54", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'c3ddbd1cd1375d5717355e956d2d925f7f675b4f', cx: "191", cy: "19", r: "7", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` })), h("div", { key: 'd64fb9fbc4d7e2d38475a5bf80693abc29aeddf5', class: "illustration_div" }, h("div", { key: 'b20963b4c8d7af6d4cc9683fbad680594e10ef99', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: '25073b046c1fbb2bf174aca58d91ced8bf1ebbfd', xmlns: "http://www.w3.org/2000/svg", width: "214", height: "140", viewBox: "0 0 214 140", fill: "none", class: `cloud ${this.size}` }, h("g", { key: '3fbd4e091172fb9203b1e03600a909a3208e8a0b', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: '680e518e1bd6d726b4f1f1cc763df3f4624b19c5', d: "M109.485 0C129.961 0 147.543 12.3802 155.161 30.0625C156.486 29.9093 157.834 29.8281 159.2 29.8281C178.42 29.8282 194 45.4095 194 64.6289C194 83.5478 178.903 98.9404 160.099 99.417L159.2 99.4287H59.7715L58.7451 99.416C37.2543 98.8717 20 81.2792 20 59.6572C20 37.6921 37.8063 19.8857 59.7715 19.8857C62.9248 19.8857 65.992 20.2546 68.9336 20.9482C77.9428 8.27072 92.7484 0.000119405 109.485 0Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : 'var(--color-background-disabled, #F9FAFB)'}` }), h("circle", { key: '1684c57657d573d59ae19e5e6b434359f695bfc7', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: '70d1c47e838588a592c90c5a713a99da8a836808', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '44a2cb21cc2d594b12ee2af8efb31563bef92cc8', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: 'e6f4b61a1b2568312f6c832e4364c4626639b038' }, h("filter", { key: 'ff0754dc80fb06c3060c8ca1726cc59ecbcd572f', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '79a5b5bddf6785f518922ae94086440dcbedd366', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'ee47425cc6fee487fa244bb95cf3c56e127e0b1d', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'b51a75546a3563e6a07a1178cd5091bbc77973b5', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: 'ba4e714220508eb447f0b237904f87362bc71264', dy: "8" }), h("feGaussianBlur", { key: '0b7f5ecb5e58dc9789583b65aacb27e9867d9cb8', stdDeviation: "4" }), h("feColorMatrix", { key: '0895bb0160c12e3b9abcbb1779129004e5f1e067', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: 'c7313b596c914c3b4c27f60813aabc87f31135f3', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: 'd466c7814c46fd9cac5501142846a9875d6660b4', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '916113835c220c638790211c8bc9827e9ffef70d', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: '367014af9902d7aea9431d2a5d0f015c7d60d93e', dy: "20" }), h("feGaussianBlur", { key: '14060c637cd8c009a87e9a5b3ee5edbfbb325790', stdDeviation: "12" }), h("feColorMatrix", { key: 'e3c27afca66fe6a7d00eb17d7db06827ee66982e', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'f938e72dbe193fca9630da0e90cc9df072fa4dd7', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: 'd44c6fcdee95b71cb8e1720adbe4fc321268cfbf', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: 'b8bd8a57f69ced5cc988476c3770727907414f86', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c808dd945b3e22a1bb5c3f2a765f212ecebaf066', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'f07135275fb49b3338cd04b372560df422d92753', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '44b240ca9467b7d66a322b65c734b413d712bd94', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '514cf17c745d7419e8590fcdc56f5e516f38f0b4', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '8d8bbd4f14353dd349a0afe16112b6f14c16c9de', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'a06d5a686b9625ba8dd009d5f8eaa33ae953beda', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '2329ba5f4f7307ee3a8fd202ce32eb8393aace7a', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'f4d10b33ceb076831314a03d0873d74151c7a4ea', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: 'f58c9dfd00ae01e6bdf62a843113a0c564e85e46', xmlns: "http://www.w3.org/2000/svg", width: "168", height: "178", viewBox: "0 0 168 178", fill: "none", class: `box ${this.size}` }, h("g", { key: '504096e66fd563ab8dd587f41b597127ffd531fb', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: 'b4bf06c88d416e87b48acea53586934be83efe4f', d: "M84 54.9529L90.9121 52.0578L84.0009 55.002V137.432L147.69 110.743V28.2767L148 28.1466L147.69 28.009V27.8705L147.53 27.9384L84.5026 0L20 27.4765L20.3053 27.6076L20 109.74L84 137.383L84 54.9529Z", fill: "#F9FAFB" }), h("path", { key: 'df15891ebf948983d46be89f27faec3f1f2e03fb', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: '5ef7b0d9a5c4b2332110a8a1afd5b808142323b0', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: '86a10382408cf7611aa073c49b62e9ac006b0f4a', d: "M84 54.9529L148 28.1466L84.5026 0L20 27.4765L84 54.9529Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : 'var(--color-background-gray-subtler, #EEF2F6)'}` }), h("path", { key: 'f36313ebe2ea6542464ecfb82c9e99084e108d82', d: "M44.1255 17.1998L107.881 44.9503L108.461 65.173L126.299 57.8126L125.759 37.4622L60.1172 10.3877L44.1255 17.1998Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : 'var(--color-background-gray, #CDD5DF)'}` })), h("defs", { key: 'd7a56236723b2eadbe1efc448fd2c395306b518a' }, h("filter", { key: 'ab223f3557af179168c68b1eb14369102077e119', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '3a52765dfa93fb9bddbf5bbe8f11b8cde72158f2', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '08b794f4c4bd9d3ed5563c371d440a3debdba41b', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '28d40112ce2a117c88bf4dd71fb7dfb0d80da601', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: '7bc3432611dc44969b489bf562c4325cacc46c80', dy: "8" }), h("feGaussianBlur", { key: 'e6a27339e9a7dc99feba11c3adc95610a73eda40', stdDeviation: "4" }), h("feColorMatrix", { key: '17f272fa6130611924ff8dc06ba07dbc545a5e78', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '2091a238e19d18788b47969e035d7c0512b8784d', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '4240e0a979afb451bdcdfb09ff83604d5ad02886', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'e96cac4ba6327f0e181f8edc1916f84035e1505a', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: 'ad4cb4e241725556819a0eb6dab176829e268e61', dy: "20" }), h("feGaussianBlur", { key: 'f88dabfe792089a4349848cfb0a54ffd29d42e2f', stdDeviation: "12" }), h("feColorMatrix", { key: '5bd7c2cc50958352cd69fc7738e31145c5e5ff82', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'ff75645818198e0735014736638f75c16067b2e0', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: 'ec5eac87a07524f825e42840356b97ad929fa0d8', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '76c4dbfc8702dce5ba1c22c870779165578eed93', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '3fc20c6c81e80f5090eb51473d23cac32266f1bb', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '8b735d8c6a41689e61161418dc46aac32b2931b1', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` })), h("linearGradient", { key: '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: 'edee9948e74a3c49401636e094859ffdecd5d0da', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '74acd4b41f58119f1210358df7f734e885771971', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '7654e34ee4c3c1c243721ece3726ef11b203eee1', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` }))))), this.illustrationStyle === 'documents' && (h("svg", { key: '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: '5cd2ba4a4209148795c254b88f37782b470a1737', xmlns: "http://www.w3.org/2000/svg", width: "229", height: "153", viewBox: "0 0 229 153", fill: "none", class: `documents ${this.size}` }, h("g", { key: '79399d142b92cc997085a7fbcc3219ab026101b2', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: '6b2454dfca9f8e6025cf22436d6878c55d1b475e', d: "M63.6376 112.214L116.089 87.7552C118.722 86.5272 119.862 83.3969 118.634 80.7634L87.6581 14.3361L66.6827 6.7017L23.7681 26.7132C21.1346 27.9412 19.9952 31.0715 21.2233 33.7049L56.6458 109.669C57.8738 112.302 61.0041 113.442 63.6376 112.214Z", fill: "url(#paint0_linear_7590_657)" })), h("path", { key: 'bc89f3d97fbf19e29edb1c2cb1bf79d15b192654', d: "M66.6826 6.70166L87.658 14.3361L73.3531 21.0066L66.6826 6.70166Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("g", { key: 'c226c4d2a9e465650a478326dac4340144a1d5f6', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: 'ba69a4c8ab26c9ca1235ddc76884f46d2cb41aa2', d: "M88.7112 94.3394H146.585C149.49 94.3394 151.846 91.9838 151.846 89.0781V15.7837L136.062 0H88.7112C85.8055 0 83.45 2.35554 83.45 5.26124V89.0782C83.45 91.9839 85.8055 94.3394 88.7112 94.3394Z", fill: "url(#paint1_linear_7590_657)" })), h("path", { key: 'f5f7df7e39ef5b6933507319092faaa217ea5da4', d: "M136.062 -0.00012207L151.846 15.7836H136.062V-0.00012207Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("g", { key: '4fe414f4d4f9ab755bdbed70e2fff122a4e847cb', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: '50ae4545ca4a7f7a5d882cc6784f9fc4dc690b09', d: "M118.471 87.724L170.922 112.182C173.555 113.41 176.686 112.271 177.914 109.638L208.889 43.2103L201.255 22.2349L158.34 2.22349C155.707 0.995492 152.576 2.13484 151.348 4.7683L115.926 80.7322C114.698 83.3657 115.837 86.496 118.471 87.724Z", fill: "url(#paint2_linear_7590_657)" })), h("path", { key: '14a17ec5bdc0e72caf03ded6dcddf6d464dd4491', d: "M201.255 22.2349L208.889 43.2102L194.584 36.5398L201.255 22.2349Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("defs", { key: '213a204efe095b7596a2c263850e880e2431339b' }, h("filter", { key: '9fcae188cac77ac49f1ab348a6eae91aaf6ebcc3', id: "filter0_dd_7590_657", x: "0.729004", y: "6.70166", width: "138.399", height: "146.006", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '088cceb3dc4d8d9ffe8c4144de39d9188935e311', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '6db7a30164f645df59ece706cb37626515915447', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'f2aacaec8cde856250d72e867c5246235a5acfbc', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '249b98163fce9d2727a1cb7866d80d6a107ef5e9', dy: "8" }), h("feGaussianBlur", { key: 'de548fbc032fcc709f28c1fca1e33bb367819530', stdDeviation: "4" }), h("feColorMatrix", { key: '779bccdd3f5c5c0b45d2ba2561f3beb92117a9a1', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '6dc57735312f92d4950dcd6aeb3dd4f6ff95a5ef', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '1634a436ac30eb9baf6a16656e46495460767021', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '025709a8fefd2d8157946ed9180c21a199dcbbb3', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '61a49324029670c498947f410df259dc19db16c0', dy: "20" }), h("feGaussianBlur", { key: '02110cef95a3533fc8bc9955e731c9ea4c2feb07', stdDeviation: "12" }), h("feColorMatrix", { key: '4ba165e7224ad61bc2d83305840183108d5e371b', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '198ba55162ced59811518bac3e985843035adac7', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: 'ff7af17eed3ecb3e07a46034cc3619b5a5da65ba', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '73005c8bc4f442715cec5a91652dfde5eeb35740', id: "filter1_dd_7590_657", x: "63.45", y: "0", width: "108.396", height: "134.339", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '7e84cf37fe52ca7758b785895dc49df8292be3f2', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '2535e158206ef8fea5487eab7b94d622fd78727b', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'ffc7b326a429d588b1ec1a98eb4d1b83a76b8c11', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '75b6e8d13a53d088a6f1a08b8173c93f116f6393', dy: "8" }), h("feGaussianBlur", { key: '283aacbac20d9efe73b1a0325893c201c1c694c6', stdDeviation: "4" }), h("feColorMatrix", { key: '5b4db07eb2adaf09a3de408a6e0075c52a1d0784', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '4b5ff6e76be21ead53dea7e2ba3e10d8c2571615', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'd51fbb1e95cc4ee4991f0e498bccb3e21b15be13', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'b02aff44841e161bfd95d1722729b9f4b3f0b097', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'e156956e478a043748177ea7bd97f93a49fa0609', dy: "20" }), h("feGaussianBlur", { key: 'c4263b884f51f4d2b0f79c2a06629f8552e31cc6', stdDeviation: "12" }), h("feColorMatrix", { key: 'c34a1c2f46720bea5702d245096b6eb1b8f2c311', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '13deec659f9faf0b15d1ba65fb27b0c0dd32ee04', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '0f22c866f2a0acf50473f9e42a486fe847426beb', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: 'cfb06ed44a2644ac5080071d1f63bc8e056d245e', id: "filter2_dd_7590_657", x: "95.4316", y: "1.72925", width: "133.458", height: "150.947", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '88ba5f5d1510e190f0ecfefa36f4f5de4fc1063c', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'bd7b650e3031136437e718af5b954d24c37ab41e', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '38e29de009cb602de5c88bc2fa5fbbfb17ebd32c', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '815b7f84d6693f064d1bc7f94c9fd9d5bfb9fba2', dy: "8" }), h("feGaussianBlur", { key: '74ee1f26ed50195fa86813065953e1ca06058ead', stdDeviation: "4" }), h("feColorMatrix", { key: '4b5bb16275a7a1b7940bfd9a21b3fd2316044693', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '86a22a438daab2ee288f92abf03db1a082511f8f', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'd06638933f5ae4d07002957146d5343d359321d2', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '6645ade079ba34ca84c199e84ebd6563a33a2541', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'a8884ea11bd18de230ee7d9578e87eab85350c57', dy: "20" }), h("feGaussianBlur", { key: '61c39751d686b5e8a9f628f20a07a9c68a593938', stdDeviation: "12" }), h("feColorMatrix", { key: '6942aaf7e22bbc1be8db24bd3d0e5fff7eab06dc', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '423abf684d3058cd047b878f6c21913c2b85bfe7', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '7b16fc21ceaf001b831ec1d8b50f3b20d7c5e6cf', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: '91522087e889ef6c2015fa8c556bc9cfdbecadad', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'b3a16becabc98e99c1f3bb83a57acc4da8eb33a0', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '657c1f33a6eabbcb94fd45dcf2763ed1449afefe', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtlest, #F6F8FA)'
-                    : ''}` })), h("linearGradient", { key: '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: '81e4b80c07dbc5a6542d3f41f8d65e9961d2da74', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '08bc1cab18c3bd45fbdfdbccd5cfb61a0d6057f4', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'a44ecd87816a3d6b4f2f69351992ea5d47166790', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtlest, #F6F8FA)'
-                    : ''}` })), h("linearGradient", { key: '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: 'b72cfbc04ddb4578ca4139087838e3ba17230e86', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '63918ae54d5fa201f956e3d85f97160488d5dc03', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '8b70323ce32a4551c217054bf0cfea6264440aab', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtlest, #F6F8FA)'
-                    : ''}` }))))), this.illustrationStyle === 'credit_card' && (h("svg", { key: '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: '1b357b50fcf8db5d22f5c7a7ae552db4301715e7', xmlns: "http://www.w3.org/2000/svg", width: "206", height: "144", viewBox: "0 0 206 144", fill: "none", class: `credit_card ${this.size}` }, h("g", { key: 'df01f296cfe24d3858b044fcb6bb16b8840bdb9a', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: 'c643b41906ce2ddb1655f425a50baf18018af5f7', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: 'e62f549791570a49c34129f425b66b7b6b421948', x: "34.0698", y: "24.186", width: "29.0233", height: "21.7674", rx: "2.4186", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("circle", { key: '7fda09aa3c5c27ec894197ae8ecd9b0ec57a596e', cx: "159.837", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("circle", { key: 'b64cd7aa1ff936a96048ac1bd06b2f0fdc52237d', cx: "145.325", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtle, #E3E8EF)'
-                    : ''}` }), h("path", { key: '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: 'f93a090baefb3503a066fd8a14dcca5c8d182105', d: "M34.0698 88.279C34.0698 86.9432 35.1527 85.8604 36.4884 85.8604H60.6745C62.0102 85.8604 63.0931 86.9432 63.0931 88.279C63.0931 89.6147 62.0102 90.6976 60.6745 90.6976H36.4884C35.1527 90.6976 34.0698 89.6147 34.0698 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: 'bfbf6c4cb4751751eb77da43ff15948056d442b2', d: "M70.3489 88.279C70.3489 86.9432 71.4317 85.8604 72.7675 85.8604H96.9535C98.2893 85.8604 99.3721 86.9432 99.3721 88.279C99.3721 89.6147 98.2893 90.6976 96.9535 90.6976H72.7675C71.4317 90.6976 70.3489 89.6147 70.3489 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: '744f96fe1615004cae49123df798b4a8fdbfb49d', d: "M106.628 88.279C106.628 86.9432 107.711 85.8604 109.047 85.8604H133.233C134.568 85.8604 135.651 86.9432 135.651 88.279C135.651 89.6147 134.568 90.6976 133.233 90.6976H109.047C107.711 90.6976 106.628 89.6147 106.628 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: 'bd9b8dd82edd4c569df7b81da2143a1a1ab89dc0', d: "M142.907 88.279C142.907 86.9432 143.99 85.8604 145.326 85.8604H169.512C170.847 85.8604 171.93 86.9432 171.93 88.279C171.93 89.6147 170.847 90.6976 169.512 90.6976H145.326C143.99 90.6976 142.907 89.6147 142.907 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` })), h("defs", { key: '6b8d8174ceadc3c9cf03e9863a7cbf82c3294086' }, h("filter", { key: '25d43ca1be9000d03dd6357f8ca3f499d0dcf4f9', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '7f8e7a02c837e2a68fee23fc1c01ae65300db6f1', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'e4588f8ccba78c76a7f971ad381614fe85a4a016', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '1f762cd215368c1333dabb6868c18d2d997b76c2', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: 'ee1c3ec0cd7fcd4c1e040a2342c239101ac13f01', dy: "8" }), h("feGaussianBlur", { key: '99b860639b911278a8286ff8379bc119082a8ae7', stdDeviation: "4" }), h("feColorMatrix", { key: '24a23d69bd3ffb500e40e4db6c6fde1820a36477', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '56f3342a29dea54ddc9d124711f29bf6d7329d7c', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: '10aaaf29c11fb0a3aae95f1e53aafb497fc0f35f', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '50474f62898940be0e12de91c74476deadf9e288', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: 'cdb07441690fea65ffc7ee8457bbc26ddd97e7a3', dy: "20" }), h("feGaussianBlur", { key: '7d54591d5fa49d256319d450647a4dce0e930d9a', stdDeviation: "12" }), h("feColorMatrix", { key: '0cb47c9ace4c7c8c20800cb8d1457df8925d1e5a', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'a291974f8a4581c9ed269ed62eeeac6dcc26c385', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: '90c6482245e79014e9f7b22b6c4998e9bf1b7ffd', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: 'b8f0927c41b4e751a3aa3e6702e02b9e57a7fb49', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd9d69057a66e319b0566da615e04567331fb031c', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: '5932da226df5c065a8c18d694e9d653c9db68652', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtlest, #F6F8FA)'
-                    : ''}` })))))), h("div", { key: '9b6014ba47902abd57933b831928d1e2926caadc', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '3314f4d50766ef476472345cf1edcd2c2617df8c', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
+                    : ''}` })))))), h("div", { key: '2dcc49867cd347df59349927e30efe5cbe5e6357', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: 'c7d48b9529388ead5fb6471aef5a8284d7f380c4', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
     }
     static get is() { return "gb-illustration"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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: '0759a652e2240b31a60384f1ebcfbc3e6d86fe5a', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '4e9a87e58dcf2ea0a44047b05ae11b028feb7d17', 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: 'afcf387d0f8602490780add8deef702269b45e0f', 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: 'd7e8af25906868eea0c3b2edad8b7b4b8de24676', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'be8b00feee86e00d605f285af6dedc1ad5ab88c6', 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: '7a60bb49ac124b9946cbba501e6b6592b89a4558', 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: '12c904bbb6db008aef55889cbeab8b765c791edf', 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: '9c553e6dab82588eded3412efe69673a76dd4c96', 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: 'e15d4b6e92f83d0ce7598d790ca694fbe0eb0349', 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: '61a3eabfdf762252b12f0210a20df105504a8c29', class: "placeholder" }, h("p", { key: 'cb8f47d4906ed1cfb56a467aba0595aa398d89d2', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: 'c19e98c1e56a87342eb510fe9ba72e8d2fbfa88d', class: "search_input" }, h("input", { key: '94d4d20b3ed4b16049d1c20e6345c0a6954da4b4', 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: '2e10d23b126807f89a715ec795ffbe17bf1a26da', 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: '90fff8f275e5f01f6d56c3b78e6e598cd46f0278', 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: 'c3b4845c858719415f02e3b1bc5a0d2a76c1f32d', 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: '09c5980f997e4e45ac517ba349b053641239a50a', class: `content` }, h("div", { key: 'e420075d44c5925f6d42e7cb73f53a6a01816ab4', 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: 'e78a8c86e65c3c14fe2f32cf102a44d41f15daf0', 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: 'a3faccb00266b1a6c0a0f792db7e08616ebb8b79', class: `help_icon` }, h("gb-help-tooltip", { key: '2f7534301c43dabe840e4883623c33e59a214c68', "show-supporting-text": true }, h("slot", { key: '8520c294e820e3d9f422ea9366960fc954fdad26', name: "tooltip_label", slot: "label" }), h("slot", { key: '9f96e5659f3a3b60af65836bc2826c077484bed2', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: 'cc7f97896b35290cff5431898db8c10f4ac4e8bf', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '9db964601c09134ccb9a1772be2c4fc55b37b62d', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '6cb48492bbdf06f3dad0463fac427ef86b42d25b', 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: '5cd870eb09c18df6a1cbc9c8d1fd11b55587ebf0', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'dc3c83d839cdfa84fdb68cac7420d1f62e4afed9', class: "dropdown_search_field" }, h("gb-input-field", { key: 'f4eae4ca471cb8b0fbec7947b7be7d7f051e4b14', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.bind(this) }))), this.loading && (h("div", { key: '31e69f2a3e9a4e52ae1b9de50aadaea9612fa27f', class: "loader_div" }, h("div", { key: '13de8c29f50ede5a3529b9079e55bc28f3feef1d', 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